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.

134
templates/base.html
View File

@@ -3,137 +3,13 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}CMS{% endblock %}</title>
<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>
</head> </head>
<body> <body bgcolor="#FFFFFF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<main>
{% block content %}{% endblock %} {% block content %}{% endblock %}
</main>
</body> </body>
</html> </html>

118
templates/dashboard.html
View File

@@ -1,83 +1,53 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Dungeon Dashboard{% endblock %} {% block title %}Dashboard{% endblock %}
{% block content %} {% 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 %} {% if let Some(err) = error %}
<div class="error">{{ err }}</div> <font color="red"><b>{{ err }}</b></font><br>
{% endif %} {% endif %}
<div class="dashboard-container"> {% for user in users %}
<div style="flex: 2;"> <p>
<h3>Users</h3> ID: {{ user.id }}<br>
<div style="background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;"> Username: <a href="#">{{ user.username }}</a><br>
<table> Role: {{ user.role }}<br>
<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>
{% if current_user.role == "admin" %} {% if current_user.role == "admin" %}
<div style="flex: 1;"> {% if user.id != current_user.id %}
<div class="card" style="margin: 0; max-width: 100%;"> <form method="POST" action="/__dungeon/users/delete/{{ user.id }}" style="display:inline;">
<h3 style="margin-top: 0;">Add User</h3> <input type="submit" value="Delete User">
<form method="POST" action="/__dungeon/users/add"> </form>
<label>Username</label> {% endif %}
<input type="text" name="username" required> <form method="POST" action="/__dungeon/users/password/{{ user.id }}" style="display:inline;">
<label>Password</label> <input type="password" name="password" placeholder="New Password" required size="10">
<input type="password" name="password" required> <input type="submit" value="Change Password">
<label>Role</label> </form>
<select name="role"> {% endif %}
<option value="readonly">Read Only</option> </p>
<option value="admin">Admin</option> <hr width="50%" align="left" size="1">
</select> {% endfor %}
<button type="submit">Create User</button>
</form> {% if current_user.role == "admin" %}
</div> <br>
</div> <b>System Administration - Add New User</b><br>
{% endif %} <form method="POST" action="/__dungeon/users/add">
</div> 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><br><br>
<input type="submit" value="Create User">
</form>
{% endif %}
{% endblock %} {% endblock %}

31
templates/login.html
View File

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

32
templates/setup.html
View File

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