-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
63 lines (51 loc) · 3.56 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D words with some perspective</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="stylesheet" href="src/index.css">
</head>
<body>
<div id="loading" class="p-8 absolute mx-auto left-0 right-0 text-center w-1/6 text-xl mt-8 font-semibold bg-yellow-300 rounded-2xl">
<img src="/oval.svg" class="w-32 my-4 mx-auto">
<span> LOADING </span>
</div>
<div class="flex flex-col h-dvh">
<div class="bg-slate-400 p-2 font-extrabold font-mono text-2xl">3D words with some perspective</div>
<div class="flex flex-grow">
<div class="bg-slate-300 flex flex-col p-2 gap-2 min-w-96 border-r-cyan-800 border-r-4">
<input type="text" id="text-1" class="changes-input text-lg font-mono bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" value="form" autocomplete="off"/>
<input type="text" id="text-2" class="changes-input text-lg font-mono bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" value="labs" autocomplete="off"/>
<div class="flex items-center ps-4 border bg-gray-50 border-gray-200 rounded-lg">
<input id="base-toggle" type="checkbox" value="" name="bordered-checkbox" class="changes-input w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label for="base-toggle" class="w-full py-2.5 ms-2 text-lg font-mono font-medium text-gray-900 cursor-pointer">add base</label>
</div>
<div class="bg-gray-50 rounded-lg p-2 font-mono">
<label for="letter-spacing" class="block mb-2 text-lg font-medium text-gray-900">letter spacing</label>
<input id="letter-spacing" type="range" value="0.4" min="0.12" max="0.75" step="0.001" class="changes-input w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
</div>
<div class="flex items-center">
<span class="textlg p-2">font:</span>
<select id="font-selector" class="changes-input bg-gray-50 border border-gray-300 text-gray-900 text-lg rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
<option value="iosevka">Iosevka</option>
<option value="ocra">OCR-A</option>
<option selected value="ocrb">OCR-B</option>
<option value="ptsans">PT Sans</option>
<option value="tulpenone">Tulpen One</option>
<option value="comicn">Comic Neue</option>
<option value="robotoslab">Roboto Slab</option>
<option value="lora">Lora</option>
</select>
</div>
<div id="errorBox" class="bg-yellow-200 p-3 rounded-lg font-semibold text-xl hidden text-center">⚠️<br> Both words needs to be the same length</div>
<button type="button" class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none">Do it!</button>
<button type="button" id="export" class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none">export STL</button>
</div>
<div class="w-full" id="canvasContainer"></div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>