<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../css/style.css">
  <script src="../js/update.js" defer></script>
  <script src="../js/script.js" defer></script>
</head>
<body>
  <main>
    <h1>SAVE / LOAD</h1>
    <hr class="hr1">
    <div id="ScreenSave" class="section-title">How to View the Save Screen</div>
    <img src="../img/ScreenSave.png" alt="Save Screen" class="content-image-screen">
    <table class="system-table">
      <tr><th>Heading</th>               <td>If it says 'Save,' it's the save screen.</td></tr>
      <tr><th>Save Slots</th>           <td>10 available save slots will be displayed.</td></tr>
      <tr><th>Close Button</th>         <td>Press to close the save screen.</td></tr>
    </table>
    <p class="annotation">
      ■ The AutoSave will not be displayed on the save screen.<br>
      ■ There are 10 user save slots numbered from 01 to 10 for manual saving.<br>
      ■ Save slots with no data will not be shown.<br>
      ■ 'Day:XXX' indicates the progress of the saved data in terms of game days.<br>
      ■ The date and time are recorded at the moment the save is made.<br>
    </p>
    
    <div id="ScreenLoad" class="section-title">How to View the Load Screen</div>
    <img src="../img/ScreenLoad.png" alt="Load Screen" class="content-image">
    <table class="system-table">
      <tr><th>Heading</th>               <td>If it says 'Load,' it's the load screen.</td></tr>
      <tr><th>AutoSave Slot</th>         <td>'Auto.' refers to AutoSave.</td></tr>
      <tr><th>Save Slots</th>            <td>Up to 10 slots will be displayed for loading.</td></tr>
      <tr><th>Close Button</th>          <td>Press to close the load screen.</td></tr>
    </table>

    <div id="HowtoSave" class="section-title">How to Save</div>
    <h2>■ AutoSave Method (Automatic Saving)</h2>
    <img src="../img/ScreenAutoSave.png" alt="AutoSave Screen" class="content-image-screen">
    <p>When you press <b>'Next Day'</b> at the end of a game day, the game is automatically saved.</p>

    <h2>■ Manual Save Method (User Save)</h2>
    <img src="../img/ScreenSmartPhone.png" alt="User Save Screen" class="content-image-screen">
    <p>▲ Open the Smartphone Trigger and you will find the <b>'Save'</b> option inside the app.</p>

    <div id="HowtoLoad" class="section-title">How to Load</div>
    <h2>■ Loading Method</h2>
    <img src="../img/ScreenSmartPhone.png" alt="Load Screen" class="content-image-screen">
    <p>▲ Open the Smartphone Trigger and you will find the <b>'Load'</b> option inside the app.</p>
    <hr class="hr1">
  </main>
</body>
</html>