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; animation: fade-in 1s forwards;
} }
body #content { main {
position: absolute; position: absolute;
text-align: center; text-align: center;
height: 100vh; height: 100vh;
@ -27,16 +27,38 @@ body #content {
place-items: center; place-items: center;
} }
body #content h1 { main h1 {
margin: 0; margin: 0;
font-size: 5em; font-size: 5em;
text-shadow: #fff 1px 0 10px; text-shadow: #fff 1px 0 10px;
animation: park 1s forwards; 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] { a[href] {
color: #fff; color: #fff;
transition: color .1s ease-in-out; transition: color .1s ease-in-out;
}
.fade-in {
animation: fade-in 1s forwards; animation: fade-in 1s forwards;
} }

33
src/index.html
View file

@ -6,16 +6,41 @@
</head> </head>
<body> <body>
<img src="assets/stewie.gif" alt="stewie" id="img"> <img alt="stewie" id="img">
<div id="content"> <main>
<div> <div>
<h1>This domain is parked!</h1> <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>
</div> </div>
<script> <script>
document.title = `${document.location.hostname} - Parked Domain` 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> </script>
</body> </body>