feat: add pre-launch email capture page template (Coming Soon)
This commit is contained in:
283
theme/page-coming-soon.php
Normal file
283
theme/page-coming-soon.php
Normal file
@@ -0,0 +1,283 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Template Name: Coming Soon
|
||||||
|
* Standalone pre-launch email capture page. No store header/footer.
|
||||||
|
*/
|
||||||
|
defined('ABSPATH') || exit;
|
||||||
|
?><!DOCTYPE html>
|
||||||
|
<html <?php language_attributes(); ?>>
|
||||||
|
<head>
|
||||||
|
<meta charset="<?php bloginfo('charset'); ?>">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Coming Soon · Reply All Regrets™</title>
|
||||||
|
<?php wp_head(); ?>
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body.rar-cs {
|
||||||
|
background: #0f0f0f;
|
||||||
|
color: #f5f1e8;
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.rar-cs__header {
|
||||||
|
border-bottom: 1px solid #27272a;
|
||||||
|
padding: 20px 24px;
|
||||||
|
}
|
||||||
|
.rar-cs__logo-name {
|
||||||
|
font-family: 'Fraunces', Georgia, serif;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #c8a96e;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.rar-cs__logo-sub {
|
||||||
|
font-family: 'JetBrains Mono', 'Courier New', monospace;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #52525b;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
.rar-cs__main {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 64px 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.rar-cs__eyebrow {
|
||||||
|
font-family: 'JetBrains Mono', 'Courier New', monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #c8a96e;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.rar-cs__h1 {
|
||||||
|
font-family: 'Fraunces', Georgia, serif;
|
||||||
|
font-size: clamp(40px, 8vw, 72px);
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
line-height: 1.05;
|
||||||
|
color: #f5f1e8;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.rar-cs__subhead {
|
||||||
|
font-family: 'Fraunces', Georgia, serif;
|
||||||
|
font-size: clamp(20px, 4vw, 32px);
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: italic;
|
||||||
|
color: #71717a;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
max-width: 520px;
|
||||||
|
}
|
||||||
|
.rar-cs__body {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #71717a;
|
||||||
|
line-height: 1.6;
|
||||||
|
max-width: 340px;
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
.rar-cs__form-wrap {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 440px;
|
||||||
|
}
|
||||||
|
.rar-cs__form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
@media (min-width: 480px) {
|
||||||
|
.rar-cs__form { flex-direction: row; }
|
||||||
|
}
|
||||||
|
.rar-cs__input {
|
||||||
|
flex: 1;
|
||||||
|
background: #18181b;
|
||||||
|
border: 1.5px solid #3f3f46;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 14px 16px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #f5f1e8;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.15s;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
.rar-cs__input::placeholder { color: #52525b; }
|
||||||
|
.rar-cs__input:focus { border-color: #c8a96e; box-shadow: 0 0 0 3px rgba(200,169,110,0.12); }
|
||||||
|
.rar-cs__btn {
|
||||||
|
background: #c8a96e;
|
||||||
|
color: #0f0f0f;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
padding: 14px 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
.rar-cs__btn:hover { background: #d4b87e; }
|
||||||
|
.rar-cs__btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||||
|
.rar-cs__success {
|
||||||
|
background: #18181b;
|
||||||
|
border: 1.5px solid #3f3f46;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 40px 32px;
|
||||||
|
}
|
||||||
|
.rar-cs__success-icon {
|
||||||
|
font-size: 36px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #c8a96e;
|
||||||
|
}
|
||||||
|
.rar-cs__success-title {
|
||||||
|
font-family: 'Fraunces', Georgia, serif;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #f5f1e8;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.rar-cs__success-body {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #71717a;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.rar-cs__error {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #f87171;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
}
|
||||||
|
.rar-cs__legal {
|
||||||
|
font-family: 'JetBrains Mono', 'Courier New', monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #3f3f46;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
.rar-cs__footer {
|
||||||
|
border-top: 1px solid #27272a;
|
||||||
|
padding: 20px 24px;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'JetBrains Mono', 'Courier New', monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #3f3f46;
|
||||||
|
}
|
||||||
|
/* Hide WP admin bar on this page */
|
||||||
|
#wpadminbar { display: none !important; }
|
||||||
|
html { margin-top: 0 !important; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="rar-cs">
|
||||||
|
|
||||||
|
<header class="rar-cs__header">
|
||||||
|
<a href="<?php echo esc_url(home_url('/')); ?>" style="text-decoration:none;">
|
||||||
|
<div class="rar-cs__logo-name">Reply All Regrets™</div>
|
||||||
|
<div class="rar-cs__logo-sub">EST. 2024 · INTERNAL USE ONLY</div>
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="rar-cs__main">
|
||||||
|
|
||||||
|
<p class="rar-cs__eyebrow">Important announcement</p>
|
||||||
|
|
||||||
|
<h1 class="rar-cs__h1">Get notified first.</h1>
|
||||||
|
<p class="rar-cs__subhead">We regret to inform you,<br>the store is opening soon.</p>
|
||||||
|
|
||||||
|
<p class="rar-cs__body">
|
||||||
|
Be among the first to spend money on things you didn't know you needed.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="rar-cs__form-wrap">
|
||||||
|
|
||||||
|
<div id="rar-cs-success" class="rar-cs__success" style="display:none;" role="status" aria-live="polite">
|
||||||
|
<div class="rar-cs__success-icon">✓</div>
|
||||||
|
<div class="rar-cs__success-title">You are on the list.</div>
|
||||||
|
<p class="rar-cs__success-body">
|
||||||
|
We will email you when it is time to make a regrettable purchase.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="rar-cs-form" class="rar-cs__form" novalidate>
|
||||||
|
<?php wp_nonce_field('rar_subscribe_nonce', 'rar_nonce'); ?>
|
||||||
|
<label for="rar-cs-email" class="sr-only" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);">Email address</label>
|
||||||
|
<input
|
||||||
|
id="rar-cs-email"
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
required
|
||||||
|
placeholder="your@email.com"
|
||||||
|
class="rar-cs__input"
|
||||||
|
autocomplete="email"
|
||||||
|
/>
|
||||||
|
<button type="submit" class="rar-cs__btn" id="rar-cs-btn">
|
||||||
|
Notify me
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p id="rar-cs-error" class="rar-cs__error" style="display:none;" role="alert"></p>
|
||||||
|
<p class="rar-cs__legal">No spam. One email when we launch, then you're free.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="rar-cs__footer">
|
||||||
|
© <?php echo date('Y'); ?> Reply All Regrets™. All rights reserved. Results may vary.
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
var form = document.getElementById('rar-cs-form');
|
||||||
|
var btn = document.getElementById('rar-cs-btn');
|
||||||
|
var errEl = document.getElementById('rar-cs-error');
|
||||||
|
var success = document.getElementById('rar-cs-success');
|
||||||
|
var nonce = document.querySelector('#rar-cs-form input[name="rar_nonce"]');
|
||||||
|
|
||||||
|
if (!form) return;
|
||||||
|
|
||||||
|
form.addEventListener('submit', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var email = document.getElementById('rar-cs-email').value.trim();
|
||||||
|
if (!email) return;
|
||||||
|
|
||||||
|
btn.textContent = 'Filing…';
|
||||||
|
btn.disabled = true;
|
||||||
|
errEl.style.display = 'none';
|
||||||
|
|
||||||
|
var data = new FormData();
|
||||||
|
data.append('action', 'rar_subscribe');
|
||||||
|
data.append('email', email);
|
||||||
|
data.append('nonce', nonce ? nonce.value : '');
|
||||||
|
data.append('source', 'coming-soon');
|
||||||
|
|
||||||
|
fetch('<?php echo esc_url(admin_url("admin-ajax.php")); ?>', {
|
||||||
|
method: 'POST',
|
||||||
|
body: data
|
||||||
|
})
|
||||||
|
.then(function (r) { return r.json(); })
|
||||||
|
.then(function (res) {
|
||||||
|
if (res && res.success === false) {
|
||||||
|
throw new Error(res.data && res.data.message ? res.data.message : 'Something went wrong.');
|
||||||
|
}
|
||||||
|
form.style.display = 'none';
|
||||||
|
success.style.display = '';
|
||||||
|
})
|
||||||
|
.catch(function (err) {
|
||||||
|
btn.textContent = 'Notify me';
|
||||||
|
btn.disabled = false;
|
||||||
|
errEl.textContent = err.message || 'Something went wrong. Please try again.';
|
||||||
|
errEl.style.display = '';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<?php wp_footer(); ?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user