150 lines
3.6 KiB
HTML
150 lines
3.6 KiB
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>
|
|
|
|
<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 %}
|