From 7f0b77327eecdd8ed85879e878cd48dd7c623fd0 Mon Sep 17 00:00:00 2001 From: ticvac Date: Wed, 7 May 2025 15:27:29 +0200 Subject: [PATCH] better drag and drop, escaping for js, load indication --- brainfuck/templates/brainfuck/index.html | 189 ++++++++++++++++------- brainfuck/views.py | 5 +- 2 files changed, 138 insertions(+), 56 deletions(-) diff --git a/brainfuck/templates/brainfuck/index.html b/brainfuck/templates/brainfuck/index.html index 72ea84e9..30593d2a 100644 --- a/brainfuck/templates/brainfuck/index.html +++ b/brainfuck/templates/brainfuck/index.html @@ -13,6 +13,8 @@ --primary-light: #6366f1; --text: #374151; --border: #e5e7eb; + --highlight: #e0e7ff; + --fade: rgba(0, 0, 0, 0.1); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); } @@ -20,7 +22,7 @@ h1 { text-align: center; margin-bottom: 1.5rem; font-size: 2rem; font-weight: 700; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 1.5rem; } label { display: block; margin-bottom: 0.5rem; font-weight: 600; } - textarea, input[type="text"], input[type="file"] { + textarea, input[type="text"] { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-family: monospace; font-size: 0.9rem; margin-bottom: 1rem; } textarea { resize: vertical; height: 200px; } @@ -28,11 +30,46 @@ display: inline-block; padding: 0.75rem 1.5rem; background: var(--primary); color: #fff; text-decoration: none; border: none; border-radius: 0.375rem; font-weight: 600; cursor: pointer; transition: background 0.2s ease; + margin-top: 1rem; } - .btn:hover { background: var(--primary-light); } + .btn:hover:not([disabled]) { background: var(--primary-light); } + .btn[disabled] { opacity: 0.6; cursor: not-allowed; } + .spinner { + border: 2px solid #f3f3f3; + border-top: 2px solid #fff; + border-radius: 50%; + width: 16px; + height: 16px; + display: inline-block; + vertical-align: middle; + margin-right: 0.5rem; + animation: spin 1s linear infinite; + } + @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .flex { display: flex; gap: 1rem; } - .flex .card { flex: 1; } - #output, #last_state { background: #1e293b; color: #d1d5db; height: 150px; overflow-y: auto; } + .flex > div { flex: 1; } + #output, #last_state { background: #1e293b; color: #d1d5db; height: 150px; overflow-y: auto; font-family: monospace; } + .drop-zone { + position: relative; + padding: 1rem; + border: 2px dashed var(--border); + border-radius: 0.375rem; + transition: background 0.2s ease, border-color 0.2s ease; + text-align: center; + } + .drop-zone.active { + background: var(--highlight); + border-color: var(--primary); + } + .drop-zone input { + position: absolute; + top: 0; left: 0; width: 100%; height: 100%; opacity: 0; + cursor: pointer; + } + @media screen and (max-width: 768px) { + .flex { flex-direction: column; } + .flex > div { width: 100%; } + } @@ -42,13 +79,19 @@
- - + +
+

Drag & drop code file here or click to select

+ +
- - + +
+

Drag & drop input file here or click to select

+ +
@@ -60,29 +103,50 @@
- +
diff --git a/brainfuck/views.py b/brainfuck/views.py index 0b8cf338..51779da1 100644 --- a/brainfuck/views.py +++ b/brainfuck/views.py @@ -4,12 +4,10 @@ from .interpreter import Interpreter from urllib.parse import parse_qsl, unquote_plus, unquote from typing import Dict - def index(request): args = {} return TemplateResponse(request, 'brainfuck/index.html', args) - def process_code(request): qs = request.META['QUERY_STRING'] params: Dict[str, str] = {} @@ -31,7 +29,7 @@ def process_code(request): interpreter = Interpreter(commands_per_second=1_000_000_000_000, debug=True, comma_standart_input=False) interpreter.user_input = input_data interpreter.load_code_from_string(code) - # should be try/except? + # TODO kill the process if it takes too long? try: interpreter.execute_loaded_code() out = interpreter.saved_output @@ -40,6 +38,7 @@ def process_code(request): out = 'Error: Code execution failed' end_state = interpreter.print_data(interpreter.last_step) + return JSONResponse({ 'code': code,