{ "page": "index", "props": { "story": { "id": "home", "title": { "$i18n": { "en": "Home", "es": "Inicio" } }, "pages": [ { "component": "LayoutPage", "id": "start", "title": "Start", "hash": "start", "slots": { "default": [ { "props": { "direction": "row", "style": { "display": "flex", "flexDirection": "row", "flexWrap": "wrap", "alignItems": "center" }, "gap": 12, "alignItems": "center", "class": [ "headerGroup" ] }, "component": "LayoutGroup", "_key": "itm_0_3", "title": "Heading text and image", "slot": [ { "component": "MediaHtml", "props": { "value": { "$i18n": { "en": "

The Web is yours to create<\/h1>

Build dynamic web interfaces that stand out and drive action<\/h2>", "es": "

T\u00fa creas la Web<\/h1>

Dise\u00f1a interfaces web din\u00e1micas que sobresalen y motivan a la acci\u00f3n<\/h2>" } }, "style": { "margin": null, "padding": "30px 30px" }, "class": [ "bigheader" ] }, "_key": "itm_37" }, { "component": "MediaHtmlCode", "props": { "value": "\"header \n\"header", "class": [ "headerImage" ] }, "_key": "itm_1_1" } ] }, { "props": { "direction": "row", "alignItems": "flex-start", "class": [ "showcase-group" ], "style": { "display": "flex", "flexDirection": "row", "flexWrap": "wrap" } }, "component": "LayoutGroup", "title": "What you can create", "slot": [ { "component": "MediaItem", "props": { "bem": "MediaItem", "href": "\/examples\/form", "text": { "$i18n": { "en": "Forms", "es": "Formularios", "de": "Formen", "fr": "Formes" } }, "subtext": { "$i18n": { "en": "Dynamic and user-friendly forms", "es": "Formularios din\u00e1micos y f\u00e1ciles de usar", "de": "Dynamische und benutzerfreundliche Formulare", "fr": "Formulaires dynamiques et conviviaux" } }, "class": [ "showcase-item" ], "icon": "\/build\/icons\/clipboard-list.svg" }, "_key": "itm_1" }, { "component": "MediaItem", "props": { "bem": "MediaItem", "text": { "$i18n": { "en": "Websites", "es": "Sitios web", "de": "Webseiten", "fr": "Sites Internet" } }, "href": "\/examples\/website", "subtext": { "$i18n": { "en": "Create fast, content-rich websites", "es": "Cree sitios web r\u00e1pidos y ricos en contenido", "de": "Erstellen Sie schnelle, inhaltsreiche Websites", "fr": "Cr\u00e9ez des sites Web rapides et riches en contenu" } }, "icon": "\/build\/icons\/browser.svg", "class": [ "showcase-item" ] }, "_key": "itm_0" }, { "component": "MediaItem", "props": { "bem": "MediaItem", "text": { "$i18n": { "es": "Cursos", "en": "Courses", "de": "Kurse", "fr": "Cours" } }, "icon": "\/build\/icons\/graduation-cap.svg", "subtext": { "$i18n": { "es": "Crea lecciones interactivas", "en": "Create interactive lessons", "de": "Erstellen Sie interaktive Lektionen", "fr": "Cr\u00e9er des le\u00e7ons interactives" } }, "class": [ "showcase-item" ], "href": "\/examples\/course" }, "_key": "itm_2" }, { "component": "MediaItem", "props": { "bem": "MediaItem", "text": { "$i18n": { "es": "Pagos", "en": "Payments", "de": "Zahlungen", "fr": "Paiements" } }, "subtext": { "$i18n": { "es": "Cobrar pagos en l\u00ednea", "en": "Collect payments online", "de": "Sammeln Sie Zahlungen online", "fr": "Encaisser les paiements en ligne" } }, "icon": "\/build\/icons\/credit-card.svg", "class": [ "showcase-item" ], "href": "\/examples\/payment" }, "_key": "itm_3" }, { "component": "MediaItem", "props": { "bem": "MediaItem", "text": { "$i18n": { "es": "Herramientas internas", "en": "Internal tools", "de": "Interne Werkzeuge", "fr": "Outils internes" } }, "subtext": { "$i18n": { "es": "Interact\u00faa con cualquier API", "en": "Interact with any API", "de": "Interagieren Sie mit jeder API", "fr": "Interagir avec n'importe quelle API" } }, "icon": "\/build\/icons\/data-transfer.svg", "class": [ "showcase-item" ], "href": "\/examples\/app" }, "_key": "itm_4" }, { "component": "MediaItem", "props": { "bem": "MediaItem", "icon": "mdi:file-edit-outline", "text": "{{$i18n.obj($item.title)}}", "subtext": "", "href": "\/examples\/{{$item.id}}", "class": [ "showcase-item" ] }, "_key": "itm_2_7", "v-for": "localInterfaces", "v-on": { "delete": { "chain": [ { "assign": "", "stmt": { "call": "showcase.delete", "args": "{{$item.id}}", "info": { "text": "showcase.delete", "icon": "mdi:delete" } } } ] } } }, { "component": "MediaItem", "props": { "bem": "MediaItem", "text": { "$i18n": { "es": "\u00a1Cualquier cosa!", "en": "Anything!", "de": "Irgendetwas!", "fr": "Quoi que ce soit!" } }, "subtext": { "$i18n": { "es": "Crea una interfaz web personalizada", "en": "Build a custom web interface", "de": "Erstellen Sie eine benutzerdefinierte Weboberfl\u00e4che", "fr": "Cr\u00e9er une interface Web personnalis\u00e9e" } }, "icon": "\/build\/icons\/bulb.svg", "class": [ "showcase-item", "anything-item" ] }, "v-on": { "click": { "chain": [ { "info": { "text": "Create new interface", "icon": "mdi:file-plus", "secondary": "" }, "do": { "call": "showcase.create", "args": null }, "assign": null } ] } }, "_key": "itm_5" } ], "_key": "itm_38" } ], "header": [] }, "props": {}, "omitHeader": true, "setup": null, "onEnter": null, "onLeave": null, "omitFooter": true } ], "paths": [], "header": [], "stylesheets": [ { "id": "story-style", "src": { "--ui-font-titles": null, "--ui-font-size": "14pt", "--ui-content-width": "1100px" } }, { "id": "bigheader", "src": ".bigheader {\n margin: 0;\n}\n\n.bigheader h1 {\n font-size: 2.6em;\n margin: 0 6vw 12px 0;\n}\n", "type": "class" }, { "id": "showcase-item", "src": ".showcase-item {\n transition: all 0.3s;\n \n padding: 16px 32px;\n --ui-item-padding: 0 20px;\n align-self: stretch;\n align-items: center;\n flex: 1;\n min-width: 256px;\n\n cursor: pointer;\n background-color: var(--ui-color-z1);\n color: inherit;\n\n border-radius: 12px;\n border: 2px solid transparent;\n box-shadow: 0px 3px 1px rgba(0,0,0, 0.2);\n}\n\n.showcase-item .MediaItem__icon {\n font-size: 1.6em;\n opacity: 0.7;\n}\n\n.showcase-item .MediaItem__icon::before {\n content: '';\n display: block;\n border: 8px solid var(--ui-color-primary);\n border-radius: 50%;\n position: absolute;\n opacity: 0.6;\n}\n\n.showcase-item .MediaItem__text {\n font-weight: bold;\n margin-bottom: 3px;\n white-space: normal;\n}\n\n.color-scheme-dark .showcase-item .MediaItem__icon {\n opacity: 1;\n}\n\n.color-scheme-dark .showcase-item .UiIcon__image {\n filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(106deg) brightness(99%) contrast(105%);\n} ", "type": "class" }, { "id": "showcase-group", "src": ".showcase-group {\n gap: 18px;\n padding: 30px 18px;\n margin-bottom: 60px;\n}", "type": "class" }, { "id": "anything-item", "type": "class", "src": ".anything-item {\n border: 2px dashed rgba(153,153,153,.5333333333);\n background: transparent;\n box-shadow: none;\n}\n\n.anything-item:hover {\n background: var(--ui-color-hover);\n}" }, { "id": "bodybg", "src": ".bodybg {}\n\n#app {\n perspective: 16px;\n height: 100vh;\n overflow: hidden;\n overflow-y: auto;\n perspective-origin: 50% 450px;\n}\n\n#app,\n#app .Showcase,\n#app .Showcase .CmsStoryBuilder,\n#app .Showcase .CmsStoryBuilder .UiContentWrapper,\n#app .UiContentWrapper__body,\n#app .Showcase .CmsStory,\n#app .Showcase .LayoutPage,\n#app .Showcase .LayoutPage__contents {\n transform-style: preserve-3d; \n}\n\n.color-scheme-light {\n --ui-color-background: #ecf1f3;\n}\n\n.color-scheme-dark {\n --ui-color-background: #27323f;\n}", "type": "class" }, { "id": "headerGroup", "type": "class", "src": ".headerGroup {\n transform-style: preserve-3d;\n}\n\n.headerGroup > .CmsBlock,\n.headerGroup > .BlockScaffold {\n flex: 1 !important;\n min-width: 200px !important;\n}" }, { "id": "headerImage", "type": "class", "src": ".headerImage {\n transform: translateZ(-12px) scale(1.75) translateX(3vw);\n}\n\n.headerImage img {\n max-width: 100%;\n object-fit: contain;\n}\n\n.color-scheme-light .headerImage .img-dark {\n display: none;\n}\n.color-scheme-dark .headerImage .img-light {\n display: none;\n}" } ], "footer": [], "setup": { "chain": [ { "assign": "localInterfaces", "stmt": { "call": "showcase.getList", "args": null, "info": { "text": "showcase.getList", "icon": "mdi:server" } } } ] } }, "settings": { "uploads": { "assets": "https:\/\/phi.co\/api\/1\/echo", "user": "https:\/\/phi.co\/api\/1\/echo" } }, "examples": [ { "id": "form", "title": "Form", "url": "\/examples\/form", "i18n": { "en": { "title": "Form", "edit": "Do your thing" }, "es": { "title": "Formulario", "edit": "Edita este bicho" } } }, { "id": "website", "title": "Website", "url": "\/examples\/website" }, { "id": "app", "title": "App", "url": "\/examples\/app" }, { "id": "payment", "title": "Payment", "url": "\/examples\/payment" }, { "id": "video", "title": "Video", "url": "\/examples\/video" }, { "id": "karaoke", "title": "Karaoke", "url": "\/examples\/karaoke" } ] } }