2023-05-24 12:40:22 +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" >
< nav class = "mode" >
< a href = "/" > Development build< / a >
< a href = "/preview.html" class = "selected" > Production build< / a >
< / nav >
< h1 > Full signup form< / h1 >
< p >
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).
< / 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;" >
< script
src="http://localhost:6174/signup-form.min.js"
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"
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 18:43:28 +03:00
>< / script >
< / div >
2023-05-24 12:40:22 +03:00
< hr >
2023-06-08 14:23:38 +03:00
< h1 > Without icon< / h1 >
2023-06-01 18:43:28 +03:00
< div style = "height: 40vmin; min-height: 360px;" >
< script
src="http://localhost:6174/signup-form.min.js"
2023-06-08 14:23:38 +03:00
data-title="Site without icon"
2023-06-01 18:43:28 +03:00
data-description="An independent publication about embeddable signup forms."
data-background-color="#F1F3F4"
data-button-color="#ff0095"
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 18:43:28 +03:00
>< / script >
< / div >
2023-05-24 12:40:22 +03:00
< hr >
< h1 > Minimal< / h1 >
2023-06-01 18:43:28 +03:00
< div style = "min-height: 58px" >
< script
src="http://localhost:6174/signup-form.min.js"
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 18:43:28 +03:00
>< / script >
< / div >
2023-05-24 12:40:22 +03:00
< hr >
< h1 > With invalid configuration< / h1 >
< p > When you submit this one, it will throw an error.< / p >
2023-06-01 18:43:28 +03:00
< div style = "min-height: 58px" >
< script
src="http://localhost:6174/signup-form.min.js"
data-button-color="#ff0095"
data-site="https://invalid/"
2023-06-02 14:59:41 +03:00
async
2023-06-01 18:43:28 +03:00
>< / script >
< / div >
2023-06-02 15:29:04 +03:00
< hr >
< h1 > Translated< / h1 >
< div style = "height: 40vmin; min-height: 360px;" >
< script
src="http://localhost:6174/signup-form.min.js"
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-02 15:29:04 +03:00
data-background-color="#F1F3F4"
data-button-color="#ff0095"
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 15:29:04 +03:00
data-locale="nl-BE"
async
>< / script >
< / div >
2023-06-09 11:15:03 +03:00
2023-06-09 13:07:30 +03:00
< hr >
< div style = "min-height: 58px; max-width: 440px;" >
2023-06-09 11:15:03 +03:00
< script
src="http://localhost:6174/signup-form.min.js"
data-button-color="#ff0095"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="Minimal"
data-locale="nl-BE"
async
>< / script >
< / div >
2023-05-24 12:40:22 +03:00
< / div >
< / body >
< / html >
