Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
230 lines (212 loc) · 12.4 KB
/
Copy pathindex.html
File metadata and controls
230 lines (212 loc) · 12.4 KB
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
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blob Flow Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<button class="theme-toggle" onclick="toggleTheme()">
<span id="themeIcon">🌙</span>
<span id="themeText">Dark</span>
</button>
<h1>Blob Flow Generator</h1>
<p>Create smooth, animated shape variations from your SVG blobs</p>
</div>
<div class="main-layout">
<div class="sidebar">
<!-- Upload Section -->
<div class="upload-section">
<h2 class="section-title">Upload SVG</h2>
<div class="upload-area" id="uploadArea">
<div class="upload-icon">⬆</div>
<div class="upload-text">Drop your SVG blob here</div>
<div class="upload-subtext">or click to browse</div>
<input type="file" id="fileInput" class="file-input" accept=".svg">
</div>
</div>
<!-- Primary Actions -->
<div class="action-buttons">
<button class="btn" id="generateBtn" onclick="generateVariation()" disabled>
<span>Generate Single Variation</span>
</button>
<button class="btn btn-outline" onclick="generateFlowSequence()" disabled id="batchBtn">
<span>Generate Flow Sequence (3 frames)</span>
</button>
<button class="btn btn-secondary" onclick="resetAll()">
<span>Reset</span>
</button>
</div>
<!-- Accordion Settings -->
<div class="accordion">
<!-- Color Settings -->
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion('colors')">
<span>Color Settings</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content" id="colors-content">
<div class="control-group">
<label>Blob Color:</label>
<div class="color-controls">
<input type="color" id="colorPicker" class="color-picker" value="#54aa95">
<input type="text" id="colorInput" class="color-input" value="#54aa95" placeholder="#54aa95">
<select id="colorFormat" class="color-format">
<option value="hex">HEX</option>
<option value="rgb">RGB</option>
<option value="hsl">HSL</option>
</select>
<button class="random-btn" onclick="randomizeColor()">Random</button>
</div>
<div style="font-size: 0.8em; color: #666; margin-top: 5px;">
Current: <span id="currentColorDisplay">#54aa95</span>
</div>
</div>
<div class="control-group">
<label class="checkbox-group">
<input type="checkbox" id="randomColors">
<span>Random colors for variations</span>
</label>
</div>
</div>
</div>
<!-- Flow Parameters -->
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion('flow')">
<span>Flow Parameters</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content" id="flow-content">
<div class="control-group">
<label>Flow Style:</label>
<select id="flowStyle" class="algorithm-select">
<option value="gentle">Gentle Flow (Water-like)</option>
<option value="dynamic">Dynamic Flow (Lava-like)</option>
<option value="rhythmic">Rhythmic Flow (Breathing)</option>
<option value="chaotic">Chaotic Flow (Storm-like)</option>
</select>
</div>
<div class="control-group">
<label>Flow Intensity:</label>
<input type="range" id="flowIntensity" min="0.1" max="1.0" step="0.1" value="0.6">
<div class="value-display" id="flowIntensityValue">60%</div>
</div>
<div class="control-group">
<label>Flow Smoothness:</label>
<input type="range" id="flowSmoothness" min="0.3" max="1.0" step="0.1" value="0.7">
<div class="value-display" id="flowSmoothnessValue">70%</div>
</div>
</div>
</div>
<!-- Animation Settings -->
<div class="accordion-item">
<div class="accordion-header active" onclick="toggleAccordion('animation')">
<span>Animation Settings</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content active" id="animation-content">
<div class="status-info">
<strong>Flow Animation:</strong><br>
<span id="collectionStatus">No flow sequence generated yet</span>
</div>
<div class="control-group">
<label class="checkbox-group">
<input type="checkbox" id="includePattern" checked>
<span>Include pattern overlay in animation</span>
</label>
<div id="patternSelector" class="pattern-controls">
<div class="control-group">
<label>Pattern Type:</label>
<select id="patternType" class="algorithm-select">
<option value="stars">Twinkling Stars</option>
<option value="dots">Polka Dots</option>
<option value="chevron">Chevron Zigzag</option>
<option value="stripes">Diagonal Stripes</option>
<option value="hexagon">Hexagonal Grid</option>
<option value="checkerboard">Checkerboard</option>
<option value="circles">Floating Circles</option>
<option value="waves">Wave Lines</option>
<option value="grid">Square Grid</option>
<option value="triangles">Triangle Pattern</option>
</select>
</div>
<div class="control-group">
<label>Pattern Density:</label>
<input type="range" id="patternDensity" min="0.3" max="2.0" step="0.1" value="1.0">
<div class="value-display" id="densityValue">1.0</div>
</div>
<div class="control-group">
<label>Pattern Opacity:</label>
<input type="range" id="patternOpacity" min="0.1" max="1.0" step="0.1" value="0.7">
<div class="value-display" id="opacityValue">0.7</div>
</div>
</div>
</div>
<div class="control-group">
<label>Animation Speed:</label>
<div class="speed-labels">
<span>Slow</span>
<span>Fast</span>
</div>
<div class="speed-controls">
<input type="range" id="animationSpeed" min="0.25" max="3.0" step="0.25" value="1.0">
</div>
<div class="value-display">
<span id="speedValue">1.0x Normal Speed</span><br>
<small>Duration: <span id="durationDisplay">4.0s</span> per cycle</small>
</div>
</div>
<div style="margin-top: 15px;">
<button class="btn btn-outline btn-small" onclick="collectVariation()" disabled id="collectBtn">
Collect This Variation
</button>
<button class="btn btn-small" onclick="createAnimation()" disabled id="animateBtn">
Make Flow Animation
</button>
</div>
</div>
</div>
</div>
</div>
<div class="main-area">
<!-- Original Preview -->
<div>
<h2 class="section-title">Original SVG</h2>
<div class="preview-area" id="originalPreview">
<div class="placeholder-text">
Upload an SVG file to see the original blob preview
</div>
</div>
</div>
<!-- Variation Display -->
<div>
<h2 class="section-title">Generated Variation</h2>
<div class="variation-display" id="variationDisplay">
<div class="placeholder-text">
Upload an SVG and generate variations<br>
to see your smooth flowing shapes
</div>
</div>
<button class="btn btn-outline" onclick="downloadVariation()" disabled id="downloadBtn">
Download This Variation
</button>
</div>
<!-- Animation Preview -->
<div id="animationPreview" class="animation-preview">
<div style="text-align: center; margin-bottom: 10px; font-weight: 600; color: #495057;">
Flow Animation Preview
</div>
<div id="animationDisplay" class="animation-display"></div>
<button class="btn btn-outline" onclick="downloadAnimation()" style="margin-top: 10px;">
Download Flow Animation
</button>
</div>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>