-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathKlash Legacy Typeface Site.qpe
13 lines (13 loc) · 12.1 KB
/
Klash Legacy Typeface Site.qpe
1
2
3
4
5
6
7
8
9
10
11
12
13
{
"js": "const ltrs = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()+_-=[]{}\\\\|/?><,.;:'\\\"\".split('');\r\ndocument.querySelectorAll('.text-effect').forEach(itm => {\r\n itm.addEventListener('mouseenter', () => {\r\n if (itm.dataset.scrambling == \"true\") {\r\n return;\r\n }\r\n itm.dataset.scrambling = \"true\";\r\n const before = itm.textContent;\r\n const length = before.length;\r\n let scrambleInterval, unscrambleTimeout;\r\n const rdm = (len) => {\r\n return Array.from({\r\n length: len\r\n }, () => ltrs[Math.floor(Math.random() * ltrs.length)]).join('');\r\n };\r\n let step = 0;\r\n scrambleInterval = setInterval(() => {\r\n if (step < length) {\r\n itm.textContent = rdm(length);\r\n step++;\r\n } else {\r\n clearInterval(scrambleInterval);\r\n let unscrambleStep = 0;\r\n unscrambleTimeout = setInterval(() => {\r\n itm.textContent = before.slice(0, unscrambleStep + 1) + rdm(length - unscrambleStep - 1);\r\n unscrambleStep++;\r\n if (unscrambleStep >= length) {\r\n itm.textContent = before;\r\n clearInterval(unscrambleTimeout);\r\n itm.dataset.scrambling = \"false\";\r\n }\r\n }, 50);\r\n }\r\n }, 30);\r\n });\r\n});\r\nvar selectedFont = \"classic\";\r\nvar sels = document.querySelectorAll('.sel-btn');\r\nsels.forEach(selBtn => {\r\n selBtn.addEventListener('click', (e) => {\r\n sels.forEach(sb => sb.classList.remove('selected'));\r\n selBtn.classList.add('selected');\r\n selectedFont = selBtn.dataset.font;\r\n updateThings(selectedFont);\r\n })\r\n});\r\nvar fonts = {\r\n \"regular\": {\r\n \"url\": \"https://raw.githack.com/klashdevelopment/mvn/main/fonts/KlashLegacy.ttf\",\r\n \"name\": \"Klash Legacy\",\r\n \"file\": \"KlashLegacy.ttf\",\r\n \"font\": \"KlashLegacy\"\r\n },\r\n \"mono\": {\r\n \"url\": \"https://raw.githack.com/klashdevelopment/mvn/main/fonts/KlashLegacyMono.ttf\",\r\n \"name\": \"Klash Legacy Mono\",\r\n \"file\": \"KlashLegacyMono.ttf\",\r\n \"font\": \"KlashLegacyMono\"\r\n },\r\n \"classic\": {\r\n \"url\": \"https://raw.githack.com/klashdevelopment/mvn/main/fonts/KlashLegacyClassic.ttf\",\r\n \"name\": \"Klash Legacy Classic\",\r\n \"file\": \"KlashLegacyClassic.ttf\",\r\n \"font\": \"KlashLegacyClassic\"\r\n },\r\n \"classicmono\": {\r\n \"url\": \"https://raw.githack.com/klashdevelopment/mvn/main/fonts/KlashLegacyClassicMono.ttf\",\r\n \"name\": \"Klash Legacy Classic Mono\",\r\n \"file\": \"KlashLegacyClassicMono.ttf\",\r\n \"font\": \"KlashLegacyClassicMono\"\r\n }\r\n}\r\nfunction recreateNode(el, withChildren) {\r\n if (withChildren) {\r\n el.parentNode.replaceChild(el.cloneNode(true), el);\r\n }\r\n else {\r\n var newEl = el.cloneNode(false);\r\n while (el.hasChildNodes()) newEl.appendChild(el.firstChild);\r\n el.parentNode.replaceChild(newEl, el);\r\n }\r\n}\r\n\r\nfunction updateThings(input) {\r\n var font = fonts[input];\r\n document.querySelectorAll('.fillWithNAME').forEach(x=>x.textContent=font.name);\r\n document.querySelectorAll('.fillWithURL').forEach(x => x.textContent = font.url);\r\n document.querySelectorAll('.fillWithFILE').forEach(x => x.textContent = font.file);\r\n document.querySelectorAll('.fillWithFONT').forEach(x => x.textContent = font.font);\r\n}\r\n\r\nupdateThings(selectedFont);\r\ndocument.querySelectorAll('.downloadFont').forEach(x => {\r\n x.addEventListener('click', () => {\r\n var a = document.createElement('a');\r\n a.href = fonts[selectedFont].url;\r\n a.download = fonts[selectedFont].file;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n })\r\n});\r\ndocument.querySelector('#discord').addEventListener('click', ()=>{\r\n window.open(\"https://discord.gg/Smb9wMWadU\");\r\n})\r\n\r\nconst image = [\"https://raw.githack.com/klashdevelopment/mvn/main/fonts/KlashLegacyGuide.png\",\"https://raw.githack.com/klashdevelopment/mvn/main/fonts/KlashLegacyGuideV2.png\"];\r\nvar NSRC = 1;\r\n\r\ndocument.querySelector('#next').addEventListener('click', ()=>{\r\n document.querySelector(\".rightdiv img\").src = image[NSRC];\r\n NSRC = 1 - NSRC;\r\n})",
"css": "/* CSS */\n@font-face {\n font-family: \"KlashLegacy\";\n src: url(\"https://raw.githack.com/klashdevelopment/mvn/main/fonts/KlashLegacy.ttf\");\n}\n@font-face {\n font-family: \"KlashLegacyMono\";\n src: url(\"https://raw.githack.com/klashdevelopment/mvn/main/fonts/KlashLegacyMono.ttf\");\n}\n@font-face {\n font-family: \"KlashLegacyClassic\";\n src: url(\"https://raw.githack.com/klashdevelopment/mvn/main/fonts/KlashLegacyClassic.ttf\");\n}\n@font-face {\n font-family: \"KlashLegacyClassicMono\";\n src: url(\"https://raw.githack.com/klashdevelopment/mvn/main/fonts/KlashLegacyMonoClassic.ttf\");\n}\n\nhtml,\nbody {\n background: #252425;\n color: white;\n letter-spacing: 1px;\n font-family: \"KlashLegacy\";\n margin: 0;\n padding: 0;\n}\n\n@media only screen and (min-width: 1000px) {\n body {\n max-width: 50vw;\n margin-left: 25vw;\n }\n}\n\n.leftdiv {\n width: 50%;\n padding-left: 15px;\n padding-top: 15px;\n}\n\n.leftdiv h1 {\n font-size: 60px;\n margin: 0;\n}\n\n.leftdiv h3 {\n font-size: 20px;\n margin: 3px;\n}\n\n.split {\n display: flex;\n overflow: visible;\n width: 100%;\n}\n\n.rightdiv {\n width: 40%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n\n@keyframes imagechange {\n 0% {\n opacity: 1;\n }\n 1% {\n opacity: 1;\n }\n 5% {\n opacity: 0;\n }\n 10% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.rightdiv img {\n width: 50%;\n border: 5px solid #ffffff20;\n transition: all 0.2s ease;\n z-index: 10;\n /* animation: imagechange 5s linear infinite; */\n}\n\n.rightdiv:hover img {\n scale: 0.95;\n rotate: -5deg;\n border-color: #ffffff50;\n transform: translateX(-200px) translateY(-15px);\n}\n\n.things {\n display: none;\n flex-direction: column;\n z-index: 2;\n position: absolute;\n left: 50px;\n transition: transform 0.2s ease;\n width: 75%;\n}\n\n.rightdiv:hover .things {\n display: flex;\n animation: move 0.2s ease forwards;\n}\n\n@keyframes move {\n 0% {\n transform: translateX(0px);\n }\n\n 100% {\n transform: translateX(38%);\n }\n}\n\n.line {\n width: 100%;\n height: 5px;\n margin: 10px 0;\n background-color: #333;\n}\n.line-thin {\n height: 2px;\n}\n.icons {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n}\n.icons img {\n height: 22px;\n}\n@keyframes colorshift {\n 0% {\n color: white;\n }\n\n 25% {\n color: #82FAFB;\n }\n\n 50% {\n color: #E77FF8;\n }\n\n 75% {\n color: rgb(255, 123, 0);\n }\n\n 100% {\n color: #e9edff;\n }\n}\n\n@keyframes colorshift-bg {\n 0% {\n background: white;\n }\n\n 25% {\n background: #82FAFB;\n }\n\n 50% {\n background: #E77FF8;\n }\n\n 75% {\n background: rgb(255, 123, 0);\n }\n\n 100% {\n background: #e9edff;\n }\n}\n\n.colorshift {\n animation: colorshift 6s linear infinite;\n}\n\n.colorshift-bg {\n animation: colorshift-bg 6s linear infinite;\n}\n\n.sl,\n.sr {\n box-sizing: border-box;\n padding: 10px;\n display: flex;\n flex-direction: column;\n gap: 3px;\n width: 45%;\n}\n\n.sl {\n width: 45%;\n margin-right: 2%;\n margin-left: 3%;\n font-family: KlashLegacyClassic;\n}\n\n.warning {\n color: rgb(255, 155, 155);\n}\n\nbutton {\n font-family: KlashLegacyClassic;\n background-color: #444;\n animation: colorshift 6s linear infinite;\n font-size: 14px;\n display: flex;\n gap: 2px;\n align-items: center;\n justify-content: center;\n transition: font-size 0.1s ease;\n padding: 1px 0;\n}\n\nbutton.selected {\n border: 2px solid;\n}\n\nbutton:not(.selected) {\n border: 2px solid #ffffff20;\n}\n\nbutton:hover {\n font-size: 16px;\n padding: 0;\n}\n.center-dls {\n width: 100%;\n padding: 10px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 10px;\n}\n.dl-item {\n width: 90%;\n height: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 2px;\n border-radius: 6px;\n background-color: #333;\n}\ncode {\n font-family: JetBrains Mono, Fira Code, monospace;\n letter-spacing: 0px;\n color: #f5b2ff;\n font-size: 12px;\n}\n.p2 {\n padding: 2px !important;\n}\nbutton img {\n height: 16px;\n}",
"html": "<!--- HTML --->\n<div class=\"split\">\n <div class=\"leftdiv\">\n <h1 class=\"text-effect\">KLASH</h1>\n <h1 class=\"text-effect\">LEGACY</h1>\n <h3 class=\"text-effect colorshift\">PIXEL ART TYPEFACE</h3>\n </div>\n <div class=\"rightdiv\"> <img src=\"https://raw.githack.com/klashdevelopment/mvn/main/fonts/KlashLegacyGuide.png\">\n <div class=\"things\"> <b>Font Guides</b> <span>Early images used for developing the Klash Legacy font.</span> <button id=\"next\">NEXT</button> </div>\n </div>\n</div>\n<div class=\"line colorshift-bg\"></div>\n<div class=\"split\">\n <div class=\"sl\"> <b>CLASSIC</b>\n <span>The original \"V1\" version of Klash Legacy. Best for cleaner interfaces and usage outside of gaming environments.</span>\n <button class=\"sel-btn selected\" data-font=\"classic\">Classic Regular</button>\n <button class=\"sel-btn\" data-font=\"classicmono\">Classic Monospace</button>\n </div>\n <div class=\"sr\"> <b>MODERN</b>\n <span>The modern version of the Klash Legacy typeface. Created for pixel writing with a video-game aestetic. Built for gaming.</span>\n <button class=\"sel-btn\" data-font=\"regular\">Modern Regular</button>\n <button class=\"sel-btn\" data-font=\"mono\">Modern Monospace</button> </div>\n</div>\n<div class=\"line\"></div>\n<div class=\"center-dls\">\n <span>Try <span class=\"fillWithNAME\"></span> yourself</span>\n <button class=\"p2 downloadFont\">Download <span class=\"fillWithFILE\"></span></button>\n <button class=\"p2\" id=\"discord\"><img src=\"https://raw.githubusercontent.com/klashdevelopment/mvn/refs/heads/main/fonts/chat.png\">Chat with us on Discord</button>\n <div class=\"dl-item\">\n <span>CSS IMPORT</span>\n <code>@import url(\"https://legacy.klash.dev/legacy.css\")</code>\n </div>\n <div class=\"dl-item\">\n <span>CSS FONT FAMILY</span>\n <code>font-family: <span class=\"fillWithFONT\"></span>;</code>\n </div>\n</div>\n<div class=\"line colorshift-bg\"></div>\n<div class=\"center-dls\">\n <div class=\"dl-item\">\n <span>KLASH LEGACY ICONS</span>\n <div class=\"icons\">\n <img src=\"https://raw.githubusercontent.com/klashdevelopment/mvn/refs/heads/main/fonts/chat.png\">\n <img src=\"https://raw.githubusercontent.com/klashdevelopment/mvn/refs/heads/main/fonts/gear.png\">\n <img src=\"https://raw.githubusercontent.com/klashdevelopment/mvn/refs/heads/main/fonts/single_user.png\">\n <img src=\"https://raw.githubusercontent.com/klashdevelopment/mvn/refs/heads/main/fonts/double_user.png\">\n </div>\n </div>\n <div class=\"dl-item\">\n <b>THANKS TO</b>\n <span><i>alecrac3r22</i> and <i>gavingogaming</i> from Klash</span>\n </div>\n</div>",
"settings": {
"cssImports": [],
"jsImports": [],
"color": "#6955c6",
"borderWidth": 1,
"title": "Klash Legacy | a pixelart typeface",
"shareCodeWithBrainbase": true
}
}