-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
65 lines (64 loc) · 2.72 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>ChaosVision</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="title-wrapper">
ChaosVision
<span class="info-icon">
<i class="fas fa-info-circle"></i>
<span class="tooltip-text">Inspired by Chaos Theory, ChaosVision uses randomness and dynamic mathematical inputs to generate chaotic visual patterns.</span>
</span>
</h1>
<div id="artContainer"></div>
<div class="input-wrapper">
<button id="saveBtn"><i class="fas fa-save"></i></button>
<input type="text" id="expressionInput" placeholder="Enter a number or a numeric expression" />
<button id="generateBtn"><i class="fas fa-infinity"></i></button>
</div>
<div id="shapeOptions">
<div class="option">
<label for="shapeOpacityInput">Opacity:</label>
<input type="range" id="shapeOpacityInput" min="0" max="1" step="0.1" value="1" />
</div>
<div class="option">
<label for="shapeSizeInput">Size:</label>
<input type="range" id="shapeSizeInput" min="10" max="100" value="50" />
</div>
<div class="option">
<label for="shapeBoxShadowInput">Box Shadow:</label>
<input type="range" id="shapeBoxShadowInput" min="0" max="10" value="0" />
</div>
<div class="option">
<label for="animationSelect">Animation:</label>
<select id="animationSelect">
<option value="none">None</option>
<option value="pulse">Pulse</option>
<option value="flash">Flash</option>
<option value="blink">Blink</option>
<option value="glowing">Glowing</option>
<option value="sparkle">Sparkle</option>
<option value="flip">Flip</option>
<option value="swing">Swing</option>
<option value="wiggle">Wiggle</option>
<option value="jello">Jello</option>
<option value="fadeIn">Fade In</option>
<option value="fadeOut">Fade Out</option>
<option value="rotateIn">Rotate Clockwise</option>
<option value="rotateOut">Rotate Anticlockwise</option>
<option value="bounceIn">Bounce In</option>
<option value="bounceOut">Bounce Out</option>
<option value="zoomIn">Zoom In</option>
<option value="zoomOut">Zoom Out</option>
</select>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>