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

feat: Enforce classic UI design principles by applying a global monospace font, refactoring the dashboard to use a basic HTML table, and stripping modern CSS from the index page.

Browse Source
This commit is contained in:
51l3nt51n
2026-03-03 16:22:56 +00:00
parent 626e76adba
commit aee36fa70d
4 changed files with 46 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.agents/skills/classic_ui_design/SKILL.md
View File

@@ -7,7 +7,7 @@ description: Use this skill to ensure all UI designs follow a raw, text-based, t
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: 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 ## 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. 1. **No CSS or Styling:** Absolutely no complex style tags. The **ONLY EXCEPTION** is `<style>* { font-family: monospace !important; }</style>` to enforce the monospace rule with no exceptions. Do not use 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. 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. 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: 4. **Pure Structural Flow:** Rely strictly on basic structural blocks:
@@ -21,6 +21,7 @@ When asked to design or update UIs under this style, you **MUST** strictly adher
- Underline: `<u>` - Underline: `<u>`
- Basic Colors: `<font color="red">`, `<font color="#000000">` - 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. 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. 8. **Monospace Font:** All text **must** use a monospace font, no exceptions. The best way to enforce this reliably across all elements, including form tags and tables, is to include `<style>* { font-family: monospace !important; }</style>` in the `<head>` of your HTML document.
9. **Body element:** 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. By following these constraints, you will achieve the strict, highly generic, early web (1995-1998) look.

5
templates/base.html
View File

@@ -4,6 +4,11 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{% block title %}CMS{% endblock %}</title> <title>{% block title %}CMS{% endblock %}</title>
<style>
* {
font-family: monospace !important;
}
</style>
</head> </head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000"> <body bgcolor="#FFFFFF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">

40
templates/dashboard.html
View File

@@ -14,26 +14,36 @@
<font color="red"><b>{{ err }}</b></font><br> <font color="red"><b>{{ err }}</b></font><br>
{% endif %} {% endif %}
{% for user in users %} <table border="1" cellpadding="5" cellspacing="0">
<p> <tr>
ID: {{ user.id }}<br> <th>ID</th>
Username: <a href="#">{{ user.username }}</a><br> <th>Username</th>
Role: {{ user.role }}<br> <th>Role</th>
{% if current_user.role == "admin" %} {% if current_user.role == "admin" %}
<th>Actions</th>
{% endif %}
</tr>
{% for user in users %}
<tr>
<td>{{ user.id }}</td>
<td><a href="#">{{ user.username }}</a></td>
<td>{{ user.role }}</td>
{% if current_user.role == "admin" %}
<td>
{% if user.id != current_user.id %} {% if user.id != current_user.id %}
<form method="POST" action="/__dungeon/users/delete/{{ user.id }}" style="display:inline;"> <form method="POST" action="/__dungeon/users/delete/{{ user.id }}" style="display:inline;">
<input type="submit" value="Delete User"> <input type="submit" value="Delete User">
</form> </form>
{% endif %} {% endif %}
<form method="POST" action="/__dungeon/users/password/{{ user.id }}" style="display:inline;"> <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="password" name="password" placeholder="New Password" required size="10">
<input type="submit" value="Change Password"> <input type="submit" value="Change Password">
</form> </form>
{% endif %} </td>
</p> {% endif %}
<hr width="50%" align="left" size="1"> </tr>
{% endfor %} {% endfor %}
</table>
{% if current_user.role == "admin" %} {% if current_user.role == "admin" %}
<br> <br>

37
templates/index.html
View File

@@ -1,42 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title> <title>{{ title }}</title>
<style> <style>
body { * {
background-color: #121212; font-family: monospace !important;
color: #ffffff;
font-family: 'Inter', 'Roboto', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
flex-direction: column;
}
h1 {
font-size: 4rem;
margin-bottom: 0.5rem;
background: linear-gradient(90deg, #ff8a00, #e52e71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: pulse 2s infinite alternate;
}
p {
font-size: 1.5rem;
color: #b3b3b3;
}
@keyframes pulse {
0% { opacity: 0.8; transform: scale(0.98); }
100% { opacity: 1; transform: scale(1.02); }
} }
</style> </style>
</head> </head>
<body>
<h1>Coming Soon</h1> <body bgcolor="#FFFFFF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<h1>{{ title }}</h1>
<p>We are working hard to build something amazing.</p> <p>We are working hard to build something amazing.</p>
</body> </body>
</html> </html>