-
Notifications
You must be signed in to change notification settings - Fork 0
/
randlist.html
129 lines (121 loc) · 4.34 KB
/
randlist.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!doctype html>
<html lang="en" data-theme="dim" class="bg-wave-svg bg-cover">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Random Picker</title>
<link rel="icon" type="image/x-icon" href="assets/Commission-3.png" />
<!-- <link href="styles.css" rel="stylesheet"> -->
<script src="//unpkg.com/alpinejs" defer></script>
<link
href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css"
rel="stylesheet"
type="text/css"
/>
<script src="https://cdn.tailwindcss.com"></script>
<script src="script3.js"></script>
<style>
@layer utilities {
.content-auto {
content-visibility: auto;
}
.bg-wave-svg {
background-image: url("assets/blob-scene-haikei.svg");
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.bg-block-wave-svg {
background-image: url("assets/block-wave-haikei.svg");
background-image: center;
background-size: cover;
}
}
</style>
</head>
<body class="text-white">
<div
x-data="{ open: false }"
class="mx-auto flex w-full max-w-full flex-col items-center justify-between px-4 py-4 lg:flex-row"
>
<div class="flex w-full items-center justify-between p-2 lg:w-auto">
<div class="flex items-center">
<h6 class="text-center text-2xl font-semibold">RandomPicker</h6>
</div>
</div>
</div>
<div class="mx-20 my-20 flex items-center justify-center font-mono">
<div
class="bg-block-wave-svg mb-10 mt-10 inline-block border-spacing-32 rounded-lg bg-cover bg-center p-10 text-xl shadow-2xl"
>
<h1 class="text-center text-2xl font-bold">Randomizer List</h1>
<p class="py-2 text-base text-gray-400 md:py-1">
add once or separate using commas
</p>
<div>
<form class="items-center justify-center">
<div>
<input
type="text"
id="userInput"
placeholder="Type the Items"
class="input input-lg mb-2 h-10 w-64 max-w-xs rounded-md border-none px-2 pl-2 text-white focus:outline-none"
/>
<button
id="addItem"
class="btn ml-1 mt-2 rounded-full border-none bg-zinc-500 px-4 py-2 text-lg text-white shadow hover:bg-zinc-300 hover:shadow-lg hover:shadow-zinc-600"
>
Add
</button>
<ol id="itemList" class="my-3 list-decimal px-10"></ol>
<button
id="Randomizer"
class="btn rounded-full border-none bg-zinc-500 px-4 py-2 text-lg text-white shadow hover:bg-zinc-300 hover:shadow-lg hover:shadow-zinc-600"
>
Randomize
</button>
<button
id="clearButton"
class="btn ml-1 mt-2 rounded-full border-none bg-zinc-500 px-4 py-2 text-lg text-white shadow hover:bg-zinc-300 hover:shadow-lg hover:shadow-zinc-600"
>
Clear
</button>
</div>
</form>
</div>
<p id="result"></p>
</div>
</div>
<div
class="mx-0 flex flex-col items-center justify-center space-x-0 space-y-4 text-black md:flex-row md:space-x-10 md:space-y-0"
>
<a
href="index.html"
class="block rounded-xl border-black bg-white p-2 opacity-50 hover:opacity-80"
>RandomPicker</a
>
<a
href="randnum.html"
class="block rounded-xl border-black bg-white p-2 opacity-50 hover:opacity-80"
>RandomNumber</a
>
<a
href="randlist.html"
class="block rounded-xl border-black bg-white p-2 opacity-50 hover:opacity-80"
>RandomizerList</a
>
<a
href="diceroll.html"
class="block rounded-xl border-black bg-white p-2 opacity-50 hover:opacity-80"
>RandomDiceRoll</a
>
</div>
<footer class="text-beige bottom-0 left-0 w-full p-5">
<div class="flex flex-wrap justify-around px-5">
<div class="mt-5 border-t border-white py-2 text-center">
<p class="m-0">© 2024 CaptainPandaMonkey</p>
</div>
</div>
</footer>
</body>
</html>