Madmin
/
Erant-OldApp
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

přidám button

This commit is contained in:
Ota Prokopec 2022-11-21 20:49:12 +01:00
parent 3df3035146
commit 837b7804d9
3 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/Components/QR/QRinput.svelte
View File

@ -6,7 +6,7 @@
</script> </script>
<div class="w-full h-full flex relative overflow-hidden"> <div class="w-full h-full flex relative overflow-hidden">
<div class="h-full w-full absolute flex justify-center gap-8 flex-wrap flex-col items-center bg-[#3A3A3A] p-[12.5%]"> <div class="h-full w-full absolute flex justify-center gap-4 flex-wrap flex-col items-center bg-[#3A3A3A] p-[12.5%]">
<div class="h-[40vh] w-[40vh] max-w-[75vw] max-h-[75vw] rounded-[20px] bg-white flex justify-center items-center"> <div class="h-[40vh] w-[40vh] max-w-[75vw] max-h-[75vw] rounded-[20px] bg-white flex justify-center items-center">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_1505_2457" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20"> <mask id="mask0_1505_2457" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20">
@ -34,7 +34,7 @@
/> />
</svg> </svg>
</div> </div>
<input bind:value type="text" placeholder="The code" class="block p-3 border rounded-[15px] w-full" /> <input bind:value type="text" placeholder="The code" class="block p-3 border rounded-[15px] w-[40vh] max-w-[75vw] mt-4" />
<button class="w-[50%] min-w-[200px] rounded-[20px] bg-white z-10 h-14" on:click={() => dispatch('submit', value)}>submit</button> <button class="w-[40vh] max-w-[75vw] rounded-[15px] bg-white z-10 h-[52px] bg-[#4263EB] text-white" on:click={() => dispatch('submit', value)}>Continue</button>
</div> </div>
</div> </div>

1
src/lib/Components/QR/QRscanner.svelte
View File

@ -13,6 +13,7 @@
qrbox: { width: (3 / 4) * width, height: (1 / 2) * height }, qrbox: { width: (3 / 4) * width, height: (1 / 2) * height },
aspectRatio: width / height, aspectRatio: width / height,
} }
// @ts-ignore // @ts-ignore
html5QrCode.start({ facingMode: 'environment' }, config, (text, result) => { html5QrCode.start({ facingMode: 'environment' }, config, (text, result) => {
html5QrCode.stop() html5QrCode.stop()

4
src/lib/Components/QR/SwitchBar.svelte
View File

@ -9,12 +9,12 @@
</script> </script>
{#if switched === 'scan'} {#if switched === 'scan'}
<div class={'h-[70px] w-[340px] max-w-full bg-[#282828] p-[8px] flex flex-wrap flex-col gap-[8px] rounded-[30px] ' + className}> <div class={'h-[80px] w-[340px] max-w-[95%] bg-[#282828] p-[8px] flex flex-wrap flex-col gap-[8px] rounded-[30px] ' + className}>
<button class="rounded-[20px] bg-[#4263EB] text-white h-full"> Scan QR </button> <button class="rounded-[20px] bg-[#4263EB] text-white h-full"> Scan QR </button>
<button on:click={() => (switched = 'input')} class="rounded-[20px] bg-[#282828] text-[#8A8A8A] h-full"> Type in code </button> <button on:click={() => (switched = 'input')} class="rounded-[20px] bg-[#282828] text-[#8A8A8A] h-full"> Type in code </button>
</div> </div>
{:else if switched === 'input'} {:else if switched === 'input'}
<div class={'h-[70px] w-[340px] max-w-full bg-[#282828] p-[8px] flex flex-wrap flex-col gap-[8px] rounded-[30px] ' + className}> <div class={'h-[80px] w-[340px] max-w-[95%] bg-[#282828] p-[8px] flex flex-wrap flex-col gap-[8px] rounded-[30px] ' + className}>
<button on:click={() => (switched = 'scan')} class="rounded-[20px] bg-[#282828] text-[#8A8A8A] h-full"> Scan QR </button> <button on:click={() => (switched = 'scan')} class="rounded-[20px] bg-[#282828] text-[#8A8A8A] h-full"> Scan QR </button>
<button class="rounded-[20px] bg-[#4263EB] text-white h-full"> Type in code </button> <button class="rounded-[20px] bg-[#4263EB] text-white h-full"> Type in code </button>
</div> </div>