johannes.reichhardt
/
txt2md
mirror of https://github.com/joreichhardt/txt2md.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Bump to v1.1.3: Complete Unix Terminal Dark-Mode overhaul with reinforced CSS and HTML classes.

This commit is contained in:
Johannes Reichhardt 2026-04-01 00:46:02 -05:00
parent 4c3ce6c11c
commit 14f4d53778
3 changed files with 116 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.py
View File

@ -11,7 +11,7 @@ app = Flask(__name__)
app.secret_key = os.environ.get("FLASK_SECRET_KEY", "prod-secret-7721") app.secret_key = os.environ.get("FLASK_SECRET_KEY", "prod-secret-7721")
metrics = PrometheusMetrics(app) metrics = PrometheusMetrics(app)
metrics.info('app_info', 'Application info', version='1.1.2') metrics.info('app_info', 'Application info', version='1.1.3')
# API Configuration # API Configuration

174
static/style.css
View File

@ -1,9 +1,9 @@
:root { :root {
--primary-color: #00ff00; /* Terminal Green */ --primary-color: #00ff41; /* Classic Matrix Green */
--secondary-color: #33ff33; --secondary-color: #008f11;
--background-color: #121212; --background-color: #0d0208;
--surface-color: #1e1e1e; --surface-color: #1a1a1a;
--text-color: #e0e0e0; --text-color: #d1d1d1;
--border-color: #333; --border-color: #333;
--alert-error: #ff5555; --alert-error: #ff5555;
--alert-warning: #ffb86c; --alert-warning: #ffb86c;
@ -11,86 +11,91 @@
--font-mono: "Fira Code", "Courier New", Courier, monospace; --font-mono: "Fira Code", "Courier New", Courier, monospace;
} }
body { * {
font-family: var(--font-mono); box-sizing: border-box;
background-color: var(--background-color); }
color: var(--text-color);
line-height: 1.6; html, body {
background-color: var(--background-color) !important;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.container { body.terminal-bg {
max-width: 1400px; font-family: var(--font-mono);
margin: 2rem auto; color: var(--text-color);
padding: 0 1.5rem; line-height: 1.6;
background-color: var(--background-color) !important;
} }
header { .container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
header.terminal-header {
text-align: left; text-align: left;
margin-bottom: 3rem; margin-bottom: 3rem;
border-bottom: 1px solid var(--border-color); border-bottom: 2px solid var(--secondary-color);
padding-bottom: 1rem; padding-bottom: 1rem;
} }
header h1 { header.terminal-header h1 {
font-size: 2rem; font-size: 2.5rem;
color: var(--primary-color); color: var(--primary-color) !important;
margin-bottom: 0.5rem; margin: 0;
text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
} }
header h1::before { header.terminal-header h1::before {
content: "> "; content: "root@txt2md:~/ ";
font-size: 1.2rem;
vertical-align: middle;
} }
header p { header.terminal-header p {
color: #888; color: var(--secondary-color);
font-size: 1rem; font-size: 1rem;
margin: 0.5rem 0 0 0;
} }
.editor-grid { .editor-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 2rem; gap: 3rem;
} }
section h2 { section h2 {
font-size: 1.1rem; font-size: 1.1rem;
margin-bottom: 1rem; margin-bottom: 1.5rem;
color: var(--primary-color); color: var(--primary-color);
text-transform: uppercase; letter-spacing: 2px;
letter-spacing: 1px;
}
section h2::before {
content: "[ ";
}
section h2::after {
content: " ]";
} }
textarea { textarea {
width: 100%; width: 100%;
height: 450px; height: 480px;
padding: 1rem; padding: 1.5rem;
background-color: var(--surface-color); background-color: var(--surface-color) !important;
color: var(--primary-color); color: var(--primary-color) !important;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
font-size: 1rem; font-size: 1rem;
font-family: var(--font-mono); font-family: var(--font-mono);
resize: vertical; resize: vertical;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); outline: none;
box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
} }
textarea:focus { textarea:focus {
outline: none;
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 0 10px rgba(0, 255, 65, 0.2);
} }
.markdown-output { .markdown-output {
background-color: #000; background-color: #000 !important;
color: #f0f0f0; border: 1px dashed var(--secondary-color);
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -99,39 +104,41 @@ button {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 0.75rem; padding: 1rem;
margin-top: 1rem; margin-top: 1.5rem;
background-color: transparent; background-color: transparent !important;
color: var(--primary-color); color: var(--primary-color) !important;
border: 1px solid var(--primary-color); border: 2px solid var(--primary-color);
border-radius: 4px; border-radius: 4px;
font-size: 1rem; font-size: 1.1rem;
font-weight: 600; font-weight: bold;
font-family: var(--font-mono); font-family: var(--font-mono);
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
text-transform: uppercase;
} }
button:hover:not(:disabled) { button:hover:not(:disabled) {
background-color: rgba(0, 255, 0, 0.1); background-color: var(--primary-color) !important;
box-shadow: 0 0 10px rgba(0, 255, 0, 0.2); color: #000 !important;
box-shadow: 0 0 20px rgba(0, 255, 65, 0.4);
} }
button:disabled { button:disabled {
border-color: #444; border-color: #2a2a2a;
color: #444; color: #2a2a2a !important;
cursor: not-allowed; cursor: not-allowed;
} }
.spinner { .spinner {
display: none; display: none;
width: 18px; width: 20px;
height: 18px; height: 20px;
border: 2px solid rgba(0, 255, 0, 0.2); border: 3px solid rgba(0, 255, 65, 0.1);
border-radius: 50%; border-radius: 50%;
border-top-color: var(--primary-color); border-top-color: var(--primary-color);
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
margin-right: 12px; margin-right: 15px;
} }
@keyframes spin { @keyframes spin {
@ -144,46 +151,57 @@ button.loading .spinner {
.preview { .preview {
background-color: var(--surface-color); background-color: var(--surface-color);
padding: 1.5rem; padding: 2rem;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
height: 450px; height: 480px;
overflow-y: auto; overflow-y: auto;
color: #ccc; color: #eee;
font-family: var(--font-mono);
} }
.preview .placeholder { .preview .placeholder {
color: #555; color: #444;
font-style: italic;
text-align: center; text-align: center;
margin-top: 2rem; margin-top: 4rem;
} }
.flashes { .flashes {
margin-bottom: 1.5rem; margin-bottom: 2rem;
} }
.alert { .alert {
padding: 0.75rem 1rem; padding: 1rem;
border-radius: 4px; border-radius: 4px;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.9rem; border-left: 5px solid;
} }
.alert.error { background-color: rgba(255, 85, 85, 0.1); color: var(--alert-error); border: 1px solid var(--alert-error); } .alert.error { background-color: rgba(255, 85, 85, 0.05); color: var(--alert-error); border-color: var(--alert-error); }
.alert.warning { background-color: rgba(255, 184, 108, 0.1); color: var(--alert-warning); border: 1px solid var(--alert-warning); } .alert.warning { background-color: rgba(255, 184, 108, 0.05); color: var(--alert-warning); border-color: var(--alert-warning); }
.alert.info { background-color: rgba(139, 233, 253, 0.1); color: var(--alert-info); border: 1px solid var(--alert-info); } .alert.info { background-color: rgba(139, 233, 253, 0.05); color: var(--alert-info); border-color: var(--alert-info); }
/* Markdown Preview Styles */ .terminal-footer {
.preview h1, .preview h2, .preview h3 { color: var(--primary-color); border-bottom: none; padding-bottom: 0; } margin-top: 4rem;
.preview h1 { font-size: 1.4rem; } text-align: center;
.preview h2 { font-size: 1.2rem; } border-top: 1px solid var(--border-color);
.preview blockquote { border-left: 2px solid var(--primary-color); padding-left: 1rem; color: #888; font-style: italic; margin-left: 0; } padding-top: 1rem;
.preview pre { background-color: #000; padding: 1rem; border-radius: 4px; border: 1px solid #333; overflow-x: auto; } }
.preview code { font-family: var(--font-mono); background-color: #222; padding: 0.2rem 0.4rem; border-radius: 3px; color: #ff79c6; }
@media (max-width: 992px) { .terminal-footer p {
color: #444;
font-size: 0.8rem;
letter-spacing: 1px;
}
/* Markdown Rendering in Terminal Preview */
.preview h1, .preview h2, .preview h3 { color: var(--primary-color); }
.preview blockquote { border-left: 3px solid var(--secondary-color); padding-left: 1rem; color: #777; margin: 1.5rem 0; }
.preview pre { background-color: #000; padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 4px; }
.preview code { color: #ff79c6; }
@media (max-width: 1100px) {
.editor-grid { .editor-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }

33
templates/index.html
View File

@ -3,21 +3,22 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>txt2md</title> <title>txt2md :: terminal</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v=1.1.2"> <!-- Cache-Buster v1.1.3 -->
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v=1.1.3">
</head> </head>
<body> <body class="terminal-bg">
<div class="container"> <div class="container">
<header> <header class="terminal-header">
<h1>txt2md</h1> <h1>txt2md</h1>
<p>Convert your raw notes into high-quality Markdown.</p> <p>System Ready. Waiting for input...</p>
</header> </header>
{% with messages = get_flashed_messages(with_categories=true) %} {% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %} {% if messages %}
<div class="flashes"> <div class="flashes">
{% for category, message in messages %} {% for category, message in messages %}
<div class="alert {{ category }}">{{ message }}</div> <div class="alert {{ category }}">> [{{ category | upper }}]: {{ message }}</div>
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
@ -25,30 +26,34 @@
<div class="editor-grid"> <div class="editor-grid">
<section class="input-section"> <section class="input-section">
<h2>Raw Input</h2> <h2>[ INPUT_BUFFER ]</h2>
<form id="convert-form" method="POST"> <form id="convert-form" method="POST">
<textarea name="text" placeholder="Paste your text here..." required>{{ original_text }}</textarea> <textarea name="text" placeholder="user@txt2md:~$ paste_your_text_here..." required>{{ original_text }}</textarea>
<button type="submit" id="convert-btn"> <button type="submit" id="convert-btn">
<span class="spinner"></span> <span class="spinner"></span>
<span class="btn-text">Convert</span> <span class="btn-text">EXECUTE CONVERSION</span>
</button> </button>
</form> </form>
</section> </section>
<section class="output-section"> <section class="output-section">
<h2>Markdown Output</h2> <h2>[ RAW_MARKDOWN ]</h2>
<textarea class="markdown-output" readonly placeholder="Raw Markdown will appear here...">{{ markdown_content }}</textarea> <textarea class="markdown-output" readonly placeholder="Waiting for process completion...">{{ markdown_content }}</textarea>
<h2>Formatted Preview</h2> <h2>[ PREVIEW_RENDER ]</h2>
<div class="preview"> <div class="preview">
{% if converted_html %} {% if converted_html %}
{{ converted_html | safe }} {{ converted_html | safe }}
{% else %} {% else %}
<p class="placeholder">Results will be displayed here.</p> <p class="placeholder">_ NO_DATA_AVAILABLE</p>
{% endif %} {% endif %}
</div> </div>
</section> </section>
</div> </div>
<footer class="terminal-footer">
<p>v1.1.3-stable | connection: encrypted | status: online</p>
</footer>
</div> </div>
<script> <script>
@ -56,7 +61,7 @@
const btn = document.getElementById('convert-btn'); const btn = document.getElementById('convert-btn');
btn.disabled = true; btn.disabled = true;
btn.classList.add('loading'); btn.classList.add('loading');
btn.querySelector('.btn-text').textContent = 'Converting...'; btn.querySelector('.btn-text').textContent = 'PROCESSING...';
}); });
</script> </script>
</body> </body>