135 lines
6.5 KiB
HTML
135 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>den.js — there is a kobold on this page</title>
|
|
<style>
|
|
:root{
|
|
--bg1:#2a1e3d; --bg2:#3d2a55; --panel:#241a36; --panel2:#2f2145;
|
|
--pink:#ffb3de; --mint:#a8ffe0; --lav:#c9b8ff; --hot:#ff6ec7;
|
|
--ink:#f2e9ff; --dim:#9d8bc4;
|
|
}
|
|
*{box-sizing:border-box;}
|
|
body{
|
|
margin:0; padding:24px 16px 80px;
|
|
color:var(--ink);
|
|
font-family:"Comic Sans MS","Comic Sans","Segoe UI",sans-serif;
|
|
background:
|
|
radial-gradient(1.5px 1.5px at 30px 40px,#ffffffcc,transparent),
|
|
radial-gradient(1px 1px at 120px 90px,#ffb3decc,transparent),
|
|
radial-gradient(2px 2px at 200px 30px,#a8ffe0aa,transparent),
|
|
linear-gradient(160deg,var(--bg1),var(--bg2) 60%,#1e1530);
|
|
background-size:260px 200px,260px 200px,260px 200px,cover;
|
|
background-attachment:fixed;
|
|
}
|
|
.wrap{max-width:720px;margin:0 auto;}
|
|
h1{
|
|
font-size:clamp(34px,8vw,58px); margin:0; text-align:center;
|
|
background:linear-gradient(90deg,var(--pink),var(--mint),var(--lav),var(--pink));
|
|
-webkit-background-clip:text; background-clip:text; color:transparent;
|
|
filter:drop-shadow(3px 3px 0 #00000088);
|
|
}
|
|
.sub{text-align:center;color:var(--dim);font-size:13px;margin:6px 0 20px;}
|
|
.panel{
|
|
border:3px ridge var(--lav); border-radius:12px;
|
|
background:var(--panel); padding:14px 16px; margin-bottom:12px;
|
|
}
|
|
.panel.alt{background:var(--panel2);}
|
|
h2{font-size:16px;margin:0 0 8px;color:var(--mint);border-bottom:2px dashed var(--pink);padding-bottom:4px;}
|
|
h2::before{content:"🐾 ";}
|
|
p{font-size:14px;line-height:1.5;margin:6px 0;}
|
|
code{background:#1b1229;color:var(--mint);padding:1px 5px;border-radius:4px;font-size:12px;}
|
|
pre{background:#0d0818;border:2px inset #6b5a8a;border-radius:8px;padding:10px;overflow-x:auto;}
|
|
pre code{background:none;padding:0;}
|
|
.loot{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px;}
|
|
.badge{
|
|
width:88px;height:31px;display:flex;align-items:center;justify-content:center;
|
|
font-size:9px;font-weight:bold;text-align:center;font-family:Verdana,Arial,sans-serif;
|
|
border:1px solid #fff;line-height:1.1;
|
|
}
|
|
.b1{background:#000;color:#0f0;} .b2{background:linear-gradient(#37276b,#1e1443);color:var(--mint);}
|
|
.b3{background:#fff3a8;color:#1e1530;} .b4{background:linear-gradient(90deg,var(--hot),var(--mint));color:#1e1530;}
|
|
button{
|
|
font-family:inherit;font-size:13px;font-weight:bold;color:#1e1530;
|
|
background:linear-gradient(180deg,var(--pink),var(--hot));
|
|
border:3px outset #ffd6ef;border-radius:10px;padding:5px 12px;cursor:pointer;margin:3px;
|
|
}
|
|
button:active{border-style:inset;}
|
|
kbd{background:#1b1229;border:1px solid #6b5a8a;border-radius:4px;padding:1px 5px;font-size:11px;}
|
|
.hint{font-size:12px;color:var(--dim);}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<h1>den.js</h1>
|
|
<p class="sub">there is a kobold on this page. you cannot see him. move your mouse.</p>
|
|
|
|
<div class="panel" data-den-poi="yip (this is the part about me)|yip!!">
|
|
<h2>hello</h2>
|
|
<p>He is invisible. What you can see is his paw prints, his little comments,
|
|
and — if you leave him alone long enough — the bed he drags out.</p>
|
|
<p class="hint">Give him a moment to climb out of his burrow.</p>
|
|
</div>
|
|
|
|
<div class="panel alt" data-den-poi="yip? (are they talking about me)">
|
|
<h2>try this</h2>
|
|
<p><b>Move your cursor</b> — he comes to it. Stop, and he waits, then gets bored and wanders off.</p>
|
|
<p><b>Click him</b> — where the prints are, not where your cursor is. He yips and spins. Do it ten times and he decides you're friends.</p>
|
|
<p><b>Type <code>yip</code></b> — anywhere on the page. He answers.</p>
|
|
<p><b>Open the <code>>_ den</code> tab</b> in the corner, then try <code>come</code>, <code>fetch</code>, <code>status</code>, or <code>name crumb</code>.</p>
|
|
<p><b>Press</b> <kbd>↑</kbd><kbd>↑</kbd><kbd>↓</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>→</kbd><kbd>←</kbd><kbd>→</kbd><kbd>B</kbd><kbd>A</kbd> — or just type <code>zoomies</code>.</p>
|
|
<p><b>Scroll fast</b> — he gets carried off with the page and has to sprint back.</p>
|
|
<p><b>Wait ten minutes</b> without touching anything. He goes to bed.</p>
|
|
</div>
|
|
|
|
<div class="panel" data-den-poi="yip (mine)|yip!! (do not touch)">
|
|
<h2>things he can steal</h2>
|
|
<p>These are marked <code>data-den-steal</code>. Nothing is stealable unless
|
|
you say so. Hit <code>fetch</code> in the shell to make him take one now —
|
|
he always brings it back.</p>
|
|
<div class="loot">
|
|
<span class="badge b1" data-den-steal>NOTEPAD.EXE</span>
|
|
<span class="badge b2" data-den-steal>apache 4 life</span>
|
|
<span class="badge b3" data-den-steal>Y2K COMPLIANT</span>
|
|
<span class="badge b4" data-den-steal>free gifs</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel alt" data-den-poi="yip? (what does this one do)">
|
|
<h2>events</h2>
|
|
<p>Pages tell him what happened; he decides how to feel about it.</p>
|
|
<p style="text-align:center;">
|
|
<button onclick="denEvent('celebrate',{text:'YIP!! (something good happened)'})">celebrate</button>
|
|
<button onclick="denEvent('investigate',{el:'#thing',text:'yip? (what is this)'})">investigate</button>
|
|
<button onclick="denEvent('alarm',{text:'YIP?! (INTRUDER)'})">alarm</button>
|
|
<button onclick="denEvent('mischief')">mischief</button>
|
|
<button onclick="denEvent('sleepy')">sleepy</button>
|
|
</p>
|
|
<p style="text-align:center;">
|
|
<button onclick="denEvent('treat')">drop a treat</button>
|
|
<button onclick="denWeather('rain')">rain</button>
|
|
<button onclick="denWeather('snow')">snow</button>
|
|
<button onclick="denWeather('clear')">clear skies</button>
|
|
</p>
|
|
<p class="hint" style="text-align:center;">Rain sends him under the nearest panel to sulk. Snow does the opposite.</p>
|
|
<p id="thing" class="hint" style="text-align:center;">↑ "investigate" sends him to this line, specifically.</p>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>the whole integration</h2>
|
|
<pre><code><script src="/den.js"></script></code></pre>
|
|
<p>Optional markup:</p>
|
|
<pre><code><div data-den-poi="yip (sign it)"> <!-- he visits and comments -->
|
|
<span data-den-steal> <!-- he may take this -->
|
|
<span data-den-others></span> <!-- how many others are here --></code></pre>
|
|
</div>
|
|
|
|
<p class="sub">MIT licensed. if you put him on your site, he's yours now.</p>
|
|
</div>
|
|
|
|
<script src="../src/den.js"></script>
|
|
</body>
|
|
</html>
|