index.html (view raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>EMOJESIS — a tiny universe made of symbols</title>
<meta name="description" content="EMOJESIS: a tiny universe made of symbols. Combine four primordial emojis into weather, life, civilization, and stranger things. No accounts, no tracking, no ads.">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#a3501c">
<link rel="alternate" type="application/atom+xml" title="EMOJESIS updates" href="feed.xml">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="skip-link" href="#creation">Skip to the laboratory</a>
<div id="live" class="sr-only" aria-live="polite"></div>
<header class="site-header">
<div class="brand">
<button id="titleEmoji" class="title-emoji" aria-label="EMOJESIS logo" title="EMOJESIS">🌌</button>
<div class="brand-text">
<h1>EMOJESIS</h1>
<p class="tagline">A tiny universe made of symbols.</p>
</div>
</div>
<nav class="header-actions" aria-label="Game actions">
<button id="btnDaily" class="hbtn" aria-label="Daily challenge" title="Daily challenge">📅<span id="dailyDot" class="dot" hidden></span></button>
<button id="btnHint" class="hbtn" aria-label="Use a hint" title="Hint"><span aria-hidden="true">💡</span><span id="hintCount" class="badge">3</span></button>
<button id="btnStats" class="hbtn" aria-label="Statistics" title="Statistics">📊</button>
<button id="btnAbout" class="hbtn" aria-label="About and settings" title="About & settings">ℹ️</button>
<button id="btnSound" class="hbtn" aria-label="Toggle sound" title="Sound">🔊</button>
<button id="btnTheme" class="hbtn" aria-label="Toggle theme" title="Theme">🌗</button>
</nav>
</header>
<!-- World view: a quiet sky/land/sea strip that fills in as you discover -->
<section id="world" class="world" aria-label="Your world">
<button id="worldToggle" class="world-toggle" aria-expanded="true" aria-controls="worldStrip">🗺️ world</button>
<div id="worldStrip" class="world-strip">
<div class="w-band w-band-sky">
<div class="w-slot w-sky" data-el="sun"><span>☀️</span></div>
<div class="w-slot w-sky" data-el="moon"><span>🌙</span></div>
<div class="w-slot w-sky anim-twinkle" data-el="star"><span>⭐</span></div>
<div class="w-slot w-sky anim-drift" data-el="cloud"><span>☁️</span></div>
<div class="w-slot w-sky anim-fall" data-el="rain"><span>🌧️</span></div>
<div class="w-slot w-sky" data-el="rainbow"><span>🌈</span></div>
<div class="w-slot w-sky anim-drift" data-el="satellite"><span>🛰️</span></div>
<div class="w-slot w-sky anim-hover" data-el="ufo"><span>🛸</span></div>
<div class="w-slot w-air anim-flap" data-el="bird"><span>🐦</span></div>
<div class="w-slot w-air anim-flap" data-el="owl"><span>🦉</span></div>
</div>
<div class="w-band w-band-land">
<div class="w-slot w-land" data-el="mountain"><span>⛰️</span></div>
<div class="w-slot w-land anim-sway" data-el="tree"><span>🌳</span></div>
<div class="w-slot w-land anim-sway" data-el="forest"><span>🌲</span></div>
<div class="w-slot w-land anim-sway" data-el="flower"><span>🌸</span></div>
<div class="w-slot w-land" data-el="house"><span>🏠</span></div>
<div class="w-slot w-land" data-el="city"><span>🏙️</span></div>
<div class="w-slot w-land anim-hover" data-el="robot"><span>🤖</span></div>
<div class="w-slot w-land anim-rise" data-el="rocket"><span>🚀</span></div>
<div class="w-slot w-misc anim-hover" data-el="ghost"><span>👻</span></div>
</div>
<div class="w-band w-band-sea">
<div class="w-slot w-sea anim-bob" data-el="fish"><span>🐟</span></div>
<div class="w-slot w-sea anim-bob" data-el="whale"><span>🐋</span></div>
<div class="w-slot w-sea" data-el="ocean"><span>🌊</span></div>
</div>
</div>
</section>
<main id="main">
<!-- Creation area -->
<section id="creation" class="creation" aria-label="Combination laboratory">
<div class="slots">
<button id="slotA" class="slot" aria-label="First ingredient slot. Empty." data-filled="false">
<span class="slot-emoji" aria-hidden="true">·</span>
<span class="slot-name">first</span>
</button>
<span class="plus" aria-hidden="true">+</span>
<button id="slotB" class="slot" aria-label="Second ingredient slot. Empty." data-filled="false">
<span class="slot-emoji" aria-hidden="true">·</span>
<span class="slot-name">second</span>
</button>
</div>
<div class="creation-actions">
<button id="btnSwap" class="abtn" aria-label="Swap the two ingredients" title="Swap" disabled>⇄</button>
<button id="btnCombine" class="combine-btn" disabled>Combine ✨</button>
<button id="btnRepeat" class="abtn" aria-label="Repeat last successful combination" title="Repeat last combination" disabled>⟳</button>
<button id="btnClear" class="abtn" aria-label="Clear both slots" title="Clear slots" disabled>✕</button>
</div>
<div id="comboHistory" class="combo-history" aria-label="Recent combinations"></div>
<div id="result" class="result" aria-hidden="true">
<span id="resultEmoji" class="result-emoji"></span>
<span id="resultName" class="result-name"></span>
</div>
<p id="message" class="message">Combine two symbols and see what happens.</p>
<p id="dailyLine" class="daily-line" hidden></p>
</section>
<!-- Inventory -->
<section id="inventory" class="inventory" aria-label="Your collection">
<div class="inv-head">
<button id="invToggle" class="inv-toggle" aria-expanded="true" aria-controls="invBody">
🎒 Collection <span id="invCount" class="inv-count"></span>
</button>
<div id="invBody" class="inv-body">
<div class="inv-tools">
<input id="invSearch" type="search" placeholder="Search elements…" aria-label="Search elements by name">
<select id="invSort" aria-label="Sort elements">
<option value="order">Discovery order</option>
<option value="alpha">Alphabetical</option>
</select>
<button id="invFav" class="chip" aria-pressed="false" title="Show favorites only">⭐</button>
</div>
<div id="invCats" class="inv-cats" role="group" aria-label="Filter by category"></div>
<div id="invGrid" class="inv-grid"></div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<span>EMOJESIS — a tiny universe made of symbols · Pablo Murad, 2026 ·
<a href="https://github.com/pablomurad/emojesis" rel="me noopener">source</a> ·
<button id="footAbout" class="linklike">about</button> ·
<button id="footTerminal" class="linklike mono" aria-label="Open terminal">>_</button>
</span>
</footer>
<!-- Daily challenge modal -->
<div id="modalDaily" class="modal" role="dialog" aria-modal="true" aria-labelledby="dailyTitle" hidden>
<div class="modal-card">
<h2 id="dailyTitle">📅 Daily challenge</h2>
<p id="dailyGoal" class="daily-goal"></p>
<p id="dailyProgress" class="muted"></p>
<pre id="dailyShare" class="share-block" aria-label="Shareable result"></pre>
<div class="modal-actions">
<button id="btnCopyDaily" class="abtn">Copy result</button>
<button class="abtn modal-close" data-close="modalDaily">Close</button>
</div>
</div>
</div>
<!-- Stats modal -->
<div id="modalStats" class="modal" role="dialog" aria-modal="true" aria-labelledby="statsTitle" hidden>
<div class="modal-card">
<h2 id="statsTitle">📊 Notebook margins</h2>
<dl id="statsList" class="stats-list"></dl>
<div class="modal-actions">
<button class="abtn modal-close" data-close="modalStats">Close</button>
</div>
</div>
</div>
<!-- Journal (element detail) modal -->
<div id="modalJournal" class="modal" role="dialog" aria-modal="true" aria-labelledby="journalTitle" hidden>
<div class="modal-card">
<div id="journalBody"></div>
<div class="modal-actions">
<button id="journalUse" class="abtn">Send to slot</button>
<button class="abtn modal-close" data-close="modalJournal">Close</button>
</div>
</div>
</div>
<!-- About / settings modal -->
<div id="modalAbout" class="modal" role="dialog" aria-modal="true" aria-labelledby="aboutTitle" hidden>
<div class="modal-card">
<h2 id="aboutTitle">ℹ️ About EMOJESIS</h2>
<p><strong>EMOJESIS</strong> — a tiny universe made of symbols. You begin with four primordial
emojis and combine them into weather, life, civilization, and stranger things.</p>
<p>Developed by <strong>Pablo Murad</strong> (2026). No accounts, no tracking, no ads, no currencies.
Your universe lives in your browser and nowhere else.</p>
<ul class="about-links">
<li><a href="https://github.com/pablomurad/emojesis" rel="me noopener">Source code</a></li>
<li><a href="CHANGELOG.md">Changelog</a></li>
<li><a href="feed.xml">Update feed (Atom)</a></li>
<li><a href="README.md">README</a></li>
</ul>
<h3>Settings</h3>
<div class="settings-grid">
<label>Theme
<select id="setTheme">
<option value="auto">Follow system</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</label>
<label class="checkline"><input type="checkbox" id="setSound"> Sound effects</label>
</div>
<div class="modal-actions wrap">
<button id="btnExport" class="abtn">Export save</button>
<button id="btnImport" class="abtn">Import save</button>
<input type="file" id="importFile" accept="application/json,.json" hidden>
<button id="btnReset" class="abtn danger">Reset universe</button>
</div>
<div id="resetConfirm" class="reset-confirm" hidden>
<p>Everything you discovered will be forgotten. Really?</p>
<button id="btnResetYes" class="abtn danger">Yes, forget it all</button>
<button id="btnResetNo" class="abtn">Keep my universe</button>
</div>
<div class="modal-actions">
<button class="abtn modal-close" data-close="modalAbout">Close</button>
</div>
</div>
</div>
<!-- Terminal easter egg -->
<div id="modalTerm" class="modal" role="dialog" aria-modal="true" aria-labelledby="termTitle" hidden>
<div class="modal-card term-card">
<h2 id="termTitle" class="mono">guest@emojesis:~</h2>
<div id="termOut" class="term-out mono" aria-live="polite"></div>
<form id="termForm" class="term-form mono">
<span aria-hidden="true">> </span>
<input id="termInput" type="text" autocomplete="off" spellcheck="false" aria-label="Terminal input" placeholder="type 'help'">
</form>
<div class="modal-actions">
<button class="abtn modal-close" data-close="modalTerm">Close</button>
</div>
</div>
</div>
<!-- Onboarding -->
<div id="onboarding" class="onboarding" role="dialog" aria-modal="true" aria-labelledby="obTitle" hidden>
<div class="ob-card">
<h2 id="obTitle">EMOJESIS</h2>
<p class="tagline">A tiny universe made of symbols.</p>
<div class="ob-primordials" aria-label="The four primordial elements">
<span class="ob-el" data-el="fire">🔥<small>Fire</small></span>
<span class="ob-el" data-el="water">💧<small>Water</small></span>
<span class="ob-el" data-el="earth">🪨<small>Earth</small></span>
<span class="ob-el" data-el="air">💨<small>Air</small></span>
</div>
<p>Everything begins with four symbols. Combine them and see what happens.</p>
<p class="ob-hint">Try <span class="mono">🔥 + 💧</span> — or don't. The universe is patient.</p>
<button id="btnBegin" class="combine-btn">Begin</button>
</div>
</div>
<div id="secretFlash" class="secret-flash" aria-hidden="true"></div>
<div id="toasts" class="toasts" aria-hidden="false"></div>
<script src="js/data.js"></script>
<script src="js/app.js"></script>
</body>
</html>
|