286 lines
10 KiB
HTML
Executable File
286 lines
10 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>ESCAPE FROM TARKOV COMPANION — Price Check</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<!-- Site-wide styles -->
|
||
<link rel="stylesheet" href="styles.css">
|
||
|
||
<!-- Page-scoped styles kept inline (visuals only) -->
|
||
<style>
|
||
/* ===== Base Helpers ===== */
|
||
.pc-section { border: 1px solid rgba(0,255,102,.25); padding: 1rem; margin: 1rem 0; box-shadow: 0 0 14px rgba(0,255,102,.08); }
|
||
.pc-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
|
||
.pc-muted { color: #9aa0a6; }
|
||
.pc-list { margin: .5rem 0; padding-left: 1rem; }
|
||
.pc-list li { cursor: pointer; padding: .25rem 0; }
|
||
.pc-list li:hover { background: rgba(0,255,102,.08); }
|
||
.pc-good { color: #22c55e; }
|
||
.pc-warn { color: #f59e0b; }
|
||
.pc-bad { color: #ef4444; }
|
||
input[type="text"], input[type="number"], select, button { padding: .45rem .6rem; }
|
||
button { cursor: pointer; }
|
||
table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
|
||
th, td { padding: .5rem .6rem; border-bottom: 1px solid rgba(0,255,102,.15); text-align: left; }
|
||
.right { text-align: right; }
|
||
#pc-selected strong { color: #00ff66; }
|
||
/* Prevent table from blowing out layout on small screens */
|
||
.pc-table-wrap { width: 100%; overflow-x: auto; }
|
||
|
||
/* ===== Mobile Card View (<= 680px) ===== */
|
||
@media (max-width: 680px) {
|
||
/* Hide header; we’ll show labels via data-label on cells */
|
||
#pc-table thead {
|
||
position: absolute;
|
||
left: -9999px;
|
||
height: 0;
|
||
overflow: hidden;
|
||
}
|
||
#pc-table, #pc-table tbody, #pc-table tr, #pc-table td {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
/* Each row becomes a card */
|
||
#pc-table tbody tr {
|
||
border: 1px solid rgba(0,255,102,.25);
|
||
border-radius: 8px;
|
||
padding: .5rem .75rem;
|
||
margin: .75rem 0;
|
||
box-shadow: 0 0 10px rgba(0,255,102,.06);
|
||
background: rgba(0,0,0,.2);
|
||
}
|
||
/* Stacked cells with inlined labels */
|
||
#pc-table td {
|
||
border: none;
|
||
border-bottom: 1px solid rgba(0,255,102,.15);
|
||
padding: .4rem 0;
|
||
text-align: left !important; /* override .right in stacked view */
|
||
}
|
||
#pc-table td:last-child { border-bottom: none; padding-bottom: 0; }
|
||
#pc-table td::before {
|
||
content: attr(data-label);
|
||
display: block;
|
||
font-size: .8rem;
|
||
color: #9aa0a6;
|
||
margin-bottom: .15rem;
|
||
}
|
||
/* Actions: keep buttons on one line and right-aligned */
|
||
#pc-table td[data-label="Actions"] {
|
||
display: flex;
|
||
gap: .5rem;
|
||
justify-content: flex-end;
|
||
padding-top: .5rem;
|
||
}
|
||
/* Emphasize item name at the top of card */
|
||
#pc-table td[data-label="Item"] {
|
||
font-weight: 600;
|
||
color: #e5ffe5;
|
||
font-size: 1rem;
|
||
padding-top: 0;
|
||
}
|
||
/* Larger tap targets */
|
||
button { padding: .55rem .7rem; }
|
||
}
|
||
|
||
/* ===== Ultra-narrow phones (<= 420px) ===== */
|
||
@media (max-width: 420px) {
|
||
#pc-table td[data-label="24h Low"],
|
||
#pc-table td[data-label="24h High"] {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* Small badge style */
|
||
.pc-badge {
|
||
padding: .25rem .5rem;
|
||
border-radius: 999px;
|
||
background: rgba(0,255,102,.08);
|
||
border: 1px solid rgba(0,255,102,.25);
|
||
color: #a7f3d0;
|
||
font-size: .85rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Layout hardening */
|
||
.pc-row > * { min-width: 0; }
|
||
#pc-updated { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
|
||
@media (max-width: 640px) {
|
||
#pc-countdown, #pc-updated { flex-basis: 100%; order: 10; margin-top: .25rem; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- ======= TOP BAR ======= -->
|
||
<header class="topbar">
|
||
<a href="index.html" class="logo">ESCAPE FROM TARKOV COMPANION</a>
|
||
|
||
<!-- Hamburger -->
|
||
<button class="nav-toggle" type="button" aria-controls="primary-nav" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="nav-toggle__bar" aria-hidden="true"></span>
|
||
<span class="nav-toggle__bar" aria-hidden="true"></span>
|
||
<span class="nav-toggle__bar" aria-hidden="true"></span>
|
||
</button>
|
||
|
||
<!-- Primary nav -->
|
||
<nav class="main-nav" id="primary-nav" aria-label="Primary navigation">
|
||
<ul>
|
||
<li><a href="index.html">Home</a></li>
|
||
<li><a href="goons.html">Goons</a></li>
|
||
<li><a href="maps.html">Maps</a></li>
|
||
<li><a href="quests.html">Quests</a></li>
|
||
<li><a href="ammo.html">Ammo</a></li>
|
||
<li><a href="traders.html">Traders</a></li>
|
||
<li><a href="pricewatch.html" aria-current="page">Price Watch</a></li>
|
||
<li><a href="crafts.html">Craft Calculator</a></li>
|
||
<li><a href="https://tarkovgunsmith.com/ballistics_simulator" target="_blank" rel="noopener">Ballistics Simulator</a></li>
|
||
<li><a href="https://tarkov-market.com/" target="_blank" rel="noopener">Flea Market</a></li>
|
||
<li><a href="https://escapefromtarkov.fandom.com/wiki/Escape_from_Tarkov_Wiki" target="_blank" rel="noopener">Wiki</a></li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- ======= PAGE CONTENT ======= -->
|
||
<main class="content">
|
||
<h1>Price Check & Alerts</h1>
|
||
<br>
|
||
Get an alert when an item's price crosses your target!
|
||
|
||
<!-- 1) Mode & Search -->
|
||
<section class="pc-section" aria-labelledby="pc-h2-search">
|
||
<h2 id="pc-h2-search">1) Mode & Search</h2>
|
||
|
||
<div class="pc-row" role="group" aria-label="Game mode">
|
||
<label><input type="radio" name="pc-mode" value="regular" checked> PvP (regular)</label>
|
||
<label><input type="radio" name="pc-mode" value="pve"> PvE</label>
|
||
</div>
|
||
|
||
<div class="pc-row">
|
||
<input id="pc-search" type="text" placeholder="Item name..." size="28" aria-label="Item name">
|
||
<!-- Styled like Quests buttons via .btn from styles.css -->
|
||
<button id="pc-btnSearch" class="btn" type="button">Search</button>
|
||
<span class="pc-muted">Local data updates every ≈5 minutes (cron).</span>
|
||
</div>
|
||
|
||
<ul id="pc-results" class="pc-list" aria-live="polite"></ul>
|
||
</section>
|
||
|
||
<!-- 2) Add to watch list -->
|
||
<section class="pc-section" aria-labelledby="pc-h2-add">
|
||
<h2 id="pc-h2-add">2) Add to Watch List</h2>
|
||
<div id="pc-selected" class="pc-muted">No item selected.</div>
|
||
<div id="pc-prices" class="pc-muted"></div>
|
||
|
||
<div class="pc-row" style="margin-top:.75rem;">
|
||
<label>
|
||
Notify when
|
||
<select id="pc-direction" aria-label="Notify direction">
|
||
<option value="above">at or above</option>
|
||
<option value="below">at or below</option>
|
||
</select>
|
||
</label>
|
||
|
||
<label>
|
||
Target:
|
||
<input id="pc-target" type="number" min="0" step="1" placeholder="e.g., 125000" aria-label="Target price (Rubles)">
|
||
</label>
|
||
|
||
<!-- Keep the consistent button look -->
|
||
<button id="pc-add" class="btn" disabled>Add to watch list</button>
|
||
</div>
|
||
|
||
<div class="pc-muted" style="margin-top:.5rem;">
|
||
Tip: You can add multiple items. Each entry will alert with a sound + popup and then pause itself.
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3) Watch list -->
|
||
<section class="pc-section" aria-labelledby="pc-h2-watch">
|
||
<h2 id="pc-h2-watch">3) Watch List</h2>
|
||
|
||
<div class="pc-row" style="gap:.75rem; align-items:center;">
|
||
<span style="flex:1 1 auto;"></span>
|
||
<span id="pc-countdown" class="pc-muted" aria-live="polite"></span>
|
||
<span id="pc-updated" class="pc-badge" title="From static file Last-Modified headers">
|
||
Data last updated: —
|
||
</span>
|
||
</div>
|
||
|
||
<div class="pc-table-wrap">
|
||
<table id="pc-table" aria-label="Watch list">
|
||
<thead>
|
||
<tr>
|
||
<th>Item</th>
|
||
<th>Mode</th>
|
||
<th class="right">Current</th>
|
||
<th class="right">24h Low</th>
|
||
<th class="right">24h High</th>
|
||
<th>Condition</th>
|
||
<th>Status</th>
|
||
<th>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="pc-tbody">
|
||
<tr><td colspan="8" class="pc-muted">No items being watched.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div id="pc-status" class="pc-muted" style="margin-top:.5rem;"></div>
|
||
</section>
|
||
|
||
<!-- ===== Divider before Top Spreads ===== -->
|
||
<hr style="margin:2.5rem 0; border-color: rgba(0,255,102,.25);">
|
||
|
||
<!-- ===== Top Spreads & Trader → Flea Flips ===== -->
|
||
<section class="pc-section" aria-labelledby="ts-h2">
|
||
<h2 id="ts-h2">Top Spreads & Trader → Flea Flips</h2>
|
||
|
||
<div class="pc-row controls" style="margin-bottom:.5rem;">
|
||
<button id="toggle-spread" class="btn is-active" aria-pressed="true">
|
||
Flea Spreads (High − Low)
|
||
</button>
|
||
|
||
<button id="toggle-trader" class="btn" aria-pressed="false">
|
||
Trader → Flea Flips
|
||
</button>
|
||
|
||
<span id="last-updated" class="pc-muted" style="margin-left:auto;"></span>
|
||
</div>
|
||
|
||
<div id="status" class="pc-muted" role="status" aria-live="polite">
|
||
Loading price data…
|
||
</div>
|
||
|
||
<div class="pc-table-wrap">
|
||
<table id="spread-table" aria-label="Top spreads and flips" hidden>
|
||
<thead id="spread-thead"></thead>
|
||
<tbody id="spread-tbody"></tbody>
|
||
<caption id="spread-caption" class="pc-muted" style="caption-side: bottom; padding-top:.5rem;">
|
||
Data: tarkov.dev
|
||
</caption>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- ===== Hamburger MENU SCRIPT ===== -->
|
||
<script>
|
||
const btn = document.querySelector('.nav-toggle');
|
||
const nav = document.getElementById('primary-nav');
|
||
btn.addEventListener('click', () => {
|
||
const open = btn.getAttribute('aria-expanded') === 'true';
|
||
btn.setAttribute('aria-expanded', !open);
|
||
nav.classList.toggle('is-open', !open);
|
||
});
|
||
</script>
|
||
|
||
<!-- ===== Page Logic ===== -->
|
||
<!-- Your existing Price Check logic -->
|
||
<script src="pricewatch.js"></script>
|
||
<!-- Top Spreads & Trader Flips logic (the file we built together) -->
|
||
<script src="top_spreads.js"></script>
|
||
</body>
|
||
</html>
|