<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Storylog - Share Your Untold Story</title>

  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">

  <meta name="description" content="Share a story that could only come from you. A spiritual experience, unexplained mystery, or an unlikely series of coincidences.">
  <meta property="og:url" content="https://storylog.com/">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Storylog - Share Your Untold Story">
  <meta property="og:description" content="Share a story that could only come from you. A spiritual experience, unexplained mystery, or an unlikely series of coincidences.">
  <meta property="og:image" content="https://storylog.com/open-graph.png">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="twitter:domain" content="storylog.com">
  <meta property="twitter:url" content="https://storylog.com/">
  <meta name="twitter:title" content="Storylog - Share Your Untold Story">
  <meta name="twitter:description" content="Share a story that could only come from you. A spiritual experience, unexplained mystery, or an unlikely series of coincidences.">
  <meta name="twitter:image" content="https://storylog.com/open-graph.png">

  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
  <style>
    .ql-toolbar.ql-snow, .ql-container.ql-snow {
      border: none;
    }
  </style>
</head>
<body class="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 min-h-screen">
  <div class="min-h-screen px-4 py-12 sm:px-6 lg:px-8">
    <!-- Hero Section -->
    <div class="max-w-4xl mx-auto text-center mb-12">
      <h1 class="text-5xl sm:text-6xl pb-2 font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 mb-6">
        Storylog
      </h1>
      <p class="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto mb-6">
        Share a story that could only come from you. A spiritual experience, unexplained mystery, or an unlikely series of coincidences.
      </p>
      <p class="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
        When we collect enough, we'll start posting them here.
      </p>
    </div>

    <!-- Form Container -->
    <div class="max-w-3xl mx-auto">
      <div class="bg-white/10 backdrop-blur-lg rounded-2xl shadow-2xl p-8 border border-white/20">
        <!-- Tab Navigation -->
        <div class="flex mb-8 border-b border-white/20">
          <button onclick="showTab('write')" id="writeTab" class="tab-btn px-6 py-3 text-white font-medium border-b-2 border-purple-400 transition-all">
            Write Your Story
          </button>
          <button onclick="showTab('upload')" id="uploadTab" class="tab-btn px-6 py-3 text-gray-400 font-medium border-b-2 border-transparent hover:text-white transition-all">
            Upload File
          </button>
        </div>

        <!-- Write Tab Content -->
        <div id="writeContent" class="tab-content">
          <form action="https://formspree.io/f/xvgrepde" method="POST" class="space-y-6">
            <!-- Honeypot -->
            <input type="text" name="_gotcha" style="display:none">
            
            <!-- Title Input -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">
                Story Title
              </label>
              <input 
                type="text" 
                name="title" 
                placeholder="Give your story a memorable title..."
                class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent transition-all"
                required
              >
            </div>

            <!-- Author Name (Optional) -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">
                Your Name (Optional)
              </label>
              <input 
                type="text" 
                name="author" 
                placeholder="Leave blank to remain anonymous..."
                class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent transition-all"
              >
            </div>

            <!-- WYSIWYG Editor -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">
                Your Story
              </label>
              <div class="bg-white rounded-lg overflow-hidden">
                <div id="editor" style="height: 300px;"></div>
              </div>
              <input type="hidden" name="story" id="storyContent">
            </div>

            <!-- Submit Button -->
            <button 
              type="submit" 
              class="w-full py-4 px-6 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200"
            >
              Share Your Story
            </button>
          </form>
        </div>

        <!-- Upload Tab Content -->
        <div id="uploadContent" class="tab-content hidden">
          <form action="https://formspree.io/f/xvgrepde" method="POST" enctype="multipart/form-data" class="space-y-6">
            <!-- Honeypot -->
            <input type="text" name="_gotcha" style="display:none">
            
            <!-- Title Input -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">
                Story Title
              </label>
              <input 
                type="text" 
                name="title" 
                placeholder="Give your story a memorable title..."
                class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent transition-all"
                required
              >
            </div>

            <!-- Author Name (Optional) -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">
                Your Name (Optional)
              </label>
              <input 
                type="text" 
                name="author" 
                placeholder="Leave blank to remain anonymous..."
                class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent transition-all"
              >
            </div>

            <!-- File Upload -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">
                Upload Your Untold Story
              </label>
              <div class="relative">
                <input 
                  type="file" 
                  name="upload" 
                  id="fileInput"
                  accept=".txt,.doc,.docx,.pdf"
                  class="hidden"
                  required
                >
                <label 
                  for="fileInput" 
                  class="flex items-center justify-center w-full px-4 py-8 bg-white/10 border-2 border-dashed border-white/20 rounded-lg cursor-pointer hover:bg-white/20 transition-all"
                >
                  <div class="text-center">
                    <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                      <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <p class="mt-2 text-sm text-gray-300">Click to upload or drag and drop</p>
                    <p class="text-xs text-gray-400">TXT, DOC, DOCX, PDF up to 10MB</p>
                  </div>
                </label>
                <p id="fileName" class="mt-2 text-sm text-gray-300"></p>
              </div>
            </div>

            <!-- Submit Button -->
            <button 
              type="submit" 
              class="w-full py-4 px-6 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200"
            >
              Share Your Story
            </button>
          </form>
        </div>
      </div>

      <!-- Privacy Note -->
      <p class="text-center text-gray-400 text-sm mt-6">
        Your stories are precious. Share as much or as little as you're comfortable with.
      </p>
    </div>
  </div>

  <script>
    // Initialize Quill editor
    const quill = new Quill('#editor', {
      theme: 'snow',
      placeholder: 'Share your untold story...',
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [{ 'header': 1 }, { 'header': 2 }],
          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
          [{ 'indent': '-1'}, { 'indent': '+1' }],
          ['link'],
          ['clean']
        ]
      }
    });

    // Tab switching functionality
    function showTab(tab) {
      const writeTab = document.getElementById('writeTab');
      const uploadTab = document.getElementById('uploadTab');
      const writeContent = document.getElementById('writeContent');
      const uploadContent = document.getElementById('uploadContent');

      if (tab === 'write') {
        writeTab.classList.add('border-purple-400', 'text-white');
        writeTab.classList.remove('border-transparent', 'text-gray-400');
        uploadTab.classList.add('border-transparent', 'text-gray-400');
        uploadTab.classList.remove('border-purple-400', 'text-white');
        writeContent.classList.remove('hidden');
        uploadContent.classList.add('hidden');
      } else {
        uploadTab.classList.add('border-purple-400', 'text-white');
        uploadTab.classList.remove('border-transparent', 'text-gray-400');
        writeTab.classList.add('border-transparent', 'text-gray-400');
        writeTab.classList.remove('border-purple-400', 'text-white');
        uploadContent.classList.remove('hidden');
        writeContent.classList.add('hidden');
      }
    }

    // File upload display
    document.getElementById('fileInput').addEventListener('change', function(e) {
      const fileName = e.target.files[0]?.name;
      if (fileName) {
        document.getElementById('fileName').textContent = `Selected: ${fileName}`;
      }
    });

    // Form submission for write tab
    document.querySelector('#writeContent form').addEventListener('submit', function(e) {
      // Get Quill content and add to hidden input
      const content = quill.root.innerHTML;
      document.getElementById('storyContent').value = content;
    });
  </script>
</body>
</html>