150 lines
6.1 KiB
HTML
150 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Grepolis Remote</title>
|
||
<link rel="stylesheet" href="/static/css/styles.css">
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<h1>⚔️ Grepolis Remote</h1>
|
||
<div class="status-indicator">
|
||
<div id="server-status" class="conn-badge">Server…</div>
|
||
<div id="client-status" class="conn-badge">Client…</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Captcha alert banner (hidden until captcha detected) -->
|
||
<div id="captcha-banner" style="display:none">
|
||
<span>⚠️</span>
|
||
<span>CAPTCHA εντοπίστηκε στο παιχνίδι — το script έχει παγώσει αυτόματα. Επίλυσε το captcha για να συνεχίσεις.</span>
|
||
<button id="captcha-dismiss" onclick="window.dismissCaptchaBanner()">Κλείσιμο</button>
|
||
</div>
|
||
|
||
<div class="layout">
|
||
|
||
<!-- Left: Town list -->
|
||
<div id="town-panel">
|
||
<h2>Towns</h2>
|
||
<div id="town-list"><p style="color:#444;font-size:0.8rem;">Waiting for data from home PC…</p></div>
|
||
</div>
|
||
|
||
<!-- Top right: Command panel -->
|
||
<div id="command-panel">
|
||
<h2>Send Command</h2>
|
||
<div id="no-town-selected">← Select a town first</div>
|
||
|
||
<!-- New dynamic town details panel -->
|
||
<div id="town-details-panel" style="display:none; margin-bottom: 20px; padding: 12px; background: #0f3460; border-radius: 6px; border: 1px solid #2a4a6a;">
|
||
<h3 id="td-name" style="color: #c8a44a; margin-bottom: 8px; font-size: 1rem; border-bottom: 1px solid #2a4a6a; padding-bottom: 4px;">Town Name</h3>
|
||
|
||
<div style="display: flex; gap: 20px; flex-wrap: wrap;">
|
||
<div style="flex: 1; min-width: 130px;">
|
||
<strong style="font-size: 0.75rem; color: #888; text-transform: uppercase;">Ποροι</strong>
|
||
<div id="td-resources" style="font-size: 0.85rem; margin-top: 4px; line-height: 1.5;"></div>
|
||
</div>
|
||
|
||
<div style="flex: 1; min-width: 130px;">
|
||
<strong style="font-size: 0.75rem; color: #888; text-transform: uppercase;">Γενικα</strong>
|
||
<div id="td-general" style="font-size: 0.85rem; margin-top: 4px; line-height: 1.5;"></div>
|
||
</div>
|
||
|
||
<div style="flex: 1; min-width: 130px;">
|
||
<strong style="font-size: 0.75rem; color: #888; text-transform: uppercase;">Στρατος</strong>
|
||
<div id="td-units" style="font-size: 0.85rem; margin-top: 4px; line-height: 1.5; color: #a4c84a;"></div>
|
||
</div>
|
||
|
||
<div style="flex: 1; min-width: 130px;">
|
||
<strong style="font-size: 0.75rem; color: #888; text-transform: uppercase;">Ερευνες</strong>
|
||
<div id="td-researches" style="font-size: 0.8rem; margin-top: 4px; line-height: 1.5; color: #c8a44a;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="command-form-wrap" style="display:none">
|
||
<div class="command-form">
|
||
|
||
<div class="form-group">
|
||
<label>Command Type</label>
|
||
<select id="cmd-type" onchange="onCmdTypeChange()">
|
||
<option value="build">Build / Upgrade</option>
|
||
<option value="recruit">Recruit Troops</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Build options -->
|
||
<div class="form-group" id="build-options">
|
||
<label>Building</label>
|
||
<select id="building-select">
|
||
<option disabled>Επιλέξτε πόλη...</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Recruit options -->
|
||
<div class="form-group" id="recruit-options" style="display:none">
|
||
<label>Unit</label>
|
||
<select id="unit-select">
|
||
<optgroup label="Ξηρά">
|
||
<option value="sword">Ξιφομάχος</option>
|
||
<option value="slinger">Σφενδονήτης</option>
|
||
<option value="archer">Τοξότης</option>
|
||
<option value="hoplite">Οπλίτης</option>
|
||
<option value="rider">Ιππέας</option>
|
||
<option value="chariot">Άρμα</option>
|
||
<option value="catapult">Καταπέλτης</option>
|
||
</optgroup>
|
||
<optgroup label="Ναυτικές">
|
||
<option value="big_transporter">Μεταφορικό Πλοίο</option>
|
||
<option value="small_transporter">Γρήγορο Μεταφορικό Πλοίο</option>
|
||
<option value="bireme">Διήρης</option>
|
||
<option value="attack_ship">Πλοίο Φάρος</option>
|
||
<option value="trireme">Τριήρης</option>
|
||
<option value="colonize_ship">Αποικιακό Πλοίο</option>
|
||
</optgroup>
|
||
<optgroup label="Μυθικές">
|
||
<option value="medusa">Μέδουσα</option>
|
||
<option value="zyklop">Κύκλωπας</option>
|
||
<option value="harpy">Άρπυια</option>
|
||
<option value="pegasus">Πήγασος</option>
|
||
<option value="minotaur">Μινώταυρος</option>
|
||
<option value="manticore">Μαντιχώρας</option>
|
||
<option value="cerberus">Κέρβερος</option>
|
||
<option value="hydra">Ύδρα</option>
|
||
<option value="sea_monster">Τέρας της Θάλασσας</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group" id="amount-group" style="display:none">
|
||
<label>Amount</label>
|
||
<input type="number" id="recruit-amount" value="1" min="1" max="9999" style="width:80px;">
|
||
</div>
|
||
|
||
<button class="btn btn-gold" onclick="sendCommand()">Send ⚡</button>
|
||
</div>
|
||
|
||
<div id="build-queue-preview"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom right: Command log -->
|
||
<div id="log-panel">
|
||
<h2>Command Log</h2>
|
||
<div id="log-content">
|
||
<p id="empty-log">No commands sent yet.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script src="/static/js/state.js"></script>
|
||
<script src="/static/js/components/townViewer.js"></script>
|
||
<script src="/static/js/components/commandForm.js"></script>
|
||
<script src="/static/js/components/commandLog.js"></script>
|
||
<script src="/static/js/api.js"></script>
|
||
<script src="/static/js/app.js"></script>
|
||
</body>
|
||
</html>
|