mirror of
https://github.com/pockethost/pockethost.git
synced 2025-07-05 04:12:29 +00:00
UI/CSS Framework and Homepage Design (#4)
* Testing the new UI flow using a fork * Homepage Redesign v1.0 * code alignment * code alignment * removed unused imports * Fixed the PocketBase name case Co-authored-by: Brewhouse Digital <zach@brewhouse.digital>
This commit is contained in:
Brewhouse Digital
GitHub
parent
e8cff962c3
commit
1563ca2c11
1
packages/pockethost.io/.gitignore
vendored
1
packages/pockethost.io/.gitignore
vendored
@ -8,3 +8,4 @@ node_modules
|
|||||||
!.env.example
|
!.env.example
|
||||||
dist-server
|
dist-server
|
||||||
.idea
|
.idea
|
||||||
|
yarn-error.log
|
||||||
|
|||||||
@ -4,9 +4,22 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/global.css" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
|
||||||
|
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>%sveltekit.body%</div>
|
<div>%sveltekit.body%</div>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
10
packages/pockethost.io/src/assets/_bootstrap.css
Normal file
10
packages/pockethost.io/src/assets/_bootstrap.css
Normal file
File diff suppressed because one or more lines are too long
49
packages/pockethost.io/src/components/FeatureCard.svelte
Normal file
49
packages/pockethost.io/src/components/FeatureCard.svelte
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let title: string;
|
||||||
|
export let subtitle: string;
|
||||||
|
export let icon: string;
|
||||||
|
export let fullHeight: boolean;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="card {fullHeight && 'h-100'}">
|
||||||
|
<div class="card-body">
|
||||||
|
{#if icon}
|
||||||
|
<div class="d-flex align-items-center gap-3 mb-3">
|
||||||
|
<div class="card-icon">
|
||||||
|
<i class={icon}></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{#if title}<h5 class="card-title {!subtitle && 'mb-0'}">{title}</h5>{/if}
|
||||||
|
{#if subtitle}<h6 class="card-subtitle mb-0 text-muted">{subtitle}</h6>{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
{#if title}<h5 class="card-title">{title}</h5>{/if}
|
||||||
|
{#if subtitle}<h6 class="card-subtitle mb-2 text-muted">{subtitle}</h6>{/if}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card {
|
||||||
|
border: 0;
|
||||||
|
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
|
||||||
|
border-radius: 18px;
|
||||||
|
}
|
||||||
|
.card-icon {
|
||||||
|
background-color: #eee;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 35px;
|
||||||
|
font-size: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import {fade} from 'svelte/transition';
|
||||||
|
import {onMount} from "svelte";
|
||||||
|
|
||||||
|
let isReady: boolean = false;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
isReady = true;
|
||||||
|
}, 3000);
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="homepage-hero-animation">
|
||||||
|
{#if !isReady}
|
||||||
|
<div class="text-center">
|
||||||
|
<p>Creating Your New Instance...</p>
|
||||||
|
<div class="spinner-border text-primary" role="status">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if isReady}
|
||||||
|
<div in:fade="{{duration: 1000}}">
|
||||||
|
<img src="/images/pocketbase-intro-screen.jpg" alt="Screenshot of the Pocketbase Intro UI" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.homepage-hero-animation {
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 30px;
|
||||||
|
min-height: 500px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,11 +1,10 @@
|
|||||||
<script>
|
<script>
|
||||||
import Navbar from '$components/Navbar.svelte'
|
import Navbar from '$components/Navbar.svelte'
|
||||||
import { Styles } from 'sveltestrap'
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Styles />
|
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<main>
|
|
||||||
|
<main data-sveltekit-prefetch>
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
@ -1,86 +1,124 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Button from '$components/Button/Button.svelte'
|
import HomepageHeroAnimation from "$components/HomepageHeroAnimation.svelte";
|
||||||
import { ButtonSizes } from '$components/Button/types'
|
import FeatureCard from "$components/FeatureCard.svelte";
|
||||||
import Caption from '$components/Caption/Caption.svelte'
|
|
||||||
import { CaptionSize } from '$components/Caption/types'
|
|
||||||
import Feature from '$components/Feature.svelte'
|
|
||||||
import Gap from '$components/Gap.svelte'
|
|
||||||
import { PUBLIC_APP_DOMAIN } from '$env/static/public'
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
|
||||||
<Caption size={CaptionSize.Hero}>Firebase and Supabase...<br />ljbf</Caption>
|
|
||||||
|
|
||||||
<div style="max-width: 400px; margin-left: auto; margin-right: auto">
|
|
||||||
<Button href="/signup" size={ButtonSizes.Wide}>Get Started Free</Button>
|
|
||||||
</div>
|
|
||||||
<Gap />
|
|
||||||
<div>
|
|
||||||
<Feature title={`Up in 30 seconds`}>
|
|
||||||
<p>
|
|
||||||
A backend for your next app is as fast as signing up. No provisioning servers, no Docker
|
|
||||||
fiddling, just B(ad)aaS productivity.
|
|
||||||
</p>
|
|
||||||
<ul>
|
|
||||||
<li>Sign up</li>
|
|
||||||
<li>Pick a unique project name</li>
|
|
||||||
<li>Connect with our JS client</li>
|
|
||||||
</ul>
|
|
||||||
</Feature>
|
|
||||||
<Feature title={'Zero Config'}
|
|
||||||
>With PocketHost, batteries are included. You get a database, outgoing email, SSL,
|
|
||||||
authentication, cloud functions, and high concurrency all in one stop.</Feature
|
|
||||||
>
|
|
||||||
<Feature title={'Database'}>
|
|
||||||
Your PocketHost instance is powered by its own internal SQLite instance. SQLite is <a
|
|
||||||
href="https://pocketbase.io/faq/"
|
|
||||||
target="_blank">more performant than mySQL or Postgres</a
|
|
||||||
>
|
|
||||||
and is
|
|
||||||
<a href="https://www.sqlite.org/whentouse.html" target="_blank"
|
|
||||||
>perfect for powering your next app</a
|
|
||||||
>.
|
|
||||||
</Feature>
|
|
||||||
<Feature title={'Auth'}
|
|
||||||
>Email and oAuth authentication options work out of the box. Send transactional email to your
|
|
||||||
users from our verified domain and your custom address, <code
|
|
||||||
>yoursubdomin@{PUBLIC_APP_DOMAIN}</code
|
|
||||||
>.</Feature
|
|
||||||
>
|
|
||||||
<Feature title={'Storage'}
|
|
||||||
>PocketHost securely stores your files on Amazon S3, or you can use your own key to manage
|
|
||||||
your own storage.</Feature
|
|
||||||
>
|
|
||||||
<Feature title={'Room to Grow'}
|
|
||||||
>PocketHost is perfect for hobbist, low, and medium volume sites and apps.
|
|
||||||
<p>
|
|
||||||
PocketHost, and the underlying PocketBase, can scale to well over 10,000 simultaneous
|
|
||||||
connections.
|
|
||||||
</p></Feature
|
|
||||||
>
|
|
||||||
<Feature title={`Self-host`}>
|
|
||||||
When you're ready to take your project in-house, we have you covered. You can export your
|
|
||||||
entire PocketHost environment along with a Dockerfile to run it.
|
|
||||||
</Feature>
|
|
||||||
<Feature title={'Open Source Stack'}
|
|
||||||
>PocketHost is powered by Svelte, Vite, Typescript, PocketBase, and SQLite. Because the entire
|
|
||||||
stack is open source, you'll never be locked into the whims of a vendor.</Feature
|
|
||||||
>
|
|
||||||
<Feature title={'Coming Soon'}>
|
|
||||||
<ul>
|
|
||||||
<li>JS/TS cloud functions</li>
|
|
||||||
<li>Deploy to Fly.io</li>
|
|
||||||
<li>Lightstream</li>
|
|
||||||
</ul>
|
|
||||||
</Feature>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<style type="text/scss">
|
<div class="container">
|
||||||
main {
|
<div class="row align-items-center justify-content-between hero">
|
||||||
text-align: center;
|
<div class="col-lg-6">
|
||||||
padding: 1em;
|
<h2>Deploy <span>PocketBase</span> in 30 seconds</h2>
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
<p>Spend less time on configuring your backend, and more time building new features for your web app.</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<a href="/signup" class="btn btn-primary">Get Started for Free</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-5">
|
||||||
|
<HomepageHeroAnimation />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="features">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="mb-5">Features</h2>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||||
|
<FeatureCard title="Up in 30 seconds" icon="bi bi-stopwatch" fullHeight={true}>
|
||||||
|
<p>A backend for your next app is as fast as signing up. No provisioning servers, no Docker fiddling, just B(ad)aaS productivity.</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Sign up</li>
|
||||||
|
<li>Pick a unique project name</li>
|
||||||
|
<li>Connect with our JS client</li>
|
||||||
|
</ul>
|
||||||
|
</FeatureCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||||
|
<FeatureCard title="Zero Config" icon="bi bi-check-lg" fullHeight={true}>
|
||||||
|
<p>With PocketHost, batteries are included. You get a database, outgoing email, SSL, authentication, cloud functions, and high concurrency all in one stop.</p>
|
||||||
|
</FeatureCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 mb-4">
|
||||||
|
<FeatureCard title="Database" icon="bi bi-hdd-stack" fullHeight={true}>
|
||||||
|
<p>Your PocketHost instance is powered by its own internal SQLite instance. SQLite is <a href="https://pocketbase.io/faq/" target="_blank">more performant than mySQL or Postgres</a> and is <a href="https://www.sqlite.org/whentouse.html" target="_blank">perfect for powering your next app</a>.</p>
|
||||||
|
</FeatureCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-md-6 col-lg-3 mb-4">
|
||||||
|
<FeatureCard title="Auth" icon="bi bi-shield-lock" fullHeight={true}>
|
||||||
|
<p>Email and oAuth authentication options work out of the box. Send transactional email to your users from our verified domain and your custom address <code>yoursubdomin@pockethost.local</code>.</p>
|
||||||
|
</FeatureCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-md-6 col-lg-3 mb-4">
|
||||||
|
<FeatureCard title="Storage" icon="bi bi-archive" fullHeight={true}>
|
||||||
|
<p>PocketHost securely stores your files on Amazon S3, or you can use your own key to manage your own storage.</p>
|
||||||
|
</FeatureCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-md-6 col-lg-3 mb-4">
|
||||||
|
<FeatureCard title="Room to Grow" icon="bi bi-cloud-arrow-up" fullHeight={true}>
|
||||||
|
<p>PocketHost is perfect for hobbist, low, and medium volume sites and apps.</p>
|
||||||
|
<p>PocketHost, and the underlying PocketBase, can scale to well over 10,000 simultaneous connections.</p>
|
||||||
|
</FeatureCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-md-6 col-lg-3 mb-4">
|
||||||
|
<FeatureCard title="Self-host" icon="bi bi-house-door" fullHeight={true}>
|
||||||
|
<p>When you're ready to take your project in-house, we have you covered. You can export your entire PocketHost environment along with a Dockerfile to run it.</p>
|
||||||
|
</FeatureCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-md-6 col-lg-6 mb-4">
|
||||||
|
<FeatureCard title="Open Source Stack" icon="bi bi-code-slash" fullHeight={true}>
|
||||||
|
<p>PocketHost is powered by Svelte, Vite, Typescript, PocketBase, and SQLite. Because the entire stack is open source, you'll never be locked into the whims of a vendor.</p>
|
||||||
|
</FeatureCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-md-6 col-lg-6 mb-4">
|
||||||
|
<FeatureCard title="Coming Soon" icon="bi bi-card-checklist" fullHeight={true}>
|
||||||
|
<ul>
|
||||||
|
<li>JS/TS cloud functions</li>
|
||||||
|
<li>Deploy to Fly.io</li>
|
||||||
|
<li>Lightstream</li>
|
||||||
|
</ul>
|
||||||
|
</FeatureCard>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.hero {
|
||||||
|
padding: 100px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h2 {
|
||||||
|
font-size: 65px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h2 span {
|
||||||
|
background-image: linear-gradient( 83.2deg, rgba(150,93,233,1) 10.8%, rgba(99,88,238,1) 94.3% );
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features {
|
||||||
|
background-image: linear-gradient( 179.4deg, rgb(252, 239, 233) 2.2%, rgb(211, 242, 185) 96.2% );
|
||||||
|
padding: 120px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features h2 {
|
||||||
|
font-size: 56px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,4 +1,6 @@
|
|||||||
|
// TODO: Are we hard reloading on purpose or can we use SvelteKit's `goto` method?
|
||||||
export const redirect = (url: string) => {
|
export const redirect = (url: string) => {
|
||||||
if (typeof window === 'undefined') return
|
if (typeof window === 'undefined') return
|
||||||
window.location.href = url
|
window.location.href = url
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,63 +1,15 @@
|
|||||||
html, body {
|
body, p,
|
||||||
position: relative;
|
h1, h2, h3, h4, h5, h6 {
|
||||||
width: 100%;
|
font-family: 'Inter', sans-serif;
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
color: #333;
|
font-weight: 700;
|
||||||
margin: 0;
|
|
||||||
padding: 8px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.btn.btn-primary {
|
||||||
color: rgb(0,100,200);
|
--bs-btn-border-radius: 50px;
|
||||||
text-decoration: none;
|
--bs-btn-bg: #0072f5;
|
||||||
}
|
--bs-btn-padding-x: 24px;
|
||||||
|
--bs-btn-padding-y: 8px;
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:visited {
|
|
||||||
color: rgb(0,80,160);
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
input, button, select, textarea {
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
-webkit-padding: 0.4em 0;
|
|
||||||
padding: 0.4em;
|
|
||||||
margin: 0 0 0.5em 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:disabled {
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
color: #333;
|
|
||||||
background-color: #f4f4f4;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:disabled {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:not(:disabled):active {
|
|
||||||
background-color: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:focus {
|
|
||||||
border-color: #666;
|
|
||||||
}
|
}
|
||||||
BIN
packages/pockethost.io/static/images/pocketbase-intro-screen.jpg
Normal file
BIN
packages/pockethost.io/static/images/pocketbase-intro-screen.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Loading…
x
Reference in New Issue
Block a user