tdpeuter/ai-transparency
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

feat: Add transparency icon

Browse source
This commit is contained in:
Tibo De Peuter 2024-05-30 11:21:07 +02:00
parent 75be643cb4
commit 134efa2d3e
Signed by: tdpeuter
GPG key ID: 38297DE43F75FFE2
3 changed files with 24 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
img/transparency.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

5
index.html
View file

@ -9,11 +9,13 @@
<meta name="description" content="Ways to share chats with LLMs to provide AI transparency"> <meta name="description" content="Ways to share chats with LLMs to provide AI transparency">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" href="img/transparency.png">
</head> </head>
<body> <body>
<img src="img/transparency.png" alt="transparency icon" title="I like transparency" class="svg-icon"/>
<main> <main>
<p>Welcome to my public website showcasing my experiments and explorations in using Large Language Models (LLMs) for generating code and providing insights! As a single developer, I've found that LLMs can be incredibly useful tools in my work, and I'm excited to share my experiences and findings with you.</p> <p>Welcome to my public website showcasing my experiments and explorations in using Large Language Models (LLMs) for generating code and providing insights! As a single developer, I've found that LLMs can be incredibly useful tools in my work, and I'm excited to share my experiences and findings with you.</p>
<p>Interested in learning more about how I use LLMs to generate code? Check out the archives of chats on this site, where you can explore examples of our conversations and see how LLMs can help streamline development processes. <a href="./c/acc815c5-452a-46a7-83ef-002e76a8a078.html" alt="Link to the chat to generate this text">And, as a fun bonus, you'll notice that even this message you're reading right now was written using AI – isn't that cool? 🤖</a></p> <p>Interested in learning more about how I use LLMs to generate code? Check out the archives of chats on this site, where you can explore examples of our conversations and see how LLMs can help streamline development processes. <a href="./c/acc815c5-452a-46a7-83ef-002e76a8a078.html" title="Link to the chat to generate this text">And, as a fun bonus, you'll notice that even this message you're reading right now was written using AI – isn't that cool? 🤖</a></p>
<p>Thanks for stopping by, and I hope you enjoy exploring the site!</p> <p>Thanks for stopping by, and I hope you enjoy exploring the site!</p>
</main> </main>
@ -22,6 +24,7 @@
Made with <span class="heart">&hearts;</span>. Made with <span class="heart">&hearts;</span>.
<a href="https://git.depeuter.dev/tdpeuter/ai-transparency" about="source code of this webpage" class="hidden">Source code</a> <a href="https://git.depeuter.dev/tdpeuter/ai-transparency" about="source code of this webpage" class="hidden">Source code</a>
</p> </p>
<a href="https://www.flaticon.com/free-icons/transparency" title="transparency icons">Transparency icons created by Freepik - Flaticon</a>
</footer> </footer>
</body> </body>
</html> </html>

20
style.css
View file

@ -44,6 +44,10 @@
video { video {
opacity: 0.8; opacity: 0.8;
} }
.svg-icon[src$=".png"] {
filter: invert(1);
}
} }
/* Reset box-sizing */ /* Reset box-sizing */
@ -558,6 +562,22 @@ video {
border-radius: var(--standard-border-radius); border-radius: var(--standard-border-radius);
} }
/* Center icon */
img {
/* left: 50%; */
/* transform: translate(-50%, -50%); */
width: 150px;
height: 150px;
margin: 50px auto auto auto;
}
@media only screen and (max-width: 720px) {
img {
width: 60px;
height: 60px;
}
}
figure { figure {
margin: 0; margin: 0;
display: block; display: block;