SneakyScope/app/templates/index.html

{% 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>
{% endblock %}

{% block page_js %}

<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 %}