ixvd/pdsite
ixvd/pdsite
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity

feat: funny gifs

Browse source
This commit is contained in:
Strix 2023-12-20 04:20:14 +01:00
parent 5de0804129
commit 0286ee1bb8
No known key found for this signature in database
GPG key ID: 5F35B3B8537287A7
3 changed files with 53 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/link.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 747 B

26
src/assets/style.css
View file

@ -18,7 +18,7 @@ body #img {
animation: fade-in 1s forwards;
}
body #content {
main {
position: absolute;
text-align: center;
height: 100vh;
@ -27,16 +27,38 @@ body #content {
place-items: center;
}
body #content h1 {
main h1 {
margin: 0;
font-size: 5em;
text-shadow: #fff 1px 0 10px;
animation: park 1s forwards;
}
#credits {
opacity: 0;
position: absolute;
z-index: 1000;
bottom: 0;
left: 0;
margin: 1rem;
padding: 1rem;
background: #00000099;
border-radius: 1rem;
display: flex;
align-items: center;
gap: 1rem;
transition: opacity .2s ease-in-out;
}
a[href] {
color: #fff;
transition: color .1s ease-in-out;
}
.fade-in {
animation: fade-in 1s forwards;
}

33
src/index.html
View file

@ -6,16 +6,41 @@
</head>
<body>
<img src="assets/stewie.gif" alt="stewie" id="img">
<div id="content">
<img alt="stewie" id="img">
<main>
<div>
<h1>This domain is parked!</h1>
<a id="contact-link" href="//ixvd.net/parked-domains">Contact</a>
<a id="contact-link" class="fade-in" href="//ixvd.net/parked-domains">Contact</a>
</div>
</main>
<div id="credits">
<img src="assets/link.png" alt="link icon">
<div style="display: flex; flex-direction: column;">
<b id="gif-title">title</b>
<a id="gif-link">link</a>
</div>
</div>
<script>
document.title = `${document.location.hostname} - Parked Domain`
document.querySelector("a#contact-link").href += `?domain=${encodeURI(document.location.hostname)}`
document.querySelector("a#contact-link").href += `?domain=${encodeURI(document.location.hostname)}`;
(async () => {
const img = document.querySelector("img#img");
const credits = document.querySelector("#credits");
const title = document.querySelector("#gif-title");
const link = document.querySelector("#gif-link");
try {
const API_URL = `https://api.giphy.com/v1/gifs/translate?api_key=4SBh3vVDUMIDmzJl8mesOcY4UwRWKX7u&s=parking`;
const res = await fetch(API_URL, { mode: "cors" });
const imgData = await res.json();
const imgURL = imgData.data.images.original.url;
img.src = imgURL;
title.innerText = imgData.data.title;
link.href = imgData.data.url;
credits.style.opacity = 1;
} catch (error) {
img.src = "assets/stewie.gif";
}
})()
</script>
</body>