forked from tovare/calc
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
70 lines (64 loc) · 2.82 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=750, initial-scale=1">
<title>Calculator</title>
<!-- <script type="module" src="https://cdn.skypack.dev/twind/shim"></script> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css">
<script async>
void (async ()=>{
globalThis.hybrids = await import('https://www.unpkg.com/hybrids@8.0.8/src/index.js')
await import('./calculator.js')
await import('./flex-row.js')
window.__unocss = {
// rules: [
// // custom rules...
// ],
// presets: [
// // custom presets...
// ],
shortcuts: [
{
'frow-g2': 'flex flex-row justify-between gap-2',
'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
},
// dynamic shortcuts:
// [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
]
}
const initUnocssRuntime = await import('https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js')
const { __unocss_runtime: unoRuntime } = globalThis
console.log({unoRuntime, initUnocssRuntime, globalThis})
/**
* TODO try:
* https://github.com/unocss/unocss/tree/main/packages/preset-icons/
*/
})()
</script>
<!-- <script type="module" src="./flex-row.js" async> </script> -->
</head>
<body un-cloak>
<style>
[un-cloak] {
display: none;
}
</style>
<div un-cloak bg="gray-400" class="h-screen flex flex-col items-center justify-center">
<cal-culator id="calculator" >
<div class="block" value="1">inside</div>
</cal-culator>
<br />
<flex-row un-cloak classafter="gap-2">
<span class="block text-center grow" value="1">1</span>
<span class="block text-center grow" value="2">2</span>
<span class="block text-center grow" value="3">3</span>
</flex-row>
</div>
<!-- https://github.com/unocss/unocss/tree/main/packages/preset-attributify/ -->
<!-- <div un-cloak h="screen" bg="blue-400" flex="~" items="center" justify="center"></div> -->
<!-- uno.global preset will work with this style (all rules in class): -->
<!-- <div un-cloak class="h-screen bg-blue-400 flex items-center justify-center"> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/uno.global.js"></script> -->
</body>
</html>