From c376c6b5bef5eee4c5d0ffa76a3b5164a32ebafe Mon Sep 17 00:00:00 2001 From: Sanskar Kumawat <143245573+Sanskar4949@users.noreply.github.com> Date: Fri, 12 Sep 2025 22:19:51 +0530 Subject: [PATCH 1/9] Create enhanced.css --- .../static/workshop_app/css/enhanced.css | 217 ++++++++++++++++++ 1 file changed, 217 insertions(+) create mode 100644 workshop_app/static/workshop_app/css/enhanced.css diff --git a/workshop_app/static/workshop_app/css/enhanced.css b/workshop_app/static/workshop_app/css/enhanced.css new file mode 100644 index 0000000..b33a41c --- /dev/null +++ b/workshop_app/static/workshop_app/css/enhanced.css @@ -0,0 +1,217 @@ + + +.hero-title { + font-family: 'Montserrat', sans-serif; + font-weight: 800; + font-size: 4rem; + line-height: 1.1; +} + +:root { + --bg: #0f1720; + --card: #1a2432; + --muted: #a0a7b3; + --accent: #f79b72; + --radius: 14px; + --maxwidth: 1100px; + --transition: 0.25s ease; + font-family: 'Inter', system-ui, sans-serif; +} + +* { box-sizing: border-box; margin: 0; padding: 0; } + +body { + background: linear-gradient(180deg, #040404 0%, #8d98b9 100%); + color: #e6eef6; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +.topbar { + background: rgba(10, 15, 25, 0.7); + backdrop-filter: blur(6px); + position: sticky; + top: 0; + z-index: 100; +} + +.topbar-inner { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 20px; + max-width: var(--maxwidth); + margin: auto; +} + +.logo { + font-weight: 700; + font-size: 18px; + background: none; + border: none; + color: #fff; +} + +.icon-btn { + background: none; + border: 0; + color: inherit; + font-size: 18px; + cursor: pointer; +} + +.hero { + text-align: center; + padding: 40px 16px; +} + +.hero h1 { + font-size: 26px; + margin-bottom: 10px; +} + +.hero .muted { + color: var(--muted); +} + +.cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 18px; + padding: 20px; + max-width: var(--maxwidth); + margin: auto; +} + +.card { + background: var(--card); + border-radius: var(--radius); + padding: 16px; + display: flex; + flex-direction: column; + justify-content: space-between; + transition: transform var(--transition), box-shadow var(--transition); +} + +.card:hover { + transform: translateY(-6px); + box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4); +} + +.card h3 { margin-bottom: 8px; } +.card p { color: var(--muted); font-size: 14px; } + +.btn { + padding: 10px 14px; + border-radius: 10px; + font-weight: 600; + cursor: pointer; + border: none; + transition: background var(--transition); +} + +.btn.primary { + background: linear-gradient(90deg, var(--accent), #ffb88c); + color: #031018; +} + +.btn.primary:hover { + filter: brightness(1.05); +} + +.btn.ghost { + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.2); + color: #fff; +} + +.modal { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.65); + display: none; + align-items: center; + justify-content: center; +} + +.modal[aria-hidden="false"] { + display: flex; + animation: fadeIn 0.3s ease; +} + +.modal-panel { + background: rgba(30, 40, 60, 0.9); + backdrop-filter: blur(10px); + border-radius: var(--radius); + padding: 24px; + width: 100%; + max-width: 420px; + animation: slideUp 0.35s ease; +} + +.modal-panel h2 { + margin-bottom: 16px; +} + +.modal-panel label { + display: block; + margin: 12px 0 4px; + font-size: 14px; + color: var(--muted); +} + +.modal-panel input { + width: 100%; + padding: 10px; + border-radius: 8px; + border: none; + margin-bottom: 8px; + background: #222c3c; + color: #fff; +} + +.close { + background: none; + border: none; + font-size: 20px; + color: #fff; + float: right; + cursor: pointer; +} + +.toast { + position: fixed; + bottom: 20px; + left: 50%; + transform: translateX(-50%) translateY(100px); + background: var(--accent); + color: #031018; + padding: 12px 18px; + border-radius: 8px; + opacity: 0; + transition: all 0.4s ease; +} + +.toast.show { + transform: translateX(-50%) translateY(0); + opacity: 1; +} + +.site-footer { + text-align: center; + padding: 20px; + margin-top: auto; + font-size: 14px; + color: #040404; +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes slideUp { + from { transform: translateY(40px); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} From 68c5e4138638d3d0445ec1eb8e37e57676633039 Mon Sep 17 00:00:00 2001 From: Sanskar Kumawat <143245573+Sanskar4949@users.noreply.github.com> Date: Fri, 12 Sep 2025 22:22:01 +0530 Subject: [PATCH 2/9] Update cms_base.html --- cms/templates/cms_base.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/cms/templates/cms_base.html b/cms/templates/cms_base.html index 4f43329..6383145 100644 --- a/cms/templates/cms_base.html +++ b/cms/templates/cms_base.html @@ -11,6 +11,8 @@ {{ page.imports | safe }} + + @@ -56,4 +58,4 @@ {{ page.content | safe }} - \ No newline at end of file + From 21899ac77eb4e9f4a87f9687134d6152adef26df Mon Sep 17 00:00:00 2001 From: Sanskar Kumawat <143245573+Sanskar4949@users.noreply.github.com> Date: Fri, 12 Sep 2025 22:23:21 +0530 Subject: [PATCH 3/9] Create enhanced.js --- .../static/workshop_app/js/enhanced.js | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 workshop_app/static/workshop_app/js/enhanced.js diff --git a/workshop_app/static/workshop_app/js/enhanced.js b/workshop_app/static/workshop_app/js/enhanced.js new file mode 100644 index 0000000..6219a52 --- /dev/null +++ b/workshop_app/static/workshop_app/js/enhanced.js @@ -0,0 +1,69 @@ +//js + +const modal = document.getElementById('modal'); +const modalTitle = document.getElementById('modalTitle'); +const bookingForm = document.getElementById('bookingForm'); +const toast = document.getElementById('toast'); + +const workshops = [ + { id: 1, title: "Python Basics", desc: "Learn Python fundamentals", category: "python" }, + { id: 2, title: "Web Development", desc: "Build responsive websites", category: "web" }, + { id: 3, title: "Intro to ML", desc: "Start with Machine Learning", category: "ml" } +]; + +const cardsRoot = document.getElementById('cards'); + +function renderCards(list) { + cardsRoot.innerHTML = ''; + list.forEach(w => { + const card = document.createElement('div'); + card.className = 'card'; + card.innerHTML = ` +

${w.title}

+

${w.desc}

+ + `; + card.querySelector('button').addEventListener('click', () => openModal(w)); + cardsRoot.appendChild(card); + }); +} + +function openModal(workshop) { + modalTitle.textContent = `Book: ${workshop.title}`; + document.getElementById('workshopId').value = workshop.id; + modal.setAttribute('aria-hidden', 'false'); + document.getElementById('name').focus(); +} + +function closeModal() { + modal.setAttribute('aria-hidden', 'true'); +} + +document.getElementById('closeModal').addEventListener('click', closeModal); +document.getElementById('cancelBtn').addEventListener('click', closeModal); + +bookingForm.addEventListener('submit', e => { + e.preventDefault(); + const name = document.getElementById('name').value.trim(); + const email = document.getElementById('email').value.trim(); + const phone = document.getElementById('phone').value.trim(); + + if (!name || !email || !phone) { + return showToast('Please fill all required fields'); + } + + showToast('Booking confirmed!'); + closeModal(); + + const all = JSON.parse(localStorage.getItem('bookings') || '[]'); + all.push({ name, email, phone, ts: Date.now() }); + localStorage.setItem('bookings', JSON.stringify(all)); +}); + +function showToast(msg) { + toast.textContent = msg; + toast.classList.add('show'); + setTimeout(() => toast.classList.remove('show'), 2500); +} + +renderCards(workshops); From 40c3b1328f3366a1c6f65b749ef53e4afac992e6 Mon Sep 17 00:00:00 2001 From: Sanskar Kumawat <143245573+Sanskar4949@users.noreply.github.com> Date: Fri, 12 Sep 2025 22:24:08 +0530 Subject: [PATCH 4/9] Update cms_base.html --- cms/templates/cms_base.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/cms/templates/cms_base.html b/cms/templates/cms_base.html index 6383145..1b21fab 100644 --- a/cms/templates/cms_base.html +++ b/cms/templates/cms_base.html @@ -14,6 +14,8 @@ + +