51l3nt51n/51l3nt51n-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Redesign UI to a classic text-based aesthetic by removing modern styling from templates and adding a design skill.

Browse Source
This commit is contained in:
51l3nt51n
2026-03-03 16:08:11 +00:00
parent ba199b8bbe
commit 50a3caf33c
5 changed files with 109 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
.agents/skills/classic_ui_design/SKILL.md Normal file
View File

@@ -0,0 +1,26 @@
---
name: Classic Text-Based UI Design
description: Use this skill to ensure all UI designs follow a raw, text-based, table-free, CSS-free nostalgic 90s aesthetic.
---
# Classic Text-Based UI Design Skill
When asked to design or update UIs under this style, you **MUST** strictly adhere to the following rules to maintain a nostalgic, purely text-based aesthetic:
## Core Rules
1. **No CSS or Styling:** Absolutely no `<style>` tags, inline `style="..."` attributes (except maybe `display:inline` for form elements), or external stylesheets. Do not use Flexbox, CSS Grid, or margins/padding.
2. **No Layout Tables:** Do not use `<table>`, `<tr>`, `<td>` for laying out pages, structure, or positioning items. Tables should only be used if explicitly requested for tabular data, but even then, basic text lists are preferred.
3. **No Centering or Alignment:** Do not use `<center>` tags, `align="..."` attributes, or `<div align="center">`. The entirety of the text should remain left-aligned naturally within the browser window.
4. **Pure Structural Flow:** Rely strictly on basic structural blocks:
- Paragraphs (`<p>`)
- Line Breaks (`<br>`)
- Horizontal Rules (`<hr size="1">`) for dividers
- Headers (`<h1>`, `<h2>`, etc.) for sections
5. **Formatting:**
- Bold: `<b>`
- Italic: `<i>`
- Underline: `<u>`
- Basic Colors: `<font color="red">`, `<font color="#000000">`
6. **Form Elements:** Keep `<form>`, `<input>`, `<select>`, and `<button>` elements unstyled. Use `<input type="submit">` instead of fancy buttons. Give inputs a basic `size="..."` if necessary for width.
7. **Body:** A common body tag to use is `<body bgcolor="#FFFFFF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">`. Do not include a background or surface color.
By following these constraints, you will achieve the strict, highly generic, early web (1995-1998) look.

132
templates/base.html
View File

