Tällaisella koodilla on nyt tehty nuo mullinsilmänappulat. Jostakin syystä netistä vedettävä FontAwesome ei enää toiminut, mutta näppäränä tekoälynä tuo o3-mini-high koodasi symbolit svg:nä.
Kyllä tekoäly on foorumin ylläpitäjälle ihan kullan arvoinen, tai ainakin kahdenkympin kuukausiveloituksen verran.
Kyllä tekoäly on foorumin ylläpitäjälle ihan kullan arvoinen, tai ainakin kahdenkympin kuukausiveloituksen verran.
Koodi:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.button-container {
text-align: right;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px; /* Kiinteä korkeus kaikille nappeille */
padding: 0 10px; /* Vaakasuuntainen padding */
margin: 5px;
background-color: #4CAF50;
border: none;
color: white;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.button:hover {
background-color: #45a049;
}
/* Yleinen asetus kaikille SVG:lle nappuloissa */
.button svg {
margin-right: 5px;
width: 24px;
height: 24px;
}
.button span {
line-height: 40px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="button-container">
<!-- Lukemattomat-nappula (SVG käyttää viewBox:a "0 0 1792 1792") -->
<a href="https://konekansa.net/whats-new/posts/" target="_self" class="button">
<svg aria-hidden="true" role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1792 1792">
<path fill="orange" d="M1152 896q0 106-75 181t-181 75-181-75-75-181
75-181 181-75 181 75 75 181zm128 0q0-159-112.5-271.5t-271.5-112.5-271.5
112.5-112.5 271.5 112.5 271.5 271.5 112.5 271.5-112.5 112.5-271.5zm128
0q0 212-150 362t-362 150-362-150-150-362 150-362 362-150 362 150 150
362zm128 0q0-130-51-248.5t-136.5-204-204-136.5-248.5-51-248.5 51-204
136.5-136.5 204-51 248.5 51 248.5 136.5 204 204 136.5 248.5 51 248.5-51
204-136.5 136.5-204 51-248.5zm128 0q0 209-103 385.5t-279.5 279.5-385.5
103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103
385.5 103 279.5 279.5 103 385.5z"/>
</svg>
<span>Lukemattomat</span>
</a>
<!-- Viimeisimmät-nappula (SVG käyttää viewBox:a "0 -300 2304 2304") -->
<a href="https://konekansa.net/whats-new/posts/?skip=1" target="_self" class="button">
<svg aria-hidden="true" role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -300 2304 2304">
<path fill="#fff" d="M256 1312v192q0 13-9.5 22.5t-22.5
9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13 0
22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5
9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13
0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5
9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13
0 22.5 9.5t9.5 22.5zm1536 768v192q0 13-9.5 22.5t-22.5
9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13
0 22.5 9.5t9.5 22.5zm-1536-1152v192q0 13-9.5 22.5t-22.5
9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13
0 22.5 9.5t9.5 22.5zm1536 768v192q0 13-9.5 22.5t-22.5
9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13
0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5
9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13
0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5
9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13
0 22.5 9.5t9.5 22.5z"/>
</svg>
<span>Viimeisimmät</span>
</a>
</div>
</body>
</html>
näitä yllättäen vihreitä nappuloita.
