Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: floating signup clouds

Browse Source
This commit is contained in:
tglide
2023-04-26 18:56:12 +01:00
parent 3ba62756f0
commit df431675dc
3 changed files with 75 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/images/login/cloud-1.svg
+12
View File
@@ -0,0 +1,12 @@
<svg width="79" height="58" viewBox="0 0 79 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M55.0709 16.202C50.359 6.60814 40.4551 0 29 0C12.9837 0 0 12.9182 0 28.8535C0 44.7889 12.9837 57.7071 29 57.7071C34.828 57.7071 40.2545 55.9966 44.8 53.0527C48.4035 55.963 52.997 57.7071 58 57.7071C69.5756 57.7071 78.9594 48.3706 78.9594 36.8535C78.9594 25.3364 69.5756 16 58 16C57.006 16 56.0281 16.0689 55.0709 16.202Z" fill="url(#paint0_linear_23_6393)"/>
<defs>
<linearGradient id="paint0_linear_23_6393" x1="56.5" y1="-7" x2="58" y2="57.7071" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6893"/>
<stop offset="0.29541" stop-color="#F02E65"/>
<stop offset="0.351472" stop-color="#F02E65" stop-opacity="0.86"/>
<stop offset="0.526441" stop-color="#F02E65" stop-opacity="0.22"/>
<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 924 B

src/lib/images/login/cloud-2.svg
+11
View File
@@ -0,0 +1,11 @@
<svg width="191" height="100" viewBox="0 0 191 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M126.696 19.8455C117.599 7.79137 103.154 -6.10352e-05 86.8893 -6.10352e-05C69.103 -6.10352e-05 53.4929 9.31726 44.6736 23.3373C42.1709 22.8017 39.5741 22.5198 36.9115 22.5198C16.5258 22.5198 0 39.0456 0 59.4313C0 79.8169 16.5258 96.3428 36.9115 96.3428C44.529 96.3428 51.6075 94.0353 57.4862 90.0812C65.7285 96.1135 75.893 99.6748 86.8893 99.6748C96.8339 99.6748 106.098 96.7621 113.876 91.7432C117.567 92.9821 121.519 93.6533 125.627 93.6533C134.693 93.6533 142.996 90.385 149.421 84.9623C153.51 87.3486 158.266 88.7158 163.342 88.7158C178.617 88.7158 191 76.3327 191 61.0574C191 45.782 178.617 33.3989 163.342 33.3989C160.501 33.3989 157.76 33.8272 155.18 34.6227C148.646 25.9069 138.347 20.1766 126.696 19.8455Z" fill="url(#paint0_linear_23_6387)"/>
<defs>
<linearGradient id="paint0_linear_23_6387" x1="81.5" y1="4.5" x2="81.5" y2="78.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6893"/>
<stop offset="0.278871" stop-color="#F02E65" stop-opacity="0.99"/>
<stop offset="0.657422" stop-color="#EC2E65" stop-opacity="0.29"/>
<stop offset="1" stop-color="#EC2E65" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

src/lib/layout/unauthenticated.svelte
+52 -10
View File
@@ -1,14 +1,16 @@
<script lang="ts">
import { base } from '$app/paths';
import AppwriteLogo from '$lib/images/appwrite.svg';
import AppwriteCloudLogo from '$lib/images/appwrite-cloud.svg';
import AppwriteCloudBg from '$lib/images/login/cloud-bg.svg';
import LoginDark from '$lib/images/login/login-dark-mode.svg';
import LoginLight from '$lib/images/login/login-light-mode.svg';
import { app } from '$lib/stores/app';
import { sdkForConsole } from '$lib/stores/sdk';
import { user } from '$lib/stores/user';
import { isCloud } from '$lib/system';
import LoginDark from '$lib/images/login/login-dark-mode.svg';
import LoginLight from '$lib/images/login/login-light-mode.svg';
import AppwriteLogo from '$lib/images/appwrite.svg';
import AppwriteCloudLogo from '$lib/images/appwrite-cloud.svg';
import AppwriteCloudBg from '$lib/images/login/cloud-bg.svg';
import Cloud1 from '$lib/images/login/cloud-1.svg';
import Cloud2 from '$lib/images/login/cloud-2.svg';
export let imgLight = LoginLight;
export let imgDark = LoginDark;
@@ -40,12 +42,14 @@
<main class="grid-1-1 is-full-page" id="main">
{#if isCloud}
<section
class="grid-1-1-col-1 u-flex u-flex-vertical cloud-section"
class="grid-1-1-col-1 u-flex u-flex-vertical cloud-section u-overflow-hidden"
style:--url={`url(${AppwriteCloudBg})`}>
<div class="u-margin-block-start-auto" />
<div class="u-margin-block-start-auto" />
<div class="u-margin-block-start-auto" />
<div class="u-margin-block-start-auto" />
<div class="u-margin-block-start-auto" />
<div class="u-margin-block-start-auto" />
<a class="logo" href={user ? '/console' : '/'}>
<img
@@ -56,7 +60,11 @@
alt="Appwrite" />
</a>
<p class="header">Cloud is Live</p>
<div class="header">
<p>Cloud is Live</p>
<img src={Cloud1} alt="" class="cloud-1" />
<img src={Cloud2} alt="" class="cloud-2" />
</div>
<div class="u-margin-block-start-auto" />
@@ -65,6 +73,7 @@
<div class="u-margin-block-start-auto" />
<div class="u-margin-block-start-auto" />
<div class="u-margin-block-start-auto" />
<div class="u-margin-block-start-auto" />
<div class="u-margin-block-start-auto is-no-mobile" />
<div
@@ -170,6 +179,18 @@
</main>
<style lang="scss">
@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-8px);
}
100% {
transform: translatey(0px);
}
}
.cloud-section {
background: var(--url);
background-repeat: no-repeat;
@@ -185,9 +206,30 @@
.header {
text-align: center;
align-self: center;
font-family: 'Poppins';
font-size: 5.25rem;
font-weight: 700;
position: relative;
p {
font-family: 'Poppins';
font-size: clamp(3.5rem, 7vw, 5.25rem);
font-weight: 700;
}
.cloud-1 {
position: absolute;
top: 95%;
left: 0;
translate: 15% -50%;
animation: float 6s ease-in-out infinite;
}
.cloud-2 {
position: absolute;
top: 110%;
right: 0;
translate: 20% -50%;
animation: float 7s ease-in-out infinite;
animation-delay: 3s;
}
}
.beta {