-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (127 loc) · 5.29 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
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
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Keyboard Layout Heatmap</title>
</head>
<body class="h-screen flex flex-col" x-data="keyboard">
<main class="flex flex-col justify-center items-center flex-1">
<h1 class="text-4xl font-bold mb-4">Keyboard Layout Heatmap</h1>
<section class="p-4 w-9/12 flex align-center gap-4">
<h2 class="text-3xl font-bold mb-4">Board:</h2>
<div class="flex gap-4 flex-wrap">
<template x-for="(item, index) of layouts">
<button
class="bg-gray-100 border-2 border-slate-600 rounded-lg px-4 hover:bg-gray-200 active:bg-gray-400 leading-none h-12"
@click="getBoard(index)"
:class="board === index && 'bg-slate-600 text-white hover:bg-gray-800 hover:border-gray-800 active:bg-gray-950 active:border-gray-950'"
>
<span x-text="layouts[index].name"></span>
</button>
</template>
</div>
</section>
<section class="p-4 w-9/12 flex align-center gap-4">
<h2 class="text-3xl font-bold mb-4">Layout:</h2>
<div class="flex gap-4 flex-wrap">
<template x-for="(item, index) of layouts[board].value">
<button
class="bg-gray-100 border-2 border-slate-600 rounded-lg px-4 hover:bg-gray-200 active:bg-gray-400 leading-none h-12"
@click="getLayout(index)"
:class="layout === index && 'bg-slate-600 text-white hover:bg-gray-800 hover:border-gray-800 active:bg-gray-950 active:border-gray-950'"
>
<span x-text="layouts[board].value[index].name"></span>
</button>
</template>
</div>
</section>
<section
class="rounded-lg p-4 flex flex-col gap-1 bg-slate-700 broder-slate-800 border-t-slate-500 border-l-slate-500 border-2"
>
<div class="bg-slate-900 p-1 rounded-lg text-[3rem]">
<template x-for="(row, rowIndex) in keyboard">
<div class="flex gap-1">
<template x-for="(key, keyIndex) in row">
<kbd
class="h-[1em] min-w-[1em] relative"
:style="{width: key.size + 'em', flexGrow: row.length - 1 === keyIndex ? 1 : 0}"
>
<div
class="overflow-hidden relative h-[1em] min-w-[1em] w-full px-1 rounded flex justify-center shadow align-center bg-gradient-to-b from-slate-50 to-slate-400 pt-[2px] transition-all duration-75 top-0 active:top-1"
>
<div
class="w-full h-[1em] absolute -top-[2px] left-0 flex items-center justify-between blur-sm"
>
<div
class="h-[.8em] w-[.8em] bg-slate-200 flex-shrink-0 rotate-45 -left-5 relative"
></div>
<div
class="h-[.8em] w-[.8em] bg-slate-200 flex-shrink-0 rotate-45 -right-5 relative"
></div>
</div>
<div
class="h-[.7em] w-full border border-slate-100 flex-grow bg-gradient-to-b from-slate-200 to-slate-50 flex pt-1 pl-1 rounded"
>
<div
class="w-full h-full absolute top-0 left-0 opacity-50"
:style="{ backgroundColor: heatmap[key.value.toLowerCase()]?.color }"
></div>
<span
x-text="key.value"
class="relative leading-none text-sm"
></span>
</div>
</div>
</kbd>
</template>
</div>
</template>
</div>
</section>
<section class="py-4 w-9/12">
<h1 class="text-4xl font-bold">Sample Text</h1>
<textarea class="w-full my-4 h-24" x-model="sample"></textarea>
<div
class="flex gap-4"
x-data="{ text: ['keyboard', 'html', 'typescript'] }"
>
<template x-for="item in text">
<button
class="border-2 rounded-lg px-4 py-2 hover:bg-gray-200 active:bg-gray-400"
@click="setSample(item)"
>
<span
x-text="item.replace(/(?:^|\s)\w/g, match => match.toUpperCase())"
></span>
</button>
</template>
</div>
</section>
</main>
<footer
class="py-8 flex flex-col justify-center text-center text-slate-700 gap-2"
>
<p>
Made with love ❤️ by
<a
class="underline underline-offset-3 hover:bg-rose-100 text-rose-700"
href="https://github.com/wiktoriavh"
>
@wiktoriavh
</a>
</p>
<p class="text-sm text-slate-500">
Thanks to
<a
href="https://codepen.io/robstinson/pen/poWeaMx"
class="text-rose-700 underline underline-offset-3 hover:bg-rose-100"
>Rob Stinson</a
>
for the keyboard CSS and HTML.
</p>
</footer>
<script type="module" src="/src/main.ts"></script>
</body>
</html>