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

Commit

Permalink
Landing window design
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Jul 7, 2022
1 parent e09477f commit c657a99
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 22 deletions.
1 change: 1 addition & 0 deletions .eslintrc.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,5 +35,6 @@ module.exports = {
"no-var": ["error"],
"no-unused-vars": ["warn"],
"no-use-before-define": ["off"],
"svelte/valid-compile": ["off"],
},
}
4 changes: 3 additions & 1 deletion interface/components/details.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
<ChevronUpIcon class={`${open ? "rotate-180 transform" : ""} h-5 w-5 text-white`} />
</DisclosureButton>
<Transition enter="transition duration-200 ease-out" enterFrom="transform scale-95 opacity-0" enterTo="transform scale-100 opacity-100" leave="transition duration-200 ease-out" leaveFrom="transform scale-100 opacity-100" leaveTo="transform scale-95 opacity-0">
<DisclosurePanel class="px-4 pt-4 pb-2 text-left text-lg text-gray-200">If you're unhappy with your purchase for any reason, email us within 90 days and we'll refund you in full, no questions asked.</DisclosurePanel>
<DisclosurePanel class="px-4 pt-4 pb-2 text-left text-lg text-gray-200">
<slot />
</DisclosurePanel>
</Transition>
</Disclosure>
</div>
Expand Down
9 changes: 4 additions & 5 deletions interface/styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
}

.buttonm {
@apply flex w-60 transform cursor-pointer items-center gap-2 rounded-2xl border-2 border-transparent px-8 py-[16.5px] text-left text-xl font-medium text-white duration-200 ease-in hover:!border-gray-700 hover:!bg-gray-700 motion-reduce:transform-none motion-reduce:transition-none;
@apply transparentHover flex w-60 transform cursor-pointer items-center gap-2 rounded-2xl border-2 border-transparent px-8 py-[16.5px] text-left text-xl font-medium text-white duration-200 ease-in motion-reduce:transform-none motion-reduce:transition-none;
}

.select {
Expand Down Expand Up @@ -80,18 +80,17 @@ h5 {
}

.progress {
top: -30px;
position: relative;
width: 73%;
width: 95%;
height: 15px;
background: hsla(0, 0%, 100%, 5.12%);
border-radius: 30px;
overflow: hidden;
}

.progress__fill {
.progressFill {
width: 0%;
height: 100%;
background: white;
transition: all 0.2s;
}

70 changes: 55 additions & 15 deletions interface/windows/landing.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
<h3>Choose how you want to use Authme.</h3>
</div>

<div class="mb-10 flex w-full flex-row justify-center gap-2 small:flex-wrap">
<div class="transparent-800 my-5 flex w-1/2 flex-wrap items-center justify-center rounded-2xl p-5 small:w-full">
<div class="mb-10 flex w-full flex-row justify-center gap-2 sm:flex-wrap">
<div class="transparent-800 my-5 flex w-1/2 flex-wrap items-center justify-center rounded-2xl p-5 sm:w-full">
<h4 data-loc class="mb-3">Require password</h4>
<h5 data-loc class="mb-3">You have to type in a password every time you launch Authme.</h5>

Expand All @@ -19,7 +19,7 @@
<span data-loc>Continue</span>
</button>
</div>
<div class="transparent-800 my-5 flex w-1/2 flex-wrap items-center justify-center rounded-2xl p-5 small:w-full">
<div class="transparent-800 my-5 flex w-1/2 flex-wrap items-center justify-center rounded-2xl p-5 sm:w-full">
<h4 data-loc class="mb-3">No password</h4>
<h5 data-loc class="mb-3">If you don't want to type in your password every time you launch Authme.</h5>

Expand All @@ -31,31 +31,71 @@
</button>
</div>
</div>
<Details />
<Details>
<div class="flex justify-between">
<div>
<h4>Go back</h4>
<h5>Choose a different login method.</h5>
</div>
<div>
<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="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" />
</svg>
Go back
</button>
</div>
</div>
</Details>
</div>
</div>

<div class="transparent-900 m-auto mt-40 mb-60 w-3/5 rounded-2xl p-10 text-center">
<h1>Welcome to Authme!</h1>
<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>Create password</h2>
<h3>Choose how you want to use Authme.</h3>
<h3>Create a strong password to encrypt your codes.</h3>
</div>

<div class="transparent-800 mb-10 flex w-full items-center justify-center gap-5 rounded-2xl p-5 small:flex-wrap">
<div>
<h5>Password</h5>
<input class="input" type="password" />
</div>
<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
<div class="mx-auto flex w-full items-center justify-center gap-5 sm:flex-wrap ">
<div class="flex flex-col items-center justify-center gap-2">
<h5 class="">Password</h5>
<input class="input" type="password" />
</div>

<div>
<h5>Password</h5>
<input class="input" type="password" />
<div class="flex flex-col items-center justify-center gap-2">
<h5>Confirm password</h5>
<input class="input" type="password" />
</div>
</div>

<button class="button mx-auto mt-10">
<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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Confirm
</button>
</div>
<Details />

<Details>
<div class="flex justify-between">
<div>
<h4>Go back</h4>
<h5>Choose a different login method.</h5>
</div>
<div>
<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="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" />
</svg>
Go back
</button>
</div>
</div>
</Details>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ module.exports = {
},

screens: {
small: { max: "1650px" },
sm: { max: "1650px" },
},
},
},
Expand Down

0 comments on commit c657a99

Please sign in to comment.