2173fd9ef9
refs https://github.com/TryGhost/Toolbox/issues/594 - we're moving all the standalone apps to a separate folder to keep them out of the core code and easier to find
120 lines
3.9 KiB
HTML
120 lines
3.9 KiB
HTML
<!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="/" class="selected">Development build</a>
|
|
<a href="/preview.html">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 -->
|
|
<div style="height: 40vmin; min-height: 360px;">
|
|
<script
|
|
type="module"
|
|
src="/src/index.tsx"
|
|
data-title="My site name"
|
|
data-description="An independent publication about embeddable signup forms."
|
|
data-icon="https://static.ghost.org/v4.0.0/images/ghost-orb-1.png"
|
|
data-background-color="#F1F3F4"
|
|
data-button-color="#ff0095"
|
|
data-site="%VITE_SITE_URL%"
|
|
data-label-1="Signup form"
|
|
data-label-2="With icon"
|
|
async
|
|
></script>
|
|
</div>
|
|
|
|
<hr>
|
|
<h1>Without icon</h1>
|
|
|
|
<div style="height: 40vmin; min-height: 360px;">
|
|
<script
|
|
type="module"
|
|
src="/src/index.tsx?withoutlogo"
|
|
data-title="Site without icon"
|
|
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"
|
|
data-label-2="Without icon"
|
|
async
|
|
></script>
|
|
</div>
|
|
|
|
<hr>
|
|
<h1>Minimal</h1>
|
|
|
|
<div style="min-height: 58px; max-width: 440px;">
|
|
<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"
|
|
async
|
|
></script>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<hr>
|
|
<h1>With invalid configuration</h1>
|
|
<p>When you submit this one, it will throw an error.</p>
|
|
|
|
<div style="min-height: 58px">
|
|
<script
|
|
type="module"
|
|
src="/src/index.tsx?other2"
|
|
data-button-color="#ff0095"
|
|
data-site="https://invalid/"
|
|
async
|
|
></script>
|
|
</div>
|
|
|
|
<hr>
|
|
<h1>Translated</h1>
|
|
<p>Use production build, since the multiple languages aren't working well with modules.</p>
|
|
</div>
|
|
</body>
|
|
</html>
|