Initial Add Months WordPress theme
- Dark minimal design (charcoal/slate/muted green) - Hero section with phone mockup placeholder - How It Works (3 steps) - What It Is / Isn't sections - Privacy section with pill badges - Built for Clarity section - Download section with iOS/Android beta badges - Email capture modal for beta signups - Privacy, Terms, Disclaimer page template - Beta signups stored to wp_beta_signups table - Admin panel for viewing/exporting signups Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
John Mizerek
commit
6b03e5b7eb
5 changed files with 1141 additions and 0 deletions
262
front-page.php
Normal file
262
front-page.php
Normal file
|
|
@ -0,0 +1,262 @@
|
|||
<!DOCTYPE html>
|
||||
<html <?php language_attributes(); ?>>
|
||||
<head>
|
||||
<meta charset="<?php bloginfo('charset'); ?>">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Add Months identifies the single change most likely to extend your lifespan. Private, local-first, no tracking.">
|
||||
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/assets/images/favicon.png">
|
||||
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/assets/images/apple-touch-icon.png">
|
||||
<?php wp_head(); ?>
|
||||
</head>
|
||||
<body <?php body_class(); ?>>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<h1>Identify the single change most likely to extend your life.</h1>
|
||||
<p class="subheadline">Add Months analyzes your lifestyle and shows your Dominant Challenge — the factor with the greatest potential impact on your lifespan.</p>
|
||||
<div class="hero-ctas">
|
||||
<button class="btn btn-primary" onclick="openModal('ios')">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
||||
</svg>
|
||||
Join iOS Beta
|
||||
</button>
|
||||
<a href="#how-it-works" class="btn btn-secondary">How It Works</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-mockup">
|
||||
<div class="phone-mockup" onclick="openModal('ios')">
|
||||
<div class="mockup-placeholder">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
|
||||
</svg>
|
||||
<div>App Screenshot</div>
|
||||
<div style="font-size: 0.75rem; margin-top: 4px;">Click to join beta</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How It Works -->
|
||||
<section id="how-it-works" class="how-it-works">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>How It Works</h2>
|
||||
</div>
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step-number">1</div>
|
||||
<h3>Enter your baseline.</h3>
|
||||
<p>Age, health status, and core lifestyle factors.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-number">2</div>
|
||||
<h3>Analyze your exposures.</h3>
|
||||
<p>The app models conservative lifespan impacts using established population data.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-number">3</div>
|
||||
<h3>See your Dominant Challenge.</h3>
|
||||
<p>The single change with the largest potential gain — right now.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- What It Is -->
|
||||
<section class="what-it-is">
|
||||
<div class="container">
|
||||
<div class="is-column">
|
||||
<h2>Add Months is:</h2>
|
||||
<ul class="is-list">
|
||||
<li>A clarity tool.</li>
|
||||
<li>Private and local.</li>
|
||||
<li>Based on population-level risk modeling.</li>
|
||||
<li>Designed for re-evaluation over time.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="isnt-column">
|
||||
<h2>Add Months is not:</h2>
|
||||
<ul class="isnt-list">
|
||||
<li>Medical advice.</li>
|
||||
<li>A habit tracker.</li>
|
||||
<li>A social network.</li>
|
||||
<li>A coaching app.</li>
|
||||
<li>A data collection platform.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Privacy -->
|
||||
<section class="privacy-section">
|
||||
<div class="container">
|
||||
<div class="privacy-content">
|
||||
<h2>Your data never leaves your device.</h2>
|
||||
<div class="privacy-bullets">
|
||||
<span class="privacy-bullet">No accounts required</span>
|
||||
<span class="privacy-bullet">No analytics</span>
|
||||
<span class="privacy-bullet">No ads</span>
|
||||
<span class="privacy-bullet">Encrypted local storage</span>
|
||||
<span class="privacy-bullet">Hard delete = permanent</span>
|
||||
</div>
|
||||
<p class="privacy-statement">We cannot see your inputs. We do not collect or sell behavioral data.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Clarity -->
|
||||
<section class="clarity">
|
||||
<div class="container">
|
||||
<div class="clarity-content">
|
||||
<h2>Built for Clarity</h2>
|
||||
<p>Most health apps try to optimize everything. Add Months identifies the one lever that matters most — so you can focus your effort where it counts.</p>
|
||||
<p class="clarity-subtle">Re-run whenever your life changes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Download -->
|
||||
<section class="download-section">
|
||||
<div class="container">
|
||||
<div class="download-content">
|
||||
<h2>Get Early Access</h2>
|
||||
<p>Join the beta to be among the first to try Add Months.</p>
|
||||
<div class="app-badges">
|
||||
<div class="app-badge" onclick="openModal('ios')">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
||||
</svg>
|
||||
<div class="app-badge-text">
|
||||
<div class="app-badge-small">Join the</div>
|
||||
<div class="app-badge-big">iOS Beta</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-badge" onclick="openModal('android')">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85-.29-.15-.65-.06-.83.22l-1.88 3.24c-1.44-.59-3.01-.9-4.47-.9s-3.03.31-4.47.9L5.65 5.67c-.19-.29-.51-.38-.79-.22-.3.16-.42.54-.26.85L6.4 9.48C3.3 11.25 1.28 14.44 1 18h22c-.28-3.56-2.3-6.75-5.4-8.52zM7 15.25c-.69 0-1.25-.56-1.25-1.25S6.31 12.75 7 12.75 8.25 13.31 8.25 14 7.69 15.25 7 15.25zm10 0c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z"/>
|
||||
</svg>
|
||||
<div class="app-badge-text">
|
||||
<div class="app-badge-small">Join the</div>
|
||||
<div class="app-badge-big">Android Beta</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-links">
|
||||
<a href="<?php echo home_url('/privacy/'); ?>">Privacy</a>
|
||||
<a href="<?php echo home_url('/terms/'); ?>">Terms</a>
|
||||
<a href="<?php echo home_url('/disclaimer/'); ?>">Disclaimer</a>
|
||||
<a href="https://help.addmonths.com">Help</a>
|
||||
</div>
|
||||
<div class="footer-copyright">
|
||||
© <?php echo date('Y'); ?> Add Months
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Beta Signup Modal -->
|
||||
<div class="modal-overlay" id="signup-modal">
|
||||
<div class="modal">
|
||||
<button class="modal-close" onclick="closeModal()">×</button>
|
||||
|
||||
<div class="signup-form" id="signup-form">
|
||||
<h2>Join the Beta</h2>
|
||||
<p>Enter your email to get early access when we launch.</p>
|
||||
|
||||
<form id="beta-form">
|
||||
<div class="form-group">
|
||||
<label for="email">Email Address</label>
|
||||
<input type="email" id="email" name="email" required placeholder="you@example.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="platform">Platform</label>
|
||||
<select id="platform" name="platform" required>
|
||||
<option value="ios">iOS (TestFlight)</option>
|
||||
<option value="android">Android</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary form-submit">Join Beta</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="form-success" id="form-success">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</svg>
|
||||
<h3>You're on the list!</h3>
|
||||
<p>We'll email you when the beta is ready.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openModal(platform) {
|
||||
document.getElementById('platform').value = platform;
|
||||
document.getElementById('signup-modal').classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('signup-modal').classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// Close modal on overlay click
|
||||
document.getElementById('signup-modal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Close modal on escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Handle form submission
|
||||
document.getElementById('beta-form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var email = document.getElementById('email').value;
|
||||
var platform = document.getElementById('platform').value;
|
||||
|
||||
var formData = new FormData();
|
||||
formData.append('action', 'beta_signup');
|
||||
formData.append('email', email);
|
||||
formData.append('platform', platform);
|
||||
formData.append('nonce', '<?php echo wp_create_nonce("beta_signup_nonce"); ?>');
|
||||
|
||||
fetch('<?php echo admin_url("admin-ajax.php"); ?>', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(function(response) { return response.json(); })
|
||||
.then(function(data) {
|
||||
document.getElementById('signup-form').classList.add('hidden');
|
||||
document.getElementById('form-success').classList.add('active');
|
||||
})
|
||||
.catch(function(error) {
|
||||
alert('Something went wrong. Please try again.');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php wp_footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
194
functions.php
Normal file
194
functions.php
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
<?php
|
||||
/**
|
||||
* Add Months Theme Functions
|
||||
*/
|
||||
|
||||
// Theme setup
|
||||
function addmonths_setup() {
|
||||
add_theme_support('title-tag');
|
||||
add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));
|
||||
}
|
||||
add_action('after_setup_theme', 'addmonths_setup');
|
||||
|
||||
// Enqueue styles
|
||||
function addmonths_scripts() {
|
||||
wp_enqueue_style('addmonths-style', get_stylesheet_uri(), array(), '1.0.0');
|
||||
}
|
||||
add_action('wp_enqueue_scripts', 'addmonths_scripts');
|
||||
|
||||
// Remove WordPress extras for cleaner output
|
||||
remove_action('wp_head', 'wp_generator');
|
||||
remove_action('wp_head', 'wlwmanifest_link');
|
||||
remove_action('wp_head', 'rsd_link');
|
||||
remove_action('wp_head', 'wp_shortlink_wp_head');
|
||||
remove_action('wp_head', 'rest_output_link_wp_head');
|
||||
remove_action('wp_head', 'wp_oembed_add_discovery_links');
|
||||
remove_action('wp_head', 'print_emoji_detection_script', 7);
|
||||
remove_action('wp_print_styles', 'print_emoji_styles');
|
||||
|
||||
// Disable XML-RPC
|
||||
add_filter('xmlrpc_enabled', '__return_false');
|
||||
|
||||
// Create beta signups table on theme activation
|
||||
function addmonths_create_signups_table() {
|
||||
global $wpdb;
|
||||
$table_name = $wpdb->prefix . 'beta_signups';
|
||||
$charset_collate = $wpdb->get_charset_collate();
|
||||
|
||||
$sql = "CREATE TABLE IF NOT EXISTS $table_name (
|
||||
id bigint(20) NOT NULL AUTO_INCREMENT,
|
||||
email varchar(255) NOT NULL,
|
||||
platform varchar(20) NOT NULL,
|
||||
created_at datetime DEFAULT CURRENT_TIMESTAMP,
|
||||
PRIMARY KEY (id),
|
||||
UNIQUE KEY email (email)
|
||||
) $charset_collate;";
|
||||
|
||||
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
|
||||
dbDelta($sql);
|
||||
}
|
||||
add_action('after_switch_theme', 'addmonths_create_signups_table');
|
||||
|
||||
// Handle beta signup AJAX
|
||||
function addmonths_handle_signup() {
|
||||
// Verify nonce
|
||||
if (!wp_verify_nonce($_POST['nonce'], 'beta_signup_nonce')) {
|
||||
wp_send_json_error('Invalid request');
|
||||
return;
|
||||
}
|
||||
|
||||
$email = sanitize_email($_POST['email']);
|
||||
$platform = sanitize_text_field($_POST['platform']);
|
||||
|
||||
if (!is_email($email)) {
|
||||
wp_send_json_error('Invalid email address');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!in_array($platform, array('ios', 'android'))) {
|
||||
wp_send_json_error('Invalid platform');
|
||||
return;
|
||||
}
|
||||
|
||||
global $wpdb;
|
||||
$table_name = $wpdb->prefix . 'beta_signups';
|
||||
|
||||
// Check if email already exists
|
||||
$exists = $wpdb->get_var($wpdb->prepare(
|
||||
"SELECT id FROM $table_name WHERE email = %s",
|
||||
$email
|
||||
));
|
||||
|
||||
if ($exists) {
|
||||
wp_send_json_success('Already signed up');
|
||||
return;
|
||||
}
|
||||
|
||||
// Insert new signup
|
||||
$result = $wpdb->insert(
|
||||
$table_name,
|
||||
array(
|
||||
'email' => $email,
|
||||
'platform' => $platform
|
||||
),
|
||||
array('%s', '%s')
|
||||
);
|
||||
|
||||
if ($result) {
|
||||
wp_send_json_success('Signed up successfully');
|
||||
} else {
|
||||
wp_send_json_error('Failed to sign up');
|
||||
}
|
||||
}
|
||||
add_action('wp_ajax_beta_signup', 'addmonths_handle_signup');
|
||||
add_action('wp_ajax_nopriv_beta_signup', 'addmonths_handle_signup');
|
||||
|
||||
// Admin page to view signups
|
||||
function addmonths_admin_menu() {
|
||||
add_menu_page(
|
||||
'Beta Signups',
|
||||
'Beta Signups',
|
||||
'manage_options',
|
||||
'beta-signups',
|
||||
'addmonths_signups_page',
|
||||
'dashicons-email',
|
||||
30
|
||||
);
|
||||
}
|
||||
add_action('admin_menu', 'addmonths_admin_menu');
|
||||
|
||||
function addmonths_signups_page() {
|
||||
global $wpdb;
|
||||
$table_name = $wpdb->prefix . 'beta_signups';
|
||||
|
||||
// Handle CSV export
|
||||
if (isset($_GET['export']) && $_GET['export'] === 'csv') {
|
||||
$signups = $wpdb->get_results("SELECT * FROM $table_name ORDER BY created_at DESC");
|
||||
|
||||
header('Content-Type: text/csv');
|
||||
header('Content-Disposition: attachment; filename="beta-signups-' . date('Y-m-d') . '.csv"');
|
||||
|
||||
$output = fopen('php://output', 'w');
|
||||
fputcsv($output, array('Email', 'Platform', 'Signed Up'));
|
||||
|
||||
foreach ($signups as $signup) {
|
||||
fputcsv($output, array($signup->email, $signup->platform, $signup->created_at));
|
||||
}
|
||||
|
||||
fclose($output);
|
||||
exit;
|
||||
}
|
||||
|
||||
$signups = $wpdb->get_results("SELECT * FROM $table_name ORDER BY created_at DESC");
|
||||
$total = count($signups);
|
||||
$ios_count = $wpdb->get_var("SELECT COUNT(*) FROM $table_name WHERE platform = 'ios'");
|
||||
$android_count = $wpdb->get_var("SELECT COUNT(*) FROM $table_name WHERE platform = 'android'");
|
||||
|
||||
?>
|
||||
<div class="wrap">
|
||||
<h1>Beta Signups</h1>
|
||||
|
||||
<div style="margin: 20px 0; display: flex; gap: 20px;">
|
||||
<div style="background: #fff; padding: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
||||
<h3 style="margin: 0 0 5px;">Total</h3>
|
||||
<p style="font-size: 32px; margin: 0; font-weight: bold;"><?php echo $total; ?></p>
|
||||
</div>
|
||||
<div style="background: #fff; padding: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
||||
<h3 style="margin: 0 0 5px;">iOS</h3>
|
||||
<p style="font-size: 32px; margin: 0; font-weight: bold;"><?php echo $ios_count; ?></p>
|
||||
</div>
|
||||
<div style="background: #fff; padding: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
||||
<h3 style="margin: 0 0 5px;">Android</h3>
|
||||
<p style="font-size: 32px; margin: 0; font-weight: bold;"><?php echo $android_count; ?></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p><a href="<?php echo admin_url('admin.php?page=beta-signups&export=csv'); ?>" class="button">Export CSV</a></p>
|
||||
|
||||
<table class="wp-list-table widefat fixed striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Email</th>
|
||||
<th>Platform</th>
|
||||
<th>Signed Up</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php if ($signups): ?>
|
||||
<?php foreach ($signups as $signup): ?>
|
||||
<tr>
|
||||
<td><?php echo esc_html($signup->email); ?></td>
|
||||
<td><?php echo esc_html(ucfirst($signup->platform)); ?></td>
|
||||
<td><?php echo esc_html($signup->created_at); ?></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php else: ?>
|
||||
<tr>
|
||||
<td colspan="3">No signups yet.</td>
|
||||
</tr>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
6
index.php
Normal file
6
index.php
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<?php
|
||||
/**
|
||||
* Fallback template - redirects to front page
|
||||
*/
|
||||
wp_redirect(home_url());
|
||||
exit;
|
||||
79
page.php
Normal file
79
page.php
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html <?php language_attributes(); ?>>
|
||||
<head>
|
||||
<meta charset="<?php bloginfo('charset'); ?>">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/assets/images/favicon.png">
|
||||
<?php wp_head(); ?>
|
||||
<style>
|
||||
.page-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 120px 24px 80px;
|
||||
}
|
||||
.page-content h1 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.page-content h2 {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.page-content p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.page-content ul {
|
||||
margin-bottom: 1rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.page-content li {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.back-link:hover {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body <?php body_class(); ?>>
|
||||
<div class="page-content">
|
||||
<a href="<?php echo home_url(); ?>" class="back-link">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
|
||||
</svg>
|
||||
Back to Add Months
|
||||
</a>
|
||||
|
||||
<?php while (have_posts()) : the_post(); ?>
|
||||
<h1><?php the_title(); ?></h1>
|
||||
<?php the_content(); ?>
|
||||
<?php endwhile; ?>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-links">
|
||||
<a href="<?php echo home_url('/privacy/'); ?>">Privacy</a>
|
||||
<a href="<?php echo home_url('/terms/'); ?>">Terms</a>
|
||||
<a href="<?php echo home_url('/disclaimer/'); ?>">Disclaimer</a>
|
||||
<a href="https://help.addmonths.com">Help</a>
|
||||
</div>
|
||||
<div class="footer-copyright">
|
||||
© <?php echo date('Y'); ?> Add Months
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<?php wp_footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
600
style.css
Normal file
600
style.css
Normal file
|
|
@ -0,0 +1,600 @@
|
|||
/*
|
||||
Theme Name: Add Months
|
||||
Theme URI: https://addmonths.com
|
||||
Author: Payfrit
|
||||
Author URI: https://payfrit.com
|
||||
Description: Minimal, dark theme for Add Months app landing page
|
||||
Version: 1.0.0
|
||||
License: GNU General Public License v2 or later
|
||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||
Text Domain: addmonths
|
||||
*/
|
||||
|
||||
:root {
|
||||
--bg-primary: #0a0a0a;
|
||||
--bg-secondary: #141414;
|
||||
--bg-tertiary: #1a1a1a;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a0a0a0;
|
||||
--text-muted: #666666;
|
||||
--accent: #4a7c59;
|
||||
--accent-hover: #5a9469;
|
||||
--border: #2a2a2a;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.5rem, 3vw, 2.25rem);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 120px 0 80px;
|
||||
position: relative;
|
||||
background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 80px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-text h1 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-text .subheadline {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2.5rem;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.hero-ctas {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 14px 28px;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--text-primary);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #e0e0e0;
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.hero-mockup {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.phone-mockup {
|
||||
width: 280px;
|
||||
height: 580px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 40px;
|
||||
border: 2px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.phone-mockup:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.phone-mockup::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
width: 80px;
|
||||
height: 24px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.mockup-placeholder {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mockup-placeholder svg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* How It Works */
|
||||
.how-it-works {
|
||||
padding: 120px 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
.step {
|
||||
text-align: center;
|
||||
padding: 40px 24px;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 2px solid var(--accent);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 24px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.step h3 {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.step p {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
/* What It Is */
|
||||
.what-it-is {
|
||||
padding: 120px 0;
|
||||
}
|
||||
|
||||
.what-it-is .container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 80px;
|
||||
}
|
||||
|
||||
.is-list, .isnt-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.is-list li, .isnt-list li {
|
||||
padding: 12px 0;
|
||||
padding-left: 32px;
|
||||
position: relative;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.is-list li::before {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.isnt-list li::before {
|
||||
content: "✕";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Privacy */
|
||||
.privacy-section {
|
||||
padding: 120px 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.privacy-content {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.privacy-bullets {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.privacy-bullet {
|
||||
background: var(--bg-tertiary);
|
||||
padding: 12px 24px;
|
||||
border-radius: 100px;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.privacy-statement {
|
||||
font-style: italic;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
/* Clarity */
|
||||
.clarity {
|
||||
padding: 120px 0;
|
||||
}
|
||||
|
||||
.clarity-content {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.clarity-content p {
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.clarity-subtle {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
/* Download */
|
||||
.download-section {
|
||||
padding: 120px 0;
|
||||
background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
|
||||
}
|
||||
|
||||
.download-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-badges {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
margin-top: 40px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.app-badge {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 16px 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-badge:hover {
|
||||
border-color: var(--text-secondary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.app-badge svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.app-badge-text {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.app-badge-small {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.app-badge-big {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.site-footer {
|
||||
padding: 40px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.modal-overlay.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 48px;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.modal h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.modal p {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.form-group select option {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.form-success {
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-success.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-success svg {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
color: var(--accent);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-success h3 {
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.signup-form.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 968px) {
|
||||
.hero-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-text .subheadline {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.hero-ctas {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-mockup {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.steps {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.what-it-is .container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero {
|
||||
padding: 80px 0 60px;
|
||||
}
|
||||
|
||||
.how-it-works,
|
||||
.what-it-is,
|
||||
.privacy-section,
|
||||
.clarity,
|
||||
.download-section {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.phone-mockup {
|
||||
width: 240px;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue