krokaa/build-a-borrower
krokaa/build-a-borrower
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added credits in the bottom right

Browse Source
This commit is contained in:
Andreas Krokå 2025-05-09 17:33:15 +02:00
parent c053eb4964
commit deabd11d3f
2 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -29,10 +29,18 @@
<button class="random-button" onclick="randomizeAvatar()">Random</button>
<button class="download-button" onclick="downloadAvatar()">Download Borrower</button>
</div>
<script src="scripts.js"></script>
<script src="https://analytics.notkukkaa.com/api/script.js"
data-site-id="2"
defer
></script>
<div class="footer-note" tabindex="0">
<div class="footer-label">ⓘ</div>
<div class="footer-popup">
Coded by <a href="https://notkukkaa.com" target="_blank">@NotKukkaa</a><br>
Assets by <a href="https://pocketwithfrog.com" target="_blank">@Pocketwithfrog</a>
</div>
</div>
</body>
</html>

64
styles.css
View File

@ -275,3 +275,67 @@ h1 {
.avatar-container img[src$="none.png"] {
display: none;
}
.footer-note {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 1000;
font-size: 0.85rem;
font-family: 'Inter', sans-serif;
outline: none;
}
.footer-label {
background: rgba(255, 255, 255, 0.85);
color: #2e7031;
font-weight: bold;
width: 28px;
height: 28px;
border-radius: 50%;
text-align: center;
line-height: 28px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
user-select: none;
}
.footer-popup {
display: none;
position: absolute;
bottom: 36px;
right: 0;
background: rgba(255, 255, 255, 0.95);
color: #4b6b4b;
padding: 8px 12px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
white-space: nowrap;
text-align: left;
font-size: 0.8rem;
pointer-events: auto;
}
.footer-popup a {
color: inherit;
font-weight: 600;
text-decoration: none;
}
.footer-popup a:hover {
text-decoration: underline;
}
/* Show popup on hover or focus */
.footer-note:hover .footer-popup,
.footer-note:focus-within .footer-popup {
display: block;
}
/* Small screen tweaks */
@media (max-width: 400px), (max-height: 500px) {
.footer-popup {
font-size: 0.75rem;
padding: 6px 10px;
}
}