index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
<title>Mehfooz-ur-Rehman · Launch Isles</title>
<meta name="description" content="Explore the work of Mehfooz-ur-Rehman, a full-stack product developer, as a little clay world.">
<meta name="theme-color" content="#bfe3f0">
<link rel="canonical" href="https://mehfooz-ur-rehman.web.app/">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta property="og:type" content="website">
<meta property="og:title" content="Mehfooz-ur-Rehman · Launch Isles">
<meta property="og:description" content="Walk a little clay world where every island is a product I built.">
<meta property="og:url" content="https://mehfooz-ur-rehman.web.app/">
<meta property="og:image" content="https://mehfooz-ur-rehman.web.app/og.png">
<meta name="twitter:card" content="summary_large_image">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap">
<link rel="stylesheet" href="./src/style.css">
</head>
<body>
<canvas id="scene" aria-label="A little clay world of islands. Use the arrow keys or WASD to walk."></canvas>

<div id="loader" class="loader" role="status">
  <div class="loader-tile"><span></span><span></span><span></span></div>
  <p class="loader-text">Raising the islands <b id="loader-pct">0%</b></p>
</div>

<section id="title" class="title" hidden>
  <div class="title-card">
    <p class="eyebrow"><span class="dot"></span>Available for product builds</p>
    <h1>Products built from <em>idea</em> to launch.</h1>
    <p class="title-intro">Hi, I'm Mehfooz-ur-Rehman. Walk around my little world: every island is something I built. Launch my projects, sit on the benches, slide, and say hello at the lighthouse.</p>
    <div class="title-actions">
      <button id="start" class="btn btn-primary" type="button">Start exploring</button>
      <button id="classic-open-title" class="btn btn-ghost" type="button">Classic view</button>
    </div>
    <ul class="keys" aria-label="Controls">
      <li><kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> or click to walk</li>
      <li><kbd>Shift</kbd> run</li>
      <li><kbd>Space</kbd> jump</li>
      <li><kbd>E</kbd> use</li>
      <li><kbd>Q</kbd> wave</li>
      <li><kbd>M</kbd> map</li>
    </ul>
  </div>
</section>

<header id="hud" class="hud" hidden>
  <button class="brand" id="brand" type="button" aria-label="About Mehfooz">
    <img id="brand-img" alt="">
    <span><b>Mehfooz</b><small>Launch Isles</small></span>
  </button>
  <div class="hud-right">
    <button class="chip" id="btn-time" type="button" data-mode="day" aria-label="Time of day: day. Change"><span class="ic ic-time"></span><span class="lbl">Day</span></button>
    <button class="chip" id="btn-map" type="button" aria-label="Open the map (M)"><span class="ic ic-map"></span><span class="lbl">Map</span></button>
    <button class="chip chip-contact" id="btn-contact" type="button" aria-label="Contact Mehfooz"><span class="ic ic-mail"></span><span class="lbl">Contact</span></button>
    <button class="chip" id="btn-sound" type="button" aria-pressed="true" aria-label="Sound on"><span class="ic ic-sound"></span></button>
    <button class="chip chip-solid" id="btn-classic" type="button"><span class="lbl">Classic view</span></button>
  </div>
</header>

<div id="progress" class="progress" hidden>
  <span class="pg-item"><i class="pg-rocket"></i><b id="pg-launched">0</b>/6 launched</span>
  <span class="pg-item"><i class="pg-bulb"></i><b id="pg-bulbs">0</b>/4 ideas</span>
</div>

<div id="hint" class="hint" hidden></div>

<div id="prompt" class="prompt" hidden>
  <span class="prompt-key"><svg viewBox="0 0 40 40" class="ring"><circle cx="20" cy="20" r="17"></circle><circle id="prompt-ring" cx="20" cy="20" r="17"></circle></svg><b id="prompt-key">E</b></span>
  <span id="prompt-text">Use</span>
</div>

<div id="toasts" class="toasts" aria-live="polite"></div>
<div id="bubbles" class="bubbles"></div>

<aside id="panel" class="panel" hidden aria-modal="true" role="dialog" aria-labelledby="panel-title">
  <button id="panel-close" class="panel-close" type="button" aria-label="Close">&times;</button>
  <div id="panel-body" class="panel-body"></div>
</aside>

<section id="map" class="map" hidden aria-label="Island map">
  <div class="map-card">
    <div class="map-head"><h2>Map of the isles</h2><button id="map-close" class="panel-close" type="button" aria-label="Close map">&times;</button></div>
    <svg id="map-svg" viewBox="0 0 100 100"></svg>
    <p class="map-tip">Click a place to walk there.</p>
  </div>
</section>

<div id="touch" class="touch" hidden>
  <div id="joy" class="joy"><div id="joy-knob" class="joy-knob"></div></div>
  <div class="touch-btns">
    <button id="btn-jump" class="tbtn" type="button" aria-label="Jump">Jump</button>
    <button id="btn-action" class="tbtn tbtn-main" type="button" aria-label="Use">Use</button>
  </div>
</div>

<main id="classic" class="classic" hidden tabindex="-1"></main>

<script type="module" src="./src/main.js"></script>
</body>
</html>