glyph-forge/index.html at main · kiwigitops/glyph-forge · 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Glyph Forge</title>
    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='10' fill='%230f766e'/%3E%3Cpath fill='%23fbfcf8' d='M12 12h14v14H12zM38 12h14v14H38zM25 25h14v14H25zM12 38h14v14H12zM38 38h14v14H38z'/%3E%3Cpath fill='%23cf4e45' d='M26 12h12v12H26zM14 26h10v10H14zM40 26h10v10H40zM26 40h12v12H26z'/%3E%3C/svg%3E">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="app-shell">
      <header class="topbar">
        <div>
          <p class="eyebrow">Pattern Workbench</p>
          <h1>Glyph Forge</h1>
        </div>
        <div class="top-actions" aria-label="Project actions">
          <button class="button quiet" id="undoButton" type="button">Undo</button>
          <button class="button quiet" id="redoButton" type="button">Redo</button>
          <button class="button quiet" id="showcaseButton" type="button">Showcase</button>
          <button class="button" id="exportButton" type="button">Export PNG</button>
        </div>
      </header>

      <main class="workbench">
        <aside class="toolrail" aria-label="Tools">
          <section class="panel flush">
            <h2>Tool</h2>
            <div class="segmented vertical" id="toolButtons">
              <button class="segment active" type="button" data-tool="paint">Paint</button>
              <button class="segment" type="button" data-tool="erase">Erase</button>
              <button class="segment" type="button" data-tool="fill">Fill</button>
              <button class="segment" type="button" data-tool="pick">Pick</button>
            </div>
          </section>

          <section class="panel flush">
            <h2>Brush</h2>
            <div class="segmented" id="brushButtons">
              <button class="segment active" type="button" data-brush="1">1</button>
              <button class="segment" type="button" data-brush="2">2</button>
              <button class="segment" type="button" data-brush="3">3</button>
              <button class="segment" type="button" data-brush="4">4</button>
            </div>
          </section>

          <section class="panel flush">
            <h2>Symmetry</h2>
            <div class="segmented vertical" id="symmetryButtons">
              <button class="segment active" type="button" data-symmetry="none">None</button>
              <button class="segment" type="button" data-symmetry="vertical">Vertical</button>
              <button class="segment" type="button" data-symmetry="horizontal">Horizontal</button>
              <button class="segment" type="button" data-symmetry="quadrant">Quadrant</button>
              <button class="segment" type="button" data-symmetry="rotate">Rotate</button>
            </div>
          </section>
        </aside>

        <section class="stage" aria-label="Pattern canvas">
          <div class="canvas-frame">
            <canvas id="boardCanvas" width="720" height="720" aria-label="Editable pattern grid"></canvas>
          </div>
          <div class="statusbar">
            <span id="statusText">24 x 24 tile</span>
            <span id="colorText">Color #cf4e45</span>
            <span id="exportText">Export Tile</span>
          </div>
        </section>

        <aside class="inspector" aria-label="Pattern settings">
          <section class="panel">
            <div class="panel-title">
              <h2>Preview</h2>
              <button class="button quiet small" id="randomButton" type="button">Shuffle</button>
            </div>
            <canvas id="previewCanvas" class="preview" width="320" height="320" aria-label="Repeating tile preview"></canvas>
          </section>

          <section class="panel">
            <div class="panel-title">
              <h2>Variations</h2>
              <button class="button quiet small" id="captureVariationButton" type="button">Capture</button>
            </div>
            <div class="variation-count" id="variationCount">No variations yet</div>
            <div class="variation-list" id="variationList" aria-label="Working variations"></div>
          </section>

          <section class="panel">
            <div class="panel-title">
              <h2>Forge</h2>
              <button class="button quiet small" id="seedButton" type="button">New Seed</button>
            </div>
            <label class="field">
              <span>Seed</span>
              <input id="seedInput" type="text" autocomplete="off" spellcheck="false">
            </label>
            <div class="segmented mode-grid" id="modeButtons">
              <button class="segment active" type="button" data-mode="crest">Crest</button>
              <button class="segment" type="button" data-mode="woven">Woven</button>
              <button class="segment" type="button" data-mode="circuit">Circuit</button>
              <button class="segment" type="button" data-mode="bloom">Bloom</button>
              <button class="segment" type="button" data-mode="scatter">Scatter</button>
            </div>
            <button class="button" id="generateButton" type="button">Generate</button>
          </section>

          <section class="panel">
            <div class="panel-title">
              <h2>Palette</h2>
              <button class="button quiet small" id="paletteButton" type="button">New Set</button>
            </div>
            <div class="swatches" id="swatches" aria-label="Color palette"></div>
          </section>

          <section class="panel">
            <h2>Grid</h2>
            <div class="segmented" id="gridButtons">
              <button class="segment" type="button" data-size="12">12</button>
              <button class="segment" type="button" data-size="16">16</button>
              <button class="segment active" type="button" data-size="24">24</button>
              <button class="segment" type="button" data-size="32">32</button>
            </div>
          </section>

          <section class="panel">
            <h2>Transform</h2>
            <div class="transform-grid" id="transformButtons">
              <button class="button quiet small" type="button" data-transform="flip-horizontal">Flip H</button>
              <button class="button quiet small" type="button" data-transform="flip-vertical">Flip V</button>
              <button class="button quiet small" type="button" data-transform="rotate-right">Rotate</button>
              <button class="button quiet small" type="button" data-transform="center">Center</button>
            </div>
            <div class="nudge-grid" id="nudgeButtons">
              <button class="button quiet small" type="button" data-nudge="-1,0">Left</button>
              <button class="button quiet small" type="button" data-nudge="0,-1">Up</button>
              <button class="button quiet small" type="button" data-nudge="0,1">Down</button>
              <button class="button quiet small" type="button" data-nudge="1,0">Right</button>
            </div>
          </section>

          <section class="panel">
            <h2>Export</h2>
            <div class="segmented export-grid" id="exportButtons">
              <button class="segment active" type="button" data-export="tile">Tile</button>
              <button class="segment" type="button" data-export="sheet">Sheet</button>
              <button class="segment" type="button" data-export="wallpaper">Wallpaper</button>
              <button class="segment" type="button" data-export="poster">Poster</button>
            </div>
          </section>

          <section class="panel">
            <div class="panel-title">
              <h2>Design Code</h2>
              <button class="button quiet small" id="copyButton" type="button">Copy</button>
            </div>
            <textarea id="designCode" class="code-field" rows="3" spellcheck="false"></textarea>
            <div class="command-panel">
              <button class="button" id="loadButton" type="button">Load Code</button>
              <span class="toast" id="toast" role="status" aria-live="polite">Ready</span>
            </div>
          </section>

          <section class="panel">
            <div class="panel-title">
              <h2>Gallery</h2>
              <button class="button quiet small" id="saveGalleryButton" type="button">Save</button>
            </div>
            <div class="gallery-count" id="galleryCount">No saved tiles</div>
            <div class="gallery-list" id="galleryList" aria-label="Saved tiles"></div>
          </section>

          <section class="panel command-panel">
            <button class="button" id="clearButton" type="button">Clear Tile</button>
            <button class="button quiet" id="invertButton" type="button">Invert Marks</button>
          </section>
        </aside>
      </main>
    </div>

    <section class="showcase" id="showcase" aria-hidden="true" aria-label="Pattern showcase">
      <canvas id="showcaseCanvas" width="1600" height="900"></canvas>
      <div class="showcase-bar">
        <div>
          <p class="eyebrow">Showcase</p>
          <h2 id="showcaseTitle">Glyph Forge</h2>
        </div>
        <div class="showcase-controls">
          <button class="button quiet" id="previousShowcaseButton" type="button">Previous</button>
          <span class="showcase-count" id="showcaseCount">1 / 1</span>
          <button class="button quiet" id="nextShowcaseButton" type="button">Next</button>
          <button class="button" id="closeShowcaseButton" type="button">Close</button>
        </div>
      </div>
    </section>

    <script src="app.js"></script>
  </body>
</html>