<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Torn City MVP</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
color: #111;
background: #fff;
font: 16px/1.4 sans-serif;
}
a {
color: inherit;
}
.shell {
max-width: 1000px;
margin: 0 auto;
padding: 0.75rem;
display: grid;
grid-template-columns: 13rem minmax(0, 1fr);
gap: 1rem;
}
.sidebar,
.main,
.content,
.stack {
display: grid;
gap: 0.75rem;
}
.sidebar h1,
.panel h2,
.panel h3,
.card h3,
.card h4 {
margin: 0;
}
.sidebar nav {
display: grid;
gap: 0.2rem;
}
.sidebar nav a {
padding: 0;
}
.sidebar nav a.active {
font-weight: 700;
}
.sidebar .status-panel {
border: 0;
padding: 0;
}
.panel,
.card,
.flash {
border: 1px solid #ccc;
padding: 0.75rem;
}
.button,
button {
display: inline-block;
padding: 0.35rem 0.55rem;
border: 1px solid #aaa;
background: #fff;
color: inherit;
font: inherit;
cursor: pointer;
}
.button {
text-decoration: none;
}
.button.primary,
button.primary {
font-weight: 700;
}
.button.subtle,
button.subtle,
.subtle {
background: #f5f5f5;
}
.flash.success {
border-color: #7aa57a;
}
.flash.error {
border-color: #b97d7d;
}
.grid-2,
.grid-3,
.hero,
.cards {
display: grid;
gap: 0.75rem;
}
.grid-2 {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid-3,
.cards {
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.card {
display: grid;
gap: 0.35rem;
}
.inline-form,
.action-row,
.field-row {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: center;
}
label {
display: grid;
gap: 0.35rem;
font-size: 0.95rem;
}
input,
select {
padding: 0.35rem 0.5rem;
border: 1px solid #aaa;
background: #fff;
font: inherit;
color: inherit;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
text-align: left;
padding: 0.45rem;
border-bottom: 1px solid #ddd;
vertical-align: top;
}
th {
font-weight: 600;
}
.badge {
display: inline-block;
padding: 0.1rem 0.45rem;
border: 1px solid #aaa;
font-size: 0.82rem;
}
.badge.success {
background: #eef7ee;
}
.badge.error {
background: #fbeeee;
}
.log-list,
.plain-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.5rem;
}
.log-list li,
.plain-list li {
border: 1px solid #ddd;
padding: 0.55rem;
}
.mini {
font-size: 0.9rem;
}
.muted {
color: #555;
}
.status-panel p {
margin: 0.15rem 0;
}
.status-list {
display: grid;
gap: 0.1rem;
}
@media (max-width: 820px) {
.shell {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="shell">
<aside class="sidebar">
<div>
<h1>Torn City MVP</h1>
</div>
{% if current_user %}
<section class="panel status-panel">
<p><strong>{{ current_user.username }}</strong></p>
<p class="muted">{{ current_user.status }}</p>
<p>Level {{ current_user.level }}</p>
<p>Wallet: ${{ current_user.wallet_money }}</p>
<p>Bank: ${{ current_user.bank_money }}</p>
<div class="status-list">
<div><strong>Energy:</strong> {{ current_user.energy }}/100</div>
<div><strong>Nerve:</strong> {{ current_user.nerve }}/50</div>
<div><strong>Happy:</strong> {{ current_user.happy }}/{{ current_user.effective_happy_cap }}</div>
<div><strong>Life:</strong> {{ current_user.life }}/{{ current_user.max_life }}</div>
<div><strong>Strength:</strong> {{ current_user.effective_strength }}</div>
<div><strong>Speed:</strong> {{ current_user.effective_speed }}</div>
<div><strong>Defense:</strong> {{ current_user.effective_defense }}</div>
<div><strong>Dexterity:</strong> {{ current_user.effective_dexterity }}</div>
</div>
{% if current_user.hospital_seconds_left %}
<p class="muted">Hospital: {{ format_duration(current_user.hospital_seconds_left) }}</p>
{% elif current_user.jail_seconds_left %}
<p class="muted">Jail: {{ format_duration(current_user.jail_seconds_left) }}</p>
{% else %}
<p class="muted">Ready for crimes, gym, jobs, or attacks.</p>
{% endif %}
{% if current_user.weapon_item %}
<p class="mini">Weapon: {{ current_user.weapon_item.name }}</p>
{% endif %}
{% if current_user.armor_item %}
<p class="mini">Armor: {{ current_user.armor_item.name }}</p>
{% endif %}
{% if current_user.home_item %}
<p class="mini">Home: {{ current_user.home_item.name }}</p>
{% endif %}
</section>
{% else %}
<p class="muted">Create two accounts to test attacks, mugging, and the market.</p>
{% endif %}
<nav>
{% if current_user %}
<a href="/city" class="{{ 'active' if nav == 'city' else '' }}">City</a>
<a href="/profile" class="{{ 'active' if nav == 'profile' else '' }}">Profile</a>
<a href="/gym" class="{{ 'active' if nav == 'gym' else '' }}">Gym</a>
<a href="/crimes" class="{{ 'active' if nav == 'crimes' else '' }}">Crimes</a>
<a href="/inventory" class="{{ 'active' if nav == 'inventory' else '' }}">Inventory</a>
<a href="/shops" class="{{ 'active' if nav == 'shops' else '' }}">Shops</a>
<a href="/job" class="{{ 'active' if nav == 'job' else '' }}">Job</a>
<a href="/bank" class="{{ 'active' if nav == 'bank' else '' }}">Bank</a>
<a href="/market" class="{{ 'active' if nav == 'market' else '' }}">Market</a>
<a href="/players" class="{{ 'active' if nav == 'players' else '' }}">Players</a>
<a href="/logout">Logout</a>
{% else %}
<a href="/" class="{{ 'active' if nav == 'home' else '' }}">Home</a>
<a href="/register" class="{{ 'active' if nav == 'register' else '' }}">Register</a>
<a href="/login" class="{{ 'active' if nav == 'login' else '' }}">Login</a>
{% endif %}
</nav>
</aside>
<div class="main">
{% if flash %}
<section class="flash {{ flash.kind }}">
<p>{{ flash.message }}</p>
</section>
{% endif %}
<main class="content">
{% block content %}{% endblock %}
</main>
</div>
</div>
</body>
</html>
