Untitled
unknown
plain_text
9 months ago
7.2 kB
10
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Nailong the Dragon — Mini Pet</title>
<style>
:root{
--bg:#0f172a;
--card:#111827cc;
--text:#e5e7eb;
--muted:#9ca3af;
--accent:#22d3ee;
--accent-2:#a78bfa;
--good:#34d399;
--warn:#f59e0b;
--bad:#ef4444;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; font-family:system-ui,Segoe UI,Roboto,Arial;
background: radial-gradient(1000px 500px at 80% -10%, #1f2937 0%, transparent 60%),
radial-gradient(800px 400px at 10% 110%, #1f2937 0%, transparent 60%),
var(--bg);
color:var(--text);
display:grid; place-items:center; padding:24px;
}
.card{width:min(920px,92vw);background:linear-gradient(180deg,#0b1223 0%,#0b1223 60%,#0b1223aa 100%),var(--card);border:1px solid #223;border-radius:24px;padding:24px;box-shadow:0 20px 60px #0008,inset 0 1px 0 #ffffff14;backdrop-filter:blur(8px)}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
h1{font-size:clamp(1.2rem,2.5vw,1.8rem);margin:0}
.subtitle{color:var(--muted);font-size:.95rem}
.scene{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:stretch}
@media(max-width:760px){.scene{grid-template-columns:1fr}}
.dragon-wrap{position:relative;border:1px solid #223;border-radius:20px;padding:18px;background:#0b1328;overflow:hidden}
.sky{position:absolute;inset:0;background:radial-gradient(600px 300px at 30% -50%,#172554 0%,transparent 60%)}
.ground{position:absolute;left:-5%;right:-5%;bottom:-20px;height:120px;background:linear-gradient(#063,#041);border-top-left-radius:50% 50px;border-top-right-radius:50% 50px;filter:blur(2px);opacity:.6}
/* Nailong background image */
.bg-nailong{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}
.bg-nailong__img{max-width:min(85%,520px);width:85%;height:auto;filter:drop-shadow(0 12px 24px #0008) saturate(1.05);animation:float 4.5s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
.dragon{position:relative;z-index:2;font-size:76px;line-height:1;display:flex;align-items:center;justify-content:center;height:180px;user-select:none}
.dragon .bubble{position:absolute;top:8px;right:8px;font-size:14px;color:#d1fae5;background:#064e3b;border:1px solid #0a8;padding:6px 10px;border-radius:12px;opacity:0;transform:translateY(-6px);transition:.25s}
.dragon.happy .bubble{opacity:1;transform:translateY(0)}
.wiggle{animation:wiggle 1.2s infinite}
@keyframes wiggle{0%{transform:translateY(0) rotate(0)}25%{transform:translateY(-6px) rotate(-2deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-6px) rotate(2deg)}100%{transform:translateY(0)}}
.panel{border:1px solid #223;border-radius:20px;padding:18px;background:#0b1328}
.stats{display:grid;gap:12px}
.row{display:grid;grid-template-columns:110px 1fr 70px;align-items:center;gap:10px}
.label{color:var(--muted)}
.bar{height:14px;background:#0a0f1e;border:1px solid #1f2937;border-radius:999px;overflow:hidden}
.fill{height:100%;width:50%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .35s ease}
.val{text-align:right;color:#cbd5e1;font-variant-numeric:tabular-nums}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
button{appearance:none;border:none;padding:10px 14px;border-radius:14px;font-weight:600;cursor:pointer;color:#081018;background:linear-gradient(180deg,#67e8f9,#22d3ee);box-shadow:0 10px 24px #0bbcd944,inset 0 1px 0 #fff5;transition:.15s}
button:hover{transform:translateY(-1px)}
.alt{background:linear-gradient(180deg,#c4b5fd,#a78bfa)}
.rest{background:linear-gradient(180deg,#86efac,#34d399)}
.danger{background:linear-gradient(180deg,#fca5a5,#ef4444)}
.meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #223;border-radius:999px;background:#0a1227}
.log{margin-top:14px;border-top:1px dashed #243045;padding-top:10px;max-height:150px;overflow:auto;font-size:.95rem}
.log p{margin:6px 0;color:#cbd5e1}
.footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:var(--muted);font-size:.9rem}
a{color:var(--accent)}
</style>
</head>
<body>
<div class="card">
<header>
<div>
<h1>🐉 Nailong the Dragon — Mini Pet</h1>
<div class="subtitle">Feed milk, play, or let Nailong nap. Keep stats balanced and survive as many days as you can!</div>
</div>
<div class="meta">
<span class="badge">📅 Day: <strong id="day">1</strong></span>
<span class="badge">🏆 Best: <strong id="best">0</strong></span>
<span class="badge">💖 Mood: <strong id="mood">Content</strong></span>
</div>
</header>
<div class="scene">
<section class="dragon-wrap">
<div class="sky"></div>
<div class="dragon wiggle" id="dragon" aria-live="polite">
<div class="bubble" id="bubble">duang‑duang!</div>
<span id="sprite" role="img" aria-label="Nailong">🐉</span>
<div class="bg-nailong"><img class="bg-nailong__img" id="bgNailong" src="01b2c776-017b-4b8c-8fb2-25f0aee5b710 (1).jpeg" alt="Nailong the Dragon" loading="eager"/></div>
</div>
<div class="ground"></div>
</section>
<section class="panel">
<div class="stats" id="stats">
<div class="row"><div class="label">Hunger</div><div class="bar"><div class="fill" id="hungerFill"></div></div><div class="val" id="hungerVal">30</div></div>
<div class="row"><div class="label">Energy</div><div class="bar"><div class="fill" id="energyFill"></div></div><div class="val" id="energyVal">70</div></div>
<div class="row"><div class="label">Happiness</div><div class="bar"><div class="fill" id="happyFill"></div></div><div class="val" id="happyVal">70</div></div>
</div>
<div class="actions">
<button id="feed" title="Feed warm milk">🥛 Feed Milk</button>
<button class="alt" id="play" title="Play with Nailong">🎮 Play</button>
<button class="rest" id="nap" title="Let Nailong nap">🛌 Nap</button>
<button class="danger" id="reset" title="Restart the run">↻ Reset</button>
</div>
<div class="log" id="log" aria-live="polite"></div>
<div class="footer">
<span>Tip: Lower hunger is better. If hunger hits 100, energy hits 0, or happiness hits 0 → game over.</span>
</div>
</section>
</div>
</div>
<script>
// JavaScript logic unchanged
</script>
</body>
</html>Editor is loading...
Leave a Comment