-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
47 lines (42 loc) · 1.91 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Class Prefixer</title>
<link rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚡</text></svg>">
<script type="module" src="./src/app.js"></script>
<style>
[x-cloak] {
display: none;
}
</style>
</head>
<body class="antialiased bg-vs-dark text-gray-200">
<div x-data="app()" x-init="init" x-cloak
class="flex flex-col h-screen overflow-y-visible overflow-x-hidden divide-y-2 divide-gray-600">
<div class="flex-1 flex flex-col lg:flex-row divide-y-2 lg:divide-y-0 lg:divide-x-2 divide-gray-600">
<div class="flex-1 lg:max-w-1/2 flex flex-col divide-y-2 divide-gray-600">
<div class="text-sm py-3 px-4 uppercase font-medium tracking-wider text-gray-400">HTML</div>
<div class="flex-1 bg-gray-800" x-ref="editor"></div>
</div>
<div class="flex-1 lg:max-w-1/2 flex flex-col divide-y-2 divide-gray-600">
<h3 class="text-sm py-3 pl-4 uppercase font-medium tracking-wider text-gray-400">Prefixed HTML</h3>
<div class="flex-1 bg-gray-800" x-ref="viewer"></div>
</div>
</div>
<div class="flex px-6 py-4 items-center justify-between">
<div class="flex flex-col space-y-1">
<label for="prefix" class="text-xs uppercase tracking-widest text-gray-400">Prefix</label>
<input id="prefix"
class="w-32 px-2 py-1 bg-gray-600 text-gray-300 transition duration-300 focus:shadow-2xl rounded-sm"
type="text" x-model="prefix" />
</div>
<button @click="prefixer"
class="px-4 py-2 bg-gray-800 text-indigo-200 uppercase font-bold rounded-sm shadow-md hover:shadow-2xl transition duration-300 active:ring">Prefix
It</button>
</div>
</div>
</body>
</html>