Max
186baa1239
- Separated JavaScript into script.js for better organization - Added Server-Sent Events (SSE) webhook receiver for real-time results - Created Go service to receive AlpenQueue webhooks and broadcast via SSE - Removed manual webhook input - results stream automatically - Added live connection status indicator - Implemented real-time result cards with animations - Fixed AlpenQueue API field names (webhook_url, selector) - Added dark theme styling for result display - Results appear instantly without polling The portfolio now shows AlpenQueue results in real-time as they arrive!
78 lines
2.9 KiB
HTML
78 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Portfolio - AlpenQueue Live Demo</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<h1>Mountain-Built Tools for Real Problems</h1>
|
|
|
|
<div class="intro">
|
|
Linux Developer crafting resilient, self-hosted solutions from the Austrian Alps.
|
|
</div>
|
|
|
|
<div class="project">
|
|
<div class="project-name">AlpenQueue</div>
|
|
<p>A lightweight task queue-scrapes, processes, calls back-runs on a five-euro Hetzner box. Used it this morning to pull competitor prices.</p>
|
|
<p>The CLI? One command, drops jobs in. Built with Go, Docker-ready, open-source.</p>
|
|
<p>Want it? Try it live below, then grab the code.</p>
|
|
</div>
|
|
|
|
<div class="playground">
|
|
<h2>Try AlpenQueue Live</h2>
|
|
<p class="playground-intro">Queue a real scraping job and watch results stream in real-time below.</p>
|
|
|
|
<form id="queue-form">
|
|
<div class="form-group">
|
|
<label for="url">Target URL to Scrape:</label>
|
|
<input type="url" id="url" name="url" placeholder="https://example.com" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="selector">CSS Selector (what to extract):</label>
|
|
<input type="text" id="selector" name="selector" placeholder=".title, h1, .price" value="title" required>
|
|
<small>Examples: title, h1, .class-name, #id</small>
|
|
</div>
|
|
|
|
<button type="submit" id="submit-btn">Queue it →</button>
|
|
</form>
|
|
|
|
<div id="response" class="response-box"></div>
|
|
|
|
<div id="live-results-container" class="live-results-container">
|
|
<div class="results-header">
|
|
<h3>Live Results</h3>
|
|
<span id="connection-status" class="connection-status">○ Connecting...</span>
|
|
</div>
|
|
<div id="live-results" class="live-results">
|
|
<div class="no-results">
|
|
Queue a job above to see real-time results appear here...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-live">
|
|
<div class="stat-item">
|
|
<span class="stat-label">Jobs Processed Today:</span>
|
|
<span class="stat-value" id="jobs-today">Loading...</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Avg Response Time:</span>
|
|
<span class="stat-value">~1.2s</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stack">
|
|
Go for the backend, net/http for the API, SQLite for data, goquery for scraping, Docker to package it, self-hosted on Hetzner.
|
|
</div>
|
|
|
|
<div class="link">
|
|
<a href="https://git.maxtheweb.com/maxtheweb/AlpenQueue">Get the code</a>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |