css-gradient-generator-pro/index.html at main · kasapdev/css-gradient-generator-pro · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#08090d">
  <meta name="description" content="Build linear, radial and conic CSS gradients visually with draggable color stops, live preview and instant copy-ready CSS — a fast, private, offline gradient generator.">
  <title>CSS Gradient Generator Pro — Web Utility Suite</title>
  <link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="assets/css/base.css">
  <link rel="stylesheet" href="css/app.css">
</head>
<body>
  <header class="topbar container">
    <a class="brand" href="https://github.com/kasapdev/css-gradient-generator-pro" aria-label="Back to CSS Gradient Generator Pro">
      <span class="logo" aria-hidden="true">
        <!-- gradient / swatch icon -->
        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="3" width="18" height="18" rx="4"/>
          <path d="M3 15c3-4 6-6 9-6s6 2 9 6"/>
        </svg>
      </span>
      <span class="col" style="gap:0">
        <span>CSS Gradient Generator Pro</span>
        <span class="sub">Web Utility Suite</span>
      </span>
    </a>
    <span class="spacer"></span>

    <button class="btn btn--icon" data-shortcut-help title="Keyboard shortcuts (?)" aria-label="Keyboard shortcuts">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <rect x="2" y="4" width="20" height="16" rx="2"/>
        <path d="M6 8h.01M10 8h.01M14 8h.01M18 8h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M7 16h10"/>
      </svg>
    </button>
    <button class="btn btn--icon" data-theme-toggle title="Toggle theme" aria-label="Toggle theme">
      <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <circle cx="12" cy="12" r="4"/>
        <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
      </svg>
      <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z"/>
      </svg>
    </button>
  </header>

  <main class="container">
    <!-- Mode + actions toolbar -->
    <section class="panel toolbar-panel fade-in" aria-label="Toolbar">
      <div class="toolbar">
        <div class="toolbar-group">
          <div class="segmented" role="tablist" aria-label="Gradient type">
            <button type="button" id="modeLinear" role="tab" aria-selected="true" class="is-active" data-mode="linear">Linear</button>
            <button type="button" id="modeRadial" role="tab" aria-selected="false" data-mode="radial">Radial</button>
            <button type="button" id="modeConic" role="tab" aria-selected="false" data-mode="conic">Conic</button>
          </div>
        </div>

        <span class="spacer hide-sm"></span>

        <div class="toolbar-group">
          <button id="btnRandomize" class="btn btn--sm" title="Randomize gradient">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 3h5v5M4 20 21 3M21 16v5h-5M15 15l6 6M4 4l5 5"/></svg>
            Randomize
          </button>
          <button id="btnReset" class="btn btn--sm btn--ghost" title="Reset to default gradient">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
            Reset
          </button>
        </div>
      </div>
    </section>

    <!-- Preview -->
    <section class="panel preview-panel rise" aria-label="Gradient preview">
      <div id="preview" class="preview-swatch"></div>
      <div class="css-output-row">
        <pre id="cssOutput" class="css-output mono" tabindex="0" aria-live="polite">background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);</pre>
        <button id="btnCopyCss" class="btn btn--primary" title="Copy CSS (Ctrl/Cmd+C)">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
          Copy CSS
        </button>
      </div>
    </section>

    <!-- Controls -->
    <section class="controls-grid">
      <!-- Geometry controls (mode-specific) -->
      <div class="panel controls-panel fade-in" aria-label="Gradient geometry">
        <h2 class="panel-title">Geometry</h2>

        <div id="linearControls" class="control-block">
          <div class="field">
            <label for="angleRange">Angle <span id="angleValueLabel" class="mono muted">135°</span></label>
            <div class="row center gap-3">
              <input type="range" id="angleRange" min="0" max="360" step="1" value="135" aria-label="Gradient angle in degrees">
              <input type="number" id="angleNumber" min="0" max="360" step="1" value="135" class="angle-number mono" aria-label="Gradient angle numeric input">
            </div>
          </div>
        </div>

        <div id="radialControls" class="control-block" hidden>
          <div class="field">
            <label>Shape</label>
            <div class="segmented" role="tablist" aria-label="Radial shape">
              <button type="button" id="shapeCircle" role="tab" aria-selected="true" class="is-active" data-shape="circle">Circle</button>
              <button type="button" id="shapeEllipse" role="tab" aria-selected="false" data-shape="ellipse">Ellipse</button>
            </div>
          </div>
          <div class="field">
            <label>Center position</label>
            <div class="pos-grid" id="radialPosGrid" role="group" aria-label="Radial center position preset grid"></div>
          </div>
          <div class="field">
            <div class="row wrap gap-3">
              <label class="pos-slider-label">X <span id="radialXLabel" class="mono muted">50%</span>
                <input type="range" id="radialX" min="0" max="100" step="1" value="50" aria-label="Radial center X percent">
              </label>
              <label class="pos-slider-label">Y <span id="radialYLabel" class="mono muted">50%</span>
                <input type="range" id="radialY" min="0" max="100" step="1" value="50" aria-label="Radial center Y percent">
              </label>
            </div>
          </div>
        </div>

        <div id="conicControls" class="control-block" hidden>
          <div class="field">
            <label for="conicAngleRange">Starting angle <span id="conicAngleValueLabel" class="mono muted">0°</span></label>
            <div class="row center gap-3">
              <input type="range" id="conicAngleRange" min="0" max="360" step="1" value="0" aria-label="Conic starting angle in degrees">
              <input type="number" id="conicAngleNumber" min="0" max="360" step="1" value="0" class="angle-number mono" aria-label="Conic starting angle numeric input">
            </div>
          </div>
          <div class="field">
            <label>Center position</label>
            <div class="pos-grid" id="conicPosGrid" role="group" aria-label="Conic center position preset grid"></div>
          </div>
          <div class="field">
            <div class="row wrap gap-3">
              <label class="pos-slider-label">X <span id="conicXLabel" class="mono muted">50%</span>
                <input type="range" id="conicX" min="0" max="100" step="1" value="50" aria-label="Conic center X percent">
              </label>
              <label class="pos-slider-label">Y <span id="conicYLabel" class="mono muted">50%</span>
                <input type="range" id="conicY" min="0" max="100" step="1" value="50" aria-label="Conic center Y percent">
              </label>
            </div>
          </div>
        </div>

        <div class="field">
          <label>Presets</label>
          <div id="presetRow" class="preset-row"></div>
        </div>
      </div>

      <!-- Color stops -->
      <div class="panel stops-panel fade-in" aria-label="Color stops">
        <div class="row between center">
          <h2 class="panel-title" style="margin:0">Color stops</h2>
          <button id="btnAddStop" class="btn btn--sm">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
            Add stop
          </button>
        </div>
        <p class="muted stops-hint">Drag the handle to reorder. Each stop needs a color and a position.</p>
        <div id="stopList" class="stop-list"></div>
      </div>
    </section>
  </main>

  <footer class="app-footer container">
    Part of the <a href="https://github.com/kasapdev/css-gradient-generator-pro">CSS Gradient Generator Pro</a> · MIT Licensed
  </footer>

  <!-- Shortcuts help modal -->
  <div id="helpBackdrop" class="modal-backdrop" hidden>
    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="helpTitle">
      <div class="row between center" style="margin-bottom:var(--space-4)">
        <h3 id="helpTitle" style="margin:0">Keyboard shortcuts</h3>
        <button id="helpClose" class="btn btn--icon btn--ghost" aria-label="Close">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
        </button>
      </div>
      <table class="shortcut-table">
        <tbody id="shortcutRows"></tbody>
      </table>
      <p class="muted" style="margin:var(--space-4) 0 0;font-size:13px">Tip: <kbd>mod</kbd> means <kbd>Ctrl</kbd> on Windows/Linux and <kbd>⌘</kbd> on macOS.</p>
    </div>
  </div>

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