Skip to content
This repository has been archived by the owner on Oct 19, 2022. It is now read-only.

Commit

Permalink
Codes window design
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Jul 7, 2022
1 parent a0dfb45 commit 5112362
Showing 1 changed file with 102 additions and 25 deletions.
127 changes: 102 additions & 25 deletions interface/windows/codes.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,110 @@
<div class="next transparent-900 mx-auto mt-40 flex w-1/2 flex-col items-center justify-center rounded-3xl pt-16 pb-16">
<div class=" transparent-800 container mt-10 mb-10 w-2/3 rounded-2xl">
<div class="mb-14 flex md:flex-col lg:flex-row">
<div class="flex flex-1 flex-col items-center justify-center lg:ml-10">
<h2 tabindex="0" class="mt-8 select-all rounded-2xl py-2 px-3 text-2xl font-normal">Google</h2>
<div class="transparent-900 m-auto mt-40 mb-60 w-3/5 rounded-2xl p-10 text-center">
<h1>Authme</h1>
<div class="mx-auto flex w-4/5 flex-col items-center justify-center rounded-2xl p-10">
<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
<h2>Import your codes</h2>
<h3>Import your 2FA codes, or if you have an import file choose it.</h3>
<div class="mx-auto mt-6 flex flex-row items-center justify-center gap-3 sm:flex-wrap">
<button class="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
Import codes
</button>
<button class="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 21h7a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v11m0 5l4.879-4.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242z" />
</svg>
Choose file
</button>
</div>
<div class="flex flex-1 flex-col items-center justify-center">
<h2 class="input transparent-900 mt-8 rounded-2xl py-2 px-3 text-center text-2xl font-normal text-white ">696969</h2>
</div>

<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
<h2>Save codes</h2>
<h3>Save your currently imported codes.</h3>
<div class="mx-auto mt-6 flex flex-row items-center justify-center">
<button class="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
<circle cx="12" cy="14" r="2" />
<polyline points="14 4 14 8 8 8 8 4" />
</svg>
Save codes
</button>
</div>
</div>

<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
<h2>Importing codes</h2>
<h3>Need help importing codes? Read the short tutorial or download a sample file.</h3>
<div class="mx-auto mt-6 flex flex-row items-center justify-center gap-3 sm:flex-wrap">
<button class="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="3" y="4" width="18" height="12" rx="1" />
<line x1="7" y1="20" x2="17" y2="20" />
<line x1="9" y1="16" x2="9" y2="20" />
<line x1="15" y1="16" x2="15" y2="20" />
</svg>
Show tutorial
</button>
<button class="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
Sample file
</button>
</div>
<div class="flex flex-1 flex-col items-center justify-center lg:mr-10">
<h2 tabindex="0" class="mt-8 select-all rounded-2xl py-2 px-3 text-2xl font-normal">30</h2>
</div>

<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
<h2>Getting started</h2>
<h3>In the mean time you can check out the settings or visit the GitHub page.</h3>
<div class="mx-auto mt-6 flex flex-row items-center justify-center gap-3 sm:flex-wrap">
<button class="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Settings
</button>
<button class="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
</svg>
GitHub
</button>
</div>
</div>
<div class=" flex flex-col items-center justify-center ">
<div class="progress transparent-900">
<div class="progress__fill" style="width: 80%;" />
<span class="progress__text">0%</span>

<div class="transparent-800 mb-10 flex w-full flex-col rounded-2xl p-5">
<div class="flex flex-row px-5 py-5 ">
<div class="flex flex-1 justify-start">
<h3 tabindex="0" class="mt-3 text-3xl font-normal">Google</h3>
</div>
<div class="flex flex-1 justify-center">
<p tabindex="0" class="transparent-900 relative mt-1.5 select-all rounded-2xl px-5 py-3 text-2xl">888888</p>
</div>
<div class="flex flex-1 justify-end">
<h3 tabindex="0" class="mt-3 text-3xl font-normal">15</h3>
</div>
</div>
<div class="mt-1 flex flex-col items-center justify-center ">
<div class="progress">
<div class="progressFill" style="width: 80%;" />
</div>
</div>
<div class="mt-5 flex items-center justify-center">
<button class="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
Copy
</button>
</div>
<button class="button mb-8">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
Copy
</button>
</div>
</div>
</div>

<script lang="ts">
export let asdASd: number = 10
asdASd = 11
</script>

0 comments on commit 5112362

Please sign in to comment.