@@ -3,137 +3,13 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Dungeon{% endblock %}</title>
<style>
:root {
--bg: #0f172a;
--surface: #1e293b;
--primary: #3b82f6;
--text: #f8fafc;
--text-muted: #94a3b8;
--border: #334155;
--danger: #ef4444;
}
body {
font-family: system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
.card {
background: var(--surface);
padding: 2rem;
border-radius: 8px;
border: 1px solid var(--border);
max-width: 400px;
margin: 4rem auto;
}
.dashboard-container {
display: flex;
gap: 2rem;
}
input,
select,
button {
width: 100%;
padding: 0.75rem;
margin-bottom: 1rem;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg);
color: var(--text);
font-size: 1rem;
box-sizing: border-box;
}
button {
background: var(--primary);
border: none;
font-weight: bold;
cursor: pointer;
transition: opacity 0.2s;
}
button:hover {
opacity: 0.9;
}
.btn-danger {
background: var(--danger);
}
.error {
color: var(--danger);
margin-bottom: 1rem;
font-weight: bold;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
th,
td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
th {
color: var(--text-muted);
font-weight: 500;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
h1 {
margin: 0;
}
.form-row {
display: flex;
gap: 1rem;
}
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
</style>
<title>{% block title %}CMS{% endblock %}</title>
</head>
<body>
<main>
<body bgcolor="#FFFFFF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
{% block content %}{% endblock %}
</main>
</body>
</html>

112
templates/dashboard.html
View File

@@ -1,83 +1,53 @@
{% extends "base.html" %}
{% block title %}Dungeon Dashboard{% endblock %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<div class="header">
<h1>Dungeon Dashboard</h1>
<form method="POST" action="/__dungeon/logout" style="margin: 0;">
<button type="submit" style="width: auto; margin: 0; padding: 0.5rem 1rem;">Logout ({{ current_user.username
}})</button>
</form>
</div>
<h2>Dashboard</h2>
<form method="POST" action="/__dungeon/logout" style="display:inline;">
<input type="submit" value="Logout ({{ current_user.username }})">
</form>
<br><br>
<b>System Users</b><br>
{% if let Some(err) = error %}
<div class="error">{{ err }}</div>
<font color="red"><b>{{ err }}</b></font><br>
{% endif %}
<div class="dashboard-container">
<div style="flex: 2;">
<h3>Users</h3>
<div style="background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;">
<table>
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Role</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td>{{ user.id }}</td>
<td>{{ user.username }}</td>
<td><span
style="padding: 0.25rem 0.5rem; background: var(--bg); border-radius: 4px; font-size: 0.875rem;">{{
user.role }}</span></td>
<td>
{% if current_user.role == "admin" %}
<div class="flex gap-2" style="align-items: center;">
{% if user.id != current_user.id %}
<form method="POST" action="/__dungeon/users/delete/{{ user.id }}" style="margin: 0;">
<button type="submit" class="btn-danger"
style="padding: 0.25rem 0.5rem; margin: 0; font-size: 0.875rem;">Delete</button>
</form>
{% endif %}
<form method="POST" action="/__dungeon/users/password/{{ user.id }}"
style="margin: 0; display: flex; gap: 0.5rem;">
<input type="password" name="password" placeholder="New Password" required
style="margin: 0; padding: 0.25rem 0.5rem; width: 120px;">
<button type="submit"
style="padding: 0.25rem 0.5rem; margin: 0; font-size: 0.875rem; width: auto;">Change</button>
</form>
</div>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% for user in users %}
<p>
ID: {{ user.id }}<br>
Username: <a href="#">{{ user.username }}</a><br>
Role: {{ user.role }}<br>
{% if current_user.role == "admin" %}
<div style="flex: 1;">
<div class="card" style="margin: 0; max-width: 100%;">
<h3 style="margin-top: 0;">Add User</h3>
<form method="POST" action="/__dungeon/users/add">
<label>Username</label>
<input type="text" name="username" required>
<label>Password</label>
<input type="password" name="password" required>
<label>Role</label>
{% if user.id != current_user.id %}
<form method="POST" action="/__dungeon/users/delete/{{ user.id }}" style="display:inline;">
<input type="submit" value="Delete User">
</form>
{% endif %}
<form method="POST" action="/__dungeon/users/password/{{ user.id }}" style="display:inline;">
<input type="password" name="password" placeholder="New Password" required size="10">
<input type="submit" value="Change Password">
</form>
{% endif %}
</p>
<hr width="50%" align="left" size="1">
{% endfor %}
{% if current_user.role == "admin" %}
<br>
<b>System Administration - Add New User</b><br>
<form method="POST" action="/__dungeon/users/add">
Username: <input type="text" name="username" required size="15"><br>
Password: <input type="password" name="password" required size="15"><br>
Role:
<select name="role">
<option value="readonly">Read Only</option>
<option value="admin">Admin</option>
</select>
<button type="submit">Create User</button>
</form>
</div>
</div>
{% endif %}
</div>
</select><br><br>
<input type="submit" value="Create User">
</form>
{% endif %}
{% endblock %}

31
templates/login.html
View File

@@ -1,17 +1,20 @@
{% extends "base.html" %}
{% block title %}Dungeon Login{% endblock %}
{% block title %}Login{% endblock %}
{% block content %}
<div class="card">
<h2>Enter the Dungeon</h2>
{% if let Some(err) = error %}
<div class="error">{{ err }}</div>
{% endif %}
<form method="POST" action="/__dungeon/login">
<label>Username</label>
<input type="text" name="username" required autocomplete="username">
<label>Password</label>
<input type="password" name="password" required autocomplete="current-password">
<button type="submit">Login</button>
</form>
</div>
<h2>Login</h2>
<p>Please provide your credentials below.</p>
{% if let Some(err) = error %}
<p>
<font color="red"><b>{{ err }}</b></font>
</p>
{% endif %}
<form method="POST" action="/__dungeon/login">
<b>Username:</b> <input type="text" name="username" required autocomplete="username" size="20"><br>
<b>Password:</b> <input type="password" name="password" required autocomplete="current-password" size="20"><br><br>
<input type="submit" value="Login">
</form>
{% endblock %}

32
templates/setup.html
View File

@@ -1,18 +1,20 @@
{% extends "base.html" %}
{% block title %}Setup Dungeon{% endblock %}
{% block title %}Setup{% endblock %}
{% block content %}
<div class="card">
<h2>Initial Setup</h2>
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">Create the initial admin user to access the dungeon.</p>
{% if let Some(err) = error %}
<div class="error">{{ err }}</div>
{% endif %}
<form method="POST" action="/__dungeon/setup">
<label>Username</label>
<input type="text" name="username" required autocomplete="off">
<label>Password</label>
<input type="password" name="password" required>
<button type="submit">Create Admin</button>
</form>
</div>
<h2>Initial Setup</h2>
<p>Create the initial admin user to access the system.</p>
{% if let Some(err) = error %}
<p>
<font color="red"><b>{{ err }}</b></font>
</p>
{% endif %}
<form method="POST" action="/__dungeon/setup">
<b>Username:</b> <input type="text" name="username" required autocomplete="off" size="20"><br>
<b>Password:</b> <input type="password" name="password" required size="20"><br><br>
<input type="submit" value="Create Admin">
</form>
{% endblock %}