modified: index.html
new file: js/art.js new file: js/hdr.js new file: js/hearts.js new file: js/helpers.js new file: js/particles.js new file: js/qlpycon.js new file: js/qlpyconbanner.js new file: js/snek.js new file: js/sparks.js new file: js/stars.js modified: slamp.html modified: style.css
This commit is contained in:
root
236
html/index.html
236
html/index.html
@ -2,63 +2,201 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>6bit.ch</title>
|
<title>6bit.ch</title>
|
||||||
<link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
|
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
<link rel="author" type="text/plain" href="humans.txt">
|
<link rel="author" type="text/plain" href="humans.txt">
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
||||||
<script type="text/javascript" src="js/sparks.js"></script>
|
|
||||||
<script type="text/javascript" src="js/hearts.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body style="background-color:#101010;">
|
<body>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div id="starshine">
|
<section class="contentindex">
|
||||||
<div class="template shine"></div>
|
<p><button onclick="rerollArt()" class="reroll-btn">[ reroll ]</button></p>
|
||||||
</div>
|
<canvas id="hdr"></canvas>
|
||||||
<section class=headerimg>
|
<p>The trajectory of this <a href="https://wikipedia.org/wiki/Earth" target="_blank" rel="noopener">ship</a> is unchanging.</p>
|
||||||
<a href="https://6bit.ch"><img src="img/6bitnobg.png"></a>
|
|
||||||
</section>
|
</section>
|
||||||
<div class="col left">
|
|
||||||
<section class="navblock">
|
<section class="linksblock">
|
||||||
<h4>🏡 here</h4>
|
<div class="linkgroup">
|
||||||
<ul><li><a href=https://git.6bit.ch/xbl>🐐 Goat</a></li></ul>
|
<h4>🏡 here</h4>
|
||||||
<ul><li><a href=https://6bit.ch/snek.html>🐍 Snek</a></li></ul>
|
<ul>
|
||||||
<ul><li><a href=https://6bit.ch/things.html>🎨 Things</a></li></ul>
|
<li><a href="https://git.6bit.ch/xbl">🐐 Goat</a></li>
|
||||||
<ul><li><a href=https://6bit.ch/slamp.html>💡 slamp</a></li></ul>
|
<li><a href="slamp.html">💡 Slamp</a></li>
|
||||||
</section>
|
<li><a href="https://wiki.6bit.ch/index.php?title=Special:AllPages">🪓 Wiki</a></li>
|
||||||
</br>
|
<li><a href="https://6bit.ch/xbl.txt" target="_blank" rel="noopener">🚀 q3cfg</a></li>
|
||||||
<section class="navblock">
|
</ul>
|
||||||
<h4>✨ there</h4>
|
</div>
|
||||||
<ul><li><a href=https://hardbrugg.ch target=_blank>📽️ Hardbrugg.ch</a></li></ul>
|
<div class="linkgroup">
|
||||||
<ul><li><a href=https://ravemitherz.li target=_blank>💗 RAVEmitHerz.li</a></li></ul>
|
<h4>✨ there</h4>
|
||||||
<ul><li><a href=https://rumpelkist.li target=_blank>🛸 Rumpelkist.li</a></li></ul>
|
<ul>
|
||||||
</section>
|
<li><a href="https://hardbrugg.ch" target="_blank" rel="noopener">📽️ Hardbrugg.ch</a></li>
|
||||||
</br>
|
<li><a href="https://ravemitherz.li" target="_blank" rel="noopener">💗 RAVEmitHerz.li</a></li>
|
||||||
<section class="navblock">
|
<li><a href="https://rumpelkist.li" target="_blank" rel="noopener">🛸 Rumpelkist.li</a></li>
|
||||||
<h4>👭 everywhere</h4>
|
</ul>
|
||||||
<ul><li><a href=https://ausliebemusik.ch target=_blank>Aus Liebe</a></li></ul>
|
</div>
|
||||||
<ul><li><a href=https://instagram.com/catcallsofzrh target=_blank>Catcalls of Zurich</a></li></ul>
|
<div class="linkgroup linkgroup-everywhere">
|
||||||
<ul><li><a href=https://marcp.xyz target=_blank>cramp</a></li></ul>
|
<h4>👭 everywhere</h4>
|
||||||
<ul><li><a href=https://le-lan.ch target=_blank>LeLAN</a></li></ul>
|
<ul>
|
||||||
<ul><li><a href=https://jar.band target=_blank>JAR</a></li></ul>
|
<li><a href="https://ausliebemusik.ch" target="_blank" rel="noopener">» Aus Liebe</a></li>
|
||||||
</section>
|
<li><a href="https://catcallsofzuri.ch" target="_blank" rel="noopener">» Catcalls of Zurich</a></li>
|
||||||
</br>
|
<li><a href="https://cannamatch.cannabis-research.ch" target="_blank" rel="noopener">» Cannamatch</a></li>
|
||||||
</div>
|
<li><a href="https://marcp.xyz" target="_blank" rel="noopener">» cramp</a></li>
|
||||||
<div class="col right">
|
<li><a href="https://jar.band" target="_blank" rel="noopener">» JAR</a></li>
|
||||||
<section class=contentindex>
|
<li><a href="https://le-lan.ch" target="_blank" rel="noopener">» LeLAN</a></li>
|
||||||
<img src=img/gosu.png>
|
</ul>
|
||||||
<p>The trajectory of this <a href=https://wikipedia.org/wiki/Earth target=_blank>ship</a> is unchanging.</p>
|
</div>
|
||||||
<form method="get" id="ddgSearch" action="https://duckduckgo.com/">
|
</section>
|
||||||
<input type="text" name="q" placeholder="DuckDuck">
|
|
||||||
<button type="submit">Go!</button>
|
<details class="things-block" id="qlpycon-details">
|
||||||
</form>
|
<summary>👾 qlpycon</summary>
|
||||||
</br>
|
<div class="contentindexqlpycon">
|
||||||
</section>
|
<pre id="qlpyconbanner">
|
||||||
|
<script src="js/qlpyconbanner.js" defer></script>
|
||||||
|
</pre>
|
||||||
|
<h1 class="">QLPyCon</h1>
|
||||||
|
<h2 class="">Quake Live Python Console</h2>
|
||||||
|
<h3 class="">Terminal-based client written in python for monitoring and controlling Quake Live servers via ZMQ</h3>
|
||||||
|
<div id="qlpycon"></div>
|
||||||
|
<script src="js/qlpycon.js"></script>
|
||||||
|
<script>QuakeTerminal.init('#qlpycon')</script>
|
||||||
|
<p class="">- Real-time server monitoring with live feed of game events</p>
|
||||||
|
<p class="">- Server info display and full control via rcon</p>
|
||||||
|
<p class="">- Autocomplete cvars and commands with fuzzy matching</p>
|
||||||
|
<p class="">- Intelligent argument suggestions for 25+ commands</p>
|
||||||
|
<p class="">- Quake color code support (^0-^7)</p>
|
||||||
|
<p class="">- Command history & JSON event capture</p>
|
||||||
|
<br>
|
||||||
|
<p class="">License: <a href="https://www.wtfpl.net/" target="_blank" rel="noopener">WTFPL</a></p>
|
||||||
|
<br>
|
||||||
|
<h4 class="">pipe2bash (stable):</h4>
|
||||||
|
<div class="qlpyconcodeblock">
|
||||||
|
<p class="qlpyconcode">curl -sSL https://git.6bit.ch/xbl/qlpycon/raw/branch/main/install.sh | bash</p>
|
||||||
|
</div>
|
||||||
|
<h4 class="">git clone (edge):</h4>
|
||||||
|
<div class="qlpyconcodeblock">
|
||||||
|
<p class="qlpyconcode">git clone https://git.6bit.ch/xbl/qlpycon.git</p>
|
||||||
|
<p class="qlpyconcode">cd qlpycon</p>
|
||||||
|
<p class="qlpyconcode">chmod u+x install.sh</p>
|
||||||
|
<p class="qlpyconcode">./install.sh</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="things-block" id="things-details">
|
||||||
|
<summary>🎨 Things</summary>
|
||||||
|
<div class="contentindexart">
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/clicktoris.png" target="_blank"><img data-src="art/clicktoris.png" alt="clicktoris.org"></a>
|
||||||
|
<p>clicktoris.org</p>
|
||||||
|
<p class="artdesc">image, logo</p>
|
||||||
|
</div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/hb.png" target="_blank"><img data-src="art/hb.png" alt="Hardbrugg.ch"></a>
|
||||||
|
<p>Hardbrugg.ch</p>
|
||||||
|
<p class="artdesc">image, logo</p>
|
||||||
|
</div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/lelogo.png" target="_blank"><img data-src="art/lelogo.png" alt="LeLAN"></a>
|
||||||
|
<p>LeLAN</p>
|
||||||
|
<p class="artdesc">image, logo</p>
|
||||||
|
</div>
|
||||||
|
<div class="break"></div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/raverave.png" target="_blank"><img data-src="art/raverave.png" alt="RAVE Rave"></a>
|
||||||
|
<p>RAVE Rave</p>
|
||||||
|
<p class="artdesc">image, postcard</p>
|
||||||
|
</div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/rerave.png" target="_blank"><img data-src="art/rerave.png" alt="RAVE Re-Rave"></a>
|
||||||
|
<p>RAVE Re-Rave</p>
|
||||||
|
<p class="artdesc">image, postcard</p>
|
||||||
|
</div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/fbn.png" target="_blank"><img data-src="art/fbn.png" alt="RAVE Fernbedienung Nebel"></a>
|
||||||
|
<p>RAVE Fernbedienung Nebel</p>
|
||||||
|
<p class="artdesc">image, postcard</p>
|
||||||
|
</div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/bsin.png" target="_blank"><img data-src="art/bsin.png" alt="RAVE Blazerstuhl des Lebens"></a>
|
||||||
|
<p>RAVE Blazerstuhl des Lebens</p>
|
||||||
|
<p class="artdesc">image, postcard</p>
|
||||||
|
</div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/dgk.png" target="_blank"><img data-src="art/dgk.png" alt="RAVE Durchgangskonzept"></a>
|
||||||
|
<p>RAVE Durchgangskonzept</p>
|
||||||
|
<p class="artdesc">image, postcard</p>
|
||||||
|
</div>
|
||||||
|
<div class="break"></div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/ccofz.png" target="_blank"><img data-src="art/ccofz.png" alt="C of Z"></a>
|
||||||
|
<p>C of Z</p>
|
||||||
|
<p class="artdesc">image, sticker</p>
|
||||||
|
</div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/1312.png" target="_blank"><img data-src="art/1312.png" alt="Gleis 1312"></a>
|
||||||
|
<p>Gleis 1312</p>
|
||||||
|
<p class="artdesc">image, sticker</p>
|
||||||
|
</div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/grzh.png" target="_blank"><img data-src="art/grzh.png" alt="GrZH"></a>
|
||||||
|
<p>GrZH</p>
|
||||||
|
<p class="artdesc">image, sticker</p>
|
||||||
|
</div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/plan.png" target="_blank"><img data-src="art/plan.png" alt="planlos"></a>
|
||||||
|
<p>planlos</p>
|
||||||
|
<p class="artdesc">image, sticker</p>
|
||||||
|
</div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/viv.png" target="_blank"><img data-src="art/viv.png" alt="ViV"></a>
|
||||||
|
<p>ViV</p>
|
||||||
|
<p class="artdesc">image, sticker</p>
|
||||||
|
</div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/zbb.png" target="_blank"><img data-src="art/zbb.png" alt="ZBB"></a>
|
||||||
|
<p>ZBB</p>
|
||||||
|
<p class="artdesc">image, sticker</p>
|
||||||
|
</div>
|
||||||
|
<div class="break"></div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/alho100.png" target="_blank"><img data-src="art/alho100.png" alt="AlHo100"></a>
|
||||||
|
<p>AlHo100</p>
|
||||||
|
<p class="artdesc">image, money</p>
|
||||||
|
</div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/donot.png" target="_blank"><img data-src="art/donot.png" alt="don't blender"></a>
|
||||||
|
<p>don't blender</p>
|
||||||
|
<p class="artdesc">image, 3d</p>
|
||||||
|
</div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="https://www.youtube.com/watch?v=lMSjd6HNQdY" target="_blank" rel="noopener"><img src="art/eve.png" alt="EVE Online FaLiHSS"></a>
|
||||||
|
<p>EVE Online FaLiHSS (2006)</p>
|
||||||
|
<p class="artdesc">video, youtube</p>
|
||||||
|
</div>
|
||||||
|
<div class="artitem">
|
||||||
|
<a href="art/pp.pdf" target="_blank"><img data-src="art/pp.png" alt="Postparade"></a>
|
||||||
|
<p>Postparade</p>
|
||||||
|
<p class="artdesc">pdf, text</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="things-block" id="snek-details">
|
||||||
|
<summary>🐍 Snek (arrow keys required)</summary>
|
||||||
|
<canvas id="game"></canvas>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<p>Gmacht mit 🔮 z'Züri. | <a href="humans.txt">humans.txt</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="" class="footer">
|
<canvas id="particles"></canvas>
|
||||||
<p>Gmacht mit 🔮 z'Züri. | <a href=humans.txt>humans.txt</a></p>
|
<canvas id="stars"></canvas>
|
||||||
</div>
|
<script src="js/art.js"></script>
|
||||||
|
<script src="js/helpers.js"></script>
|
||||||
|
<script src="js/hdr.js"></script>
|
||||||
|
<script src="js/particles.js"></script>
|
||||||
|
<script src="js/snek.js"></script>
|
||||||
|
<script src="js/stars.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
369
html/js/art.js
Normal file
369
html/js/art.js
Normal file
@ -0,0 +1,369 @@
|
|||||||
|
const ARTS = [
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' ____________________________________________________________________________',
|
||||||
|
' ___/\\/\\/\\/\\____/\\/\\________/\\/\\______/\\/\\________________________/\\/\\_______',
|
||||||
|
' _/\\/\\__________/\\/\\________________/\\/\\/\\/\\/\\__________/\\/\\/\\/\\__/\\/\\_______',
|
||||||
|
' _/\\/\\/\\/\\/\\____/\\/\\/\\/\\____/\\/\\______/\\/\\____________/\\/\\________/\\/\\/\\/\\___',
|
||||||
|
' _/\\/\\____/\\/\\__/\\/\\__/\\/\\__/\\/\\______/\\/\\______/\\/\\__/\\/\\________/\\/\\__/\\/\\_',
|
||||||
|
' ___/\\/\\/\\/\\____/\\/\\/\\/\\____/\\/\\/\\____/\\/\\/\\____/\\/\\____/\\/\\/\\/\\__/\\/\\__/\\/\\_',
|
||||||
|
'____________________________________________________________________________'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' @@@@@@ @@@@@@@ @@@ @@@@@@@ @@@@@@@ @@@ @@@ ',
|
||||||
|
' @@@@@@@ @@@@@@@@ @@@ @@@@@@@ @@@@@@@@ @@@ @@@ ',
|
||||||
|
'!@@ @@! @@@ @@! @@! @@@ @@! @@@ ',
|
||||||
|
'!@! !@ @!@ !@! !@! !@! !@! @!@ ',
|
||||||
|
'!!@@!@! @!@!@!@ !!@ @!! !@! @!@!@!@! ',
|
||||||
|
'@!!@!!!! !!!@!!!! !!! !!! !!! !!!@!!!! ',
|
||||||
|
'!:! !:! !!: !!! !!: !!: :!! !!: !!! ',
|
||||||
|
':!: !:! :!: !:! :!: :!: :!: :!: :!: !:! ',
|
||||||
|
':::: ::: :: ::: :: :: ::: ::: ::: :: ::: ',
|
||||||
|
' :: : : : : :: : : : :: :: : : :: '
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' _____ _____ _____ _____ _____ _____ _____ ',
|
||||||
|
'|| ||| ||| ||| ||| ||| ||| ||',
|
||||||
|
'|| 6 ||| B ||| I ||| T ||| . ||| C ||| H ||',
|
||||||
|
'||_____|||_____|||_____|||_____|||_____|||_____|||_____||',
|
||||||
|
'|/_____\\|/_____\\|/_____\\|/_____\\|/_____\\|/_____\\|/_____\\|'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' o__ __o o o o o ',
|
||||||
|
' /v v\\ <|> _<|>_ <|> <|> ',
|
||||||
|
' /> <\\ / > < > / > ',
|
||||||
|
'<o> \\o__ __o o | __o__ \\o__ __o ',
|
||||||
|
' |__ _\\__o__ | v\\ <|> o__/_ /> \\ | v\\ ',
|
||||||
|
' | \\ / \ <\\ / \\ | o/ / \\ <\\',
|
||||||
|
' \\ / \\o/ / \\o/ | o <| \\o/ o/',
|
||||||
|
' o o | o | o <|> \\\\ | <| ',
|
||||||
|
' <\\__ __/> / \\ __/> / \\ <\\__ < > _\\o__</ / \\ / \\'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' d88b 8 w w 8 ',
|
||||||
|
'8Pwww. 88b. w w8ww .d8b 8d8b.',
|
||||||
|
'8b d8 8 8 8 8 8 8P Y8',
|
||||||
|
'`Y88P\' 88P\' 8 Y8P w `Y8P 8 8'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' ___ _ ___ ___ ___ ___ ',
|
||||||
|
' .\'|=|_.\' .\'|=| `. .\'| `._|=| |=|_.\' .\'|=|_.\' .\'| |`. ',
|
||||||
|
'.\' | .\' | | .\' .\' | | | .\' | .\' | | `.',
|
||||||
|
'| |=|`. | |=|\'. | | | | | | | |=| |',
|
||||||
|
'| | | | | | | | | | `. | .-. `. | ___ | | | |',
|
||||||
|
'|___|=|__| |___|=|_.\' |___| `.| `-\' `.|=|_.\' |___| |___|'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
'. . . . . . . . . . . . ',
|
||||||
|
'|`+.=|`+. .+\'|=|`+. |`+. .+\'|=|`+.=|`+. .+\'|=|`+. .+\'| |`+.',
|
||||||
|
'| | `+.| | | | | | | |.+\' | | `+.| | | `+.| | | | |',
|
||||||
|
'| | . | |\'. \'. | | | | | | | |=| |',
|
||||||
|
'| |=|`+. | | | | | | | | | | | | | |',
|
||||||
|
'| | | | | | | | | | | | . | | . | | | |',
|
||||||
|
'| | | | | | | | | | | | |`+. | | .+\'| | | | |',
|
||||||
|
'`+.|=|.+\' `+.|=|.+\' |.+\' |.+\' `+.| `+.|=|.+\' `+.| |.+\''
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' _______ __ __ __ __ ',
|
||||||
|
'| | |--|__| |_ .----| |--.',
|
||||||
|
'| ____| _ | | _|__| __| |',
|
||||||
|
'|. \\|_____|__|____|__|____|__|__|',
|
||||||
|
'|: o | ',
|
||||||
|
'|::.. . | ',
|
||||||
|
'`-------\' '
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
'__ ___ ____ ___ _________ __ ___ _',
|
||||||
|
' / __) \\ \\ (_ _) (__ __) / __) \\ | | / ',
|
||||||
|
'| (__ | ) | | | | | / | \\_/ | ',
|
||||||
|
'| \\ | < | | | | | | | _ | ',
|
||||||
|
'| ) | ) _| |_ | | __ | \\__ | / \\ | ',
|
||||||
|
'_\\ /__/ /__( )____| |____( )__\\ )_/ |___| \\_'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' _ _ _ _ __ ',
|
||||||
|
'| |__ ___ | |_(_) |__ / /_ ',
|
||||||
|
'| \'_ \\ / __|| __| | \'_ \\| \'_ \\ ',
|
||||||
|
'| | | | (__ | |_| | |_) | (_) |',
|
||||||
|
'|_| |_|\\___(_)__|_|_.__/ \\___/ '
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' .-. .----. .-..-----. .----..-. .-.',
|
||||||
|
' / /. | {_} }| }`-\' \'-\' | }`-\'| {_} }',
|
||||||
|
'{ {} }| {_} }| } } { _ | },-.| { } }',
|
||||||
|
' `--\' `----\' `-\' `-\'{_}`----\'`-\' `-\''
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' ___________. .__ __ .__ ',
|
||||||
|
' / _____/\\_ |__ |__|/ |_ ____ | |__ ',
|
||||||
|
'/ __ \\ | __ \\| \\ __\\ _/ ___\\| | \\ ',
|
||||||
|
'\\ |__\\ \\ | \\_\\ \\ || | \\ \\___| Y \\',
|
||||||
|
' \\_____ / |___ /__||__| /\\ \\___ >___| /',
|
||||||
|
' \\/ \\/ \\/ \\/ \\/ '
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
'.eeeeee..eeeeeee..eee.eeeeeeeee......eeeee.eee..eee.',
|
||||||
|
'@@@@@@@@:@@@@@@@@:@@@:@@@@@@@@@:::::@@@@@@:@@@::@@@:',
|
||||||
|
'%%%------%%%--%%%-%%%----%%%--------%%%----%%%--%%%-',
|
||||||
|
'&&&&&&&++&&&&&&&++&&&++++&&&++++++++&&&++++&&&&&&&&+',
|
||||||
|
'||||||||*||||||||*|||****|||********|||****||||||||*',
|
||||||
|
'!!!==!!!=!!!==!!!=!!!====!!!========!!!====!!!==!!!=',
|
||||||
|
'::::::::#::::::::#:::####:::####:::#::::::#:::##:::#',
|
||||||
|
'@......@@.......@@...@@@@...@@@@...@@.....@...@@...@'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
'`Yb .d .d `Yb. ',
|
||||||
|
' `8 db P\' P\' `Yb ',
|
||||||
|
' 8 Yb ',
|
||||||
|
' 88888888888b. `Yb d88b d88b \'Yb `Yb.d888b .dP\' dP\' Yb ',
|
||||||
|
' 8 .P\' .P\' 88P 8Y 8b 88 88\' 8Y 88 88 dPYb ',
|
||||||
|
' .P 8 8 b 88 8P 88 88 88 8P .d .d Y8 .88 ,dP Yb ',
|
||||||
|
' .P\' `Ybd`YbwP\' 88 .dP\' .dP\' .8P 88 ,dP P\' P\' `Y88P\'88 .dP\' `Yb.',
|
||||||
|
' 8 b 888888888888b. 88 88 ',
|
||||||
|
' `YbwP\' 88 88 88 ',
|
||||||
|
' .8P .8P Y8. '
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
'#### #### # # ##### # # # #',
|
||||||
|
'# # # ## # # # # # ',
|
||||||
|
'#### #### # # # # #### # ',
|
||||||
|
'# # # # ## # # # # # ',
|
||||||
|
'#### ##### # # # # # # #'
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' _____ __ _ __ __ ',
|
||||||
|
' / ___// /_ (_) /_ _____/ /_ ',
|
||||||
|
' / __ \\/ __ \\/ / __// ___/ __ \\',
|
||||||
|
'/ /_/ / /_/ / / /__/ /__/ / / /',
|
||||||
|
'\\____/_.___/_/\\__(_)___/_/ /_/ '
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' _ _ _ _ _ _ _ ',
|
||||||
|
' _(_)(_)(_) (_) (_) (_) (_) ',
|
||||||
|
' _(_) (_) _ _ _ _ _ _ (_) _ _ _ _ _ (_) _ _ _ ',
|
||||||
|
'(_) _ _ _ (_)(_)(_)(_)_ (_)(_)(_)(_)(_)(_) _(_)(_)(_)(_)(_)(_)(_)_ ',
|
||||||
|
'(_)(_)(_)(_)_ (_) (_) (_) (_) (_) (_) (_)',
|
||||||
|
'(_) (_)(_) (_) (_) (_) _ _ _ (_) (_) (_)',
|
||||||
|
'(_)_ _ _ (_)(_) _ _ _(_) _ (_) _ (_)_ _(_) (_)(_) (_)_ _ _ (_) (_)',
|
||||||
|
' (_)(_)(_) (_)(_)(_)(_) (_)(_)(_) (_)(_) (_)(_) (_)(_)(_)(_) (_)'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' {__ {__ ',
|
||||||
|
' {__ {__ {__ {__ {__ ',
|
||||||
|
' {__ {__ {_{_ {_ {__ ',
|
||||||
|
' {__ {__ {__ {__ {__ {___{__{_ ',
|
||||||
|
'{_ {__ {__ {__{__ {__ {__ {__ {__',
|
||||||
|
'{__ {__{__ {__{__ {__ {__ {__ {__',
|
||||||
|
' {___{__ {___{__ {__ {___{__{___{__ {__'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' `.. `.. ',
|
||||||
|
' `.. `.. `. `.. `.. ',
|
||||||
|
' `.. `.. .`. `. `...`.. ',
|
||||||
|
' `.. `.. `.. `.. `.. `.. `. `. ',
|
||||||
|
'`. `.. `.. `..`.. `.. `.. `.. `..',
|
||||||
|
'`.. `..`.. `. `.. `.. `.. `. `..',
|
||||||
|
' `.. ..` `.. ..` `.. `.. `.. `...`.. `..'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' :::::::: ::::::::: ::::::::::::::: :::::::: ::: :::',
|
||||||
|
':+: :+: :+: :+: :+: :+: :+: :+: :+: :+:',
|
||||||
|
'+:+ +:+ +:+ +:+ +:+ +:+ +:+ +:+',
|
||||||
|
'+#++:++#+ +#++:++#+ +#+ +#+ +#+ +#++:++#++',
|
||||||
|
'+#+ +#+ +#+ +#+ +#+ +#+ +#+ +#+ +#+',
|
||||||
|
'#+# #+# #+# #+# #+# #+# #+# #+# #+# #+# #+#',
|
||||||
|
' ######## ######### ####### ### ### ######## ### ###'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' dD d8888b. d888888b d888888b .o88b. db db',
|
||||||
|
' d8\' 88 `8D `88\' `~~88~~\' d8P Y8 88 88',
|
||||||
|
' d8\' 88oooY\' 88 88 8P 88ooo88',
|
||||||
|
'd8888b. 88~~~b. 88 88 8b 88~~~88',
|
||||||
|
'88\' `8D 88 8D .88. 88 db Y8b d8 88 88',
|
||||||
|
'`8888P Y8888P\' Y888888P YP VP `Y88P\' YP YP'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
'-....',
|
||||||
|
'-...',
|
||||||
|
'..',
|
||||||
|
'-',
|
||||||
|
'.-.-.-',
|
||||||
|
'-.-.',
|
||||||
|
'....'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' ████████ █████ ███ █████ █████ ',
|
||||||
|
' ███░░░░███░░███ ░░░ ░░███ ░░███ ',
|
||||||
|
'░███ ░░░ ░███████ ████ ███████ ██████ ░███████ ',
|
||||||
|
'░█████████ ░███░░███░░███ ░░░███░ ███░░███ ░███░░███ ',
|
||||||
|
'░███░░░░███ ░███ ░███ ░███ ░███ ░███ ░░░ ░███ ░███ ',
|
||||||
|
'░███ ░███ ░███ ░███ ░███ ░███ ███ ░███ ███ ░███ ░███ ',
|
||||||
|
'░░████████ ████████ █████ ░░█████ ██░░██████ ████ █████',
|
||||||
|
' ░░░░░░░░ ░░░░░░░░ ░░░░░ ░░░░░ ░░ ░░░░░░ ░░░░ ░░░░░ '
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' _ _ _ _ _ _ _ ',
|
||||||
|
' /\\ \\ / /\\ /\\ \\ /\\ \\ /\\ \\ / /\\ / /\\',
|
||||||
|
' / \\ \\ / / \\ \\ \\ \\ \\_\\ \\ / \\ \\ / / / / / /',
|
||||||
|
' / /\\ \\_\\ / / /\\ \\ /\\ \\_\\ /\\__ \\ / /\\ \\ \\ / /_/ / / / ',
|
||||||
|
' / / /\\/_/ / / /\\ \\ \\ / /\\/_/ / /_ \\ \\ / / /\\ \\ \\ / /\\ \\__/ / / ',
|
||||||
|
' / /_/_ / / /\\ \\_\\ \\ / / / / / /\\ \\ \\ / / / \\ \\_\\ / /\\ \\___\\/ / ',
|
||||||
|
' / /___/\\ / / /\\ \\ \\___\\ / / / / / / \\/_// / / \\/_/ / / /\\/___/ / ',
|
||||||
|
' / /\\__ \\ \\ / / / \\ \\ \\__/ / / / / / / / / / / / / / / / ',
|
||||||
|
' / / /__\\ \\ \\ / / /____\\_\\ \\ ___/ / /__ / / /_ / / /________ / / / / / / ',
|
||||||
|
'/ / /____\\ \\ \\/ / /__________\\/\\__\\/_/___\\/_/ //\\_\\ / / /_________\\/ / / / / / ',
|
||||||
|
'\\/__________\\/\\/_____________/\\/_________/\\_\\/ \\/_/ \\/____________/\\/_/ \\/_/ ',
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
'_|_|_| _| _| _| _| ',
|
||||||
|
'_| _|_|_| _|_|_|_| _|_|_| _|_|_| ',
|
||||||
|
'_|_|_| _| _| _| _| _| _| _|',
|
||||||
|
'_| _| _| _| _| _| _| _| _|',
|
||||||
|
' _|_| _|_|_| _| _|_| _| _|_|_| _| _|'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
'┌┐┌┐ ┬┌┬┐┌─┐┬ ┬',
|
||||||
|
'┌┐┌┐ ┬┌┬┐┌─┐┬ ┬',
|
||||||
|
'├┐├┴┐│ │ │ ├─┤',
|
||||||
|
'└┘└─┘┴ ┴o└─┘┴ ┴',
|
||||||
|
'└┘└─┘┴ ┴o└─┘┴ ┴'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' ██████╗ ██████╗ ██╗████████╗ ██████╗██╗ ██╗',
|
||||||
|
'██╔════╝ ██╔══██╗██║╚══██╔══╝██╔════╝██║ ██║',
|
||||||
|
'███████╗ ██████╔╝██║ ██║ ██║ ███████║',
|
||||||
|
'██╔═══██╗██╔══██╗██║ ██║ ██║ ██╔══██║',
|
||||||
|
'╚██████╔╝██████╔╝██║ ██║██╗╚██████╗██║ ██║',
|
||||||
|
' ╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═════╝╚═╝ ╚═╝'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
'00110110',
|
||||||
|
'01100010',
|
||||||
|
'01101001',
|
||||||
|
'01110100',
|
||||||
|
'00101110',
|
||||||
|
'01100011',
|
||||||
|
'01101000',
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' .:. :::::::. ::::::::::::: .,-::::: :: .: ',
|
||||||
|
' ,;\' ;;;\'\'\';; ;;;\'\'\';;\'\'\' ,;;\'`````\' ,;; ;;, ',
|
||||||
|
',[[.od8b [[[__[[\\.[[[ [[ [[[ ,[[[,,,[[[ ',
|
||||||
|
'$$$" "$$ $$""""Y$$$$$ $$ $$$ "$$$"""$$$ ',
|
||||||
|
' Y8b,,d8P_88o,,od8P888 88 ,d8b`88bo,__,o,888 "88o',
|
||||||
|
' "YMP" ""YUMMMP" MMM MM MYMP "YUMMMMMP MM YMM'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' _.._ ',
|
||||||
|
' .\' \'. ',
|
||||||
|
' ( / `\\ \\ ',
|
||||||
|
' ( |\' \' ) ) ',
|
||||||
|
' ) _\\- / ( ',
|
||||||
|
' __..---.(`_.\' ` \ ) ',
|
||||||
|
' `;-""-._(_( ♥ `;( ',
|
||||||
|
' / `-`\'--\' ; ) ',
|
||||||
|
' / / . ( ♥ ,| |( ',
|
||||||
|
' .-`\'---...__,\' /-,..___.-\'--\'_| |) ',
|
||||||
|
' \'-\'``\'-.._ ,\' |_ / .........\' ',
|
||||||
|
' ``;--"`; | ``` ',
|
||||||
|
' `\'..__.\' '
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' ♥ ',
|
||||||
|
' ♥ ♥',
|
||||||
|
'♥ ♥ ♥ ♥'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
' o ',
|
||||||
|
' @ ',
|
||||||
|
' @ ',
|
||||||
|
' @ ',
|
||||||
|
' o@o ',
|
||||||
|
' o@o ',
|
||||||
|
' o@o- o@o -o@o ',
|
||||||
|
' o@o @@@ o@o ',
|
||||||
|
'o@o @@@ o@o',
|
||||||
|
' o@o @@@ o@o ',
|
||||||
|
' o@@@@@@o @@@ o@@@@@@o ',
|
||||||
|
' o@@@@@@@@@@@@o @@@ o@@@@@@@@@@@@o ',
|
||||||
|
' o@@@@@@@@@@@@@@@@@o @@@ o@@@@@@@@@@@@@@@@@o ',
|
||||||
|
' o@@@@@@@@@o @@@ o@@@@@@@@@o ',
|
||||||
|
' o@@@o @@@ o@@@o ',
|
||||||
|
' @@@o @@@ o@@@ ',
|
||||||
|
' o@@@ @@@ @@@o ',
|
||||||
|
' @@@ @@@ @@@ ',
|
||||||
|
' o@@ @@@ @@o ',
|
||||||
|
' @@ o@o @@ ',
|
||||||
|
' o@ o@o @o ',
|
||||||
|
' @ o@o @ ',
|
||||||
|
' @ @ @ ',
|
||||||
|
' o @ o ',
|
||||||
|
' o ',
|
||||||
|
' o '
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
];
|
||||||
190
html/js/hdr.js
Normal file
190
html/js/hdr.js
Normal file
@ -0,0 +1,190 @@
|
|||||||
|
(function () {
|
||||||
|
var c = document.getElementById('hdr');
|
||||||
|
var ctx = c.getContext('2d');
|
||||||
|
var W, H, mouse = { x: -999, y: -999 };
|
||||||
|
var glitchX = 0, glitchY = 0;
|
||||||
|
var glitchXTarget = 0, glitchYTarget = 0;
|
||||||
|
var COLS = ['#00ffff', '#ff00ff', '#ffffff'];
|
||||||
|
/*const ARTS = [
|
||||||
|
{
|
||||||
|
lines: [
|
||||||
|
''
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]*/
|
||||||
|
var validARTS = ARTS.filter(function(a) { return a.lines.length > 0; });
|
||||||
|
var ART = validARTS[Math.floor(Math.random() * validARTS.length)].lines;
|
||||||
|
|
||||||
|
var fontSize, LINE_H, ART_TOP, PAD_BOTTOM;
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
W = c.width = c.offsetWidth;
|
||||||
|
|
||||||
|
var maxChars = ART.reduce(function(max, l) { return Math.max(max, l.length); }, 0);
|
||||||
|
fontSize = Math.min(16, (W * 0.95) / maxChars * 1.6);
|
||||||
|
LINE_H = fontSize * 1;
|
||||||
|
ART_TOP = LINE_H * 2;
|
||||||
|
PAD_BOTTOM = LINE_H * 2;
|
||||||
|
|
||||||
|
H = c.height = Math.ceil(ART_TOP + ART.length * LINE_H + PAD_BOTTOM);
|
||||||
|
|
||||||
|
buildScanlines();
|
||||||
|
}
|
||||||
|
|
||||||
|
var scanlines = document.createElement('canvas');
|
||||||
|
function buildScanlines() {
|
||||||
|
var headerH = ART_TOP + ART.length * LINE_H + PAD_BOTTOM;
|
||||||
|
scanlines.width = 1;
|
||||||
|
scanlines.height = headerH;
|
||||||
|
var sctx = scanlines.getContext('2d');
|
||||||
|
sctx.clearRect(0, 0, 1, headerH);
|
||||||
|
for (var sy = 0; sy < headerH; sy += 3) {
|
||||||
|
sctx.fillStyle = '#101010';
|
||||||
|
sctx.fillRect(0, sy, 1, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('resize', function () { resize(); });
|
||||||
|
|
||||||
|
window.addEventListener('DOMContentLoaded', function() {
|
||||||
|
resize();
|
||||||
|
requestAnimationFrame(loop);
|
||||||
|
});
|
||||||
|
|
||||||
|
var moveTimer;
|
||||||
|
var glitchTarget = 0;
|
||||||
|
|
||||||
|
var lastX = 0, lastY = 0;
|
||||||
|
document.addEventListener('mousemove', function (e) {
|
||||||
|
var nx = e.clientX;
|
||||||
|
var ny = e.clientY;
|
||||||
|
var dx = nx - lastX;
|
||||||
|
var dy = ny - lastY;
|
||||||
|
mouse.x = nx;
|
||||||
|
mouse.y = ny;
|
||||||
|
lastX = nx;
|
||||||
|
lastY = ny;
|
||||||
|
glitchXTarget = Math.min(1, Math.abs(dx) / 16);
|
||||||
|
glitchYTarget = Math.min(1, Math.abs(dy) / 16);
|
||||||
|
clearTimeout(moveTimer);
|
||||||
|
moveTimer = setTimeout(function () { glitchXTarget = 0; glitchYTarget = 0; }, 100);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mouseleave', function () {
|
||||||
|
mouse.x = -999;
|
||||||
|
glitchXTarget = 0;
|
||||||
|
glitchYTarget = 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('touchmove', function (e) {
|
||||||
|
var touch = e.touches[0];
|
||||||
|
var nx = touch.clientX;
|
||||||
|
var ny = touch.clientY;
|
||||||
|
var dx = nx - lastX;
|
||||||
|
var dy = ny - lastY;
|
||||||
|
mouse.x = nx;
|
||||||
|
mouse.y = ny;
|
||||||
|
lastX = nx;
|
||||||
|
lastY = ny;
|
||||||
|
glitchXTarget = Math.min(1, Math.abs(dx) / 16);
|
||||||
|
glitchYTarget = Math.min(1, Math.abs(dy) / 16);
|
||||||
|
clearTimeout(moveTimer);
|
||||||
|
moveTimer = setTimeout(function () { glitchXTarget = 0; glitchYTarget = 0; }, 100);
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
document.addEventListener('touchend', function () {
|
||||||
|
glitchXTarget = 0;
|
||||||
|
glitchYTarget = 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ── text ── */
|
||||||
|
function drawText(ox, oy, col, alpha) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.globalAlpha = alpha;
|
||||||
|
ctx.fillStyle = col;
|
||||||
|
ctx.font = fontSize + 'px deltarune';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.textBaseline = 'top';
|
||||||
|
for (var i = 0; i < ART.length; i++) {
|
||||||
|
ctx.fillText(ART[i], W / 2 + ox, ART_TOP + i * LINE_H + oy, W * 0.95);
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── proximity glow on letters ── */
|
||||||
|
function drawGlow() {
|
||||||
|
var cx = W / 2;
|
||||||
|
var cy = ART_TOP + (ART.length * LINE_H) / 2;
|
||||||
|
var dx = mouse.x - cx;
|
||||||
|
var dy = mouse.y - cy;
|
||||||
|
var dist = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
var r = Math.max(0, 1 - dist / 220);
|
||||||
|
var idle = (1 - r) * (Math.sin(t * 0.008) * 0.5 + 0.5) * 0.25;
|
||||||
|
|
||||||
|
if (idle > 0) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.globalAlpha = idle * 0.15;
|
||||||
|
ctx.fillStyle = '#00ffff';
|
||||||
|
ctx.font = fontSize + 'px deltarune';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.textBaseline = 'top';
|
||||||
|
for (var d = 3; d <= 9; d += 3) {
|
||||||
|
for (var i = 0; i < ART.length; i++) {
|
||||||
|
ctx.fillText(ART[i], W / 2 + d, ART_TOP + i * LINE_H, W * 0.95);
|
||||||
|
ctx.fillText(ART[i], W / 2 - d, ART_TOP + i * LINE_H, W * 0.95);
|
||||||
|
ctx.fillText(ART[i], W / 2, ART_TOP + i * LINE_H + d, W * 0.95);
|
||||||
|
ctx.fillText(ART[i], W / 2, ART_TOP + i * LINE_H - d, W * 0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (r <= 0) return;
|
||||||
|
ctx.save();
|
||||||
|
ctx.globalAlpha = r * 0.3;
|
||||||
|
ctx.fillStyle = '#ff00ff';
|
||||||
|
ctx.font = fontSize + 'px deltarune';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.textBaseline = 'top';
|
||||||
|
for (var d = 3; d <= 9; d += 3) {
|
||||||
|
for (var i = 0; i < ART.length; i++) {
|
||||||
|
ctx.fillText(ART[i], W / 2 + d, ART_TOP + i * LINE_H, W * 0.95);
|
||||||
|
ctx.fillText(ART[i], W / 2 - d, ART_TOP + i * LINE_H, W * 0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── main loop ── */
|
||||||
|
var t = 0, lastFrame = 0;
|
||||||
|
function loop(ts) {
|
||||||
|
requestAnimationFrame(loop);
|
||||||
|
if (ts - lastFrame < 42) return;
|
||||||
|
lastFrame = ts;
|
||||||
|
t++;
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, W, H);
|
||||||
|
var headerH = ART_TOP + ART.length * LINE_H + PAD_BOTTOM;
|
||||||
|
|
||||||
|
var splitX = glitchX * 16;
|
||||||
|
var splitY = glitchY * 16;
|
||||||
|
|
||||||
|
drawText(-splitX, -splitY, '#00ffff', 0.7);
|
||||||
|
drawText( splitX, splitY, '#ff00ff', 0.7);
|
||||||
|
drawText(0, 0, '#ffffff', 0.9);
|
||||||
|
|
||||||
|
drawGlow();
|
||||||
|
|
||||||
|
/* scanline overlay */
|
||||||
|
var headerH = ART_TOP + ART.length * LINE_H + PAD_BOTTOM;
|
||||||
|
ctx.drawImage(scanlines, 0, 0, W, headerH);
|
||||||
|
|
||||||
|
glitchX += (glitchXTarget - glitchX) * 0.04;
|
||||||
|
glitchY += (glitchYTarget - glitchY) * 0.04;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.rerollArt = function() {
|
||||||
|
ART = validARTS[Math.floor(Math.random() * validARTS.length)].lines;
|
||||||
|
resize();
|
||||||
|
};
|
||||||
|
})();
|
||||||
178
html/js/hearts.js
Executable file
178
html/js/hearts.js
Executable file
@ -0,0 +1,178 @@
|
|||||||
|
//var colours=new Array('#f00', '#f06', '#f0f', '#f6f', '#f39', '#f9c'); // colours of the hearts
|
||||||
|
var colours=new Array('#ff00ff','#00ffff'); // colours of the hearts
|
||||||
|
var minisize=10; // smallest size of hearts in pixels
|
||||||
|
var maxisize=20; // biggest size of hearts in pixels
|
||||||
|
var hearts=100; // maximum number of hearts on screen
|
||||||
|
var over_or_under="over"; // set to "over" for hearts to always be on top, or "under" to allow them to float behind other objects
|
||||||
|
|
||||||
|
/* Thanks mf2fm.com for this
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*****************************
|
||||||
|
*JavaScript Love Heart Cursor*
|
||||||
|
* (c)2013+ mf2fm web-design *
|
||||||
|
* http://www.mf2fm.com/rv *
|
||||||
|
* DON'T EDIT BELOW THIS BOX *
|
||||||
|
*****************************/
|
||||||
|
var x=ox=400;
|
||||||
|
var y=oy=300;
|
||||||
|
var swide=800;
|
||||||
|
var shigh=600;
|
||||||
|
var sleft=sdown=0;
|
||||||
|
var herz=new Array();
|
||||||
|
var herzx=new Array();
|
||||||
|
var herzy=new Array();
|
||||||
|
var herzs=new Array();
|
||||||
|
var kiss=true;
|
||||||
|
|
||||||
|
if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
|
||||||
|
var oldonload=window.onload;
|
||||||
|
if (typeof(oldonload)!='function') window.onload=funky;
|
||||||
|
else window.onload=function() {
|
||||||
|
if (oldonload) oldonload();
|
||||||
|
funky();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
addRVLoadEvent(mwah);
|
||||||
|
|
||||||
|
function mwah() { if (document.getElementById) {
|
||||||
|
var i, heart;
|
||||||
|
for (i=0; i<hearts; i++) {
|
||||||
|
heart=createDiv("auto", "auto");
|
||||||
|
heart.style.visibility="hidden";
|
||||||
|
heart.style.zIndex=(over_or_under=="over")?"1001":"0";
|
||||||
|
heart.style.color=colours[i%colours.length];
|
||||||
|
heart.style.pointerEvents="none";
|
||||||
|
if (navigator.appName=="Microsoft Internet Explorer") heart.style.filter="alpha(opacity=75)";
|
||||||
|
else heart.style.opacity=0.45;
|
||||||
|
heart.appendChild(document.createTextNode(String.fromCharCode(9829)));
|
||||||
|
document.body.appendChild(heart);
|
||||||
|
herz[i]=heart;
|
||||||
|
herzy[i]=false;
|
||||||
|
}
|
||||||
|
set_scroll();
|
||||||
|
set_width();
|
||||||
|
herzle();
|
||||||
|
}}
|
||||||
|
|
||||||
|
function herzle() {
|
||||||
|
var c;
|
||||||
|
if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) {
|
||||||
|
ox=x;
|
||||||
|
oy=y;
|
||||||
|
for (c=0; c<hearts; c++) if (herzy[c]===false) {
|
||||||
|
herz[c].firstChild.nodeValue=String.fromCharCode(9829);
|
||||||
|
herz[c].style.left=(herzx[c]=x-minisize/2)+"px";
|
||||||
|
herz[c].style.top=(herzy[c]=y-minisize)+"px";
|
||||||
|
herz[c].style.fontSize=minisize+"px";
|
||||||
|
herz[c].style.fontWeight='normal';
|
||||||
|
herz[c].style.visibility='visible';
|
||||||
|
herzs[c]=minisize;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (c=0; c<hearts; c++) if (herzy[c]!==false) blow_me_a_kiss(c);
|
||||||
|
setTimeout("herzle()", 30);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.onmousedown=pucker;
|
||||||
|
document.onmouseup=function(){clearTimeout(kiss);};
|
||||||
|
|
||||||
|
function pucker() {
|
||||||
|
ox=-1;
|
||||||
|
oy=-1;
|
||||||
|
kiss=setTimeout('pucker()', 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
function blow_me_a_kiss(i) {
|
||||||
|
herzy[i]-=herzs[i]/minisize+i%2;
|
||||||
|
herzx[i]+=(i%5-2)/5;
|
||||||
|
if (herzy[i]<sdown-herzs[i] || herzx[i]<sleft-herzs[i] || herzx[i]>sleft+swide-herzs[i]) {
|
||||||
|
herz[i].style.visibility="hidden";
|
||||||
|
herzy[i]=false;
|
||||||
|
}
|
||||||
|
else if (herzs[i]>minisize+1 && Math.random()<2.5/hearts) break_my_heart(i);
|
||||||
|
else {
|
||||||
|
if (Math.random()<maxisize/herzy[i] && herzs[i]<maxisize) herz[i].style.fontSize=(++herzs[i])+"px";
|
||||||
|
herz[i].style.top=herzy[i]+"px";
|
||||||
|
herz[i].style.left=herzx[i]+"px";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function break_my_heart(i) {
|
||||||
|
var t;
|
||||||
|
herz[i].firstChild.nodeValue=String.fromCharCode(9676);
|
||||||
|
herz[i].style.fontWeight='bold';
|
||||||
|
herzy[i]=false;
|
||||||
|
for (t=herzs[i]; t<=maxisize; t++) setTimeout('herz['+i+'].style.fontSize="'+t+'px"', 60*(t-herzs[i]));
|
||||||
|
setTimeout('herz['+i+'].style.visibility="hidden";', 60*(t-herzs[i]));
|
||||||
|
}
|
||||||
|
|
||||||
|
document.onmousemove=mouse;
|
||||||
|
function mouse(e) {
|
||||||
|
if (e) {
|
||||||
|
y=e.pageY;
|
||||||
|
x=e.pageX;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
set_scroll();
|
||||||
|
y=event.y+sdown;
|
||||||
|
x=event.x+sleft;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onresize=set_width;
|
||||||
|
function set_width() {
|
||||||
|
var sw_min=999999;
|
||||||
|
var sh_min=999999;
|
||||||
|
if (document.documentElement && document.documentElement.clientWidth) {
|
||||||
|
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
|
||||||
|
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
|
||||||
|
}
|
||||||
|
if (typeof(self.innerWidth)=='number' && self.innerWidth) {
|
||||||
|
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
|
||||||
|
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
|
||||||
|
}
|
||||||
|
if (document.body.clientWidth) {
|
||||||
|
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
|
||||||
|
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
|
||||||
|
}
|
||||||
|
if (sw_min==999999 || sh_min==999999) {
|
||||||
|
sw_min=800;
|
||||||
|
sh_min=600;
|
||||||
|
}
|
||||||
|
swide=sw_min;
|
||||||
|
shigh=sh_min;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onscroll=set_scroll;
|
||||||
|
function set_scroll() {
|
||||||
|
if (typeof(self.pageYOffset)=='number') {
|
||||||
|
sdown=self.pageYOffset;
|
||||||
|
sleft=self.pageXOffset;
|
||||||
|
}
|
||||||
|
else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
|
||||||
|
sdown=document.body.scrollTop;
|
||||||
|
sleft=document.body.scrollLeft;
|
||||||
|
}
|
||||||
|
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
|
||||||
|
sleft=document.documentElement.scrollLeft;
|
||||||
|
sdown=document.documentElement.scrollTop;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
sdown=0;
|
||||||
|
sleft=0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createDiv(height, width) {
|
||||||
|
var div=document.createElement("div");
|
||||||
|
div.style.position="absolute";
|
||||||
|
div.style.height=height;
|
||||||
|
div.style.width=width;
|
||||||
|
div.style.overflow="hidden";
|
||||||
|
div.style.backgroundColor="transparent";
|
||||||
|
return (div);
|
||||||
|
}
|
||||||
7
html/js/helpers.js
Normal file
7
html/js/helpers.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
document.querySelector('#things-details').addEventListener('toggle', function(e) {
|
||||||
|
if (!e.target.open) return;
|
||||||
|
e.target.querySelectorAll('img[data-src]').forEach(function(img) {
|
||||||
|
img.src = img.getAttribute('data-src');
|
||||||
|
img.removeAttribute('data-src');
|
||||||
|
});
|
||||||
|
});
|
||||||
9
html/js/particles.js
Normal file
9
html/js/particles.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
var pc = document.getElementById('particles');
|
||||||
|
var pctx = pc.getContext('2d');
|
||||||
|
|
||||||
|
function resizeParticlesCanvas() {
|
||||||
|
pc.width = window.innerWidth;
|
||||||
|
pc.height = window.innerHeight;
|
||||||
|
}
|
||||||
|
resizeParticlesCanvas();
|
||||||
|
window.addEventListener('resize', resizeParticlesCanvas);
|
||||||
262
html/js/qlpycon.js
Normal file
262
html/js/qlpycon.js
Normal file
@ -0,0 +1,262 @@
|
|||||||
|
(function (global) {
|
||||||
|
|
||||||
|
var DEFAULTS = {
|
||||||
|
host: 'tcp://10.13.12.93:28960',
|
||||||
|
serverLabel: '[+] sexy Test',
|
||||||
|
mapName: 'campgrounds',
|
||||||
|
gameType: 'Clan Arena',
|
||||||
|
playerSlots: '6/9',
|
||||||
|
roundLimit: 9,
|
||||||
|
redTeam: ['Angel', 'Crash', 'Hunter'],
|
||||||
|
blueTeam: ['Mynx', 'Slash', 'Lucy'],
|
||||||
|
weapons: ['Railgun', 'Rocket Launcher', 'Plasma Gun', 'Lightning Gun', 'Shotgun'],
|
||||||
|
medals: ['IMPRESSIVE', 'EXCELLENT', 'REVENGE', 'MIDAIR'],
|
||||||
|
chatMessages: ['So much for foreplay...', 'We do not lose. We blend in.', 'The she-wolf reigns', 'Konnichiwa, campers', 'Not what I expected. Definitely not.', 'Just a flesh wound', 'Sayonara, babies', 'Oooooo! You like me. You really like me!', 'This is, like, so sweet', 'We are off to find the lizard', 'Do it again. But this time, with feeling.', 'Bizzzzaap!! Got me like a bug in a zap trap!', 'You flesh folk leak too much', 'Toodles', 'Great, premature eradication', '** winks and blows kisses **', 'Drinks are on me, boys!' ],
|
||||||
|
minDelay: 420,
|
||||||
|
maxDelay: 6900,
|
||||||
|
maxLines: 12,
|
||||||
|
pKill: 0.69,
|
||||||
|
pMedal: 0.1337,
|
||||||
|
spectators: [ 'anarki' ],
|
||||||
|
};
|
||||||
|
|
||||||
|
var colorizedNames = {
|
||||||
|
'anarki': '<span style="color:#f00">a</span><span style="color:#0f0">n</span><span style="color:#ff0">a</span><span style="color:#09f">r</span><span style="color:#0cc">k</span><span style="color:#f0f">i</span>'
|
||||||
|
};
|
||||||
|
|
||||||
|
function colorizeSpectator(name) {
|
||||||
|
return colorizedNames[name.toLowerCase()] || name;
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildDoc(cfg) {
|
||||||
|
var redRows = cfg.redTeam .map(function(p){ return '<div class="player">0 ' + p + '</div>'; }).join('');
|
||||||
|
var blueRows = cfg.blueTeam.map(function(p){ return '<div class="player">0 ' + p + '</div>'; }).join('');
|
||||||
|
var label = cfg.serverLabel.split(' ');
|
||||||
|
var bracket = label[0] || '';
|
||||||
|
var cyan = label[1] || '';
|
||||||
|
var yellow = label.slice(2).join(' ') || '';
|
||||||
|
|
||||||
|
var css = [
|
||||||
|
'*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}',
|
||||||
|
'html,body{background:transparent;color:#ccc;font-family:"Courier New",Courier,monospace;font-size:12.5px;line-height:1.5;overflow:hidden}',
|
||||||
|
'.wrap{border:1px solid #333}',
|
||||||
|
'.header{padding:6px 12px 4px}',
|
||||||
|
'.titlebar{color:#ccc;margin-bottom:6px}',
|
||||||
|
'.infoline{display:grid;grid-template-columns:auto auto auto auto;margin-bottom:1px}',
|
||||||
|
'.teams{padding:8px 12px 4px;display:flex}',
|
||||||
|
'.team{width:50%}',
|
||||||
|
'.team-hdr{margin-bottom:3px}',
|
||||||
|
'.player{color:#fff;padding-left:2px}',
|
||||||
|
'.spectators{padding:4px 12px 2px;color:#ff0;font-weight:bold}',
|
||||||
|
'.divider{border:none;border-top:1px solid #444;margin:6px 0 0;display:block}',
|
||||||
|
'.feed-wrap{height:256px;overflow:hidden;padding:4px 12px;position:relative}',
|
||||||
|
'.fade{position:absolute;top:4px;left:0;right:0;height:30px;background:linear-gradient(to bottom,#0c0c0c,transparent);pointer-events:none;z-index:2}',
|
||||||
|
'.feed{display:flex;flex-direction:column}',
|
||||||
|
'.msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .25s ease;line-height:1.6;display:block}',
|
||||||
|
'.msg.on{opacity:1}',
|
||||||
|
'.cmdline{border-top:1px solid #333;padding:4px 12px;display:flex;align-items:center;gap:4px;color:#ccc}',
|
||||||
|
'.cursor{display:inline-block;width:8px;height:14px;background:#ccc;vertical-align:middle;animation:blink 1s step-end infinite}',
|
||||||
|
'@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}',
|
||||||
|
'.cyan{color:#fff}.yellow{color:#0cc}.warmup{color:#f00}',
|
||||||
|
'.bold{color:#fff;font-weight:bold}',
|
||||||
|
'.rt{color:#f00;text-decoration:underline;font-weight:bold}',
|
||||||
|
'.bt{color:#09f;text-decoration:underline;font-weight:bold}',
|
||||||
|
'.score{color:#fff;font-weight:bold;margin-right:6px}',
|
||||||
|
'.ts{color:#ccc}.cr{color:#f00}.cb{color:#09f}.cp{color:#fff;font-weight:bold}',
|
||||||
|
'.cmt{color:#f0f;font-weight:bold}',
|
||||||
|
'.cst{color:#0c0;font-weight:bold}.css{color:#0f0}',
|
||||||
|
'.plain{color:#ccc}',
|
||||||
|
'.label{color:#ff0}',
|
||||||
|
].join('');
|
||||||
|
|
||||||
|
var html = [
|
||||||
|
'<!DOCTYPE html><html><head><meta charset="UTF-8">',
|
||||||
|
'<style>', css, '</style>',
|
||||||
|
'</head><body>',
|
||||||
|
'<div class="wrap">',
|
||||||
|
'<div class="header">',
|
||||||
|
'<div class="titlebar">Quake Live PyCon: ', cfg.host, '</div>',
|
||||||
|
'<div class="infoline">',
|
||||||
|
'<span><span class="label">Name: </span><span class="cr">[</span><span class="bold">+</span><span class="cr">]</span> <span class="cyan">', cyan, '</span> <span class="yellow">', yellow, '</span></span>',
|
||||||
|
'<span></span>',
|
||||||
|
'<span style="padding-left:5.7em"><span class="label">Time: </span><span class="bold" id="qtime">0:00</span></span>',
|
||||||
|
'<span style="padding-left:0.3em"><span class="label">Warmup: </span><span class="warmup">YES</span></span>',
|
||||||
|
'</div>',
|
||||||
|
'<div class="infoline">',
|
||||||
|
'<span><span class="label">Type: </span><span class="bold">', cfg.gameType, '</span></span>',
|
||||||
|
'<span><span class="label">Map: </span><span class="bold">', cfg.mapName, '</span></span>',
|
||||||
|
'<span><span class="label">Players: </span><span class="bold">', cfg.playerSlots, '</span></span>',
|
||||||
|
'<span><span class="label">Roundlimit: </span><span class="bold">', cfg.roundLimit, '</span></span>',
|
||||||
|
'</div>',
|
||||||
|
'</div>',
|
||||||
|
'<div class="teams">',
|
||||||
|
'<div class="team">',
|
||||||
|
'<div class="team-hdr"><span class="score" id="rs">0</span><span class="rt">RED TEAM</span></div>',
|
||||||
|
redRows,
|
||||||
|
'</div>',
|
||||||
|
'<div class="team">',
|
||||||
|
'<div class="team-hdr"><span class="score" id="bs">0</span><span class="bt">BLUE TEAM</span></div>',
|
||||||
|
blueRows,
|
||||||
|
'</div>',
|
||||||
|
'</div>',
|
||||||
|
'<div class="spectators">Spectators: <span class="cyan">' + cfg.spectators.map(colorizeSpectator).join(' ') + '</span></div>',
|
||||||
|
'<hr class="divider">',
|
||||||
|
'<div class="feed-wrap">',
|
||||||
|
'<div class="fade"></div>',
|
||||||
|
'<div class="feed" id="feed"></div>',
|
||||||
|
'</div>',
|
||||||
|
'<div class="cmdline">$ <span class="cursor"></span></div>',
|
||||||
|
'</div>',
|
||||||
|
].join('');
|
||||||
|
|
||||||
|
/* inner script as a real function — no string escaping needed */
|
||||||
|
function iframeScript(cfg) {
|
||||||
|
var feed = document.getElementById('feed');
|
||||||
|
var timeEl = document.getElementById('qtime');
|
||||||
|
var rsEl = document.getElementById('rs');
|
||||||
|
var bsEl = document.getElementById('bs');
|
||||||
|
var lines = [], elapsed = 0, scores = { red: 0, blue: 0 };
|
||||||
|
|
||||||
|
function rand(a) { return a[Math.floor(Math.random() * a.length)]; }
|
||||||
|
function randInt(a,b){ return a + Math.floor(Math.random() * (b - a + 1)); }
|
||||||
|
function sp(c, t) { return '<span class="' + c + '">' + t + '</span>'; }
|
||||||
|
function pad(n) { return n < 10 ? '0' + n : '' + n; }
|
||||||
|
function ts() {
|
||||||
|
var b = 33*60 + 34 + elapsed;
|
||||||
|
return '[' + pad(Math.floor(b/3600)) + ':' + pad(Math.floor((b%3600)/60)) + ':' + pad(b%60) + ']';
|
||||||
|
}
|
||||||
|
|
||||||
|
function kill() {
|
||||||
|
var rk = Math.random() < 0.5;
|
||||||
|
var k = rand(rk ? cfg.redTeam : cfg.blueTeam);
|
||||||
|
var v = rand(rk ? cfg.blueTeam : cfg.redTeam);
|
||||||
|
var w = rand(cfg.weapons);
|
||||||
|
var hp = randInt(25, 200);
|
||||||
|
if (Math.random() < 0.12) { if (rk) scores.red++; else scores.blue++; }
|
||||||
|
return sp('ts',ts()) + ' ' +
|
||||||
|
sp(rk?'cr':'cb', rk?'(RED)':'(BLUE)') + sp('cp', k) +
|
||||||
|
sp('plain', ' fragged ') +
|
||||||
|
sp(rk?'cb':'cr', rk?'(BLUE)':'(RED)') + sp('cp', v) +
|
||||||
|
sp('plain', ' with the ') +
|
||||||
|
(function(w){
|
||||||
|
var weaponColors = {
|
||||||
|
'Rocket Launcher':'#f33',
|
||||||
|
'Plasma Gun':'#f0f',
|
||||||
|
'Railgun':'#0f0',
|
||||||
|
'Lightning Gun':'#ff0',
|
||||||
|
'Shotgun':'#f60'
|
||||||
|
};
|
||||||
|
return '<span style="color:' + (weaponColors[w]||'#fff') + ';font-weight:bold">' + w + '</span>';
|
||||||
|
})(w) + ' ' +
|
||||||
|
sp('chp', '(' + hp + ' HP)');
|
||||||
|
}
|
||||||
|
|
||||||
|
function medal() {
|
||||||
|
var r = Math.random() < 0.5;
|
||||||
|
return sp('ts',ts()) + ' ' +
|
||||||
|
sp('cmt', '[MEDAL]') + ' ' +
|
||||||
|
sp(r?'cr':'cb', r?'(RED)':'(BLUE)') +
|
||||||
|
sp('cp', rand(r ? cfg.redTeam : cfg.blueTeam)) +
|
||||||
|
sp('plain', ' got ') +
|
||||||
|
(function(m){
|
||||||
|
var medalColors = {
|
||||||
|
'EXCELLENT':'#ff0',
|
||||||
|
'MIDAIR':'#0f0',
|
||||||
|
'IMPRESSIVE':'#0cc',
|
||||||
|
'REVENGE':'#f00'
|
||||||
|
};
|
||||||
|
return '<span style="color:' + (medalColors[m]||'#fff') + ';font-weight:bold">' + m + '</span>';
|
||||||
|
})(rand(cfg.medals));
|
||||||
|
}
|
||||||
|
|
||||||
|
function say() {
|
||||||
|
var r = Math.random() < 0.5;
|
||||||
|
return sp('ts',ts()) + ' ' +
|
||||||
|
sp('cst', '[SAY]') + ' ' +
|
||||||
|
sp(r?'cr':'cb', r?'(RED)':'(BLUE)') +
|
||||||
|
sp('cp', rand(r ? cfg.redTeam : cfg.blueTeam)) +
|
||||||
|
': ' + sp('css', rand(cfg.chatMessages));
|
||||||
|
}
|
||||||
|
|
||||||
|
function addLine(h) {
|
||||||
|
var d = document.createElement('div');
|
||||||
|
d.className = 'msg';
|
||||||
|
d.innerHTML = h;
|
||||||
|
feed.appendChild(d);
|
||||||
|
lines.push(d);
|
||||||
|
requestAnimationFrame(function(){ d.classList.add('on'); });
|
||||||
|
if (lines.length > cfg.maxLines) lines.shift().remove();
|
||||||
|
rsEl.textContent = scores.red;
|
||||||
|
bsEl.textContent = scores.blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
function schedule() {
|
||||||
|
setTimeout(function() {
|
||||||
|
var r = Math.random();
|
||||||
|
if (r < cfg.pKill) addLine(kill());
|
||||||
|
else if (r < cfg.pKill + cfg.pMedal) addLine(medal());
|
||||||
|
else addLine(say());
|
||||||
|
schedule();
|
||||||
|
}, randInt(cfg.minDelay, cfg.maxDelay));
|
||||||
|
}
|
||||||
|
|
||||||
|
addLine(sp('plain', '*** '));
|
||||||
|
addLine(sp('plain', '*** QL PyCon Version 0.8.1 starting ***'));
|
||||||
|
addLine(sp('plain', 'Stats stream connected - ready for game events'));
|
||||||
|
|
||||||
|
setInterval(function() {
|
||||||
|
elapsed++;
|
||||||
|
var m = Math.floor(elapsed / 60), s = elapsed % 60;
|
||||||
|
timeEl.textContent = m + ':' + (s < 10 ? '0' : '') + s;
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
setTimeout(schedule, 900);
|
||||||
|
}
|
||||||
|
|
||||||
|
var scriptBody = '(' + iframeScript.toString() + ')(' + JSON.stringify(cfg) + ')';
|
||||||
|
|
||||||
|
return html + '<scr' + 'ipt>' + scriptBody + '</scr' + 'ipt></body></html>';
|
||||||
|
}
|
||||||
|
|
||||||
|
var instanceCount = 0;
|
||||||
|
|
||||||
|
function mount(root, cfg) {
|
||||||
|
var iframe = document.createElement('iframe');
|
||||||
|
iframe.style.cssText = 'width:100%;height:100%;border:none;display:block;';
|
||||||
|
iframe.setAttribute('scrolling', 'no');
|
||||||
|
iframe.setAttribute('title', 'Quake Live terminal');
|
||||||
|
root.appendChild(iframe);
|
||||||
|
var doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||||
|
doc.open();
|
||||||
|
doc.write(buildDoc(cfg));
|
||||||
|
doc.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
global.QuakeTerminal = {
|
||||||
|
init: function(selector, userConfig) {
|
||||||
|
var root = typeof selector === 'string'
|
||||||
|
? document.querySelector(selector)
|
||||||
|
: selector;
|
||||||
|
if (!root) { console.warn('QuakeTerminal: element not found —', selector); return; }
|
||||||
|
|
||||||
|
var cfg = {};
|
||||||
|
for (var k in DEFAULTS) cfg[k] = DEFAULTS[k];
|
||||||
|
for (var k in (userConfig || {})) cfg[k] = userConfig[k];
|
||||||
|
cfg._id = ++instanceCount;
|
||||||
|
|
||||||
|
var details = root.closest('details');
|
||||||
|
if (details && !details.open) {
|
||||||
|
details.addEventListener('toggle', function onToggle() {
|
||||||
|
if (details.open) {
|
||||||
|
details.removeEventListener('toggle', onToggle);
|
||||||
|
mount(root, cfg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
mount(root, cfg);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
defaults: DEFAULTS,
|
||||||
|
};
|
||||||
|
|
||||||
|
}(window));
|
||||||
35
html/js/qlpyconbanner.js
Normal file
35
html/js/qlpyconbanner.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
const text = `
|
||||||
|
_/
|
||||||
|
_/_/_/ _/ _/_/_/ _/ _/ _/_/_/ _/_/ _/_/_/
|
||||||
|
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
|
||||||
|
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
|
||||||
|
_/_/_/ _/ _/_/_/ _/_/_/ _/_/_/ _/_/ _/ _/
|
||||||
|
_/ _/ _/
|
||||||
|
_/ _/ _/_/
|
||||||
|
`;
|
||||||
|
|
||||||
|
function lerp(a, b, t) {
|
||||||
|
return a + (b - a) * t;
|
||||||
|
}
|
||||||
|
|
||||||
|
function color(t) {
|
||||||
|
const c1 = [0, 255, 255]; // cyan
|
||||||
|
const c2 = [255, 0, 255]; // magenta
|
||||||
|
const r = Math.round(lerp(c1[0], c2[0], t));
|
||||||
|
const g = Math.round(lerp(c1[1], c2[1], t));
|
||||||
|
const b = Math.round(lerp(c1[2], c2[2], t));
|
||||||
|
return `rgb(${r},${g},${b})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
let out = "";
|
||||||
|
const lines = text.split("\n");
|
||||||
|
|
||||||
|
lines.forEach(line => {
|
||||||
|
for (let i = 0; i < line.length; i++) {
|
||||||
|
const t = i / Math.max(line.length - 1, 1);
|
||||||
|
out += `<span style="color:${color(t)}">${line[i] || " "}</span>`;
|
||||||
|
}
|
||||||
|
out += "<br/>";
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("qlpyconbanner").innerHTML = out;
|
||||||
158
html/js/snek.js
Normal file
158
html/js/snek.js
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
var snekStarted = false;
|
||||||
|
document.querySelector('#snek-details').addEventListener('toggle', function(e) {
|
||||||
|
if (e.target.open && !snekStarted) {
|
||||||
|
snekStarted = true;
|
||||||
|
|
||||||
|
var canvas = document.getElementById('game');
|
||||||
|
var context = canvas.getContext('2d');
|
||||||
|
|
||||||
|
var grid = 8;
|
||||||
|
var count = 8;
|
||||||
|
|
||||||
|
var snake = {
|
||||||
|
x: 160,
|
||||||
|
y: 160,
|
||||||
|
|
||||||
|
// snake velocity. moves one grid length every frame in either the x or y direction
|
||||||
|
dx: grid,
|
||||||
|
dy: 0,
|
||||||
|
|
||||||
|
// keep track of all grids the snake body occupies
|
||||||
|
cells: [],
|
||||||
|
|
||||||
|
// length of the snake. grows when eating an apple
|
||||||
|
maxCells: 4
|
||||||
|
};
|
||||||
|
|
||||||
|
var cols = Math.floor(canvas.width / grid);
|
||||||
|
var rows = Math.floor(canvas.height / grid);
|
||||||
|
var apple = {
|
||||||
|
x: getRandomInt(0, cols) * grid,
|
||||||
|
y: getRandomInt(0, rows) * grid,
|
||||||
|
};
|
||||||
|
|
||||||
|
// get random whole numbers in a specific range
|
||||||
|
// @see https://stackoverflow.com/a/1527820/2124254
|
||||||
|
function getRandomInt(min, max) {
|
||||||
|
return Math.floor(Math.random() * (max - min)) + min;
|
||||||
|
}
|
||||||
|
|
||||||
|
// game loop
|
||||||
|
function loop() {
|
||||||
|
requestAnimationFrame(loop);
|
||||||
|
|
||||||
|
// slow game loop to 15 fps instead of 60 (60/15 = 4)
|
||||||
|
if (++count < 11) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
count = 0;
|
||||||
|
context.clearRect(0,0,canvas.width,canvas.height);
|
||||||
|
|
||||||
|
context.font = '9px sans-serif';
|
||||||
|
context.fillStyle = '#696969';
|
||||||
|
context.fillText(snake.maxCells, canvas.width - 20, 14);
|
||||||
|
|
||||||
|
// move snake by it's velocity
|
||||||
|
snake.x += snake.dx;
|
||||||
|
snake.y += snake.dy;
|
||||||
|
|
||||||
|
// wrap snake position
|
||||||
|
if (snake.x < 0) {
|
||||||
|
snake.x = (cols - 1) * grid;
|
||||||
|
}
|
||||||
|
else if (snake.x >= canvas.width) {
|
||||||
|
snake.x = 0;
|
||||||
|
}
|
||||||
|
if (snake.y < 0) {
|
||||||
|
snake.y = (rows - 1) * grid;
|
||||||
|
}
|
||||||
|
else if (snake.y >= canvas.height) {
|
||||||
|
snake.y = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// keep track of where snake has been. front of the array is always the head
|
||||||
|
snake.cells.unshift({x: snake.x, y: snake.y});
|
||||||
|
|
||||||
|
// remove cells as we move away from them
|
||||||
|
if (snake.cells.length > snake.maxCells) {
|
||||||
|
snake.cells.pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
// draw apple
|
||||||
|
context.fillStyle = 'cyan';
|
||||||
|
context.fillRect(apple.x, apple.y, grid-1, grid-1);
|
||||||
|
|
||||||
|
// draw snake one cell at a time
|
||||||
|
context.fillStyle = 'magenta';
|
||||||
|
snake.cells.forEach(function(cell, index) {
|
||||||
|
|
||||||
|
// drawing 1 px smaller than the grid creates a grid effect in the snake body so you can see how long it is
|
||||||
|
context.fillRect(cell.x, cell.y, grid-1, grid-1);
|
||||||
|
|
||||||
|
// snake ate apple
|
||||||
|
if (cell.x === apple.x && cell.y === apple.y) {
|
||||||
|
snake.maxCells++;
|
||||||
|
|
||||||
|
// canvas is 400x400 which is 25x25 grids
|
||||||
|
apple.x = getRandomInt(0, cols) * grid;
|
||||||
|
apple.y = getRandomInt(0, rows) * grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
// check collision with all cells after this one (modified bubble sort)
|
||||||
|
for (var i = index + 1; i < snake.cells.length; i++) {
|
||||||
|
|
||||||
|
// snake occupies same space as a body part. reset game
|
||||||
|
if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
|
||||||
|
snake.x = 160;
|
||||||
|
snake.y = 160;
|
||||||
|
snake.cells = [];
|
||||||
|
snake.maxCells = 4;
|
||||||
|
snake.dx = grid;
|
||||||
|
snake.dy = 0;
|
||||||
|
|
||||||
|
apple.x = getRandomInt(0, 25) * grid;
|
||||||
|
apple.y = getRandomInt(0, 25) * grid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// listen to keyboard events to move the snake
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
if (document.getElementById('snek-details').open) {
|
||||||
|
if ([37, 38, 39, 40].indexOf(e.which) !== -1) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// prevent snake from backtracking on itself by checking that it's
|
||||||
|
// not already moving on the same axis (pressing left while moving
|
||||||
|
// left won't do anything, and pressing right while moving left
|
||||||
|
// shouldn't let you collide with your own body)
|
||||||
|
|
||||||
|
// left arrow key
|
||||||
|
if (e.which === 37 && snake.dx === 0) {
|
||||||
|
snake.dx = -grid;
|
||||||
|
snake.dy = 0;
|
||||||
|
}
|
||||||
|
// up arrow key
|
||||||
|
else if (e.which === 38 && snake.dy === 0) {
|
||||||
|
snake.dy = -grid;
|
||||||
|
snake.dx = 0;
|
||||||
|
}
|
||||||
|
// right arrow key
|
||||||
|
else if (e.which === 39 && snake.dx === 0) {
|
||||||
|
snake.dx = grid;
|
||||||
|
snake.dy = 0;
|
||||||
|
}
|
||||||
|
// down arrow key
|
||||||
|
else if (e.which === 40 && snake.dy === 0) {
|
||||||
|
snake.dy = grid;
|
||||||
|
snake.dx = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// start the game
|
||||||
|
requestAnimationFrame(loop);
|
||||||
|
}
|
||||||
|
});
|
||||||
28
html/js/sparks.js
Normal file
28
html/js/sparks.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
$(function() {
|
||||||
|
var body = $('#starshine'),
|
||||||
|
template = $('.template.shine'),
|
||||||
|
stars = 500,
|
||||||
|
sparkle = 50;
|
||||||
|
|
||||||
|
var size = 'small';
|
||||||
|
var createStar = function() {
|
||||||
|
template.clone().removeAttr('id').css({
|
||||||
|
top: (Math.random() * 100) + '%',
|
||||||
|
left: (Math.random() * 100) + '%',
|
||||||
|
webkitAnimationDelay: (Math.random() * sparkle) + 's',
|
||||||
|
mozAnimationDelay: (Math.random() * sparkle) + 's'
|
||||||
|
}).addClass(size).appendTo(body);
|
||||||
|
};
|
||||||
|
|
||||||
|
for(var i = 0; i < stars; i++) {
|
||||||
|
if(i % 2 === 0) {
|
||||||
|
size = 'small';
|
||||||
|
} else if(i % 3 === 0) {
|
||||||
|
size = 'medium';
|
||||||
|
} else {
|
||||||
|
size = 'large';
|
||||||
|
}
|
||||||
|
|
||||||
|
createStar();
|
||||||
|
}
|
||||||
|
});
|
||||||
85
html/js/stars.js
Normal file
85
html/js/stars.js
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
/* stars.js — static starry background for 6bit.ch
|
||||||
|
Requires a <canvas id="stars"> in your HTML:
|
||||||
|
position: fixed; inset: 0; width: 100%; height: 100%;
|
||||||
|
z-index: -2; pointer-events: none; */
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
const canvas = document.getElementById('stars');
|
||||||
|
if (!canvas) return;
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
/* ── CONFIG ───────────────────────────────────────────────────── */
|
||||||
|
const CONFIG = {
|
||||||
|
count: 280,
|
||||||
|
colorVariation: 1.0, // 0 = pure white, 1 = full spectral color
|
||||||
|
bgColor: '#101010',
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ── PALETTE (stellar spectral classes) ──────────────────────── */
|
||||||
|
const PALETTE = [
|
||||||
|
[160, 190, 255], // deep blue (O/B)
|
||||||
|
[200, 220, 255], // blue-white (A)
|
||||||
|
[255, 244, 180], // yellow (F/G)
|
||||||
|
[255, 210, 140], // orange (K)
|
||||||
|
[255, 160, 120], // red-orange (M)
|
||||||
|
[140, 220, 255], // cyan-blue
|
||||||
|
[255, 230, 255], // violet-white
|
||||||
|
];
|
||||||
|
|
||||||
|
function randColor() {
|
||||||
|
const base = PALETTE[Math.floor(Math.random() * PALETTE.length)];
|
||||||
|
const m = CONFIG.colorVariation;
|
||||||
|
return base.map(c => Math.round(255 * (1 - m) + c * m));
|
||||||
|
}
|
||||||
|
|
||||||
|
let W, H;
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
W = canvas.width = window.innerWidth;
|
||||||
|
H = canvas.height = window.innerHeight;
|
||||||
|
draw();
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
if (CONFIG.bgColor) {
|
||||||
|
ctx.fillStyle = CONFIG.bgColor;
|
||||||
|
ctx.fillRect(0, 0, W, H);
|
||||||
|
} else {
|
||||||
|
ctx.clearRect(0, 0, W, H);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < CONFIG.count; i++) {
|
||||||
|
const r = Math.random();
|
||||||
|
const size = r < 0.65
|
||||||
|
? 0.45 + Math.random() * 0.30
|
||||||
|
: r < 0.90
|
||||||
|
? 0.85 + Math.random() * 0.30
|
||||||
|
: 1.40 + Math.random() * 0.40;
|
||||||
|
|
||||||
|
const x = Math.random() * W;
|
||||||
|
const y = Math.random() * H;
|
||||||
|
const alpha = 0.35 + Math.random() * 0.65;
|
||||||
|
const [cr, cg, cb] = randColor();
|
||||||
|
|
||||||
|
/* soft halo on brighter stars */
|
||||||
|
if (size > 1.0) {
|
||||||
|
const halo = ctx.createRadialGradient(x, y, 0, x, y, size * 2.5);
|
||||||
|
halo.addColorStop(0, `rgba(${cr},${cg},${cb},${(alpha * 0.45).toFixed(3)})`);
|
||||||
|
halo.addColorStop(1, `rgba(${cr},${cg},${cb},0)`);
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, size * 2.5, 0, Math.PI * 2);
|
||||||
|
ctx.fillStyle = halo;
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* star core */
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, size, 0, Math.PI * 2);
|
||||||
|
ctx.fillStyle = `rgba(${cr},${cg},${cb},${alpha.toFixed(3)})`;
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
resize();
|
||||||
|
window.addEventListener('resize', resize);
|
||||||
|
})();
|
||||||
@ -43,6 +43,14 @@
|
|||||||
var color = document.getElementById("body");
|
var color = document.getElementById("body");
|
||||||
color.style.backgroundColor = "#042069";
|
color.style.backgroundColor = "#042069";
|
||||||
}
|
}
|
||||||
|
function changeColor1312() {
|
||||||
|
var color = document.getElementById("body");
|
||||||
|
color.style.backgroundColor = "#F1312F";
|
||||||
|
}
|
||||||
|
function changeColor161() {
|
||||||
|
var color = document.getElementById("body");
|
||||||
|
color.style.backgroundColor = "#FFF161";
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body id='body'>
|
<body id='body'>
|
||||||
@ -60,6 +68,8 @@
|
|||||||
<button onclick="changeColor420();">420</button>
|
<button onclick="changeColor420();">420</button>
|
||||||
<button onclick="changeColor69();">69</button>
|
<button onclick="changeColor69();">69</button>
|
||||||
<button onclick="changeColor42069();">42069</button>
|
<button onclick="changeColor42069();">42069</button>
|
||||||
|
<button onclick="changeColor1312();">1312</button>
|
||||||
|
<button onclick="changeColor161();">161</button>
|
||||||
</br>
|
</br>
|
||||||
</br>
|
</br>
|
||||||
</br>
|
</br>
|
||||||
|
|||||||
463
html/style.css
463
html/style.css
@ -1,81 +1,68 @@
|
|||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: "FiraSans", sans-serif;
|
font-family: "deltarune", monospace;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
background-color: #101010;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin:0;
|
margin:0;
|
||||||
background-color: #101010
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-user-select: none; /* Chrome, Safari */
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
-ms-user-select: none; /* old IE/Edge */
|
||||||
|
user-select: none; /* standard */
|
||||||
}
|
}
|
||||||
|
|
||||||
div {box-sizing: border-box;}
|
#hdr {
|
||||||
|
position: block;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 999;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
#starshine {
|
#stars {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: -2;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#particles {
|
||||||
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: -5;
|
pointer-events: none;
|
||||||
overflow: hidden;
|
z-index: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.shine {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
background-image: url(https://6bit.ch/spark.png);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position:center;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 2;
|
|
||||||
color: transparent;
|
|
||||||
-moz-opacity: 0.0;
|
|
||||||
opacity: 0.0;
|
|
||||||
animation: glitter 6s linear 0s infinite normal;
|
|
||||||
-webkit-animation: glitter 6s linear 0s infinite normal;
|
|
||||||
-moz-animation: glitter 8s linear 0s infinite normal;
|
|
||||||
-ms-animation: glitter 8s linear 0s infinite normal;
|
|
||||||
-o-animation: glitter 8s linear 0s infinite normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.shine.small {
|
h1, h2, h3, h4, p {
|
||||||
width: 1px;
|
color: #F0F0F0;
|
||||||
height: 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.shine.medium {
|
.reroll-btn {
|
||||||
width: 3px;
|
background: none;
|
||||||
height: 3px;
|
border: none;
|
||||||
|
color: magenta;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.6;
|
||||||
|
padding: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shine.large {
|
.reroll-btn:hover {
|
||||||
width: 5px;
|
opacity: 1;
|
||||||
height: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*CSS3 keyframes for glittering effect*/
|
|
||||||
@-webkit-keyframes glitter {
|
|
||||||
0% {
|
|
||||||
-webkit-transform: scale(0.3) rotate(0deg);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
25% {
|
|
||||||
-webkit-transform: scale(1) rotate(360deg);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
-webkit-transform: scale(0.3) rotate(720deg);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
-webkit-transform: scale(0.3) rotate(0deg);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.snake-box {
|
.snake-box {
|
||||||
@ -84,7 +71,6 @@ div {box-sizing: border-box;}
|
|||||||
top: 0px;
|
top: 0px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 1%;
|
margin-bottom: 1%;
|
||||||
z-index: 500;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 1%;
|
margin-bottom: 1%;
|
||||||
border: 1px cyan dotted;
|
border: 1px cyan dotted;
|
||||||
@ -92,11 +78,10 @@ div {box-sizing: border-box;}
|
|||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: #101010;
|
flex-shrink: 0;
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 3%;
|
padding: 15px;
|
||||||
background-color: #101010;
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer p {
|
.footer p {
|
||||||
@ -122,18 +107,16 @@ div {box-sizing: border-box;}
|
|||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
|
max-width: 720px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
.main:after {
|
padding-top: 1.5rem;
|
||||||
content:"";
|
flex-grow: 1;
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.col {
|
.col {
|
||||||
position: relative;
|
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -150,78 +133,24 @@ div {box-sizing: border-box;}
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.col-full {
|
||||||
width: 15%;
|
grid-column: 1 / -1;
|
||||||
float: left;
|
|
||||||
left: 3%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left h4 {
|
|
||||||
text-decoration: none;
|
|
||||||
padding-right: 50px;
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-bottom: 2px;
|
|
||||||
margin-right: 0px;
|
|
||||||
margin-left: 0px;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
color: #101010;
|
|
||||||
background: rgb(0,255,255);
|
|
||||||
background: linear-gradient(90deg, rgba(255,0,255,1) 0%, rgba(10,10,10,0) 100%);
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left ul {
|
|
||||||
display: flex;
|
|
||||||
width: auto;
|
|
||||||
padding: 5px;
|
|
||||||
color: #FFFFFF;
|
|
||||||
text-decoration: none;
|
|
||||||
padding-left: 15px;
|
|
||||||
font-size: 15px;
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left li {
|
|
||||||
width: 100%;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left a {
|
|
||||||
color: #FFFFFF;
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
padding-top: 2px;
|
|
||||||
padding-bottom: 2px;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left a:hover {
|
|
||||||
background: linear-gradient(90deg, rgba(255,0,255,0.2) 0%, rgba(10,10,10,0) 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
position: relative;
|
|
||||||
width: 69%;
|
|
||||||
float: left;
|
|
||||||
left: 7%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.contentindex {
|
.contentindex {
|
||||||
padding: 3%;
|
padding: 3%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 2200;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border: 1px;
|
border: 1px;
|
||||||
border-style: dotted;
|
border-style: dotted;
|
||||||
border-color: cyan;
|
border-color: cyan;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
background-color: rgba(16, 16, 16, 0.69);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contentindexart {
|
.contentindexart {
|
||||||
padding: 3%;
|
padding: 3%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 2200;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border: 1px;
|
border: 1px;
|
||||||
border-style: dotted;
|
border-style: dotted;
|
||||||
@ -230,6 +159,69 @@ div {box-sizing: border-box;}
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 50px;
|
gap: 50px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentindexqlpycon {
|
||||||
|
padding: 3%;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px;
|
||||||
|
border-style: dotted;
|
||||||
|
border-color: cyan;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentindexqlpycon pre {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentindexqlpycon h1 {
|
||||||
|
padding: 1.25rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentindexqlpycon h2 {
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentindexqlpycon h3 {
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentindexqlpycon h4 {
|
||||||
|
text-align: left;
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentindexqlpycon p {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentindexqlpycon a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px dotted magenta;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qlpyconcodeblock {
|
||||||
|
font-size: 14px;
|
||||||
|
border: 1px dotted #ff00ff;
|
||||||
|
margin: 1rem;
|
||||||
|
padding: 1rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qlpyconcode {
|
||||||
|
padding: 2px 16px;
|
||||||
|
color: cyan;
|
||||||
|
font-size: 14px;
|
||||||
|
user-select: text;
|
||||||
|
-webkit-user-select: text;
|
||||||
|
-moz-user-select: text;
|
||||||
|
-ms-user-select: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
#qlpycon {
|
||||||
|
max-width: 672px;
|
||||||
|
height: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contentindex img {
|
.contentindex img {
|
||||||
@ -242,9 +234,8 @@ div {box-sizing: border-box;}
|
|||||||
}
|
}
|
||||||
|
|
||||||
.contentindex p {
|
.contentindex p {
|
||||||
margin-top: 5px;
|
margin-top: 0px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 0px;
|
||||||
padding-bottom: 25px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.contentindex a {
|
.contentindex a {
|
||||||
@ -291,100 +282,138 @@ div {box-sizing: border-box;}
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#@-webkit-keyframes glow {
|
.headerimg {
|
||||||
# from {
|
text-align: center;
|
||||||
# text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
|
}
|
||||||
# }
|
|
||||||
#
|
.headerimg img {
|
||||||
# to {
|
height: 80px;
|
||||||
# text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
|
width: auto;
|
||||||
# }
|
margin: 0 auto;
|
||||||
#}
|
}
|
||||||
|
|
||||||
|
.linksblock {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
border: 1px dotted magenta;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
justify-content: center;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
background-color: rgba(16, 16, 16, 0.69);
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkgroup {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkgroup-everywhere {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkgroup-everywhere ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0 1.5rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkgroup h4 {
|
||||||
|
color: #101010;
|
||||||
|
background: linear-gradient(90deg, rgba(255,0,255,1) 0%, rgba(10,10,10,0) 100%);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 2px 4px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkgroup ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkgroup a {
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px;
|
||||||
|
display: block;
|
||||||
|
padding: 2px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkgroup a:hover {
|
||||||
|
color: magenta;
|
||||||
|
}
|
||||||
|
|
||||||
|
.things-block {
|
||||||
|
border: 1px dotted magenta;
|
||||||
|
background-color: rgba(16, 16, 16, 0.69);
|
||||||
|
}
|
||||||
|
|
||||||
|
.things-block summary {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #101010;
|
||||||
|
background: linear-gradient(90deg, rgba(255,0,255,1) 0%, rgba(10,10,10,0) 100%);
|
||||||
|
list-style: none;
|
||||||
|
user-select: none;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.things-block summary::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.things-block summary:hover {
|
||||||
|
background: linear-gradient(90deg, rgba(255,0,255,0.8) 0%, rgba(10,10,10,0) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.things-block summary::after {
|
||||||
|
content: '▼';
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 6px;
|
||||||
|
color: white;
|
||||||
|
transition: transform .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.things-block[open] summary::after {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.things-block[open] summary {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#game {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px dotted cyan;
|
||||||
|
background-color: rgba(16, 16, 16, 0.69);
|
||||||
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: FiraSans;
|
font-family: "FiraSans";
|
||||||
src: url("fonts/FiraSans-Medium.otf") format: ("opentype");
|
font-display: swap;
|
||||||
|
src: url("fonts/FiraSans-Regular.otf") format("opentype");
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 1350px) {
|
@font-face {
|
||||||
|
font-family: "deltarune";
|
||||||
|
src: url("fonts/inconreg.ttf") format('truetype');
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
.main {
|
.main {
|
||||||
overflow: hidden;
|
gap: 1rem;
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
.headerimg {
|
.linksblock {
|
||||||
width 248px;
|
gap: 1rem;
|
||||||
margin-left: 5%;
|
|
||||||
margin-right: 5%;
|
|
||||||
}
|
|
||||||
.headerimg img {
|
|
||||||
display: block;
|
|
||||||
position: center;
|
|
||||||
margin: 0;
|
|
||||||
padding-top: 33px;
|
|
||||||
padding-bottom: 33px;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
max-height: 69px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
.col {
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
.left {
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.navblock h4 {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.navblock ul {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
overflow: hidden;
|
|
||||||
margin-top: 100px;
|
|
||||||
border: 1px cyan dotted;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.contentindex {
|
|
||||||
overflow: hidden;
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.contentindexart {
|
|
||||||
overflow: hidden;
|
|
||||||
border: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: block;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.artitem {
|
|
||||||
padding-top: 25px;
|
|
||||||
padding-bottom: 25px;
|
|
||||||
}
|
}
|
||||||
.artitem img {
|
.artitem img {
|
||||||
padding: 0;
|
height: 100px;
|
||||||
height: auto;
|
|
||||||
width: 69%;
|
|
||||||
}
|
|
||||||
.right p {
|
|
||||||
margin: auto;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.footer {
|
|
||||||
margin-top: 100px;
|
|
||||||
}
|
|
||||||
.footer a {
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
.footer p {
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user