diff --git a/README.md b/README.md index cfe9bb9..ad09c66 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,14 @@ # redirect-website + Use this template if you wanna tell your consumers that your domain has changed. + +## Installation + +Download this repo, go in any editor and do the following steps: + +1. Replace `New Domain` with your new domain name (the new brand name). +2. Replace `website-logo` with an absolute or relative path (latter needs file of course) to your new brand's logo. +3. Replace `domain-link` with the url of the new website. +4. Replace `old-website` with the logo from the old website. + +> Tip: Use `STRG` + `f` or `STRG` + `r` to replace all occurrences, depending on your editor. diff --git a/app.js b/app.js new file mode 100644 index 0000000..4f1d6aa --- /dev/null +++ b/app.js @@ -0,0 +1,83 @@ +const confetti = new JSConfetti(); + +const emojis = ["🦄", "🌈", "✨", "💫", "🌸", "🥽", "💚", "🍉", "🍌", "🧁", "🚀", "💝", "😎"]; + +var intervall; + +function play(min, max) { + StartConfetti(); + intervall = setTimeout(play, Math.floor(Math.random() * (max - min) + min), min, max); +} + +function pause() { + clearTimeout(intervall); +} + +function getMultipleRandom(arr, num) { + const shuffled = [...arr].sort(() => 0.5 - Math.random()); + return shuffled.slice(0, num); +} + +function StartConfetti() { + var random = Math.random(); + confetti.addConfetti({ + emojis: getMultipleRandom(emojis, Math.round(Math.pow(Math.random(), 1.5) * 10)), + emojiSize: random * 50 + 30, + confettiRadius: random * 20 + 7, + confettiNumber: (Math.random() + 0.5 - random) * 50 + 20, + }); +} + +const setRandomInterval = (intervalFunction, minDelay, maxDelay) => { + let timeout; + + const runInterval = () => { + const timeoutFunction = () => { + intervalFunction(); + runInterval(); + }; + + const delay = Math.floor(Math.random() * (maxDelay - minDelay + 1)) + minDelay; + + timeout = setTimeout(timeoutFunction, delay); + }; + + runInterval(); + + return { + clear() { + clearTimeout(timeout); + }, + }; +}; + +document.getElementById("button").onclick = function () { + document.getElementById("button").blur(); + + var confettiEffect = localStorage.getItem("confetti-effect"); + + if (confettiEffect == "false") { + pause(); + play(1000, 2000); + localStorage.setItem("confetti-effect", "true"); + document.getElementById("button").innerHTML = "Stop Confetti"; + } else { + pause(); + localStorage.setItem("confetti-effect", "false"); + document.getElementById("button").innerHTML = "Start Confetti"; + } +}; + +function InitialConfetti() { + var confettiEffect = localStorage.getItem("confetti-effect"); + + if (confettiEffect == "true" || confettiEffect == null) { + pause(); + play(1000, 2000); + document.getElementById("button").innerHTML = "Stop Confetti"; + } else { + document.getElementById("button").innerHTML = "Start Confetti"; + } +} + +InitialConfetti(); diff --git a/index.html b/index.html new file mode 100644 index 0000000..0e34722 --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + + New Domain + + + +
+
+ + + +
+ +
+

We've Moved!

+

We have exciting news to share! Our company has undergone a major rebranding and we are thrilled to introduce our new name: New Domain. Kindly update your bookmarks. We remain committed to providing you with the exceptional services you've come to expect. +
+ Thank you for your continued support during this exciting transition! +

+
+ +
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..27513da --- /dev/null +++ b/style.css @@ -0,0 +1,155 @@ +@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); + +* { + margin: 0; + padding: 0; + font-family: "Jost", sans-serif; + user-select: none; +} + +.main { + margin: 0; + padding: 0; + box-sizing: border-box; + + height: 100vh; + width: 100vw; + + display: flex; + justify-content: center; + align-items: center; + + background: #22223b; +} + +.icons { + position: absolute; + gap: 24px; + top: 5vw; + margin: auto; + + display: flex; + justify-content: space-evenly; + align-items: center; +} + +.icons > img { + height: 32px; +} + +.icons > :is(img:nth-of-type(1), img:nth-of-type(3)) { + overflow: hidden; +} + +.icons > img:nth-of-type(2) { + height: 24px; + filter: grayscale(0.5); +} + +.container { + width: min(80vw, 800px); +} + +h1 { + font-size: 3.5rem; + font-weight: 900; + color: #9a8c98; +} + +p { + font-size: 1.5rem; + font-weight: 900; + color: #c9ada7; + + margin-top: 0.5rem; +} + +a { + text-decoration: none; + color: #f2e9e4; + position: relative; + display: inline-block; + + transition: color 0.3s ease-in-out; +} + +a:hover { + color: #fec10b; +} + +a::before, +a::after { + content: ""; + position: absolute; + width: 0%; + height: 0.25rem; + border-radius: 10000px; + background-color: #f2e9e4; +} + +a::before { + transition: width 0.3s ease-out, background 0.3s ease-out; + transform-origin: bottom left; + top: 0.125rem; + right: 0; +} + +a::after { + transition: width 0.3s ease-out, background 0.3s ease-out; + transform-origin: bottom right; + bottom: 0; + left: 0; +} + +a:hover::before, +a:hover::after { + width: 100%; + transform-origin: bottom left; + background-color: #fec10b; +} + +a:hover::before { + transition: width 0.3s ease-out, background 0.3s ease-out; + transform-origin: bottom right; + right: unset; + left: 0; +} + +a:hover::after { + transition: width 0.3s ease-out, background 0.3s ease-out; + transform-origin: bottom left; + right: 0; + left: unset; +} + +button { + position: absolute; + bottom: 5vw; + left: calc((100vw - min(80vw, 800px)) / 2); + + font-size: 12px; + font-weight: 600; + + background: #4a4e69; + color: #f2e9e4; + + display: inline-block; + border: none; + padding: 12px 24px; + margin: 0; + text-decoration: none; + text-transform: uppercase; + cursor: pointer; + + opacity: 0.2; + transition: opacity 0.3s ease-in-out; +} + +button:hover, +button:focus { + opacity: 0.8; +} + +button:active { + transform: scale(0.99); +}