coachscolourtrainingtool/index.html at main · magichew/coachscolourtrainingtool · GitHub

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
<!-- =========================================================
 Coach’s Colour Tool
 File: index.html
 Description: Main HTML structure – references style.css and script.js
 ========================================================= -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Coach’s Colour Tool</title>

  <!-- Styles -->
  <link rel="stylesheet" href="style.css" />
  <link rel="apple-touch-icon" href="icon.png">
  <link rel="icon" type="image/png" sizes="512x512" href="icon.png">
  <meta name="apple-mobile-web-app-title" content="Colour Coach">
</head>
<body>

  <!-- ========== HOME SCREEN ========== -->
  <div id="homeScreen" class="screen">
    <h1>Coach’s Colour Tool</h1>
    <div class="home-actions">
      <button id="homeImportBtn" class="small-btn">Import</button>
      <button id="homeExportBtn" class="small-btn">Export</button>
    </div>
    <div class="tile-grid" id="tileGrid"></div>
    <button class="create-btn" id="createBtn">+ Create New Session</button>
  </div>

  <!-- ========== EXPORT MODAL ========== -->
  <div id="exportOverlay" class="overlay">
    <div class="modal">
      <h3>Export Preset</h3>
      <select id="exportSelect"></select>
      <div class="modal-buttons">
        <button class="confirm-green" id="exportConfirm">Export</button>
        <button class="cancel" id="exportCancel">Cancel</button>
      </div>
    </div>
  </div>

  <!-- ========== DELETE CONFIRMATION MODAL ========== -->
  <div id="deleteOverlay" class="overlay">
    <div class="modal">
      <h3 id="deleteText"></h3>
      <div class="modal-buttons">
        <button class="confirm-red" id="deleteConfirm">Delete</button>
        <button class="cancel" id="deleteCancel">Cancel</button>
      </div>
    </div>
  </div>

  <!-- ========== SETUP SCREEN ========== -->
  <div id="setupScreen" class="screen">
    <div class="menu-card">
      <h1>Setup Session</h1>
      <h2>Presets</h2>
      <select id="presetSelect"><option value="">Select a preset...</option></select>
      <div style="display:flex;gap:.5rem;justify-content:center;">
        <button id="savePresetBtn" style="background:#3498db;color:#fff;">Save</button>
        <button id="deletePresetBtn" style="background:#e67e22;color:#fff;">Delete</button>
      </div>
      <h2>Colours</h2>
      <label>Red<input type="checkbox" id="red" checked></label>
      <label>Green<input type="checkbox" id="green" checked></label>
      <label>Blue<input type="checkbox" id="blue"></label>
      <label>Yellow<input type="checkbox" id="yellow"></label>

      <h2>Timing</h2>
      <label>Min <input type="number" id="minT" value="1" step="0.1"> s</label>
      <label>Max <input type="number" id="maxT" value="3" step="0.1"> s</label>

      <h2>Options</h2>
      <label>Show numbers<input type="checkbox" id="numbers"></label>
      <div id="numberOptions" style="display:none;">
        <label>One number<input type="radio" name="numMode" id="oneNumber" value="one" checked></label>
        <label id="twoNumbersOption" style="display:none;">Two numbers<input type="radio" name="numMode" id="twoNumbers" value="two"></label>
      </div>
      <label>Split screen<input type="checkbox" id="splitMode"></label>
      <div id="splitDirectionBox" style="display:none;">
        <label>Direction
          <select id="splitDirection">
            <option value="right">Left–Right</option>
            <option value="bottom">Top–Bottom</option>
          </select>
        </label>
      </div>
      <div style="text-align:center;margin-top:1rem;">
        <button id="startBtn">Start Session</button>
      </div>
    </div>
    <button id="homeFromSetup">🏠 Home</button>
  </div>

  <!-- ========== FLASH SCREEN ========== -->
  <div id="flashScreen" class="screen">
    <div id="numberOverlay"></div>
    <div id="numLeft"></div><div id="numRight"></div>
    <div id="numTop"></div><div id="numBottom"></div>
    <button id="homeFromSession">🏠 Home</button>
    <button id="stopBtn">Stop</button>
  </div>

  <!-- Toast -->
  <div id="toast"></div>

  <!-- Scripts -->
  <script src="script.js"></script>
</body>
</html>