-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
92 lines (85 loc) · 4.54 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
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
<!-- @format -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS file -->
<link rel="stylesheet" href="master.css" />
<!-- P5.js -->
<script src="p5.js" type="text/javascript"></script>
<!-- semantic ui css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" />
<!-- semantic ui js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw==" crossorigin="anonymous"></script>
<script src="sketch.js" type="text/javascript"></script>
<!-- font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<title>Psychic Doodle</title>
</head>
<body>
<div class="ui container">
<h2>
<centre>Psychic Doodle</centre>
</h2>
<!-- colors section -->
<div class="ui red raised segment">
<div class="ui equal column grid">
<div class="row">
<div class="column">
<button id="redColor" class="circular ui massive icon red button"></button>
</div>
<div class="column">
<button id="orangeColor" class="circular ui massive icon orange button"></button>
</div>
<div class="column">
<button id="yellowColor" class="circular ui massive icon yellow button"></button>
</div>
<div class="column">
<button id="greenColor" class="circular ui massive icon green button"></button>
</div>
<div class="column">
<button id="blueColor" class="circular ui massive icon blue button"></button>
</div>
<div class="column">
<button id="whiteColor" class="circular ui massive icon white button"></button>
</div>
<div class="column">
<button id="blackColor" class="circular ui massive icon black button"></button>
</div>
<div class="column">
<button id="violetColor" class="circular ui massive icon violet button"></button>
</div>
<div class="column">
<button id="pinkColor" class="circular ui massive icon pink button"></button>
</div>
</div>
</div>
</div>
<div class="ui green raised segment">
<button id="1x" class="circular ui icon mini button">1x</button>
<button id="2x" class="circular ui icon tiny button">2x</button>
<button id="3x" class="circular ui icon small button">3x</button>
<button id="4x" class="circular ui icon medium button">4x</button>
<button id="5x" class="circular ui icon large button">5x</button>
</div>
<div class="ui purple raised segment">
<button id="squareShape" class="ui icon massive button square"></button>
<button id="circleShape" class="ui icon massive button circle"></button>
<button id="triangleShape" class="ui icon massive button triangle"></button>
<button id="ellipseShape" class="ui icon massive button ellipse"></button>
<button id="lineShape" class="ui icon massive button line"></button>
</div>
<div class="ui pink raised segment">
<img id="eraserTool" class="tools eraser" src="./images/tools/eraser.svg">
<img id="bucketTool" class="tools bucket" src="./images/tools/bucket.svg">
<img id="brushTool" class="tools brush" src="./images/tools/brush.svg">
<img id="sprayTool" class="tools spray" src="./images/tools/spray.svg">
</div>
<!-- on-off button -->
<button id="start" class="circular ui large icon right floated toggle button">
<i class="fas fa-power-off"></i>
</button>
</div>
</body>
</html>