Creating new reservation system

coworking_app/README.md

@@ -0,0 +1,65 @@
+# Coworking App (Django-ready demo)
+
+This small Django-ready demo provides a desktop-first seat reservation frontend (no database required).
+It uses `localStorage` for persistence so you can run and test the interface immediately.
+
+## Structure
+
+```
+coworking_app/
+├── templates/
+│   └── coworking.html
+├── static/
+│   ├── css/
+│   │   └── coworking.css
+│   └── js/
+│       └── coworking.js
+├── views.py
+├── urls.py
+└── README.md
+```
+ Coworking Reservation System
+
+## Installation
+```bash
+git clone <repo_url>
+cd myproject
+python -m venv venv
+source venv/bin/activate  # Windows: venv\Scripts\activate
+pip install -r requirements.txt
+python manage.py runserver
+
+## Installation (quick)
+
+1. Copy the `coworking_app` folder into your Django project directory.
+
+2. Add the app to `INSTALLED_APPS` in `settings.py` (optional — the app does not require models):
+```python
+INSTALLED_APPS = [
+    # ...
+    'coworking_app',
+]
+```
+
+3. Include the app URLs in your project's `urls.py` (if you prefer global include; alternatively keep the app's `urls.py`):
+```python
+from django.urls import include, path
+
+urlpatterns = [
+    # ...
+    path('', include('coworking_app.urls')),
+]
+```
+
+4. Make sure Django can serve static files in development (run `python manage.py runserver` and open `http://localhost:8000/coworking/`).
+
+## Notes
+
+- The frontend stores seat features and reservations in `localStorage` for demo/testing. Replace `saveReservationToServer` and `deleteReservationFromServer` in `static/js/coworking.js` with real `fetch()` calls to your API when ready.
+- The template uses `{% load static %}` and expects static files to be collected/served via Django's staticfiles during development/production.
+- For production, implement server-side validation to ensure no double-booking and replace client-side conflict checks with server-side checks.
+
+Enjoy — if you want, I can now:
+- Split the app into a proper Django app with `apps.py` and tests.
+- Add Django REST endpoints and simple models for reservations.
+- Add authentication (login) integration.

coworking_app/static/css/coworking.css

