Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Login new pro #645

Merged
merged 11 commits into from
Dec 7, 2023
Merged

Login new pro #645

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fd13e2d
fix: functions create
TorstenDittmann Dec 4, 2023
b9827f9
revert: unused import
TorstenDittmann Dec 4, 2023
b4436d1
Login page
elad2412 Dec 6, 2023
dfeeb8f
Login page
elad2412 Dec 6, 2023
1f9bf4e
Login page
elad2412 Dec 6, 2023
edfb1eb
Login page
elad2412 Dec 7, 2023
e31fde7
Login page
elad2412 Dec 7, 2023
72612cd
Login page
elad2412 Dec 7, 2023
7a81474
Login page
elad2412 Dec 7, 2023
b0ee333
Login page
elad2412 Dec 7, 2023
567f84c
Merge branch 'billing' into login-new-pro
ArmanNik Dec 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/lib/images/login/cloud-pro-bg-dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/lib/images/login/cloud-pro-bg-light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
318 changes: 247 additions & 71 deletions src/lib/layout/unauthenticated.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,44 +5,41 @@
import LoginLight from '$lib/images/login/login-light-mode.png';
import { app } from '$lib/stores/app';
import { user } from '$lib/stores/user';
import { isCloud } from '$lib/system';
//import { isCloud } from '$lib/system';

export let imgLight = LoginLight;
export let imgDark = LoginDark;
</script>

