diff --git a/.gitignore b/.gitignore index a577781..29a5a62 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,6 @@ instance/ venv/ *.egg-info/ .DS_Store +static/uploads/* +!static/uploads/.gitkeep +server.log diff --git a/server.log b/server.log deleted file mode 100644 index b8ac8e9..0000000 --- a/server.log +++ /dev/null @@ -1,15 +0,0 @@ - * Serving Flask app 'app' - * Debug mode: off -WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. - * Running on all addresses (0.0.0.0) - * Running on http://127.0.0.1:5000 - * Running on http://192.168.0.2:5000 -Press CTRL+C to quit -127.0.0.1 - - [25/Feb/2026 21:02:19] "GET /register HTTP/1.1" 200 - -127.0.0.1 - - [25/Feb/2026 21:02:19] "GET /static/css/style.css HTTP/1.1" 200 - -127.0.0.1 - - [25/Feb/2026 21:02:20] "POST /register HTTP/1.1" 302 - -127.0.0.1 - - [25/Feb/2026 21:02:20] "GET / HTTP/1.1" 200 - -127.0.0.1 - - [25/Feb/2026 21:02:20] "GET /static/css/style.css HTTP/1.1" 304 - -127.0.0.1 - - [25/Feb/2026 21:02:20] "GET /api/images HTTP/1.1" 200 - -127.0.0.1 - - [25/Feb/2026 21:02:20] "GET /upload HTTP/1.1" 200 - -127.0.0.1 - - [25/Feb/2026 21:02:20] "GET /static/css/style.css HTTP/1.1" 304 - diff --git a/static/css/style.css b/static/css/style.css index 3f7454e..fa9f79f 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,119 +1,359 @@ -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - line-height: 1.6; +:root { + /* Color Palette */ + --bg-color: #0d1117; + --surface-color: #161b22; + --border-color: #30363d; + --text-primary: #c9d1d9; + --text-secondary: #8b949e; + --accent-primary: #58a6ff; + --accent-secondary: #2ea043; + --accent-danger: #f85149; + --nav-bg: rgba(22, 27, 34, 0.95); + + /* Spacing */ + --spacing-xs: 0.25rem; + --spacing-sm: 0.5rem; + --spacing-md: 1rem; + --spacing-lg: 1.5rem; + --spacing-xl: 2rem; + + /* Typography */ + --font-heading: 'Press Start 2P', cursive; + --font-body: 'Roboto', sans-serif; + + /* Transitions */ + --transition-speed: 0.2s; +} + +* { + box-sizing: border-box; margin: 0; padding: 0; - background-color: #f4f4f4; - color: #333; } -nav { - background-color: #333; - color: #fff; - padding: 1rem; - text-align: center; +body { + background-color: var(--bg-color); + color: var(--text-primary); + font-family: var(--font-body); + line-height: 1.6; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-heading); + color: var(--accent-primary); + margin-bottom: var(--spacing-lg); + text-transform: uppercase; + letter-spacing: 1px; + line-height: 1.4; } -nav a { - color: #fff; +h1 { font-size: 1.5rem; } +h2 { font-size: 1.25rem; } + +a { + color: var(--accent-primary); text-decoration: none; - padding: 0.5rem 1rem; - margin: 0 0.2rem; - border-radius: 4px; - transition: background-color 0.3s; + transition: color var(--transition-speed); } -nav a:hover { - background-color: #555; +a:hover { + color: #79c0ff; } -main { - padding: 2rem; - max-width: 800px; +/* Layout */ +.container { + width: 100%; + max-width: 1200px; margin: 0 auto; - background-color: #fff; - box-shadow: 0 0 10px rgba(0,0,0,0.1); - border-radius: 5px; - margin-top: 20px; + padding: var(--spacing-lg); + flex: 1; } -h1 { - color: #333; - text-align: center; +header { + background-color: var(--nav-bg); + border-bottom: 1px solid var(--border-color); + position: sticky; + top: 0; + z-index: 1000; + backdrop-filter: blur(10px); } -form { +.navbar { display: flex; - flex-direction: column; - max-width: 400px; + justify-content: space-between; + align-items: center; + max-width: 1200px; margin: 0 auto; + padding: var(--spacing-md) var(--spacing-lg); } -label { - margin-bottom: 0.5rem; - font-weight: bold; +.logo a { + font-family: var(--font-heading); + color: var(--accent-primary); + font-size: 1rem; +} + +.nav-links { + display: flex; + gap: var(--spacing-lg); + align-items: center; } -input[type="text"], -input[type="password"], -input[type="number"], -input[type="file"] { - padding: 0.5rem; - margin-bottom: 1rem; - border: 1px solid #ccc; +.nav-links a { + color: var(--text-primary); + font-weight: 500; +} + +.nav-links a:hover { + color: var(--accent-primary); +} + +.user-menu { + display: flex; + align-items: center; + gap: var(--spacing-md); +} + +.username { + color: var(--text-secondary); + font-size: 0.9rem; +} + +/* Buttons */ +button, .btn { + display: inline-block; + background-color: var(--surface-color); + color: var(--accent-primary); + border: 1px solid var(--accent-primary); + padding: 0.5rem 1rem; + font-family: var(--font-heading); + font-size: 0.7rem; + cursor: pointer; + transition: all var(--transition-speed); border-radius: 4px; } -button { - padding: 0.7rem; - background-color: #333; - color: #fff; - border: none; +button:hover, .btn:hover { + background-color: var(--accent-primary); + color: var(--bg-color); + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(88, 166, 255, 0.2); +} + +.btn-logout { + font-family: var(--font-body); + font-size: 0.9rem; + border: 1px solid var(--border-color); + color: var(--text-secondary); + padding: 0.25rem 0.75rem; border-radius: 4px; - cursor: pointer; - font-size: 1rem; - transition: background-color 0.3s; } -button:hover { - background-color: #555; +.btn-logout:hover { + border-color: var(--accent-danger); + color: var(--accent-danger); + background: transparent; + transform: none; + box-shadow: none; } -.flash { - list-style-type: none; - padding: 0; - text-align: center; - color: #d9534f; +/* Forms */ +input, select, textarea { + background-color: var(--bg-color); + border: 1px solid var(--border-color); + color: var(--text-primary); + padding: 0.75rem; + border-radius: 6px; + width: 100%; + margin-bottom: var(--spacing-md); + font-family: var(--font-body); + transition: border-color var(--transition-speed); } -canvas { +input:focus, select:focus, textarea:focus { + outline: none; + border-color: var(--accent-primary); + box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1); +} + +label { display: block; - margin: 0 auto; - background-color: #fff; - box-shadow: 0 0 5px rgba(0,0,0,0.2); + margin-bottom: var(--spacing-xs); + color: var(--text-secondary); + font-size: 0.9rem; +} + +/* Cards */ +.card, .auth-card, .upload-card { + background-color: var(--surface-color); + border: 1px solid var(--border-color); + border-radius: 6px; + padding: var(--spacing-xl); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } -.color-controls, .size-controls { +.auth-card, .upload-card { + max-width: 400px; + margin: 40px auto; text-align: center; - margin-bottom: 1rem; } -.gallery { - display: flex; - flex-wrap: wrap; - gap: 1rem; - justify-content: center; +/* Gallery */ +.gallery-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: var(--spacing-lg); + margin-top: var(--spacing-xl); } .gallery-item { - border: 1px solid #ddd; - padding: 0.5rem; - border-radius: 4px; - text-align: center; + background-color: var(--surface-color); + border: 1px solid var(--border-color); + border-radius: 8px; + overflow: hidden; + transition: transform var(--transition-speed), box-shadow var(--transition-speed); + display: flex; + flex-direction: column; +} + +.gallery-item:hover { + transform: translateY(-5px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + border-color: var(--accent-primary); +} + +.gallery-image-container { + background-color: #000; + padding: var(--spacing-md); + display: flex; + justify-content: center; + align-items: center; + aspect-ratio: 1; } .gallery-item img { - max-width: 150px; - height: auto; + max-width: 100%; + max-height: 100%; image-rendering: pixelated; } + +.gallery-info { + padding: var(--spacing-md); +} + +.gallery-title { + font-weight: bold; + color: var(--text-primary); + margin-bottom: var(--spacing-xs); + display: block; +} + +.gallery-meta { + font-size: 0.8rem; + color: var(--text-secondary); + display: flex; + flex-direction: column; + gap: 4px; +} + +/* Flash Messages */ +.flash-messages { + margin-bottom: var(--spacing-lg); +} + +.flash-message { + background-color: rgba(46, 160, 67, 0.1); + border: 1px solid var(--accent-secondary); + color: var(--accent-secondary); + padding: var(--spacing-md); + border-radius: 6px; + margin-bottom: var(--spacing-sm); + text-align: center; +} + +/* Footer */ +footer { + text-align: center; + padding: var(--spacing-lg); + color: var(--text-secondary); + font-size: 0.8rem; + border-top: 1px solid var(--border-color); + margin-top: auto; +} + +/* Drawing App Styles */ +.draw-container { + display: grid; + grid-template-columns: 300px 1fr; + gap: var(--spacing-lg); + align-items: start; +} + +.draw-controls { + background-color: var(--surface-color); + padding: var(--spacing-lg); + border-radius: 8px; + border: 1px solid var(--border-color); +} + +.control-group { + margin-bottom: var(--spacing-lg); + border-bottom: 1px solid var(--border-color); + padding-bottom: var(--spacing-md); +} + +.control-group:last-child { + border-bottom: none; + margin-bottom: 0; +} + +.control-label { + font-weight: bold; + color: var(--text-primary); + margin-bottom: var(--spacing-sm); + display: block; +} + +.canvas-area { + background-color: #21262d; + padding: var(--spacing-xl); + border-radius: 8px; + border: 1px solid var(--border-color); + display: flex; + justify-content: center; + align-items: center; + min-height: 500px; + overflow: auto; +} + +canvas { + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); + background-image: + linear-gradient(45deg, #1a1a1a 25%, transparent 25%), + linear-gradient(-45deg, #1a1a1a 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, #1a1a1a 75%), + linear-gradient(-45deg, transparent 75%, #1a1a1a 75%); + background-size: 20px 20px; + background-position: 0 0, 0 10px, 10px -10px, -10px 0px; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .draw-container { + grid-template-columns: 1fr; + } + + .navbar { + flex-direction: column; + gap: var(--spacing-md); + } + + .nav-links { + flex-wrap: wrap; + justify-content: center; + } +} diff --git a/static/uploads/.gitkeep b/static/uploads/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/static/uploads/drawing_1_1772054791.bmp b/static/uploads/drawing_1_1772054791.bmp new file mode 100644 index 0000000..7f87ecf Binary files /dev/null and b/static/uploads/drawing_1_1772054791.bmp differ diff --git a/templates/base.html b/templates/base.html index f97cb12..d70e980 100644 --- a/templates/base.html +++ b/templates/base.html @@ -4,38 +4,55 @@ {% block title %}Pixel Art App{% endblock %} + + + + + + - - +
+ +
- {% with messages = get_flashed_messages() %} - {% if messages %} - - {% endif %} - {% endwith %} +
+ {% with messages = get_flashed_messages() %} + {% if messages %} +
+ {% for message in messages %} +
{{ message }}
+ {% endfor %} +
+ {% endif %} + {% endwith %} + +
+ {% block content %}{% endblock %} +
+
-
- {% block content %}{% endblock %} -
+ diff --git a/templates/draw.html b/templates/draw.html index 3a1f96f..e8ef804 100644 --- a/templates/draw.html +++ b/templates/draw.html @@ -5,61 +5,68 @@ {% block content %}

Draw Pixel Art

-
- - - -
-
+
+ +
+
+ Display + + +
-
- - - - - -
-
+
+ Dimensions + + + + + +
-
- - - 10 -
-
+
+ Zoom: 10 + +
-
- - +
+ Scrolling + + - - -
-
+ + +
+ +
+ Color + +
+ + + + + +
+
+ + +
-
- - - - - - - + +
+ +
-
- -
-