Skip to content

Commit cf32d4c

Browse files
LevminerLevminer
committed
Redesign import page #186 
1 parent 8538065 commit cf32d4c

File tree

1 file changed

+60
-69
lines changed

1 file changed

+60
-69
lines changed

‎app/import/index.html‎

Lines changed: 60 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@
1313
</head>
1414
<body>
1515
<!-- build number -->
16-
<div class="w-full text-white bg-black font-bold build hidden z-10 top-0 sticky">
17-
<div class="container flex flex-row items-center justify-center py-2 mx-auto">
16+
<div class="build sticky top-0 z-10 hidden w-full bg-black font-bold text-white">
17+
<div class="container mx-auto flex flex-row items-center justify-center py-2">
1818
<div class="flex">
19-
<h5 class="mx-3 flex flex-row m-0 font-bold build-content text-center">You are running a pre release version of Authme!</h5>
19+
<h5 class="build-content m-0 mx-3 flex flex-row text-center font-bold">You are running a pre release version of Authme!</h5>
2020
</div>
2121
</div>
2222
</div>
2323

2424
<!-- header -->
25-
<div class="mx-auto rounded-2xl bg-gray-700 w-3/5 text-center mt-40">
26-
<img src="../../img/header.png" class="h-16 w-16 relative top-5" />
25+
<div class="mx-auto mt-40 w-3/5 rounded-2xl bg-gray-700 text-center">
26+
<img src="../../img/header.png" class="relative top-5 h-16 w-16" />
2727
<h2>Import</h2>
2828
<h4 data-loc>You can create your import file from QR codes and Google Authenticator QR codes.</h4>
2929
<button class="buttoni mb-6" onclick="hide()">
@@ -35,87 +35,78 @@ <h4 data-loc>You can create your import file from QR codes and Google Authentica
3535
</div>
3636

