2020-07-25 18:26:25 +12:00
< header class = "clear" data-version >
2020-06-15 06:43:08 +12:00
< a href = "/console" class = "logo pull-start" >
2020-07-11 16:16:57 +12:00
< img src = "/images/appwrite.svg" alt = "Appwrite Light Logo" class = "force-light" loading = "lazy" / >
< img src = "/images/appwrite-footer-dark.svg" alt = "Appwrite Dark Logo" class = "force-dark" loading = "lazy" / >
2020-02-21 09:44:35 +13:00
< / a >
2020-03-05 02:07:19 +13:00
< div class = "change-project pull-start desktops-only" >
2020-02-27 10:54:12 +13:00
< div class = "list project-only margin-end-small" >
< label class = "margin-bottom-no" >
< select class = "margin-bottom-no"
data-xanalytics-event="change"
data-xanalytics-category="console/header"
data-xanalytics-label="Project Switch"
data-switch
data-ls-bind="{{router.params.project}}"
data-unsync="1"
2020-07-09 03:07:52 +12:00
data-ls-loop="projects.projects" data-ls-as="option" aria-label="Switch Project">
2021-07-29 20:09:24 +12:00
< option data-ls-attrs = "value={{option.$id}}" data-ls-bind = "{{option.name}}" > < / option >
2020-02-27 10:54:12 +13:00
< / select >
< / label >
< / div >
2019-05-09 18:54:39 +12:00
2020-04-22 07:52:32 +12:00
< button style = "overflow: visible;" class = "project-only setup-new tooltip round down pull-end" aria-label = "Quick Start" data-tooltip = "Create a new project" > < i class = "icon-plus" > < / i > < / button >
2020-02-27 10:54:12 +13:00
< / div >
2019-05-09 18:54:39 +12:00
2020-02-27 10:54:12 +13:00
< div class = "account-box pull-end"
2019-08-08 06:10:53 +12:00
data-service="account.get"
data-name="account"
data-scope="console"
2019-08-09 01:16:15 +12:00
data-event="load"
2020-02-18 18:25:28 +13:00
data-success="trigger"
data-success-param-trigger-events="account.get"
2019-08-09 01:16:15 +12:00
data-failure="trigger"
2020-02-04 08:20:10 +13:00
data-failure-param-trigger-events="account.deleteSession">
2019-05-09 18:54:39 +12:00
2020-02-27 10:54:12 +13:00
< div class = "console-back" >
2020-06-10 02:43:24 +12:00
< a href = "/console" class = "link-return-animation--end" > Back to Console < i class = "icon-right-open" > < / i > < / a >
2019-05-09 18:54:39 +12:00
< / div >
2020-06-15 06:43:08 +12:00
< div class = "account link pull-end clear" >
2020-06-11 20:58:53 +12:00
< img src = "" data-ls-attrs = "src={{account|avatar}}" alt = "User Avatar" class = "avatar margin-start pull-end" / >
2020-03-05 02:07:19 +13:00
< span class = "name pull-end desktops-only" data-ls-bind = "{{account.name}}" > < / span >
2020-04-22 19:03:19 +12:00
< / div >
2020-06-13 23:13:53 +12:00
< div class = "console-index drop-list bottom end" data-ls-ui-open = "" data-button-text = "" data-button-aria = "Account Options" data-button-icon = "" data-button-selector = "[data-toggler]" data-button-class = "account-button" data-blur = "1" >
2020-04-22 19:03:19 +12:00
< ul class = "margin-top-large arrow-end" >
< li >
2020-06-15 06:43:08 +12:00
< a href = "/console/account" > < i class = "icon-user" > < / i > Your Account< / a >
2020-04-22 19:03:19 +12:00
< / li >
< li >
2020-06-15 06:43:08 +12:00
< span class = "link" > < i class = "icon-sun-inv force-dark pull-start" > < / i > < i class = "icon-moon-inv force-light pull-start" > < / i > Change Theme
2020-04-24 06:49:31 +12:00
< div class = "pull-end switch-theme" >
2020-04-22 19:03:19 +12:00
< button data-general-theme
2021-01-18 19:29:26 +13:00
data-analytics
2020-04-22 19:03:19 +12:00
data-analytics-event="click"
data-analytics-category="console/header"
data-analytics-label="Switch Theme">
< i class = "icon-sun-inv force-light" > < / i >
< i class = "icon-moon-inv force-dark" > < / i >
< / button >
2022-02-11 13:11:09 +13:00
< / div >
2020-04-22 19:03:19 +12:00
< / span >
< / li >
< / ul >
< / div >
2020-02-12 02:09:44 +13:00
< / div >
2020-06-13 23:13:53 +12:00
< nav class = "project-only" data-ls-ui-open = "" data-button-class = "round icon-btn phones-only tablets-only" data-button-aria = "Navigation" data-button-icon = "icon-dot-3" >
2020-06-15 06:43:08 +12:00
< a class = "logo" href = "/console"
2021-01-18 19:29:26 +13:00
data-analytics
2020-02-04 19:28:41 +13:00
data-analytics-event="click"
data-analytics-category="console/navigation"
2020-02-14 02:48:45 +13:00
data-analytics-label="Logo Link">
2020-06-13 23:13:53 +12:00
< img src = "/images/appwrite-nav.svg" loading = "lazy" alt = "Appwrite Logo" class = "nav" / >
2020-03-05 02:07:19 +13:00
2020-07-11 16:16:57 +12:00
< img src = "/images/appwrite.svg" loading = "lazy" alt = "Appwrite Light Logo" class = "top force-light" loading = "lazy" / >
< img src = "/images/appwrite-footer-dark.svg" loading = "lazy" alt = "Appwrite Dark Logo" class = "top force-dark" loading = "lazy" / >
2019-05-09 18:54:39 +12:00
< / a >
2020-03-05 02:07:19 +13:00
< div data-ui-highlight class = "container" >
2019-05-09 18:54:39 +12:00
< ul class = "links" >
< li >
2020-02-04 19:28:41 +13:00
< a data-ls-attrs = "href=/console/home?project={{router.params.project}}"
2021-01-18 19:29:26 +13:00
data-analytics
2020-02-04 19:28:41 +13:00
data-analytics-event="click"
data-analytics-category="console/navigation"
2020-06-15 06:43:08 +12:00
data-analytics-label="Home Link">
2019-05-09 18:54:39 +12:00
< i class = "icon-home" > < / i >
Home
< / a >
< / li >
< / ul >
< b class = "subtitle" > DEVELOP< / b >
< ul class = "links" >
< li >
2020-02-04 19:28:41 +13:00
< a data-ls-attrs = "href=/console/database?project={{router.params.project}}"
2021-01-18 19:29:26 +13:00
data-analytics
2020-02-04 19:28:41 +13:00
data-analytics-event="click"
data-analytics-category="console/navigation"
2020-06-15 06:43:08 +12:00
data-analytics-label="Database Link">
2019-05-09 18:54:39 +12:00
< i class = "icon-database" > < / i >
Database
< / a >
< / li >
< li >
2020-02-04 19:28:41 +13:00
< a data-ls-attrs = "href=/console/storage?project={{router.params.project}}"
2021-01-18 19:29:26 +13:00
data-analytics
2020-02-04 19:28:41 +13:00
data-analytics-event="click"
data-analytics-category="console/navigation"
2020-06-15 06:43:08 +12:00
data-analytics-label="Storage Link">
2019-05-09 18:54:39 +12:00
< i class = "icon-folder" > < / i >
Storage
< / a >
< / li >
< li >
2020-02-04 19:28:41 +13:00
< a data-ls-attrs = "href=/console/users?project={{router.params.project}}"
2021-01-18 19:29:26 +13:00
data-analytics
2020-02-04 19:28:41 +13:00
data-analytics-event="click"
data-analytics-category="console/navigation"
2020-06-15 06:43:08 +12:00
data-analytics-label="Users Link">
2019-05-09 18:54:39 +12:00
< i class = "icon-users" > < / i >
Users
< / a >
< / li >
2020-05-05 01:34:31 +12:00
< li >
< a data-ls-attrs = "href=/console/functions?project={{router.params.project}}"
2021-01-18 19:29:26 +13:00
data-analytics
2020-05-05 01:34:31 +12:00
data-analytics-event="click"
data-analytics-category="console/navigation"
2020-06-14 08:26:45 +12:00
data-analytics-label="Functions Link"
class="link-animation-disabled">
2020-05-05 01:34:31 +12:00
< i class = "icon-lightning" > < / i >
Functions
< / a >
< / li >
2019-05-09 18:54:39 +12:00
< / ul >
< b class = "subtitle" > MANAGE< / b >
< ul class = "links" >
< li >
2020-02-04 19:28:41 +13:00
< a data-ls-attrs = "href=/console/webhooks?project={{router.params.project}}"
2021-01-18 19:29:26 +13:00
data-analytics
2020-02-04 19:28:41 +13:00
data-analytics-event="click"
data-analytics-category="console/navigation"
2020-06-15 06:43:08 +12:00
data-analytics-label="Webhooks Links">
2019-05-09 18:54:39 +12:00
< i class = "icon-link" > < / i >
Webhooks
< / a >
< / li >
< li >
2020-03-05 02:07:19 +13:00
< a data-ls-attrs = "href=/console/keys?project={{router.params.project}}"
2021-01-18 19:29:26 +13:00
data-analytics
2020-02-04 19:28:41 +13:00
data-analytics-event="click"
data-analytics-category="console/navigation"
2020-06-15 06:43:08 +12:00
data-analytics-label="API Keys Link">
2020-03-05 02:07:19 +13:00
< i class = "icon-key-inv" > < / i >
API Keys
2019-05-09 18:54:39 +12:00
< / a >
< / li >
< / ul >
< / div >
2019-08-05 17:51:02 +12:00
2020-03-05 02:07:19 +13:00
< ul class = "links bottom" >
2019-08-05 17:51:02 +12:00
< li >
2020-02-04 19:28:41 +13:00
< a data-ls-attrs = "href=/console/settings?project={{router.params.project}}"
2021-01-18 19:29:26 +13:00
data-analytics
2020-02-04 19:28:41 +13:00
data-analytics-event="click"
data-analytics-category="console/navigation"
2020-06-15 06:43:08 +12:00
data-analytics-label="Settings Link">
2020-02-04 19:28:41 +13:00
< i class = "icon-cog" > < / i > Settings< / a >
2019-08-05 17:51:02 +12:00
< / li >
< / ul >
2019-05-09 18:54:39 +12:00
< / nav >
< / header >
2020-03-05 02:07:19 +13:00
< div class = ""
2020-01-31 06:12:29 +13:00
data-service="projects.list"
2020-01-31 09:58:49 +13:00
data-event="load,projects.update"
2019-08-08 06:10:53 +12:00
data-name="projects"
data-scope="console">< / div >
2020-02-18 18:25:28 +13:00
< div class = "load-screen" data-ls-ui-loader >
< div class = "animation" > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < / div >
2020-07-11 16:16:57 +12:00
< img src = "/images/appwrite.svg" alt = "Appwrite Light Logo" class = "force-light" loading = "lazy" / >
< img src = "/images/appwrite-footer-dark.svg" alt = "Appwrite Dark Logo" class = "force-dark" loading = "lazy" / >
2020-02-18 18:25:28 +13:00
< / div >
2020-05-01 18:27:35 +12:00
< div data-ui-modal class = "modal box close sticky-footer" data-button-alias = ".setup-new" data-button-icon = "icon-plus" data-button-class = "project-only" data-open-event = "create-project" >
2019-08-09 04:43:26 +12:00
< h1 > Create Project< / h1 >
2019-05-09 18:54:39 +12:00
2020-02-04 19:28:41 +13:00
< form
data-setup
2021-01-18 19:29:26 +13:00
data-analytics
data-analytics-activity
2020-02-04 19:28:41 +13:00
data-analytics-event="submit"
data-analytics-category="console"
data-analytics-label="Create Project">
2020-02-23 21:57:51 +13:00
< p > Appwrite projects are containers for your resources and apps across different platforms.< / p >
2019-05-09 18:54:39 +12:00
2021-07-26 19:42:22 +12:00
< label > Project ID< / label >
2021-07-26 19:24:29 +12:00
< input
type="hidden"
data-custom-id
2021-08-04 18:39:23 +12:00
data-id-type="auto"
data-validator="projects.get"
2021-07-27 18:41:48 +12:00
required
maxlength="36"
class=""
2022-03-23 01:31:52 +13:00
pattern="^[a-zA-Z0-9][a-zA-Z0-9._-]{0,35}$"
2021-07-27 18:41:48 +12:00
name="projectId" />
2021-11-24 21:33:12 +13:00
2021-07-29 20:21:52 +12:00
< label > Name< / label >
< input type = "text" class = "full-width margin-bottom-xl" name = "name" required autocomplete = "off" maxlength = "128" / >
2019-05-09 18:54:39 +12:00
2020-05-01 18:27:35 +12:00
< footer >
< button type = "submit" > Create< / button > < button data-ui-modal-close = "" type = "button" class = "reverse" > Cancel< / button >
< / footer >
2019-05-09 18:54:39 +12:00
< / form >
2020-06-10 02:43:24 +12:00
< / div >
2022-02-15 07:18:01 +13:00
2022-02-22 06:12:13 +13:00
< section class = "upload-box" x-data x-show = "$store.uploader.files().length > 0" >
2022-02-15 07:18:01 +13:00
< div class = "upload-box-header" >
< h4 class = "upload-box-title" >
< span class = "text" > Uploading files< / span >
2022-02-22 06:12:13 +13:00
< span class = "amount" x-text = "$store.uploader.files().length" > < / span >
2022-02-15 07:18:01 +13:00
< / h4 >
2022-02-18 23:04:02 +13:00
< button class = "icon-button" :class = "$store.uploader.isOpen ? '' : 'is-open'" aria-label = "toggle upload box" @ click = "$store.uploader.toggle()" > < span class = "icon-chevron-down" aria-hidden = "true" > < / span > < / button >
2022-02-22 05:41:41 +13:00
< button class = "icon-button" @ click = "$store.uploader.cancelAll()" aria-label = "close upload box" > < span class = "icon-x" aria-hidden = "true" > < / span > < / button >
2022-02-15 07:18:01 +13:00
< / div >
< div class = "upload-box-content" :class = "$store.uploader.isOpen ? 'is-open' : ''" >
< ul class = "upload-box-list" >
2022-02-22 06:12:13 +13:00
< template x-if = "$store.uploader.files().length > 0" >
< template x-for = "file in $store.uploader.files()" :key = "file.id" >
< li x-show = "!file.cancelled" class = "upload-box-item" >
2022-02-15 07:18:01 +13:00
< div class = "upload-image u-margin-inline-end-16" :class = "file.completed ? 'is-finished' : ''" >
< div class = "progress"
:style="'--progress-value:' + file.progress"
:aria-valuenow="file.progress"
role="progressbar"
aria-valuemin="0"
aria-valuemax="100">< / div >
2022-02-21 20:26:40 +13:00
< span x-show = "!file.completed" class = "icon" x-text = "file.progress + '%'" > < / span >
2022-02-22 00:12:59 +13:00
< span x-show = "file.completed" class = "icon icon-file" > < / span >
2022-02-15 07:18:01 +13:00
< / div >
2022-02-22 20:37:12 +13:00
< label for = "file1" class = "file-name trim-inner-text" x-text = "file.name" :title = "file.name" > < / label >
< span class = "pill is-failed" x-show = "file.failed" :title = "file.error" > failed< / span >
2022-02-18 23:04:02 +13:00
< button x-show = "file.completed" class = "icon-button is-success" aria-label = "Uploading" > < span class = "icon-check" > < / span > < / button >
< button x-show = "!file.completed" class = "icon-button" aria-label = "Uploading" @ click = "$store.uploader.removeFile(file.id)" > < span class = "icon-x" > < / span > < / button >
2022-02-15 07:18:01 +13:00
< / li >
< / template >
< / template >
< / ul >
< / div >
< / section >