SubFlow/index.html at main · trexhaydor7/SubFlow · 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Untitled-Goose Flood Time</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            font-size: 16pt;
        }
        #editor {
            display: flex;
            width: 100%;
            height: 100%;
        }
        #view {
            flex: 1;
            overflow: hidden;
        }
        #controls {
            background: #051a2e;
            padding: 5px;
            min-width: 100px;
        }
        #c {
            width: 100%;
            height: 100%;
            display: block;
        }
        .gutter {
            background-color: #000000;
            background-repeat: no-repeat;
            background-position: 50%;
        }
        .gutter.gutter-horizontal {
            cursor: ew-resize;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
        }
    </style>
</head>
<body>
  <div id="editor">
    <div id="view"><canvas id="c"></canvas></div>
    <div id="controls">
      <div style="display:flex; flex-direction:column; align-items:center; gap:16px; padding:16px 8px; font-family:sans-serif;">

        <!-- City size buttons -->
        <div style="color:#7ec8e3; font-size:8pt; letter-spacing:2px; text-transform:uppercase; align-self:flex-start; padding-left:2px;">City Size</div>
        <div style="display:flex; flex-direction:row; gap:6px; width:100%;">
          <button id="btn-city-small"  style="flex:1; padding:8px 0; background:#0d4f7c; color:#e0f6ff; border:1px solid #3ab0d8; border-radius:6px; font-size:10pt; cursor:pointer;">S</button>
          <button id="btn-city-medium" style="flex:1; padding:8px 0; background:#0a2a44; color:#7ec8e3; border:1px solid #1a5a8a; border-radius:6px; font-size:10pt; cursor:pointer;">M</button>
          <button id="btn-city-large"  style="flex:1; padding:8px 0; background:#0a2a44; color:#7ec8e3; border:1px solid #1a5a8a; border-radius:6px; font-size:10pt; cursor:pointer;">L</button>
        </div>

        <!-- Divider -->
        <div style="width:100%; height:1px; background:#0d3a5a; margin:2px 0;"></div>

        <!-- Speed buttons — horizontal row -->
        <div style="color:#7ec8e3; font-size:8pt; letter-spacing:2px; text-transform:uppercase; align-self:flex-start; padding-left:2px;">Speed</div>
        <div style="display:flex; flex-direction:row; gap:6px;">
          <button id="btn-half"   style="flex:1; padding:8px 0; background:#0a2a44; color:#7ec8e3; border:1px solid #1a5a8a; border-radius:6px; font-size:12pt; cursor:pointer; min-width:48px;">½×</button>
          <button id="btn-play"   style="flex:1; padding:8px 0; background:#0a2a44; color:#7ec8e3; border:1px solid #1a5a8a; border-radius:6px; font-size:14pt; cursor:pointer; min-width:48px; line-height:1;">⏸</button>
          <button id="btn-double" style="flex:1; padding:8px 0; background:#0a2a44; color:#7ec8e3; border:1px solid #1a5a8a; border-radius:6px; font-size:12pt; cursor:pointer; min-width:48px;">2×</button>
        </div>

        <!-- Divider -->
        <div style="width:100%; height:1px; background:#0d3a5a; margin:2px 0;"></div>

        <!-- RGB sliders -->
        <div style="color:#7ec8e3; font-size:8pt; letter-spacing:2px; text-transform:uppercase; align-self:flex-start; padding-left:2px;">Water Colour</div>

        <div style="width:100%; display:flex; flex-direction:column; gap:10px;">
          <!-- R -->
          <div style="display:flex; flex-direction:column; gap:4px;">
            <div style="display:flex; justify-content:space-between;">
              <span style="color:#ff6666; font-size:8pt; letter-spacing:1px;">R</span>
              <span id="lbl-r" style="color:#aaa; font-size:8pt;">13</span>
            </div>
            <input id="sld-r" type="range" min="0" max="255" value="13"
              style="width:100%; accent-color:#ff4444; cursor:pointer;">
          </div>
          <!-- G -->
          <div style="display:flex; flex-direction:column; gap:4px;">
            <div style="display:flex; justify-content:space-between;">
              <span style="color:#66ff99; font-size:8pt; letter-spacing:1px;">G</span>
              <span id="lbl-g" style="color:#aaa; font-size:8pt;">140</span>
            </div>
            <input id="sld-g" type="range" min="0" max="255" value="140"
              style="width:100%; accent-color:#44ff88; cursor:pointer;">
          </div>
          <!-- B -->
          <div style="display:flex; flex-direction:column; gap:4px;">
            <div style="display:flex; justify-content:space-between;">
              <span style="color:#66aaff; font-size:8pt; letter-spacing:1px;">B</span>
              <span id="lbl-b" style="color:#aaa; font-size:8pt;">242</span>
            </div>
            <input id="sld-b" type="range" min="0" max="255" value="242"
              style="width:100%; accent-color:#4488ff; cursor:pointer;">
          </div>
        </div>

      </div>
    </div>
  </div>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.183.2/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.183.2/examples/jsm/"
  }
}
</script>

<script src="https://cdn.jsdelivr.net/npm/split.js/dist/split.min.js"></script>
<script>
    Split(['#view', '#controls'], {
      sizes: [75, 25],
      minSize: [200, 100],
      gutterSize: 8,
      direction: 'horizontal',
    });
  </script>

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