Skip to content

Commit

Permalink
Merge pull request #212 from appwrite/startups-program-section
Browse files Browse the repository at this point in the history 
Startup Program section
  • Loading branch information
@ArmanNik
ArmanNik authored Jun 14, 2024
2 parents 70cbb88 + 8d60d77 commit 60de1af
Show file tree
Hide file tree
Showing 6 changed files with 382 additions and 7 deletions.
6 changes: 6 additions & 0 deletions .changeset/proud-ducks-suffer.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@appwrite.io/pink-icons": minor
"@appwrite.io/pink": minor
---

Startup Program section
352 changes: 352 additions & 0 deletions apps/kitchensink/startups-program.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,352 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@appwrite/kitchensink - bucket settings demo</title>
</head>

<body>
<main class="grid-with-side" id="main">
{{> topNav}} {{> sideNav}}

<section class="main-content s-dFvp3V-Iy6FY">
<div class="top-cover">
<div class="container">
<div class="u-flex u-cross-center u-gap-16 u-margin-block-start-20">
<h1 class="heading-level-4 s-dFvp3V-Iy6FY">
<span class="text s-dFvp3V-Iy6FY">Storage</span>
</h1>
</div>
<div class="tabs s-dFvp3V-Iy6FY">
<ul class="tabs-list scroll-shadow-horizontal s-dFvp3V-Iy6FY">
<li class="tabs-item s-dFvp3V-Iy6FY">
<a class="tabs-button s-dFvp3V-Iy6FY is-selected" href="#"
><span class="text s-dFvp3V-Iy6FY">Buckets</span></a
>
</li>
<li class="tabs-item s-dFvp3V-Iy6FY">
<a class="tabs-button s-dFvp3V-Iy6FY" href="#"
><span class="text s-dFvp3V-Iy6FY">Usage</span></a
>
</li>
</ul>
</div>
</div>
</div>
<!--<Cover>-->
<div class="container u-margin-block-start-24">
<div class="u-flex u-gap-12 common-section u-main-space-between">
<h2 class="heading-level-5">Buckets</h2>
<button class="button" type="button">
<span class="icon-plus" aria-hidden="true"></span>
<span class="text">Add bucket</span></button
><!--<Button>-->
</div>
<div
class="grid-box common-section"
style="--grid-gap: 1rem; --grid-item-size: 22rem"
>
<a class="card" href="#"
><div class="grid-item-1">
<div class="eyebrow-heading-3">XX Files</div>
<h2 class="heading-level-6">Images</h2>
<div class="status"></div>
<div class="options">
<span class="tooltip"
><button type="button" class="tag">
<i class="icon-duplicate"></i>Bucket ID</button
><!--<Pill>-->
<span class="tooltip-popup is-bottom" role="tooltip"
>Click to copy</span
></span
><!--<Copy>-->
</div>
<ul class="icons u-flex u-gap-8">
<li>
<button class="tooltip" aria-label="encryption">
<span class="icon-lock-closed" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip"
><span>Encryption enabled</span></span
></button
><!--<Tooltip>-->
</li>
<li>
<button class="tooltip" aria-label="antivirus">
<span class="icon-shield-check" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip"
><span>Antivirus enabled</span></span
></button
><!--<Tooltip>-->
</li>
</ul>
</div></a
><!--<Bucket>--><a class="card" href="#"
><div class="grid-item-1">
<div class="eyebrow-heading-3">XX Files</div>
<h2 class="heading-level-6">Empty Bucket</h2>
<div class="status">
<div class="tag">Disabled</div>
<!--<Pill>-->
</div>
<div class="options">
<span class="tooltip"
><button type="button" class="tag">
<i class="icon-duplicate"></i>Bucket ID</button
><!--<Pill>-->
<span class="tooltip-popup is-bottom" role="tooltip"
>Click to copy</span
></span
><!--<Copy>-->
</div>
<ul class="icons u-flex u-gap-8">
<li>
<button class="tooltip" aria-label="encryption">
<span
class="icon-lock-closed u-opacity-20"
aria-hidden="true"
></span>
<span class="tooltip-popup" role="tooltip"
><span>Encryption disabled</span></span
></button
><!--<Tooltip>-->
</li>
<li>
<button class="tooltip" aria-label="antivirus">
<span
class="icon-shield-check u-opacity-20"
aria-hidden="true"
></span>
<span class="tooltip-popup" role="tooltip"
><span>Antivirus disabled</span></span
></button
><!--<Tooltip>-->
</li>
</ul>
</div></a
><!--<Bucket>--><a class="card" href="#"
><div class="grid-item-1">
<div class="eyebrow-heading-3">XX Files</div>
<h2 class="heading-level-6">test</h2>
<div class="status"></div>
<div class="options">
<span class="tooltip"
><button type="button" class="tag">
<i class="icon-duplicate"></i>Bucket ID</button
><!--<Pill>-->
<span class="tooltip-popup is-bottom" role="tooltip"
>Click to copy</span
></span
><!--<Copy>-->
</div>
<ul class="icons u-flex u-gap-8">
<li>
<button class="tooltip" aria-label="encryption">
<span class="icon-lock-closed" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip"
><span>Encryption enabled</span></span
></button
><!--<Tooltip>-->
</li>
<li>
<button class="tooltip" aria-label="antivirus">
<span
class="icon-shield-check u-opacity-20"
aria-hidden="true"
></span>
<span class="tooltip-popup" role="tooltip"
><span>Antivirus disabled</span></span
></button
><!--<Tooltip>-->
</li>
</ul>
</div></a
><!--<Bucket>--><a class="card" href="#"
><div class="grid-item-1">
<div class="eyebrow-heading-3">XX Files</div>
<h2 class="heading-level-6">zrdz</h2>
<div class="status">
<div class="tag">Disabled</div>
<!--<Pill>-->
</div>
<div class="options">
<span class="tooltip"
><button type="button" class="tag">
<i class="icon-duplicate"></i>Bucket ID</button
><!--<Pill>-->
<span class="tooltip-popup is-bottom" role="tooltip"
>Click to copy</span
></span
><!--<Copy>-->
</div>
<ul class="icons u-flex u-gap-8">
<li>
<button class="tooltip" aria-label="encryption">
<span class="icon-lock-closed" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip"
><span>Encryption enabled</span></span
></button
><!--<Tooltip>-->
</li>
<li>
<button class="tooltip" aria-label="antivirus">
<span class="icon-shield-check" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip"
><span>Antivirus enabled</span></span
></button
><!--<Tooltip>-->
</li>
</ul>
</div></a
><!--<Bucket>--><a class="card" href="#"
><div class="grid-item-1">
<div class="eyebrow-heading-3">XX Files</div>
<h2 class="heading-level-6">asdasd</h2>
<div class="status"></div>
<div class="options">
<span class="tooltip"
><button type="button" class="tag">
<i class="icon-duplicate"></i>Bucket ID</button
><!--<Pill>-->
<span class="tooltip-popup is-bottom" role="tooltip"
>Click to copy</span
></span
><!--<Copy>-->
</div>
<ul class="icons u-flex u-gap-8">
<li>
<button class="tooltip" aria-label="encryption">
<span
class="icon-lock-closed u-opacity-20"
aria-hidden="true"
></span>
<span class="tooltip-popup" role="tooltip"
><span>Encryption disabled</span></span
></button
><!--<Tooltip>-->
</li>
<li>
<button class="tooltip" aria-label="antivirus">
<span class="icon-shield-check" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip"
><span>Antivirus enabled</span></span
></button
><!--<Tooltip>-->
</li>
</ul>
</div></a
><!--<Bucket>-->
<article class="card is-border-dashed u-grid u-cross-center">
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<button
class="button is-only-icon is-secondary"
type="button"
>
<i class="icon-plus"></i></button
><!--<Button>-->
</div>
<div class="common-section"><p>Add a new bucket</p></div>
</div>
</article>
</div>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: 5</p>
<nav class="pagination">
<button class="button is-text is-disabled" aria-label="prev page">
<span class="icon-cheveron-left" aria-hidden="true"></span>
<span class="text">Prev</span>
</button>
<ol class="pagination-list is-only-desktop">
<li class="pagination-item">
<button class="button is-disabled" aria-label="page">
<span class="text">1</span>
</button>
</li>
</ol>
<button class="button is-text is-disabled" aria-label="next page">
<span class="text">Next</span>
<span class="icon-cheveron-right" aria-hidden="true"></span>
</button>
</nav>
<!--<Pagination>-->
</div>
<section class="common-section">
<h2 class="heading-level-5">Startups program</h2>
<div class="grid-2-1 common-section">
<div class="card">
<div class="u-flex u-flex-vertical-mobile u-gap-24">
<article class="u-flex-vertical u-gap-24">
<div class="u-flex u-gap-12">
<img class="avatar" src="https://unsplash.it/40" alt="" />
<div>
<header>
<h3 class="body-text-1 u-bold">Tessa Mero</h3>
<h4 class="body-text-2 u-bold">Your program manager</h4>
</header>
<p class="body-text-2">Contact Tessa with any questions you might have about Appwrite.</p>
</div>
</div>
<button class="button is-secondary is-full-width">
<span>Schedule a call</span>
<span class="icon-external-link" aria-hidden="true"></span>
</button>
</article>
<div style="flex-basis:1px; background-color:hsl(var(--color-border));"></div>
<article class="u-flex-vertical u-gap-24">
<div class="u-flex u-gap-12">
<img class="avatar" src="https://unsplash.it/40" alt="" />
<div>
<header>
<h3 class="body-text-1 u-bold">Tessa Mero</h3>
<h4 class="body-text-2 u-bold">Your program manager</h4>
</header>
<p class="body-text-2">Contact Tessa with any questions you might have about Appwrite.</p>
</div>
</div>
<button class="button is-secondary is-full-width">
<span>Schedule a call</span>
<span class="icon-external-link" aria-hidden="true"></span>
</button>
</article>
</div>
</div>
<div class="card">
<div class="u-flex-vertical u-gap-12">
<h3 class="body-text-1 u-bold">Upcoming events</h3>
<div class="u-flex-vertical u-gap-16">
<div class="u-flex u-gap-16 u-main-space-between">
<div>
<h4 class="body-text-2 u-bold">Office hours</h4>
<time class="u-block">Friday, 03 May at 14:00</time>
</div>
<button class="button is-text u-padding-inline-end-0">
<span>Add to calendar</span>
</button>
</div>
<div class="u-sep-block-start"></div>
<div class="u-flex u-gap-16 u-main-space-between">
<div>
<h4 class="body-text-2 u-bold">Fireside chat</h4>
<time class="u-block">Friday, 17 May at 14:00</time>
</div>
<button class="button is-text u-padding-inline-end-0">
<span>Add to calendar</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!--<Container>-->
<form class="form"><!--<Modal>--></form>
<!--<Form>--><!--<_create>--><!--<Index>--><!--<__layout>-->
<!--<UploadBox>--><!--<__layout>-->
<footer class="main-footer"></footer>
</section>
</main>
<script type="module" src="/main.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions apps/kitchensink/vite.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const config = {
wizardWithModalEmpty: new URL("./wizard-with-modal-empty.html", import.meta.url).pathname,
fullScreenModal: new URL("./full-screen-modal.html", import.meta.url).pathname,
createOrgModal: new URL("./create-org-modal.html", import.meta.url).pathname,
startupsProgram: new URL("./startups-program.html", import.meta.url).pathname,
},
},
},
Expand Down
Loading

0 comments on commit 60de1af

Please sign in to comment.