-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (137 loc) · 7.43 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!-- prettier-ignore -->
<!DOCTYPE html>
<html lang="en" dir="ltr" data-theme="light">
<!-- prettier-ignore -->
<head>
<meta charset="UTF-8" />
<title>Virtual Keyboard Progressive Web App - Experience Virtual Typing!</title>
<meta name="author" content="Shayan Zamani, [email protected]" />
<meta name="color-scheme" content="light dark" />
<meta name="theme-color" content="#d4d4d8" id="theme_color_meta_tag" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="keywords" content="html css js virtual keyboard, virtual keyboard progressive web app, online keyboard pwa, experience virtual typing" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="shayan-zamani.me" />
<meta property="og:title" name="title" content="Virtual Keyboard Progressive Web App" />
<meta property="og:url" content="https://shayanthenerd.github.io/virtual-keyboard-PWA" />
<meta property="og:image" content="./og-img.webp" />
<meta property="og:image:alt" content="Virtual Keyboard Progressive Web App" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:description" name="description" content="Virtual Keyboard Progressive Web App (PWA) gives you an awesome virtual typing experience. Install the PWA version on your device and enjoy it offline! It's built with Vanilla HTML, CSS, and JavaScript." />
<meta name="twitter:site" content="@shayan-zamani.me" />
<meta name="twitter:title" content="Virtual Keyboard Progressive Web App" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="./og-img.webp" />
<meta property="twitter:image:alt" content="Virtual Keyboard Progressive Web App" />
<link rel="icon" href="./favicon.ico">
<link rel="manifest" href="./virtual-keyboard.webmanifest">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="application-name" content="Virtual Keyboard">
<meta name="apple-mobile-web-app-title" content="Virtual Keyboard">
<meta name="msapplication-config" content="./assets/favicons/browserconfig.xml">
<link rel="mask-icon" href="./assets/favicons/safari-pinned-tab.svg" color="#00aba9">
<meta name="msapplication-TileImage" content="./assets/favicons/mstile-144x144.png">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="./assets/favicons/android-chrome-192x192.png">
<link rel="stylesheet" href="./assets/css/styles.css" />
<script type="module" src="./assets/js/app.js"></script>
</head>
<body
class="bg-zinc-300-to-400 dark:bg-zinc-400-to-500 relative flex h-full min-h-screen flex-col items-center bg-zinc-300 p-3 pb-12 text-zinc-100 antialiased duration-500 has-[dialog[open]]:overflow-hidden supports-[min-height:100dvh]:min-h-dvh lg:justify-center dark:bg-zinc-400">
<!-- Non-desktop device warning modal -->
<dialog
id="warning_modal"
class="fixed z-50 hidden w-11/12 max-w-max flex-col items-center justify-center gap-6 rounded-lg border-4 border-turquoise bg-zinc-100 p-4 transition-all duration-500 backdrop:bg-[#000000bf] open:flex focus-visible:outline-none dark:bg-zinc-900">
<strong class="text-balance text-center text-lg text-zinc-900 transition-colors duration-75 dark:text-zinc-100">
Please preview website on a desktop.
</strong>
<button
type="button"
aria-controls="warning_modal"
class="rounded-lg bg-turquoise px-12 py-2 text-base font-medium text-zinc-100 focus-visible:outline-turquoise">
OK
</button>
</dialog>
<main class="flex w-full max-w-244 flex-col space-y-4 lg:space-y-6 xl:min-w-244 xl:max-w-fit">
<h1 class="mb-2 text-center text-2xl font-bold tracking-wider text-turquoise duration-500 dark:text-charcoal">
Virtual Keyboard
<abbr title="Progressive Web App" class="cursor-default">PWA</abbr>
</h1>
<form onsubmit="return" class="flex flex-col-reverse gap-4 lg:flex-row lg:justify-evenly">
<!-- Text box -->
<fieldset
class="h-24 w-full overflow-hidden rounded-xl shadow focus-within:shadow-md lg:h-[124px] lg:max-w-2xl dark:focus-within:shadow-lg">
<legend class="sr-only">Text Box</legend>
<textarea
autofocus
rows="3"
inputmode="none"
autocomplete="off"
placeholder="Strat typing..."
id="text_box"
class="size-full resize-none bg-zinc-100 px-2.5 py-[5px] text-zinc-950 caret-zinc-400 duration-500 placeholder:text-zinc-400 focus-visible:outline-none lg:text-lg dark:bg-zinc-800 dark:text-zinc-100"></textarea>
</fieldset>
<!-- Controls -->
<fieldset
class="flex items-center justify-center gap-4 lg:mt-0 lg:grid lg:grid-cols-2 lg:grid-rows-2 lg:gap-x-3.5 lg:gap-y-3">
<legend class="sr-only">Control Buttons</legend>
<!-- Clear button -->
<button
type="reset"
id="clear_text_box_btn"
class="btn bg-red-500 hover:bg-red-600 focus-visible:outline-red-500 lg:place-self-end dark:bg-red-600 dark:hover:bg-red-700">
Clear
</button>
<!-- Sound button -->
<button
type="button"
title="Keypress sound"
id="sound_control_btn"
class="btn flex justify-evenly bg-blue-500 hover:bg-blue-600 focus-visible:outline-blue-500 lg:-space-x-1 lg:place-self-start dark:bg-blue-600 dark:hover:bg-blue-700">
<span id="sound_state">On</span>
<svg class="size-5.75 stroke-current">
<use href="./assets/icons.svg#speaker_on" id="sound_state_icon"></use>
</svg>
</button>
<!-- Theme button -->
<button
type="button"
title="Theme"
id="change_theme_btn"
class="ripple-effect h-11 shrink-0 basis-22.5 duration-500 focus-visible:rounded-px focus-visible:outline-turquoise lg:col-start-2 lg:row-start-1 lg:row-end-3 lg:h-12.5 lg:w-min lg:min-w-25 lg:scale-105 lg:hover:scale-110 dark:focus-visible:outline-charcoal">
<svg class="size-full lg:h-12.5">
<use href="./assets/icons.svg#keyboard_light" id="theme_icon"></use>
</svg>
</button>
</fieldset>
</form>
<!-- Virtual keyboard -->
<section class="overflow-auto rounded-2xl shadow-xl">
<div
class="flex min-h-[418px] select-none overflow-auto rounded-2xl bg-turquoise p-3.5 duration-500 dark:bg-zinc-900">
<!-- Keyboard keypress audio -->
<audio hidden aria-hidden="true" preload="auto" id="keypress_sound">
<source src="./assets/audios/keypress-sound.mp3" type="audio/mp3" />
</audio>
<div id="keyboard" class="flex flex-col gap-3 rounded-inherit"></div>
</div>
</section>
</main>
<footer class="absolute bottom-3 -space-x-2">
<small class="pt-0.5 text-base text-gray-900">©</small>
<address class="-ml-1.5 inline-block not-italic">
<a
href="https://shayan-zamani.me"
target="_blank"
rel="noopener noreferrer"
id="copyright_link"
class="ms-2 rounded-md text-sm font-semibold text-blue-700 underline transition-all duration-150 visited:text-purple-700 hover:text-blue-800 visited:hover:text-purple-800 focus-visible:outline focus-visible:outline-current lg:text-base dark:text-blue-800 dark:hover:text-blue-900">
Shayan Zamani
</a>
</address>
</footer>
</body>
</html>