xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/morganwill.com.
morganwill.com
qr
author
Morgan
date
(Jan 24, 2024, 3:13 PM -0500)
commit
ce4091f2
ce4091f2509a03397d7684413967fecf264369a5
parent
063448a3
063448a3c34656718f97ce4966ff932182057aa2
+76
+76
src/routes/qr/+page.svelte
+76
src/routes/qr/+page.svelte
···
1
+
<script>
2
+
import { onMount } from 'svelte';
3
+
import QRCode from 'qrcode';
4
+
5
+
let ssid = '';
6
+
let password = '';
7
+
let qrCodeData = null;
8
+
$: qr_filetype = 'svg';
9
+
10
+
const generateQR = async () => {
11
+
if (ssid && password) {
12
+
// Convert the QR code to a data object suitable for SVG rendering
13
+
qrCodeData = await QRCode.toString(`WIFI:S:${ssid};T:WPA;P:${password};;`, { type: qr_filetype });
14
+
}
15
+
};
16
+
17
+
onMount(generateQR);
18
+
</script>
19
+
20
+
<style>
21
+
22
+
.container {
23
+
width: 100vw;
24
+
height: 100vh;
25
+
padding: 1em;
26
+
box-sizing: border-box;
27
+
display: flex;
28
+
flex-direction: column;
29
+
align-items: center;
30
+
}
31
+
32
+
.input-container {
33
+
width: calc(100% - 2em);
34
+
max-width: 300px;
35
+
/* margin-top: 1em; */
36
+
}
37
+
38
+
.input-group input {
39
+
width: 100%;
40
+
padding: 10px;
41
+
/* margin-bottom: 1em; */
42
+
}
43
+
44
+
.qr-container {
45
+
width: 90vh;
46
+
max-width: 90%;
47
+
/* max-width: 500px; */
48
+
/* height: auto; */
49
+
max-height:90%;
50
+
margin-top: 1em; /* Adjust space between input and QR code */
51
+
}
52
+
53
+
.qr-container {
54
+
width: 90%;
55
+
height: 90%;
56
+
padding: 5%; /* This acts as a margin for the QR code */
57
+
box-sizing: border-box;
58
+
}
59
+
60
+
svg {
61
+
width: 100%;
62
+
height: 100%;
63
+
}
64
+
</style>
65
+
66
+
<div class="container">
67
+
<div class="input-container">
68
+
<div class="input-group">
69
+
<input type="text" placeholder="WiFi Name (SSID)" bind:value={ssid} on:input={generateQR}>
70
+
<input type="text" placeholder="Password" bind:value={password} on:input={generateQR}>
71
+
</div>
72
+
</div>
73
+
<div class="qr-container">
74
+
{@html qrCodeData ? qrCodeData : '<div class="placeholder"></div>'}
75
+
</div>
76
+
</div>