2023-05-23 15:58:33 +03:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< title > Signup Form< / title >
< link rel = "stylesheet" href = "/src/styles/demo.css" / >
< / head >
< body >
< div id = "demo-container" >
2023-05-24 12:40:22 +03:00
< nav class = "mode" >
< a href = "/" class = "selected" > Development build< / a >
< a href = "/preview.html" > Production build< / a >
< / nav >
2023-05-23 15:58:33 +03:00
< h1 > Full signup form< / h1 >
< p >
2023-05-24 12:40:22 +03:00
Currently connected to Ghost running at < code > %VITE_SITE_URL%< / code > . Please duplicate < code > .env.development< / code > as < code > .env.development.local< / code > and modify it to change the site url locally (when you get an error when submitting the forms).
2023-05-23 15:58:33 +03:00
< / p >
<!-- Because we need to use ESM modules during develoment, the src should be different to force reexecution of each script -->
2023-06-01 18:43:28 +03:00
< div style = "height: 40vmin; min-height: 360px;" >
2023-06-01 12:56:08 +03:00
< script
type="module"
src="/src/index.tsx"
data-title="My site name"
data-description="An independent publication about embeddable signup forms."
2023-06-08 14:23:38 +03:00
data-icon="https://static.ghost.org/v4.0.0/images/ghost-orb-1.png"
2023-06-01 18:43:28 +03:00
data-background-color="#F1F3F4"
data-button-color="#ff0095"
2023-06-01 12:56:08 +03:00
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
2023-06-08 14:23:38 +03:00
data-label-2="With icon"
2023-06-02 14:59:41 +03:00
async
2023-06-01 12:56:08 +03:00
>< / script >
< / div >
2023-05-23 15:58:33 +03:00
< hr >
2023-06-08 14:23:38 +03:00
< h1 > Without icon< / h1 >
2023-06-01 12:56:08 +03:00
2023-06-01 18:43:28 +03:00
< div style = "height: 40vmin; min-height: 360px;" >
2023-06-01 12:56:08 +03:00
< script
type="module"
src="/src/index.tsx?withoutlogo"
2023-06-08 14:23:38 +03:00
data-title="Site without icon"
2023-06-01 12:56:08 +03:00
data-description="An independent publication about embeddable signup forms."
2023-06-01 18:43:28 +03:00
data-background-color="#F1F3F4"
data-button-color="#ff0095"
2023-06-01 12:56:08 +03:00
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
2023-06-08 14:23:38 +03:00
data-label-2="Without icon"
2023-06-02 14:59:41 +03:00
async
2023-06-01 12:56:08 +03:00
>< / script >
< / div >
2023-05-23 15:58:33 +03:00
< hr >
< h1 > Minimal< / h1 >
2023-06-09 11:42:24 +03:00
< div style = "min-height: 58px; max-width: 440px;" >
2023-06-01 12:56:08 +03:00
< script
type="module"
src="/src/index.tsx?other"
data-button-color="#ff0095"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="Minimal"
2023-06-02 14:59:41 +03:00
async
2023-06-01 12:56:08 +03:00
>< / script >
< / div >
2023-05-23 15:58:33 +03:00
2023-06-09 11:42:24 +03:00
< hr >
< h1 > Minimal centered< / h1 >
< div style = "min-height: 58px; max-width: 440px; margin: 0 auto;" >
< script
type="module"
src="/src/index.tsx?other-center"
data-button-color="#ff0095"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="Minimal"
async
>< / script >
< / div >
< hr >
< h1 > Minimal full width< / h1 >
< div style = "min-height: 58px;" >
< script
type="module"
src="/src/index.tsx?other-full"
data-button-color="#ff0095"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="Minimal"
async
>< / script >
< / div >
2023-05-23 15:58:33 +03:00
< hr >
< h1 > With invalid configuration< / h1 >
< p > When you submit this one, it will throw an error.< / p >
2023-06-01 15:34:29 +03:00
< div style = "min-height: 58px" >
2023-06-01 12:56:08 +03:00
< script
type="module"
src="/src/index.tsx?other2"
data-button-color="#ff0095"
data-site="https://invalid/"
2023-06-02 14:59:41 +03:00
async
2023-06-01 12:56:08 +03:00
>< / script >
< / div >
2023-06-02 15:29:04 +03:00
< hr >
< h1 > Translated< / h1 >
< p > Use production build, since the multiple languages aren't working well with modules.< / p >
2023-05-23 15:58:33 +03:00
< / div >
< / body >
< / html >