@@ -0,0 +1,84 @@
+/* coworking.css - desktop-first styles */
+
+:root{
+    --accent-grad: linear-gradient(135deg,#FF6B6B,#FFB86B);
+    --muted: #6c6f75;
+    --bg: linear-gradient(180deg,#f6f8fb,#ffffff 40%);
+}
+
+*{box-sizing:border-box}
+body{margin:0;padding:28px;font-family:"Roboto",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;background:var(--bg);color:#333;}
+.container{margin:0 auto;min-width:1200px;max-width:1400px;width:100%;}
+.card{background:white;padding:26px;border-radius:14px;box-shadow:0 10px 30px rgba(40,40,60,0.06);}
+.layout{display:flex;gap:22px;align-items:flex-start;flex-wrap:nowrap;}
+.main{flex:1 1 auto;min-width:760px;}
+.side{width:360px;flex:0 0 360px;}
+.welcome-title{font-size:2.6rem;font-weight:700;margin:0 0 6px 0;text-transform:uppercase;letter-spacing:1.6px;background:var(--accent-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative;padding-bottom:12px;display:inline-block;}
+.welcome-title::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:0;height:4px;background:var(--accent-grad);border-radius:2px;transition:width .35s ease;}
+.welcome-title:hover::after{width:100%}
+.subtitle{color:var(--muted);margin:6px 0 18px 0}
+.legend-modern{display:flex;flex-wrap:wrap;gap:12px 18px;padding:14px 16px;background:#f7f9fc;border-radius:12px;margin-bottom:18px;box-shadow:0 6px 18px rgba(0,0,0,0.03)}
+.legend-item{display:flex;align-items:center;gap:10px;color:#555;font-size:0.95rem;cursor:pointer;padding:6px 8px;border-radius:8px}
+.legend-item.active{background:var(--accent-grad);color:white;box-shadow:0 8px 24px rgba(255,107,107,0.12)}
+.seat-symbol{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:#fff;font-size:1rem}
+.seat-symbol.free{background:#4CAF50}
+.seat-symbol.reserved{background:#F44336}
+.seat-symbol.reserved-D{background:#FFC107}
+.seat-symbol.reserved-S{background:#03A9F4}
+.seat-symbol.reserved-E{background:#9C27B0}
+.seat-symbol.reserved-DS{background:#2196F3}
+.seat-symbol.reserved-DSE{background:#FF5722}
+
+.filters { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; align-items:center; }
+
+.filter-btn { display:inline-flex; gap:8px; align-items:center; padding:8px 10px; border-radius:8px; background:#fff; border:1px solid #e6eef8; cursor:pointer; font-weight:600; }
+.filter-btn.active { box-shadow:0 8px 24px rgba(255,107,107,0.12); background:var(--accent-grad); color:white; border-color:transparent; }
+
+.floor-section{margin-top:20px}
+.floor-title{margin:0;font-size:1.05rem;color:#444}
+.seats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;padding:18px;margin-top:12px;border-radius:12px;border:1px solid #e8eef8;background:#fff}
+.seat-item-styled{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 12px;min-height:96px;border-radius:12px;border:1px solid #e6eef8;background:#fff;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease;box-shadow:0 6px 20px rgba(20,20,40,0.03);position:relative}
+.seat-item-styled:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(20,20,40,0.08);background:#fbfdff}
+.seat-icon{font-size:1.6rem;margin-bottom:8px;line-height:1}
+.seat-label{font-weight:600;color:#444;font-size:1rem}
+.seat-unreserved{border-color:#c8e6c9}
+.seat-unreserved .seat-icon{color:#4CAF50}
+.seat-reserved{border-color:#f8c1c1}
+.seat-reserved .seat-icon{color:#F44336}
+.seat-reserved-D{border-color:#ffe0a3}
+.seat-reserved-D .seat-icon{color:#FFC107}
+.seat-reserved-S{border-color:#cfefff}
+.seat-reserved-S .seat-icon{color:#03A9F4}
+.seat-reserved-E{border-color:#f1d7f7}
+.seat-reserved-E .seat-icon{color:#9C27B0}
+.seat-reserved-DS{border-color:#d7f0ff}
+.seat-reserved-DS .seat-icon{color:#2196F3}
+.seat-reserved-DSE{border-color:#ffd6c9}
+.seat-reserved-DSE .seat-icon{color:#FF5722}
+
+.reservations-panel{background:#fbfdff;border:1px solid #e7eef8;border-radius:12px;padding:14px;box-shadow:0 6px 18px rgba(60,70,90,0.03)}
+.reservations-panel h3{margin:0 0 6px 0;font-size:1.1rem}
+.panel-controls{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
+.reservation-item{display:flex;gap:10px;align-items:center;background:white;padding:10px;border-radius:10px;margin-bottom:10px;border:1px solid #f0f4fa}
+.reservation-meta{flex:1}
+.reservation-meta strong{display:block;margin-bottom:4px}
+.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:8px 12px;border-radius:8px;border:none;cursor:pointer;font-weight:600}
+.btn-primary{background:var(--accent-grad);color:white;box-shadow:0 8px 24px rgba(255,107,107,0.12)}
+.btn-ghost{background:transparent;border:1px solid #e3e8f1;color:#334}
+.btn-danger{background:#F44336;color:white}
+.muted{color:var(--muted);font-size:0.95rem}
+.badge{padding:5px 10px;background:#f1f6ff;border-radius:999px;font-size:0.85rem;border:1px solid #e6eef8;color:#2b6aa3}
+.modal-backdrop{position:fixed;inset:0;background:rgba(12,18,30,0.45);display:flex;align-items:center;justify-content:center;z-index:1200}
+.modal{width:640px;max-width:96%;background:white;border-radius:12px;padding:18px;box-shadow:0 20px 50px rgba(20,20,40,0.25)}
+.form-row{display:flex;gap:10px;margin-bottom:10px}
+.form-row .col{flex:1}
+input[type="date"], input[type="time"], select, .input{width:100%;padding:8px 10px;border-radius:8px;border:1px solid #e6eef8;font-size:0.95rem}
+.toast{position:fixed;right:20px;bottom:20px;background:#202226;color:white;padding:10px 14px;border-radius:10px;box-shadow:0 8px 30px rgba(10,10,30,0.4);z-index:2000}
+.tooltip { position: absolute; pointer-events: none; background: #111; color: #fff; padding:6px 8px; border-radius:6px; font-size:0.85rem; z-index:1500; opacity:0; transform:translateY(-6px); transition:opacity .12s ease, transform .12s ease; }
+.stats-box { margin-top:12px; background:white; border-radius:10px; padding:10px; border:1px solid #eef4fb; }
+.stat-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px dashed #f0f4fa; }
+.stat-row:last-child{ border-bottom: none; }
+.stat-left { display:flex; gap:8px; align-items:center; }
+.stat-left .small-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:6px; color:#fff; font-size:0.9rem; }
+.controls-row { margin-bottom:10px; display:flex; justify-content:flex-start; gap:12px; align-items:center; }
+.status-filter .filter-btn { padding:6px 10px; font-size:0.95rem; }