From 425c5d1900d5329a8125c62243fd30054c67af70 Mon Sep 17 00:00:00 2001
From: Jannis Heydemann <Jannis.Heydemann@mekra.de>
Date: Wed, 29 Apr 2026 11:25:04 +0200
Subject: [PATCH] Added html hints to enable syntax highliting

---
 .gitignore  |  1 +
 account.js  |  4 ++--
 cart.js     | 12 ++++++------
 checkout.js |  2 +-
 main.js     |  8 ++++----
 5 files changed, 14 insertions(+), 13 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a5c0072
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+img/*
\ No newline at end of file
diff --git a/account.js b/account.js
index b448104..06f44a1 100644
--- a/account.js
+++ b/account.js
@@ -152,7 +152,7 @@ function openAccountDashboard() {
         return;
     }
 
-    accountView.innerHTML = `
+    accountView.innerHTML = /*html*/`
         <div class="account-panel">
             <div class="account-panel-header">
                 <h2>Mein Konto</h2>
@@ -300,7 +300,7 @@ function renderPayments() {
         return;
     }
 
-    target.innerHTML = `
+    target.innerHTML = /*html*/`
         <div class="account-card">
             <h3>Zahlungsmethoden</h3>
             <p class="account-payments-note">Platzhalter zum Hinterlegen deiner Logos oder Anbieter-Informationen.</p>
diff --git a/cart.js b/cart.js
index befa6a1..17457a2 100644
--- a/cart.js
+++ b/cart.js
@@ -119,7 +119,7 @@ function renderCart() {
 
     const groupedItems = groupCartItems();
 
-    const header = `
+    const header = /*html*/`
         <div class="cart-header-row">
             <div class="col-amount">MENGE</div>
             <div class="col-img">VORSCHAU</div>
@@ -133,11 +133,11 @@ function renderCart() {
     const rows = groupedItems
         .map((group) => {
             const imageHtml = group.item.img
-                ? `<img class="cart-img-small" src="${escapeHtml(group.item.img)}" alt="${escapeHtml(group.item.title)}">`
-                : `<div class="cart-img-fallback">Kein Bild</div>`;
+                ? /*html*/`<img class="cart-img-small" src="${escapeHtml(group.item.img)}" alt="${escapeHtml(group.item.title)}">`
+                : /*html*/`<div class="cart-img-fallback">Kein Bild</div>`;
             const quantityHtml = group.item.category === "movie"
-                ? `<div class="qty-static" aria-label="Feste Ticketanzahl">${group.quantity}x</div>`
-                : `
+                ? /*html*/`<div class="qty-static" aria-label="Feste Ticketanzahl">${group.quantity}x</div>`
+                : /*html*/`
                     <div class="qty-stepper">
                         <button class="btn-qty" data-action="minus" data-key="${escapeHtml(group.key)}">-</button>
                         <span>${group.quantity}</span>
@@ -145,7 +145,7 @@ function renderCart() {
                     </div>
                 `;
 
-            return `
+            return /*html*/`
                 <div class="cart-item-row">
                     <div class="col-amount">
                         ${quantityHtml}
diff --git a/checkout.js b/checkout.js
index b351e6e..6da24e4 100644
--- a/checkout.js
+++ b/checkout.js
@@ -93,7 +93,7 @@ function generateTicket() {
     const qrData = encodeURIComponent(`EAGLE-IMAX|${mainMovie.title}|${mainMovie.hall}|${matchingMovieSeats}`);
     const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${qrData}&bgcolor=ffffff`;
 
-    ticketContainer.innerHTML = `
+    ticketContainer.innerHTML = /*html*/`
         <div class="luxury-ticket">
             <div class="ticket-left">
                 <img src="${mainMovie.img}" class="ticket-poster" alt="${mainMovie.title}">
diff --git a/main.js b/main.js
index 680fe55..6cb5d7e 100644
--- a/main.js
+++ b/main.js
@@ -538,7 +538,7 @@ document.addEventListener("DOMContentLoaded", () => {
             return;
         }
 
-        ui.nowRunningRow.innerHTML = movieProgram.map((movie, index) => `
+        ui.nowRunningRow.innerHTML = movieProgram.map((movie, index) => /*html*/`
             <article class="running-poster">
                 <img src="${escapeHtml(movie.poster)}" alt="${escapeHtml(movie.title)}">
                 <div class="running-meta">
@@ -562,7 +562,7 @@ document.addEventListener("DOMContentLoaded", () => {
             return;
         }
 
-        body.innerHTML = day.showings.map((showing) => `
+        body.innerHTML = day.showings.map((showing) => /*html*/`
             <button class="schedule-row time-chip program-time-row" data-movie="${escapeHtml(movie.title)}" data-hall="${escapeHtml(showing.hall)}" data-time="${escapeHtml(showing.time)}">
                 <span>${escapeHtml(day.long)}</span>
                 <span class="hall-pill">${escapeHtml(showing.hall)}</span>
@@ -577,14 +577,14 @@ document.addEventListener("DOMContentLoaded", () => {
         }
 
         ui.movieProgramList.innerHTML = movieProgram.map((movie, programIndex) => {
-            const dayTabs = movie.schedule.map((day, dayIndex) => `
+            const dayTabs = movie.schedule.map((day, dayIndex) => /*html*/`
                 <button type="button" class="program-day-tab ${dayIndex === 0 ? "active" : ""}" data-program-index="${programIndex}" data-day-index="${dayIndex}">
                     <span>${escapeHtml(day.short)}</span>
                     <small>${escapeHtml(formatDateShort(day.date))}</small>
                 </button>
             `).join("");
 
-            return `
+            return /*html*/`
                 <article class="detailed-card program-card reveal-on-scroll" data-program-index="${programIndex}">
                     <div class="card-left">
                         <img src="${escapeHtml(movie.poster)}" alt="${escapeHtml(movie.title)}">