191 lines
6.0 KiB
HTML
191 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="it">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>OGame Spy Auto-Importer</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
width: 340px;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
font-size: 13px;
|
||
color: #e0e0e0;
|
||
background: #1a1a2e;
|
||
padding: 14px;
|
||
}
|
||
h1 {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
h1 .icon { font-size: 18px; }
|
||
.card {
|
||
background: #16213e;
|
||
border-radius: 8px;
|
||
padding: 11px 12px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.card-title {
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: .6px;
|
||
color: #8a93b0;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.row { display: flex; gap: 8px; }
|
||
.field { flex: 1; margin-bottom: 8px; }
|
||
.field.small { flex: 0 0 90px; }
|
||
label {
|
||
display: block;
|
||
font-size: 11px;
|
||
color: #aab;
|
||
margin-bottom: 3px;
|
||
}
|
||
input[type="text"], input[type="number"], textarea {
|
||
width: 100%;
|
||
padding: 6px 8px;
|
||
border: 1px solid #2a3a5f;
|
||
border-radius: 4px;
|
||
background: #0f3460;
|
||
color: #e0e0e0;
|
||
font-size: 13px;
|
||
outline: none;
|
||
font-family: inherit;
|
||
}
|
||
textarea { resize: vertical; min-height: 46px; }
|
||
input:focus, textarea:focus { border-color: #e94560; }
|
||
.btn {
|
||
width: 100%;
|
||
padding: 8px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
background: #e94560;
|
||
color: #fff;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
transition: background .15s;
|
||
}
|
||
.btn:hover { background: #c73652; }
|
||
.btn:disabled { background: #555; cursor: default; }
|
||
.btn.ghost { background: #233259; }
|
||
.btn.ghost:hover { background: #2c3f70; }
|
||
.target {
|
||
font-size: 11px;
|
||
color: #7fd0ff;
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||
word-break: break-all;
|
||
}
|
||
.status { display: flex; align-items: center; gap: 7px; font-size: 12px; margin-top: 8px; }
|
||
.dot {
|
||
width: 8px; height: 8px; border-radius: 50%;
|
||
background: #555; flex-shrink: 0;
|
||
}
|
||
.dot.ok { background: #4caf50; box-shadow: 0 0 5px #4caf50; }
|
||
.dot.err { background: #f44336; box-shadow: 0 0 5px #f44336; }
|
||
.dot.wait { background: #ff9800; animation: pulse 1s infinite; }
|
||
.status small { color: #889; display: block; font-size: 10px; line-height: 1.35; }
|
||
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
|
||
.switch-row { display: flex; align-items: center; justify-content: space-between; }
|
||
.switch-row + .hint { margin-top: 7px; }
|
||
.switch { position: relative; width: 38px; height: 21px; flex-shrink: 0; cursor: pointer; }
|
||
.switch input { display: none; }
|
||
.switch .slider {
|
||
position: absolute; inset: 0; background: #334; border-radius: 11px; transition: .2s;
|
||
}
|
||
.switch .slider::before {
|
||
content: ''; position: absolute; width: 15px; height: 15px;
|
||
left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s;
|
||
}
|
||
.switch input:checked + .slider { background: #e94560; }
|
||
.switch input:checked + .slider::before { transform: translateX(17px); }
|
||
.hint { font-size: 10.5px; color: #778; line-height: 1.45; }
|
||
.hint code, code {
|
||
background: #0f3460; padding: 0 4px; border-radius: 3px;
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px;
|
||
}
|
||
.result { font-size: 11.5px; margin-top: 8px; word-break: break-word; line-height: 1.4; }
|
||
.result.ok { color: #6fdc8c; }
|
||
.result.err { color: #ff8a80; }
|
||
.last { font-size: 11px; color: #889; margin-top: 2px; word-break: break-word; line-height: 1.4; }
|
||
.footer { text-align: center; font-size: 10px; color: #556; margin-top: 2px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1><span class="icon">🔭</span> OGame Spy Auto-Importer</h1>
|
||
|
||
<!-- Piattaforma -->
|
||
<div class="card">
|
||
<div class="card-title">
|
||
<span>Piattaforma</span>
|
||
<span class="target" id="targetUrl">–</span>
|
||
</div>
|
||
<div class="row">
|
||
<div class="field">
|
||
<label for="host">Indirizzo / IP</label>
|
||
<input type="text" id="host" placeholder="localhost" spellcheck="false" autocomplete="off">
|
||
</div>
|
||
<div class="field small">
|
||
<label for="port">Porta</label>
|
||
<input type="number" id="port" placeholder="8899" min="1" max="65535">
|
||
</div>
|
||
</div>
|
||
<button class="btn ghost" id="btnCheck">Verifica connessione</button>
|
||
<div class="status">
|
||
<span class="dot" id="statusDot"></span>
|
||
<span id="statusText">Non verificato</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cattura automatica -->
|
||
<div class="card">
|
||
<div class="card-title">Cattura automatica</div>
|
||
<div class="switch-row">
|
||
<span>Abilita import dagli appunti</span>
|
||
<label class="switch">
|
||
<input type="checkbox" id="autoImport">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</div>
|
||
<div class="hint">
|
||
Su una pagina OGame (es. <code>s170-ar.ogame.gameforge.com</code>) tieni la
|
||
scheda attiva e copia l'API string della spia: viene caricato subito.
|
||
Altrove la clipboard non viene mai letta.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Notifiche -->
|
||
<div class="card">
|
||
<div class="card-title">Notifiche</div>
|
||
<div class="switch-row">
|
||
<span>Mostra notifiche di esito</span>
|
||
<label class="switch">
|
||
<input type="checkbox" id="notifications">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Import dalla clipboard -->
|
||
<div class="card">
|
||
<div class="card-title">Import dalla clipboard</div>
|
||
<div class="hint" style="margin-bottom:8px">
|
||
Copia un API string in OGame (pulsante <code>API</code> nel rapporto), poi premi qui.
|
||
</div>
|
||
<button class="btn" id="btnImport">Importa ora</button>
|
||
<div class="result" id="importResult"></div>
|
||
<div class="last" id="lastImport">Nessun import effettuato.</div>
|
||
</div>
|
||
|
||
<div class="footer">v2.1.2 — intercetta la copia, non legge la clipboard</div>
|
||
|
||
<script src="popup.js"></script>
|
||
</body>
|
||
</html>
|