first commit

app/templates/index.html

@@ -0,0 +1,149 @@
+{% extends 'base.html' %}
+{% block content %}
+
+<!-- Analysis Form -->
+<form id="analyze-form" method="post" action="{{ url_for('main.analyze') }}" class="card">
+  <h2>Analyze a URL</h2>
+  <label for="url">Enter a URL to analyze</label>
+  <input id="url" name="url" type="url" placeholder="https://example.com" required />
+  <button type="submit">Analyze</button>
+</form>
+
+<!-- Recent Results (optional; shown only if recent_results provided) -->
+{% if recent_results %}
+<div class="card" id="recent-results">
+  <h2>Recent Results</h2>
+  <table class="results-table">
+    <thead>
+      <tr>
+        <th>Timestamp</th>
+        <th>URL</th>
+        <th>UUID</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for r in recent_results %}
+      <tr>
+        <td class="timestamp">
+          {% if r.timestamp %}
+            {{ r.timestamp }}
+          {% else %}
+            N/A
+          {% endif %}
+        </td>
+        <td class="url">
+          <a href="{{ url_for('main.view_result', run_uuid=r.uuid) }}">
+            {{ r.final_url or r.submitted_url }}
+          </a>
+        </td>
+        <td class="uuid">
+          <code id="uuid-{{ loop.index }}">{{ r.uuid }}</code>
+          <button 
+            type="button" 
+            class="copy-btn" 
+            data-target="uuid-{{ loop.index }}">
+            📋
+          </button>
+        </td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+
+</div>
+{% endif %}
+
+<!-- Spinner Modal -->
+<div id="spinner-modal" style="
+    display:none;
+    opacity:0;
+    position:fixed;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    background:rgba(0,0,0,0.7);
+    color:#fff;
+    font-size:1.5rem;
+    text-align:center;
+    padding-top:20%;
+    z-index:9999;
+    transition: opacity 0.3s ease;
+">
+  <div>
+    <div class="loader" style="
+        border: 8px solid #f3f3f3;
+        border-top: 8px solid #1a2535;
+        border-radius: 50%;
+        width: 60px;
+        height: 60px;
+        animation: spin 1s linear infinite;
+        margin: 0 auto 1rem auto;
+    "></div>
+    Analyzing website…
+  </div>
+</div>
+
+<style>
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>
+
+<script>
+const form = document.getElementById('analyze-form');
+const modal = document.getElementById('spinner-modal');
+
+function showModal() {
+  modal.style.display = 'block';
+  requestAnimationFrame(() => {
+    modal.style.opacity = '1';
+  });
+}
+
+function hideModal() {
+  modal.style.opacity = '0';
+  modal.addEventListener('transitionend', () => {
+    modal.style.display = 'none';
+  }, { once: true });
+}
+
+// Hide spinner on initial load / back navigation
+window.addEventListener('pageshow', () => {
+  modal.style.opacity = '0';
+  modal.style.display = 'none';
+});
+
+form.addEventListener('submit', (e) => {
+  showModal();
+  // Prevent double submission
+  form.querySelector('button').disabled = true;
+
+  // Allow browser to render the modal before submitting
+  requestAnimationFrame(() => form.submit());
+  e.preventDefault();
+});
+</script>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const buttons = document.querySelectorAll('.copy-btn');
+  buttons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const targetId = btn.getAttribute('data-target');
+      const uuidText = document.getElementById(targetId).innerText;
+
+      navigator.clipboard.writeText(uuidText).then(() => {
+        // Give quick feedback
+        btn.textContent = '✅';
+        setTimeout(() => { btn.textContent = '📋'; }, 1500);
+      }).catch(err => {
+        console.error('Failed to copy UUID:', err);
+      });
+    });
+  });
+});
+</script>
+
+{% endblock %}