Files
repa-woocommerce/theme/page-coming-soon.php

284 lines
9.1 KiB
PHP

<?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>