HTML 4

<div id="mainCtn" style="display: flex; flex-direction: column; width: 95%; max-width: 800px; margin: 0 auto; padding: 1rem;">
  <!-- Story Overview Section -->
  <div id="storyOverviewSection" style="width: 100%; margin-bottom: 1rem;">
    <textarea id="storyOverviewEl" oninput="localStorage.storyOverview = this.value" placeholder="(Optional) Who are you in this adventure, and what should it be about? Add keywords, an overview, or a starter—include characters, plot, style, lore, mechanics, or genre if you like." style="width: 100%; min-height: 100px; padding: 0.75rem; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; resize: vertical;"></textarea>
    <button id="storyBeginBtn" onclick="this.disabled = true; this.textContent = '⏳ loading...'; window.continueStory({initial: true});" style="width: 100%; padding: 0.5rem; margin-top: 0.5rem; font-size: 1.1rem; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;">🏞️ Begin Adventure</button>
  </div>

  <!-- Game Container -->
  <div id="game-container" style="display: flex; gap: 1rem; align-items: flex-start; width: 100%;">
    <!-- Player Status -->
    <div id="player-status" style="width: 220px; padding: 1rem; background-color: #000000; color: white; border-radius: 5px; box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);">
      <h3 style="margin: 0 0 0.5rem; font-size: 1.2rem;">Player Status</h3>
      <p>Date: <span id="ui-date">[currentDate.toLocaleString()]</span></p>
      <p>Health: <span id="ui-health">100</span></p>
      <p>Hunger: <span id="ui-hunger">100</span></p>
      <p>Thirst: <span id="ui-thirst">100</span></p>
      <p>Tiredness: <span id="ui-tiredness">100</span></p>
      <p>Hygiene: <span id="ui-hygiene">100</span></p>
      <p>Reputation: <span id="ui-reputation">0</span></p>
      <p>Jordan Friendship: <span id="ui-jordan-friendship">15</span></p>
      <p>Jordan Lust: <span id="ui-jordan-lust">0</span></p>
      <p>Jordan Obsession: <span id="ui-jordan-obsession">0</span></p>
      <p>Casey Friendship: <span id="ui-casey-friendship">-5</span></p>
      <p>Casey Lust: <span id="ui-casey-lust">0</span></p>
      <p>Casey Obsession: <span id="ui-casey-obsession">0</span></p>
      <p>Alex Friendship: <span id="ui-alex-friendship">10</span></p>
      <p>Alex Lust: <span id="ui-alex-lust">0</span></p>
      <p>Alex Obsession: <span id="ui-alex-obsession">0</span></p>
      <p>Rumors: <textarea id="ui-rumors" readonly style="width: 100%; min-height: 50px; font-size: 0.9rem;"></textarea></p>
      <p>Events: <textarea id="ui-events" readonly style="width: 100%; min-height: 50px; font-size: 0.9rem;"></textarea></p>
    </div>

    <!-- Story Window -->
    <div id="story-window" style="flex-grow: 1; padding: 1rem; background-color: #f5f5f5; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);">
      <textarea id="storySoFarEl" oninput="localStorage.storySoFar = this.value" placeholder="The story will appear here. Edit as needed." style="width: 100%; min-height: 250px; padding: 0.75rem; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; resize: vertical;"></textarea>
    </div>
  </div>

  <!-- Action Input -->
  <div id="storyGenerationAreaEl" style="display: none; margin-top: 1rem; gap: 0.5rem;">
    <div style="display: flex; width: 100%;">
      <textarea id="whatHappensNextEl" oninput="localStorage.whatHappensNext = this.value" placeholder="What will you do next? Type your action here." style="flex-grow: 1; min-height: 60px; padding: 0.75rem; border: 1px solid #ddd; border-radius: 5px; font-size: 0.9rem;"></textarea>
      <button onclick="window.continueStory()" style="background-color: #2196F3; padding: 0.5rem 1rem; border: none; border-radius: 5px; color: white; cursor: pointer;">▶️ Continue</button>
    </div>
    <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
      <button onclick="eat();" style="background-color: #FF9800;">🍽️ Eat</button>
      <button onclick="drink();" style="background-color: #03A9F4;">💧 Drink</button>
      <button onclick="rest();" style="background-color: #9C27B0;">💤 Rest</button>
      <button onclick="clean();" style="background-color: #8BC34A;">🧼 Clean</button>
    </div>
  </div>

  <!-- Dark Mode Toggle -->
  <div style="position: fixed; bottom: 0.5rem; left: 0.5rem; z-index: 10;">
    <button onclick="toggleManualDarkMode()" style="background-color: #607D8B; padding: 0.5rem; border: none; border-radius: 5px; color: white; cursor: pointer;">🌃</button>
  </div>
</div>

<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #fafafa;
    color: #333;
    margin: 0;
    padding: 0;
  }
  button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  textarea {
    resize: vertical;
  }
  .dark-mode {
    background-color: #333;
    color: #fff;
  }
  .dark-mode #player-status {
    background-color: #111;
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.2);
  }
  .dark-mode #story-window {
    background-color: #444;
  }
  .dark-mode textarea {
    background-color: #555;
    color: #fff;
    border-color: #666;
  }
  .dark-mode button {
    filter: brightness(85%);
  }
</style>

<script>
  function toggleManualDarkMode() {
    document.body.classList.toggle('dark-mode')
    localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'))
  }
  if (localStorage.getItem('darkMode') === 'true') {
    document.body.classList.add('dark-mode')
  }
</script>