From bc9643a2751282f39277d79cab94452b19e74704 Mon Sep 17 00:00:00 2001 From: Rasmus Date: Mon, 22 Dec 2025 19:55:58 +0100 Subject: [PATCH] refactor css and test docker compose --- app.py | 21 +---- compose.yml | 1 + static/style.css | 239 +++++++++++++++++++++++------------------------ 3 files changed, 123 insertions(+), 138 deletions(-) diff --git a/app.py b/app.py index a9fcb02..05d709e 100644 --- a/app.py +++ b/app.py @@ -1,4 +1,4 @@ -from flask import Flask, render_template, Response, stream_with_context, request +from flask import Flask, render_template, Response, request from flask_flatpages import FlatPages from werkzeug.middleware.proxy_fix import ProxyFix import requests @@ -23,20 +23,18 @@ def index(): @app.route('/about') def about(): return render_template('about.html') + @app.route('/proxy-chat', methods=['POST']) def proxy_chat(): target_url = "http://192.168.0.37:5002/v1/chat/completions" try: - # 1. Forward the request without stream=True - # llama.cpp will now send back one large JSON object response = requests.post( target_url, json=request.json, - timeout=120 # Important: Give the i5-8400 time to think + timeout=300 # Important: Give the server time to process. Set very long timeout ) - # 2. Return the full JSON response to the browser return Response( response.content, status=response.status_code, @@ -44,12 +42,12 @@ def proxy_chat(): ) except requests.exceptions.Timeout: - return {"error": "The serve took too long to answer. Try a different prompt."}, 504 + return {"error": "The server took too long to answer. Try a different prompt."}, 504 except Exception as e: return {"error": str(e)}, 500 -@app.route('/post//') # Adding /post/ prefix helps organize URLs +@app.route('/post//') def post(path): page = pages.get_or_404(path) return render_template('post.html', page=page) @@ -59,14 +57,5 @@ def tag(tag_name): tagged_pages = [p for p in pages if tag_name in p.meta.get('tags', [])] return render_template('tag.html', pages=tagged_pages, tag_name=tag_name) -@app.context_processor -def inject_tags(): - all_tags = set() - for page in pages: - t = page.meta.get('tags', []) - if isinstance(t, list): - all_tags.update(t) - return dict(all_cloud_tags=sorted(list(all_tags))) - if __name__ == "__main__": app.run(host='0.0.0.0', port=5001, debug=True) \ No newline at end of file diff --git a/compose.yml b/compose.yml index 2d46d6b..c8e4421 100644 --- a/compose.yml +++ b/compose.yml @@ -1,5 +1,6 @@ services: rasmusbendtsendk: + image: mysite container_name: rasmusbendtsendk build: . ports: diff --git a/static/style.css b/static/style.css index 9c5a75b..1939f3f 100644 --- a/static/style.css +++ b/static/style.css @@ -1,8 +1,10 @@ +/* --- 1. CORE THEME & VARIABLES --- */ :root { --primary: #2563eb; - --text: #1f2937; + --text: #1e1e1e; --light-bg: #f9fafb; --border: #e5e7eb; + --success: #059669; /* For AI labels */ } body { @@ -19,10 +21,11 @@ body { padding: 0 20px; } -/* Header & Nav */ +/* --- 2. NAVIGATION & HEADER --- */ header { border-bottom: 1px solid var(--border); padding: 1.5rem 0; + background: white; } nav { @@ -42,6 +45,7 @@ nav { list-style: none; display: flex; gap: 20px; + margin: 0; } .nav-links a { @@ -50,147 +54,138 @@ nav { font-weight: 500; } -/* The resting state of the card */ +/* --- 3. BLOG POST CARDS --- */ .post-item { background: #ffffff; - border: 1px solid #e5e7eb; /* Subtle border */ + border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 20px; - transition: all 0.3s ease; /* Smooth transition for the "pop" */ + transition: all 0.3s ease; cursor: pointer; position: relative; - top: 0; /* Necessary for the vertical lift */ + top: 0; } -/* The "Pop Out" effect on hover */ .post-item:hover { - top: -5px; /* Lifts the card up slightly */ - border-color: #2563eb; /* Changes border color to match your theme */ - box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.1), - 0 8px 10px -6px rgba(37, 99, 235, 0.1); /* Soft blue shadow */ + top: -5px; + border-color: var(--primary); + box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.1), + 0 8px 10px -6px rgba(37, 99, 235, 0.1); } -/* Optional: Make the title change color when the card is hovered */ -.post-item:hover h3 a { - color: #2563eb; +.post-item:hover h3 a { color: var(--primary); } + +/* --- 4. INTERACTIVE DEMO COMPONENT --- */ +.interactive-demo { + width: 100%; + margin: 2.5rem 0; + padding: 1.5rem; + background: #ffffff; + border: 1px solid var(--border); + border-radius: 12px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } - -.date { - font-size: 0.9rem; - color: #6b7280; +.input-group { + display: flex; + gap: 10px; + margin-bottom: 1rem; } -/* Content Formatting */ -article h1 { font-size: 2.5rem; margin-bottom: 0.5rem; } -article img { max-width: 100%; border-radius: 8px; } +.interactive-demo input { + flex-grow: 1; + padding: 14px; + border-radius: 8px; + border: 1px solid var(--border); + font-size: 1rem; + outline: none; + transition: border-color 0.2s, box-shadow 0.2s; +} +.interactive-demo input:focus { + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); +} + +.interactive-demo button { + padding: 10px 20px; + color: white; + background-color: var(--primary); + border: none; + border-radius: 8px; + cursor: pointer; + font-weight: 600; + transition: transform 0.1s, opacity 0.2s; +} + +.interactive-demo button:hover:not(:disabled) { + opacity: 0.9; + transform: translateY(-1px); +} + +.interactive-demo button:disabled { + background-color: #9ca3af; + cursor: not-allowed; +} + +/* Response Box & Messages */ +#responseContainer { + padding: 1.25rem; + height: 450px; + background-color: var(--light-bg); + color: var(--text); + border: 1px solid var(--border); + border-radius: 8px; + overflow-y: auto; + font-family: 'Consolas', 'Monaco', monospace; + font-size: 0.95rem; + line-height: 1.6; +} + +.msg { + margin-bottom: 1.25rem; + padding-bottom: 0.75rem; + border-bottom: 1px solid rgba(0,0,0,0.05); +} + +.msg:last-child { border-bottom: none; } + +.user-label { color: var(--primary); font-weight: bold; font-size: 0.8rem; text-transform: uppercase; } +.ai-label { color: var(--success); font-weight: bold; font-size: 0.8rem; text-transform: uppercase; } + +.msg-text { + display: block; + margin-top: 5px; + white-space: pre-wrap; /* Keeps formatting for lists/code */ +} + +/* --- 5. ANIMATIONS & LOADERS --- */ +#loader { + display: flex; + align-items: center; + gap: 12px; + padding: 0 0 15px 5px; + color: var(--primary); + font-weight: 500; +} + +.spinner { + width: 20px; + height: 20px; + border: 3px solid rgba(37, 99, 235, 0.1); + border-radius: 50%; + border-top-color: var(--primary); + animation: spin 0.8s linear infinite; +} + +@keyframes spin { to { transform: rotate(360deg); } } + +/* --- 6. FOOTER --- */ footer { text-align: center; padding: 3rem 0; margin-top: 4rem; color: #9ca3af; border-top: 1px solid var(--border); -} - -/* Code Block Styling */ - -/* -pre { - background: #1e1e1e; - color: #efefef; - padding: 1.25rem; - border-radius: 8px; - overflow-x: auto; - margin: 1.5rem 0; - line-height: 1.45; - border: 1px solid var(--border); -} - -code { - font-family: 'Fira Code', 'Consolas', 'Monaco', monospace; - font-size: 0.9rem; - padding: 0.2rem 0.4rem; - background: #f3f4f6; - border-radius: 4px; -} - -pre code { - background: transparent; - padding: 0; -} -*/ - -.tag-badge { - display: inline-block; - background-color: #f3f4f6; - color: #2563eb; - padding: 2px 8px; - border-radius: 4px; - font-size: 0.85rem; - text-decoration: none; - margin-right: 5px; - transition: background-color 0.2s; -} - -.tag-badge:hover { - background-color: #2563eb; - color: white; -} - -/* Layout Container */ -.layout-wrapper { - display: flex; - flex-wrap: wrap; - gap: 40px; /* Space between content and sidebar */ -} - -/* Main content takes up more space */ -.content-area { - flex: 3; - min-width: 300px; -} - -/* Sidebar takes up less space */ -.sidebar { - flex: 1; - min-width: 250px; -} - -/* Sidebar styling */ -.sidebar-section h3 { - border-bottom: 2px solid #2563eb; - padding-bottom: 8px; - margin-bottom: 15px; - font-size: 1.2rem; -} - -.tag-list { - list-style: none; - padding: 0; -} - -.tag-list li { - margin-bottom: 10px; -} - -.tag-list a { - text-decoration: none; - color: #4b5563; - transition: color 0.2s; -} - -.tag-list a:hover { - color: #2563eb; -} - -.main-link::after { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; /* Covers the card area */ } \ No newline at end of file