<main class="grid-1-1 is-full-page" id="main">
<section
class="u-flex u-flex-vertical"
style:--url={`url(${$app.themeInUse === 'dark' ? imgDark : imgLight})`}>
<div class="logo u-flex u-gap-16">
<section class="u-flex u-flex-vertical side-bg">
<div class="logo u-flex u-gap-16 u-margin-inline-auto is-not-mobile">
<a href={user ? '/console' : '/'}>
{#if $app.themeInUse === 'dark'}
<img
src={AppwriteLogoDark}
width="160"
width="123"
class="u-block u-only-dark"
alt="Appwrite Logo" />
{:else}
<img
src={AppwriteLogoLight}
width="160"
width="123"
class="u-block u-only-light"
alt="Appwrite Logo" />
{/if}
</a>
{#if isCloud}
<span class="aw-badges aw-eyebrow">Cloud Beta</span>
{/if}
</div>

<div class="u-flex u-stretch" />

<div class="tag-line is-not-mobile">
<p>Build like a team of hundreds<span class="underscore">_</span></p>
<div class="appwrite-pro">
<span class="text">APPWRITE</span>
<span class="appwrite-pro-text">PRO</span>
</div>

<div class="now-available">Now available</div>

</section>
<section class="grid-1-1-col-2 u-flex u-main-center u-cross-center">
<section class="grid-1-1-col-2 u-flex u-main-center u-cross-center _u-padding-16-mobile">
<div class="container u-flex u-flex-vertical u-cross-center u-main-center">
<div class="u-max-width-500 u-width-full-line">
<h1 class="heading-level-2 u-margin-block-start-auto">
Expand All @@ -56,13 +53,86 @@
<slot name="links" />
</ul>
</div>
<div class="logo u-flex u-gap-16 u-margin-inline-auto is-only-mobile u-margin-block-start-32">
<a href={user ? '/console' : '/'}>
{#if $app.themeInUse === 'dark'}
<img
src={AppwriteLogoDark}
width="93"
class="u-block u-only-dark"
alt="Appwrite Logo" />
{:else}
<img
src={AppwriteLogoLight}
width="93"
class="u-block u-only-light"
alt="Appwrite Logo" />
{/if}
</a>
</div>
</div>
</section>
</main>

<style lang="scss">
@import '@appwrite.io/pink/src/abstract/variables/_common.scss';
@import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
@import '@appwrite.io/pink/src/abstract/functions/_pxToRem.scss';

/* mobile utility class */
@media #{$break1} {
._u-padding-16-mobile { padding:pxToRem(16); }
}

.appwrite-pro {
position:relative; z-index:1;
display: flex; justify-content:center; align-items:baseline;
color:hsl(var(--color-neutral-100));
@media #{$break1} { gap:pxToRem(10); font-size:pxToRem(18); letter-spacing:pxToRem(4); }
@media #{$break2open} { gap:pxToRem(24); font-size:pxToRem(40); letter-spacing:pxToRem(8); line-height:120%; margin-block-start:pxToRem(160); }

&-text {
padding: pxToRem(18) pxToRem(28);
border:pxToRem(2) solid hsl(343 98% 60% / 0.2); border-radius:pxToRem(16);
background:rgba(253, 54, 110, 0.10); box-shadow:0 -12.173px 20.289px 0px rgba(253, 54, 110, 0.08) inset;
@media #{$break1} { padding:pxToRem(8) pxToRem(12); border-radius:pxToRem(8); }
}
}

:global(.theme-dark) .appwrite-pro {
color: hsl(var(--color-neutral-10));
}

.now-available {
position:relative; z-index:1;
background:linear-gradient(70deg, #FB5491 -35.72%, #19191D 79.96%);
background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
margin-inline:auto;

@media #{$break1} { font-size:pxToRem(18); margin-block-start:pxToRem(12); }
@media #{$break2open} { font-size:pxToRem(30); margin-block-start:pxToRem(36); }
}
:global(.theme-dark) .now-available {
background: linear-gradient(89deg, #FB5491 -29.25%, #FFF 43.27%);
background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

.side-bg { position:relative; background-color: #EDEDF0; }
.side-bg::after {
position:absolute; inset-inline:0; inset-block-end:0;
content:""; display:block; inline-size:100%; block-size:100%;
background-image: url("/src/lib/images/login/cloud-pro-bg-light.png");
background-size:contain;
background-repeat: no-repeat;
background-position:right bottom;
@media #{$break1} { display:none; }
}
:global(.theme-dark) .side-bg { background-color: #19191D; }
:global(.theme-dark) .side-bg::after {
background-image: url("/src/lib/images/login/cloud-pro-bg-dark.png");
}

/****** OLD ******/
/* Default (including mobile) */
#main section:first-child {
padding-block-start: 2.25rem;
Expand Down Expand Up @@ -90,11 +160,6 @@
/* for smaller screens */
@media #{$break2open} {
#main section:first-child {
background: var(--url);
background-repeat: no-repeat;
background-position: top;
background-size: cover;

padding-block-start: 6.25rem;
padding-block-end: 6.875rem;

Expand All @@ -117,64 +182,175 @@
}
}
}
</style>


<!-- OLD one -->
<!--
<main class="grid-1-1 is-full-page" id="main">
<section
class="u-flex u-flex-vertical"
style:--url={`url(${$app.themeInUse === 'dark' ? imgDark : imgLight})`}>
<div class="logo u-flex u-gap-16">
<a href={user ? '/console' : '/'}>
{#if $app.themeInUse === 'dark'}
<img
src={AppwriteLogoDark}
width="160"
class="u-block u-only-dark"
alt="Appwrite Logo" />
{:else}
<img
src={AppwriteLogoLight}
width="160"
class="u-block u-only-light"
alt="Appwrite Logo" />
{/if}
</a>
{#if isCloud}
<span class="aw-badges aw-eyebrow">Cloud Beta</span>
{/if}
</div>

:global(.theme-dark) .tag-line {
background: linear-gradient(45deg, white, white 60%, #fd376f);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

:global(.theme-light) .tag-line {
background: linear-gradient(45deg, #19191d, #19191d 60%, #fd376f);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.aw-eyebrow {
font-family: 'Source Code Pro', monospace;
line-height: 0.9rem;
font-size: 0.78rem;
letter-spacing: 0.08em;
font-weight: 400;
text-transform: uppercase;
}

.aw-badges {
--p-badges-shadow-bg-color: #f2c8d6;
--p-badges-shadow-border-color: #f69db7;
--p-badges-shadowopacity: 0.4;
align-self: center;
color: hsl(var(--color-neutral-0));
padding-block: 0.375rem;
padding-inline: 0.75rem;
border-radius: 0.375rem;
background: radial-gradient(
98.13% 199.7% at 98.13% 100%,
#fe6947 0%,
#fd366e 41.6%,
#fd366e 100%
);
-webkit-backdrop-filter: blur(2.5rem);
backdrop-filter: blur(2.5rem);
box-shadow:
<div class="u-flex u-stretch" />

<div class="tag-line is-not-mobile">
<p>Build like a team of hundreds<span class="underscore">_</span></p>
</div>
</section>
<section class="grid-1-1-col-2 u-flex u-main-center u-cross-center">
<div class="container u-flex u-flex-vertical u-cross-center u-main-center">
<div class="u-max-width-500 u-width-full-line">
<h1 class="heading-level-2 u-margin-block-start-auto">
<slot name="title" />
</h1>
<div class="u-margin-block-start-24">
<slot />
</div>

<ul class="inline-links is-center is-with-sep u-margin-block-start-32">
<slot name="links" />
</ul>
</div>
</div>
</section>
</main>
<style lang="scss">
@import '@appwrite.io/pink/src/abstract/variables/_devices.scss';

/* Default (including mobile) */
#main section:first-child {
padding-block-start: 2.25rem;
padding-block-end: 2rem;

div {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}

.tag-line {
font-family: 'Aeonik Pro';
font-size: 4rem;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 80px */
letter-spacing: -1.6px;
backdrop-filter: blur(0.5 rem);
.underscore {
-webkit-text-fill-color: #f02e65;
}
}
}

/* for smaller screens */
@media #{$break2open} {
#main section:first-child {
background: var(--url);
background-repeat: no-repeat;
background-position: top;
background-size: cover;

padding-block-start: 6.25rem;
padding-block-end: 6.875rem;

div {
padding-inline-start: 2.625rem;
padding-inline-end: 2rem;
}
}
}

/* for larger screens */
@media #{$break3open} {
#main section:first-child {
div {
padding-inline-start: 5.625rem;
padding-inline-end: 5rem;
}
.tag-line {
font-size: 5rem;
}
}
}

:global(.theme-dark) .tag-line {
background: linear-gradient(45deg, white, white 60%, #fd376f);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

:global(.theme-light) .tag-line {
background: linear-gradient(45deg, #19191d, #19191d 60%, #fd376f);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.aw-eyebrow {
font-family: 'Source Code Pro', monospace;
line-height: 0.9rem;
font-size: 0.78rem;
letter-spacing: 0.08em;
font-weight: 400;
text-transform: uppercase;
}

.aw-badges {
--p-badges-shadow-bg-color: #f2c8d6;
--p-badges-shadow-border-color: #f69db7;
--p-badges-shadowopacity: 0.4;
align-self: center;
color: hsl(var(--color-neutral-0));
padding-block: 0.375rem;
padding-inline: 0.75rem;
border-radius: 0.375rem;
background: radial-gradient(
98.13% 199.7% at 98.13% 100%,
#fe6947 0%,
#fd366e 41.6%,
#fd366e 100%
);
-webkit-backdrop-filter: blur(2.5rem);
backdrop-filter: blur(2.5rem);
box-shadow:
0.1875rem 0.1875rem var(--p-badges-shadow-bg-color),
0.25rem 0.1875rem var(--p-badges-shadow-border-color),
0.1875rem 0.25rem var(--p-badges-shadow-border-color),
0.125rem 0.1875rem var(--p-badges-shadow-border-color),
0.1875rem 0.125rem var(--p-badges-shadow-border-color);

:global(.theme-dark) & {
--p-badges-shadow-bg-color: #2c2c2f;
--p-badges-shadow-border-color: #39393c;
--p-badges-shadowopacity: 0.13;
}
:global(.theme-dark) & {
--p-badges-shadow-bg-color: #2c2c2f;
--p-badges-shadow-border-color: #39393c;
--p-badges-shadowopacity: 0.13;
}

:global(.theme-light) & {
--p-badges-shadow-bg-color: #f2c8d6;
--p-badges-shadow-border-color: #f69db7;
--p-badges-shadowopacity: 0.4;
}
:global(.theme-light) & {
--p-badges-shadow-bg-color: #f2c8d6;
--p-badges-shadow-border-color: #f69db7;
--p-badges-shadowopacity: 0.4;
}
}
</style>
-->
2 changes: 2 additions & 0 deletions src/lib/wizards/functions/cover.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,9 @@
<div
class="git-container u-position-relative"
class:u-margin-block-start-24={isSelfHosted && !isVcsEnabled}>

{#if isSelfHosted && !isVcsEnabled}

<div
class="overlay u-flex-vertical u-position-absolute u-height-100-percent u-width-full-line u-z-index-1 card u-text-center">
<div
Expand Down