3737
<!-- content -->
38-
<div class="bg-gray-700 w-3/5 m-auto mt-20 mb-60 rounded-2xl relative text-center p-1">
39-
<div class="choose">
40-
<div class="mx-auto rounded-2xl bg-gray-800 w-2/3 mb-20" id="choose">
41-
<h3 class="pt-5" data-loc>QR code</h3>
42-
<details class="details mb-8">
43-
<summary data-loc class="summary">Instructions</summary>
44-
<h4>
45-
<span data-loc> Just screenshot the QR code(s) you want to import, save them on your computer, and choose the image(s) you saved.</span>
46-
<br />
47-
<br />
48-
<span data-loc>If you need more steps or help:</span>
49-
<br />
50-
<a data-loc class="link" href="#qrLink" onclick="qrLink()">Detailed steps</a>
51-
</h4>
52-
</details>
53-
<div class="flex flex-row justify-center gap-3 flex-wrap">
54-
<button class="buttoni mb-8" onclick="qrImport()">
38+
<div class="relative m-auto mt-20 mb-60 w-3/5 rounded-2xl bg-gray-700 p-1 text-center">
39+
<!-- supported qr code -->
40+
<div class="mx-auto mb-20 w-2/3 rounded-2xl bg-gray-800">
41+
<h3 data-loc class="pt-5">Supported QR codes</h3>
42+
<h4 data-loc>List of the supported QR codes. Currently you can import one type at a time.</h4>
43+
<button class="buttoni mb-8" onclick="examplesLink()">
44+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
45+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" />
46+
</svg>
47+
<span data-loc>Examples</span>
48+
</button>
49+
50+
<div class="flex flex-row justify-center pb-5">
51+
<div class="my-3 ml-3 mr-1.5 flex w-1/2 flex-wrap items-center justify-center rounded-2xl bg-gray-700 p-4">
52+
<h4 data-loc class="m-0 mb-3">TOTP 2FA QR code</h4>
53+
<h5 data-loc class="m-0">A TOTP QR code is that you find mostly everywhere if you want to setup 2FA.</h5>
54+
<h5 data-loc class="m-0">Example: (Google, Facebook, Microsoft)</h5>
55+
<h5 data-loc class="m-0">Starts with: (otpauth://totp/)</h5>
56+
<a data-loc class="link pt-3 !text-lg" href="#totp" onclick="totpLink()">Detailed steps</a>
57+
</div>
58+
<div class="my-3 mr-3 ml-1.5 flex w-1/2 flex-wrap items-center justify-center rounded-2xl bg-gray-700 p-4">
59+
<h4 data-loc class="m-0 mb-3">Migration 2FA QR code</h4>
60+
<h5 data-loc class="m-0">A migration QR code is what you can export, and contains all of your codes.</h5>
61+
<h5 data-loc class="m-0">Example: (Google Authenticator)</h5>
62+
<h5 data-loc class="m-0">Starts with: (otpauth-migration://)</h5>
63+
<a data-loc class="link pt-3 !text-lg" href="#migration" onclick="migrationLink()">Detailed steps</a>
64+
</div>
65+
</div>
66+
</div>
67+
68+
<!-- create import file -->
69+
<div class="mx-auto mb-10 w-2/3 rounded-2xl bg-gray-800">
70+
<h3 class="pt-5" data-loc>Create import file</h3>
71+
<h4 data-loc>Create your import file here. Choose the most convenient way for you.</h4>
72+
<div class="flex flex-col flex-wrap items-center justify-center gap-3">
73+
<div class="chooseImages m-1">
74+
<button class="buttoni" onclick="chooseImages()">
5575
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
5676
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
5777
</svg>
5878
<span data-loc>Choose image(s)</span>
5979
</button>
60-
<button class="buttoni mb-8" onclick="qrCamera()">
80+
<h5 data-loc class="m-0 pt-4">Choose images that contain a 2FA QR code.</h5>
81+
</div>
82+
<div class="useWebcam m-1">
83+
<button class="buttoni" onclick="useWebcam()">
6184
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
6285
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
6386
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
6487
</svg>
6588
<span data-loc>Use webcam</span>
6689
</button>
67-
<button class="buttoni mb-8 screenCapture hidden" onclick="qrScreen()">
68-
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
69-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
70-
</svg>
71-
Screen capture
72-
</button>
90+
<h5 data-loc class="m-0 pt-4">Use your webcam to scan 2FA QR codes.</h5>
7391
</div>
74-
<video id="qrVideo" class="hidden mx-auto" autoplay></video>
75-
<button class="buttoni mb-5 mt-5 hidden" id="qrStop">
76-
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
77-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
78-
</svg>
79-
Stop
80-
</button>
81-
</div>
82-
83-
<div class="mx-auto rounded-2xl bg-gray-800 w-2/3 mb-20" id="choose">
84-
<h3 class="pt-5" data-loc>Google Authenticator QR code</h3>
85-
<details class="details mb-8">
86-
<summary data-loc class="summary">Instructions</summary>
87-
<h4>
88-
<span data-loc>Tap on the three dots on the top right corner of the screen and export your accounts, take a picture of the export QR code(s), and choose the image(s) you saved and transferred to your computer.</span>
89-
<br />
90-
<br />
91-
<span data-loc>If you need more steps or help:</span>
92-
<br />
93-
<a data-loc class="link" href="#gaLink" onclick="gaLink()">Detailed steps</a>
94-
</h4>
95-
</details>
96-
<div class="flex flex-row justify-center gap-3 flex-wrap">
97-
<button class="buttoni mb-8" onclick="gaImport()">
98-
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
99-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
100-
</svg>
101-
<span data-loc>Choose image(s)</span>
102-
</button>
103-
<button class="buttoni mb-8" onclick="gaCamera()">
92+
<div class="screenCapture m-1 hidden">
93+
<button class="buttoni w-[576px] sm:w-72" onclick="screenCapture()">
10494
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
105-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
106-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
95+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
10796
</svg>
108-
<span data-loc>Use webcam</span>
97+
<span data-loc>Capture from screen</span>
10998
</button>
99+
<h5 data-loc class="m-0 pt-4 pb-10">Capture a 2FA QR code from your screen.</h5>
110100
</div>
111-
<video id="gaVideo" class="hidden mx-auto" autoplay></video>
112-
<button class="buttoni mb-5 mt-5 hidden" id="gaStop">
113-
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
114-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
115-
</svg>
116-
Stop
117-
</button>
118101
</div>
102+
<!-- video -->
103+
<video id="qrVideo" class="mx-auto mb-8 hidden" autoplay></video>
104+
<button class="buttoni mb-8 hidden" id="qrStop">
105+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
106+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
107+
</svg>
108+
Stop
109+
</button>
119110
</div>
120111
</div>
121112
</body>

0 commit comments

Comments
 (0)