initial commit
This commit is contained in:
+171
@@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>ESCAPE FROM TARKOV COMPANION — Hideout Crafts</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Site-wide styles -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Page-scoped cosmetics (kept light; mirrors your pc-* look) -->
|
||||
<style>
|
||||
.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-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; }
|
||||
input[type="text"], input[type="number"], select, button { padding: .45rem .6rem; }
|
||||
button { cursor: pointer; }
|
||||
.pc-table-wrap { width: 100%; overflow-x: auto; }
|
||||
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; }
|
||||
.good { color: #22c55e; } .bad { color: #ef4444; }
|
||||
|
||||
/* Mobile card view (<= 680px), consistent with your pattern */
|
||||
@media (max-width: 680px) {
|
||||
#hc-table thead { position: absolute; left: -9999px; height: 0; overflow: hidden; }
|
||||
#hc-table, #hc-table tbody, #hc-table tr, #hc-table td { display: block; width: 100%; }
|
||||
#hc-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); }
|
||||
#hc-table td { border: none; border-bottom: 1px solid rgba(0,255,102,.15); padding: .4rem 0; text-align: left !important; }
|
||||
#hc-table td:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
#hc-table td::before { content: attr(data-label); display: block; font-size: .8rem; color: #9aa0a6; margin-bottom: .15rem; }
|
||||
#hc-table td[data-label="Craft"] { font-weight: 600; color: #e5ffe5; font-size: 1rem; padding-top: 0; }
|
||||
button { padding: .55rem .7rem; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Chart.js for grouped bar chart -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1"></script>
|
||||
</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">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>Hideout Crafts — Cost, Sell Value & Profit</h1>
|
||||
<div class="pc-muted" style="margin:.25rem 0 1rem;">
|
||||
Data from the public tarkov.dev GraphQL API (updates frequently).
|
||||
</div>
|
||||
|
||||
<!-- 1) Mode & Options -->
|
||||
<section class="pc-section" aria-labelledby="hc-h2-mode">
|
||||
<h2 id="hc-h2-mode">1) Mode & Options</h2>
|
||||
|
||||
<!-- Mode toggle (same pattern as your Price Watch) -->
|
||||
<div class="pc-row" role="group" aria-label="Game mode">
|
||||
<label><input type="radio" name="hc-mode" value="regular" checked> PvP (regular)</label>
|
||||
<label><input type="radio" name="hc-mode" value="pve"> PvE</label>
|
||||
</div>
|
||||
|
||||
<div class="pc-row">
|
||||
<label>
|
||||
Price metric:
|
||||
<select id="hc-metric" aria-label="Price metric">
|
||||
<option value="flea">Flea Market (sellFor)</option>
|
||||
<option value="avg24hPrice">Avg 24h price</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Top N to chart:
|
||||
<input id="hc-topn" type="number" min="5" max="200" value="30" aria-label="Top N by profit">
|
||||
</label>
|
||||
|
||||
<span class="pc-muted">Refreshes every ≈5 minutes.</span>
|
||||
<button id="hc-refresh" class="btn" type="button">Refresh</button>
|
||||
<span id="hc-updated" class="pc-badge">Data last updated: —</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2) Flea fee controls -->
|
||||
<section class="pc-section" aria-labelledby="hc-h2-fee">
|
||||
<h2 id="hc-h2-fee">2) Flea Fee (Approximation)</h2>
|
||||
<div class="pc-row">
|
||||
<label><input type="checkbox" id="hc-applyfee"> Apply flea fee to sell value</label>
|
||||
<label>
|
||||
Fee percentage:
|
||||
<input id="hc-fee" type="number" min="0" max="30" step="0.5" value="10" aria-label="Flea fee percentage"> %
|
||||
</label>
|
||||
<span class="pc-muted">Tip: Real flea fees vary; this is a simple % of gross sell.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3) Chart -->
|
||||
<section class="pc-section" aria-labelledby="hc-h2-chart">
|
||||
<h2 id="hc-h2-chart">3) Cost vs. Sell Value</h2>
|
||||
<div class="pc-row">
|
||||
<canvas id="hc-chart" height="160" aria-label="Craft costs and sell values chart"></canvas>
|
||||
</div>
|
||||
<div id="hc-status" class="pc-muted" role="status" aria-live="polite">Loading…</div>
|
||||
</section>
|
||||
|
||||
<!-- 4) Table -->
|
||||
<section class="pc-section" aria-labelledby="hc-h2-table">
|
||||
<h2 id="hc-h2-table">4) Details</h2>
|
||||
<div class="pc-table-wrap">
|
||||
<table id="hc-table" aria-label="Craft profitability">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Craft</th>
|
||||
<th>Station</th>
|
||||
<th class="right">Cost</th>
|
||||
<th class="right">Sell (gross)</th>
|
||||
<th class="right">Sell (net)</th>
|
||||
<th class="right">Profit</th>
|
||||
<th>Inputs</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="hc-tbody">
|
||||
<tr><td class="pc-muted" colspan="7">Loading…</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pc-muted" style="margin-top:.5rem;">
|
||||
<!--Prices per mode via <code>items(gameMode: …)</code>; flea price from <code>sellFor { source: "Flea Market" }</code> or fallback to <code>avg24hPrice</code>. [2](https://www.eft-ammo.com/flea-market-prices)-->
|
||||
</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 -->
|
||||
<script src="crafts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user