-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (100 loc) · 5.75 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;
0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Creepster&family=Montserrat:wght@800&family=Ubuntu&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Honk&display=swap" rel="stylesheet">
<title>ColorVerse</title>
</head>
<body style="font-family: 'Creepster',sans-serif" class="h-auto w-screen bg-[#ffe788]">
<div class="container w-screen min-h-screen flex items-center justify-center flex-col m-0 p-0">
<div class="">
<h1 style="font-family: 'Honk'" class="title text-7xl text-gray-900 my-2.5 p-0 font-bold text-center">
ColorVerse</h1>
<p style="font-family:'Creepster'" class="desc text-2xl font-light text-black m-0 p-0 text-center">
Curate vibrant palettes for the modern era.
</p>
</div>
<div class="search flex gap-2 m-2">
<div class="code relative" title="Enter Color Name, HexCode, RGB Value">
<input type="text" id="search-input" placeholder="Color Code or Name" value="skyblue"
class="h-8 w-[66vw] text-base text-gray-600 border-none outline-none bg-gray-100 m-0 text-left focus:outline-gray-400 px-5 py-0">
<span
class="search-color absolute bg-[skyblue] rounded-[50%] h-[20px] w-[20px] top-2/4 right-5 -translate-y-2/4"
id="search-color"></span>
</div>
<div class="color-picker" title="Choose Color from Slider">
<input type="color" id="color-input" class="h-8">
</div>
</div>
<div class="options flex gap-2.5 m-2" title="Choose Palete Type">
<select name="" id="palette-type"
class="h-8 w-[60vw] text-base text-gray-600 px-5 py-0 border-none outline-none bg-gray-100 m-0 text-left">
<option value="analogous">Analogous</option>
<option value="monochromatic">Monochromatic</option>
<option value="compound">Compound</option>
<option value="shades">Shades</option>
<option value="square">Square</option>
</select>
<select name="" id="palette-count"
class="h-8 w-[5vw] text-[15px] text-gray-600 px-[8px] py-0 border-none outline-none bg-gray-100 m-0 text-center">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6" selected>6</option>
</select>
</div>
<div class="or select-none w-max text-sm text-gray-600 transition-all duration-300 mx-0 ease-linear text-center my-1 hover:text-gray-400 hover:cursor-pointer"
id="random-btn">
Or Generate Random
</div>
<p class=" label w-full text-sm capitalize font-large text-gray-900 mb-1 text-center" id="type-text">
Analogous palette
</p>
<div class="palette w-full flex flex-wrap justify-center gap-3 m-1" id="palette">
<!-- Colour added Using JS -->
</div>
<p class="label w-full text-sm capitalize font-medium text-gray-900 mb-1 text-center" id="type-text">
Related Colors
</p>
<div class="palette w-full flex flex-wrap justify-center gap-3 m-1" id="related">
<!-- Colour added Using JS -->
</div>
<div>
<div class="or w-full text-sm capitalize font-medium text-gray-900 m-1 text-center">
Download Palette</div>
<div class="options flex gap-2.5 m-0" title="Enter Name of the File">
<input type="text" id="download-name" placeholder="Filename" value="Palette"
class="h-8 w-[50vw] text-base text-gray-600 px-5 py-0 border-none outline-none bg-gray-100">
</div>
<div class="options flex gap-2.5 my-2 mb-5 justify-center" >
<select name="" id="download-format" title="Choose Download Format"
class="w-[22.5vw] h-8 text-sm text-black bg-gray-100 px-2.5 py-0 text-center border-none outline-none">
<option value="png">PNG</option>
<option value="css">CSS</option>
<option value="json">JSON</option>
</select>
<button
class="btn w-[22.5vw] h-8 text-sm text-center text-black cursor-pointer bg-gray-100 border-none outline-none"
id="download-btn">Download</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>