-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
79 lines (62 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>thoughts</title>
<link href="dist/output.css" rel="stylesheet">
<script src="js/script.js" ></script>
</head>
<body class="p-5 bg-indigo-950 font-mono justify-center overflow-x-hidden">
<div id="particles-js" class="m-auto w-full h-full absolute -z-10"></div>
<form id="form-Top" class="truncate p-5 w-full h-[700px] border-4 border-indigo-300 rounded-xl bg-violet-50 grid grid-cols-1
sm:h-[700px] sm:grid-cols-1 md:p-5 md:h-[288px] md:grid-cols-2 md:gap-0 xl:grid-cols-2 xl:h-72">
<!-- Seção de Inserção -->
<section id="InsertArea" class="w-full p-4 grid grid-rows-2">
<h1 for="txtNew" class="text-2xl font-bold mb-4">Insert your thoughts</h1>
<input type="text" maxlength="125" placeholder="The Title" id="titleThoughts" name="titleThoughts" class="p-1 rounded-md border-2 border-gray-700">
<textarea id="txtNew" name="txtNew" placeholder="Description" class="
max-h-20
rounded-md border-2 border-gray-700
w-full
text-slate-500 mt-4 p-2" rows="3" maxlength="125"></textarea>
<small >Caracteres restantes: <span id="charCount">125</span></small>
</section>
<!-- Seção de Opções -->
<section id="Options" class="w-full truncate p-4 grid grid-rows-3 gap-6 justify-items-center">
<div class="row-span-2 ">
<h1 for="categorias" class="text-2xl font-bold">Choose a Category</h1>
<div class="mt-4 place-content-center grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-4">
<label class="flex items-center space-x-2 border-2 border-yellow-500 rounded-md bg-yellow-100 p-1 cursor-pointer w-custom-Cat">
<input value="Idea" type="radio" name="category" class="ml-1 form-radio appearance-none w-3 h-3 border-2 rounded-full border-yellow-500 bg-white checked:bg-yellow-500">
<span >Idea</span>
</label>
<label class="flex items-center space-x-2 border-2 border-orange-500 rounded-md bg-orange-100 p-1 cursor-pointer w-custom-Cat">
<input value="Dream" type="radio" name="category" class="ml-1 form-radio appearance-none w-3 h-3 border-2 rounded-full border-orange-500 bg-white checked:bg-orange-500">
<span>Dreams</span>
</label>
<label class="flex items-center space-x-2 border-2 border-purple-500 rounded-md bg-purple-100 p-1 cursor-pointer w-custom-Cat">
<input value="Memory" type="radio" name="category" class="ml-1 form-radio appearance-none w-3 h-3 border-2 rounded-full border-purple-500 bg-white checked:bg-purple-500">
<span>Memory</span>
</label>
<label class="flex items-center space-x-2 border-2 border-cyan-500 rounded-md bg-cyan-100 p-1 cursor-pointer w-custom-Cat">
<input value="Random" type="radio" name="category" class="ml-1 form-radio appearance-none w-3 h-3 border-2 rounded-full border-cyan-500 bg-white checked:bg-cyan-500">
<span>Random</span>
</label>
</div>
</div>
<button type="submit" class="overflow-hidden relative w-full p-2 h-12 bg-indigo-950 text-white border-none rounded-md text-xl font-bold cursor-pointer z-10 group" >
Launch into the Universe!
<span class="absolute w-full h-32 -top-8 -left-0 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform group-hover:duration-700 duration-1000"></span>
<span class="absolute w-full h-32 -top-8 -left-0 bg-indigo-400 transform scale-x-0 group-hover:scale-x-100 transition-transform group-hover:duration-700 duration-700"></span>
<span class="absolute w-full h-32 -top-8 -left-0 bg-indigo-600 transform scale-x-0 group-hover:scale-x-100 transition-transform group-hover:duration-1000 duration-500"></span>
<span class="group-hover:opacity-100 group-hover:duration-1000 duration-100 opacity-0 absolute top-2.5 z-10 inset-0">Launch into the Universe!</span>
</button>
</section>
</form>
<div id="Universe" class="grid grid-cols-1 gap-4 w-full mt-10 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
</div>
<script src="js/particles.js-master/particles.js"></script>
<script src="js/particles.js-master/demo/js/app.js"></script>
</body>
</html>