Initial OnlyScavs: keys, ratings, grid icons
This commit is contained in:
serversdwn
237
templates/index.html
Normal file
237
templates/index.html
Normal file
@@ -0,0 +1,237 @@
|
||||
<!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;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.key-form {
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
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;
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
body {
|
||||
padding: 12px;
|
||||
}
|
||||
.key {
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
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">
|
||||
<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>
|
||||
<button type="submit">Apply</button>
|
||||
</form>
|
||||
|
||||
{% for key in keys %}
|
||||
<div class="key">
|
||||
<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>
|
||||
|
||||
<form method="post" action="/rate" class="key-form">
|
||||
<input type="hidden" name="key_id" value="{{ key.id }}">
|
||||
{% if map_filter %}
|
||||
<input type="hidden" name="map_id" value="{{ map_filter }}">
|
||||
{% endif %}
|
||||
<select name="priority">
|
||||
{% 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" {% if key.used_in_quest %}checked{% endif %}>
|
||||
<span>Used in quest?</span>
|
||||
</label>
|
||||
<input name="reason" placeholder="note…" value="{{ key.reason or '' }}">
|
||||
<div class="map-list">
|
||||
{% for map in maps %}
|
||||
<label class="map-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="map_ids"
|
||||
value="{{ map.id }}"
|
||||
{% if map.id in selected_maps %}checked{% endif %}
|
||||
>
|
||||
<span>{{ map.name }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user