297 lines
7.4 KiB
HTML
297 lines
7.4 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<title>OnlyScavs – Key Ratings</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<style>
|
||
:root {
|
||
--bg: #121212;
|
||
--panel: #1a1a1a;
|
||
--text: #eee;
|
||
--muted: #bbb;
|
||
--border: #333;
|
||
--accent: #9ccfff;
|
||
}
|
||
body {
|
||
font-family: sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
margin: 0;
|
||
padding: 16px;
|
||
}
|
||
.page {
|
||
max-width: 980px;
|
||
margin: 0 auto;
|
||
}
|
||
.key {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 12px 8px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.key-name {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
min-width: 0;
|
||
}
|
||
.key-name strong {
|
||
line-height: 1.2;
|
||
word-break: break-word;
|
||
}
|
||
.key-name a {
|
||
color: var(--accent);
|
||
font-size: 0.9rem;
|
||
}
|
||
.filters {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
margin: 12px 0 20px;
|
||
}
|
||
.map-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
color: var(--muted);
|
||
font-size: 0.85rem;
|
||
}
|
||
.map-tag {
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
padding: 2px 8px;
|
||
line-height: 1.2;
|
||
}
|
||
img {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: 6px;
|
||
background: var(--panel);
|
||
}
|
||
select, input {
|
||
background: #222;
|
||
color: var(--text);
|
||
border: 1px solid #444;
|
||
border-radius: 6px;
|
||
padding: 8px;
|
||
}
|
||
a {
|
||
color: var(--accent);
|
||
}
|
||
button {
|
||
background: #333;
|
||
color: var(--text);
|
||
border: 1px solid #555;
|
||
cursor: pointer;
|
||
padding: 8px 12px;
|
||
border-radius: 6px;
|
||
}
|
||
.filters {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.key-form {
|
||
flex: 1;
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
input[name^="reason_"] {
|
||
min-width: 180px;
|
||
}
|
||
.map-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
width: 100%;
|
||
}
|
||
.map-checkbox,
|
||
.quest-flag {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
padding: 4px 8px;
|
||
}
|
||
.map-checkbox input,
|
||
.quest-flag input {
|
||
margin: 0;
|
||
}
|
||
.save-all {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin: 4px 0 16px;
|
||
}
|
||
@media (max-width: 720px) {
|
||
body {
|
||
padding: 12px;
|
||
}
|
||
.key {
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
}
|
||
.filters,
|
||
.key-form {
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
gap: 8px;
|
||
}
|
||
select, input, button {
|
||
min-height: 40px;
|
||
font-size: 1rem;
|
||
}
|
||
input[name^="reason_"] {
|
||
flex: 1 1 100%;
|
||
min-width: 0;
|
||
}
|
||
}
|
||
@media (max-width: 480px) {
|
||
.key {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
img {
|
||
width: 72px;
|
||
height: 72px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="page">
|
||
<nav style="margin-bottom:12px">
|
||
<a href="/collector">Collector Checklist</a>
|
||
|
|
||
<a href="/quests">Quest Trees</a>
|
||
|
|
||
<a href="/loadout">Loadout Planner</a>
|
||
|
|
||
<a href="/meds">Injectors</a>
|
||
|
|
||
<a href="/barters">Barters</a>
|
||
</nav>
|
||
<h1>OnlyScavs – Keys</h1>
|
||
|
||
<form method="get" class="filters">
|
||
<label for="map_id">Filter by map</label>
|
||
<select id="map_id" name="map_id">
|
||
<option value="">All maps</option>
|
||
{% for map in maps %}
|
||
<option value="{{ map.id }}" {% if map_filter == map.id %}selected{% endif %}>
|
||
{{ map.name }}
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
<label for="show">Show</label>
|
||
<select id="show" name="show">
|
||
<option value="all" {% if show == "all" %}selected{% endif %}>All</option>
|
||
<option value="rated" {% if show == "rated" %}selected{% endif %}>Rated</option>
|
||
<option value="unrated" {% if show == "unrated" %}selected{% endif %}>NR (not rated)</option>
|
||
<option value="quest" {% if show == "quest" %}selected{% endif %}>Used in quest</option>
|
||
</select>
|
||
<label for="sort">Sort</label>
|
||
<select id="sort" name="sort">
|
||
<option value="priority_desc" {% if sort == "priority_desc" %}selected{% endif %}>
|
||
Priority high → low
|
||
</option>
|
||
<option value="priority_asc" {% if sort == "priority_asc" %}selected{% endif %}>
|
||
Priority low → high
|
||
</option>
|
||
<option value="name_asc" {% if sort == "name_asc" %}selected{% endif %}>
|
||
Name A → Z
|
||
</option>
|
||
<option value="name_desc" {% if sort == "name_desc" %}selected{% endif %}>
|
||
Name Z → A
|
||
</option>
|
||
</select>
|
||
<button type="submit">Apply</button>
|
||
</form>
|
||
|
||
<form method="post" action="/rate_all">
|
||
{% if map_filter %}
|
||
<input type="hidden" name="map_id" value="{{ map_filter }}">
|
||
{% endif %}
|
||
{% if sort %}
|
||
<input type="hidden" name="sort" value="{{ sort }}">
|
||
{% endif %}
|
||
{% if show %}
|
||
<input type="hidden" name="show" value="{{ show }}">
|
||
{% endif %}
|
||
<div class="save-all">
|
||
<button type="submit" name="save_all" value="1">Save all changes</button>
|
||
</div>
|
||
|
||
{% for key in keys %}
|
||
<div class="key" id="key-{{ key.id }}">
|
||
<img
|
||
src="{{ key.grid_image_url }}"
|
||
loading="lazy"
|
||
>
|
||
<div class="key-name" style="flex:1">
|
||
<strong>{{ key.name }}</strong>
|
||
{% if key.wiki_url %}
|
||
<a href="{{ key.wiki_url }}" target="_blank">wiki</a>
|
||
{% endif %}
|
||
{% set selected_maps = key_maps.get(key.id, []) %}
|
||
{% if selected_maps %}
|
||
<div class="map-tags">
|
||
{% for map in maps %}
|
||
{% if map.id in selected_maps %}
|
||
<span class="map-tag">{{ map.name }}</span>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="key-form">
|
||
<input type="hidden" name="key_ids" value="{{ key.id }}">
|
||
<select name="priority_{{ key.id }}">
|
||
<option value="" {% if key.priority is none %}selected{% endif %}>NR (not rated)</option>
|
||
{% for i, label in [(0,'IGNORE'),(1,'LOW'),(2,'MED'),(3,'HIGH'),(4,'SUPER')] %}
|
||
<option value="{{ i }}" {% if key.priority == i %}selected{% endif %}>
|
||
{{ label }}
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
<label class="quest-flag">
|
||
<input type="checkbox" name="used_in_quest_{{ key.id }}" {% if key.used_in_quest %}checked{% endif %}>
|
||
<span>Used in quest?</span>
|
||
</label>
|
||
<input name="reason_{{ key.id }}" placeholder="note…" value="{{ key.reason or '' }}">
|
||
<div class="map-list">
|
||
{% for map in maps %}
|
||
<label class="map-checkbox">
|
||
<input
|
||
type="checkbox"
|
||
name="map_ids_{{ key.id }}"
|
||
value="{{ map.id }}"
|
||
{% if map.id in selected_maps %}checked{% endif %}
|
||
>
|
||
<span>{{ map.name }}</span>
|
||
</label>
|
||
{% endfor %}
|
||
</div>
|
||
<button type="submit" name="save_one" value="{{ key.id }}">Save</button>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
|
||
<div class="save-all">
|
||
<button type="submit" name="save_all" value="1">Save all changes</button>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|