support.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Support — Scream Jar</title>
  <meta name="description" content="Get help with Scream Jar. Questions, feedback, bug reports — we read every message.">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%AB%99%3C/text%3E%3C/svg%3E">

  <style>
    .support-page {
      padding: 120px 0 80px;
      max-width: 720px;
      margin: 0 auto;
    }

    .support-page h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 600;
      margin-bottom: 8px;
    }

    .support-subtitle {
      color: var(--text-secondary);
      font-size: 1rem;
      margin-bottom: 48px;
      line-height: 1.7;
    }

    .support-page h2 {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 600;
      margin-top: 56px;
      margin-bottom: 20px;
    }

    .faq-item {
      padding: 20px 0;
      border-bottom: 1px solid var(--border-subtle);
    }

    .faq-item:last-child { border-bottom: none; }

    .faq-item h3 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
    }

    .faq-item p {
      color: var(--text-secondary);
      line-height: 1.7;
      font-size: 0.95rem;
    }

    .faq-item p a {
      color: var(--accent-purple);
      text-decoration: none;
    }

    .faq-item p a:hover { text-decoration: underline; }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-top: 24px;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-group label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .form-group input,
    .form-group textarea {
      padding: 12px 16px;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 0.95rem;
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder {
      color: var(--text-tertiary);
    }

    .form-group input:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: var(--accent-purple);
      background: var(--bg-card-hover);
      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
    }

    .form-group input.error,
    .form-group textarea.error {
      border-color: #ef5350;
      box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.18);
    }

    .form-group textarea {
      resize: vertical;
      min-height: 140px;
      font-family: var(--font-body);
    }

    .field-error {
      font-size: 0.8rem;
      color: #ef5350;
      min-height: 0;
    }

    .submit-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 14px 28px;
      background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
      color: white;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.95rem;
      letter-spacing: 0.01em;
      border: none;
      border-radius: var(--radius-pill);
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
      align-self: flex-start;
      box-shadow: 0 4px 16px var(--glow-purple);
    }

    .submit-btn:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px var(--glow-purple);
    }

    .submit-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .btn-spinner {
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .form-status {
      margin-top: 12px;
      font-size: 0.9rem;
      line-height: 1.5;
      border-radius: var(--radius-sm);
      padding: 0;
      transition: padding 0.2s;
    }

    .form-status.success {
      padding: 14px 16px;
      background: rgba(34, 197, 94, 0.1);
      border: 1px solid rgba(34, 197, 94, 0.25);
      color: var(--accent-green);
    }

    .form-status.error {
      padding: 14px 16px;
      background: rgba(239, 83, 80, 0.1);
      border: 1px solid rgba(239, 83, 80, 0.25);
      color: #ef5350;
    }

    @media (max-width: 600px) {
      .support-page { padding: 100px 20px 60px; }
      .form-row { grid-template-columns: 1fr; }
      .submit-btn { width: 100%; }
    }
  </style>
</head>
<body>

  <nav class="nav scrolled">
    <div class="container nav-inner">
      <a href="/" class="nav-logo">
        <div class="nav-logo-orb"></div>
        Scream Jar
      </a>
      <button class="nav-mobile-toggle" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Toggle menu">&#9776;</button>
      <ul class="nav-links">
        <li><a href="/#features">Features</a></li>
        <li><a href="/#styles">Orb Styles</a></li>
        <li><a href="privacy.html">Privacy</a></li>
        <li><a href="terms.html">Terms</a></li>
        <li><a href="support.html">Support</a></li>
      </ul>
    </div>
  </nav>

  <main class="support-page container">
    <h1>Support</h1>
    <p class="support-subtitle">Questions, feedback, or bug reports — send a message and I'll get back to you. Scream Jar is built by one person, so replies come from an actual human.</p>

    <h2>Frequently Asked</h2>

    <div class="faq-item">
      <h3>Why don't my screams survive after I reinstall the app?</h3>
      <p>Jar metadata (capacity, names) syncs via your private iCloud so it rehydrates on reinstall. Audio files themselves live on-device only — that's an intentional privacy choice. If you want to keep audio, export the jar as a <code>.screamjar</code> file from the share menu before reinstalling.</p>
    </div>

    <div class="faq-item">
      <h3>I bought a capacity expansion and it didn't apply.</h3>
      <p>Open <strong>Settings → Restore Purchases</strong> inside the app. That triggers a StoreKit sync that surfaces pending transactions. Capacity is tied to your Apple ID via iCloud, so reinstalling the app on the same Apple ID rehydrates it automatically. If it still hasn't applied after a minute, send a message below with your Apple ID email and approximate purchase time.</p>
    </div>

    <div class="faq-item">
      <h3>Does Scream Jar record in the background?</h3>
      <p>No. The microphone is only active while you're actively recording in the Add Scream sheet. Nothing leaves your device unless you explicitly share a jar via the iOS Share Sheet.</p>
    </div>

    <div class="faq-item">
      <h3>What iOS versions are supported?</h3>
      <p>Scream Jar requires iOS 26 or later. It's a universal app — runs natively on iPhone and iPad.</p>
    </div>

    <div class="faq-item">
      <h3>Can I get a refund?</h3>
      <p>Refunds for in-app purchases are handled by Apple, not by me directly. Request one at <a href="https://reportaproblem.apple.com" target="_blank" rel="noopener">reportaproblem.apple.com</a>. If Apple declines and you feel the purchase didn't deliver, send a message below and I'll help sort it out.</p>
    </div>

    <div class="faq-item">
      <h3>I found a bug.</h3>
      <p>Send it below — include your device model, iOS version, and what you were doing when it happened. Screenshots or a screen recording help a lot.</p>
    </div>

    <h2>Send a Message</h2>

    <form id="contact-form" class="contact-form" novalidate>
      <div class="form-row">
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" id="name" name="name" required autocomplete="name" placeholder="Your name" maxlength="200" aria-describedby="name-error" />
          <span id="name-error" class="field-error" role="alert"></span>
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" id="email" name="email" required autocomplete="email" placeholder="you@example.com" maxlength="320" aria-describedby="email-error" />
          <span id="email-error" class="field-error" role="alert"></span>
        </div>
      </div>
      <div class="form-group">
        <label for="subject">Subject</label>
        <input type="text" id="subject" name="subject" required placeholder="What's this about?" maxlength="500" aria-describedby="subject-error" />
        <span id="subject-error" class="field-error" role="alert"></span>
      </div>
      <div class="form-group">
        <label for="message">Message</label>
        <textarea id="message" name="message" rows="6" required placeholder="Your message..." maxlength="5000" aria-describedby="message-error"></textarea>
        <span id="message-error" class="field-error" role="alert"></span>
      </div>
      <!-- Honeypot — hidden from humans, bots fill it -->
      <div aria-hidden="true" style="position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;overflow:hidden">
        <label for="website">Website</label>
        <input type="text" id="website" name="website" autocomplete="off" tabindex="-1" />
      </div>
      <button type="submit" class="submit-btn" id="submit-btn">
        <span class="btn-text">Send Message</span>
        <svg class="btn-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
          <path d="M2 8h12M10 4l4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <svg class="btn-spinner" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" style="display:none">
          <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="2" stroke-dasharray="28" stroke-dashoffset="10" stroke-linecap="round"/>
        </svg>
      </button>
    </form>

    <div id="form-status" class="form-status" role="alert" aria-live="polite"></div>
  </main>

  <footer class="footer">
    <div class="container footer-inner">
      <div class="footer-brand">
        <div class="footer-brand-orb"></div>
        Scream Jar
      </div>
      <div class="footer-links">
        <a href="privacy.html">Privacy Policy</a>
        <a href="terms.html">Terms of Use</a>
        <a href="support.html">Support</a>
      </div>
      <div class="footer-copy">
        &copy; 2026 Joshua Hart / Hartistic LLC. All rights reserved.
      </div>
    </div>
  </footer>

  <script>
    const form = document.getElementById('contact-form');
    const btn = document.getElementById('submit-btn');
    const status = document.getElementById('form-status');
    const icon = btn.querySelector('.btn-icon');
    const spinner = btn.querySelector('.btn-spinner');

    form.addEventListener('submit', async (e) => {
      e.preventDefault();

      form.querySelectorAll('.error').forEach(el => {
        el.classList.remove('error');
        el.removeAttribute('aria-invalid');
      });
      form.querySelectorAll('.field-error').forEach(el => el.textContent = '');
      status.className = 'form-status';
      status.textContent = '';

      const name = form.elements.namedItem('name').value.trim();
      const email = form.elements.namedItem('email').value.trim();
      const subject = form.elements.namedItem('subject').value.trim();
      const message = form.elements.namedItem('message').value.trim();

      const markError = (id, msg) => {
        const el = document.getElementById(id);
        el.classList.add('error');
        el.setAttribute('aria-invalid', 'true');
        document.getElementById(id + '-error').textContent = msg;
      };

      let hasErrors = false;
      if (!name) { markError('name', 'Name is required'); hasErrors = true; }
      if (!email) { markError('email', 'Email is required'); hasErrors = true; }
      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { markError('email', 'Please enter a valid email address'); hasErrors = true; }
      if (!subject) { markError('subject', 'Subject is required'); hasErrors = true; }
      if (!message) { markError('message', 'Message is required'); hasErrors = true; }

      if (hasErrors) return;

      btn.disabled = true;
      icon.style.display = 'none';
      spinner.style.display = '';
      btn.querySelector('.btn-text').textContent = 'Sending...';

      try {
        const res = await fetch('/api/contact', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name, email, subject, message, website: form.elements.namedItem('website').value }),
        });

        const data = await res.json();

        if (res.ok) {
          status.className = 'form-status success';
          status.textContent = 'Message sent. I\'ll get back to you soon.';
          form.reset();
        } else {
          status.className = 'form-status error';
          status.textContent = data.error || 'Something went wrong. Please try again.';
        }
      } catch {
        status.className = 'form-status error';
        status.textContent = 'Network error. Please check your connection and try again.';
      } finally {
        btn.disabled = false;
        icon.style.display = '';
        spinner.style.display = 'none';
        btn.querySelector('.btn-text').textContent = 'Send Message';
      }
    });
  </script>

</body>
</html>