SymfonyCasts · Leannapelham · Jul 24, 2026 · Aug 4, 2026 · Aug 6, 2026 · Aug 11, 2026
diff --git a/assets/images/SoulOfARebelBook.png b/assets/images/SoulOfARebelBook.png
diff --git a/assets/images/almanac.png b/assets/images/almanac.png
diff --git a/assets/images/book.png b/assets/images/book.png
diff --git a/assets/images/cdplayer.png b/assets/images/cdplayer.png
diff --git a/assets/images/newspaper.png b/assets/images/newspaper.png
diff --git a/assets/images/phaser.png b/assets/images/phaser.png
diff --git a/assets/images/phone.png b/assets/images/phone.png
diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -2,12 +2,67 @@
 <html>
     <head>
         <meta charset="UTF-8">
-        <title>{% block title %}Welcome!{% endblock %}</title>
+        <title>Time Traveler's Lost &amp; Found</title>
         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
         {% block stylesheets %}
+          <style>
+            body { font-family: 'Inter', sans-serif; }
+            .font-display { font-family: 'Orbitron', sans-serif; }
+            .tardis-lamp {
+                box-shadow: 0 0 10px 3px rgba(242,169,59,0.8);
+                animation: pulse-lamp 2.4s ease-in-out infinite;
+            }
+            @keyframes pulse-lamp {
+                0%, 100% { opacity: 1; box-shadow: 0 0 8px 2px rgba(242,169,59,0.7); }
+                50% { opacity: 0.6; box-shadow: 0 0 16px 5px rgba(242,169,59,0.4); }
+            }
+            .item-card {
+                transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+            }
+            .item-card:hover {
+                transform: translateY(-4px);
+                box-shadow: 0 10px 30px rgba(11, 61, 145, 0.18);
+                border-color: #2F5FA8;
+            }
+            .panel-lines {
+                background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 40px);
+            }
+          </style>
         {% endblock %}
 
         {% block javascripts %}
+            <script src="https://cdn.tailwindcss.com"></script>
+            <script>
+              tailwind.config = {
+                theme: {
+                  extend: {
+                    colors: {
+                      tardis: {
+                        DEFAULT: '#0B3D91',
+                        dark: '#061C3E',
+                        light: '#2F5FA8',
+                        50: '#EAF1FC'
+                      },
+                      accent: {
+                        DEFAULT: '#F2A93B',
+                        dark: '#C9820A',
+                        light: '#FBD08A'
+                      }
+                    },
+                    fontFamily: {
+                      display: ['Orbitron', 'sans-serif'],
+                      body: ['Inter', 'sans-serif']
+                    },
+                    boxShadow: {
+                      glow: '0 0 25px rgba(242, 169, 59, 0.35)'
+                    }
+                  }
+                }
+              };
+            </script>
             {% block importmap %}{{ importmap('app') }}{% endblock %}
         {% endblock %}
 
@@ -18,7 +73,31 @@
         <script src="https://cdn.jsdelivr.net/npm/frankenphp-hot-reload/+esm" type="module"></script>
         {% endif %}
     </head>
+
     <body>
-        {% block body %}{% endblock %}
+
+        <header class="bg-tardis dark:bg-tardis panel-lines border-b-4 border-accent">
+            <div class="max-w-6xl mx-auto px-6 py-6 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <span class="w-4 h-4 rounded-full bg-accent tardis-lamp"></span>
+                <div>
+                <h1 class="font-display text-white text-xl sm:text-2xl tracking-wide">TIME TRAVELER'S LOST &amp; FOUND</h1>
+                <p class="text-tardis-light text-xs sm:text-sm font-medium tracking-widest uppercase">Property Office &middot; Displaced in Time</p>
+                </div>
+            </div>
+            <div class="hidden sm:block text-right text-tardis-50/80 text-xs font-medium">
+                <p>Est. sometime.</p>
+                <p>Somewhen, Gallifrey.</p>
+            </div>
+            </div>
+        </header>
+        {% block body %}
+        {% endblock %}
+        <footer class="bg-tardis-dark text-tardis-50/70 text-xs">
+          <div class="max-w-6xl mx-auto px-6 py-6 flex flex-col sm:flex-row justify-between gap-2">
+            <p>&copy; <span id="year"></span> Time Traveler's Lost &amp; Found. All temporal paradoxes are your own responsibility.</p>
+            <p>Unclaimed items after 400 years will be recycled into sonic screwdrivers.</p>
+          </div>
+        </footer>
     </body>
 </html>
diff --git a/templates/items/index.html.twig b/templates/items/index.html.twig
@@ -1,10 +1,101 @@
+
 {% extends 'base.html.twig' %}
+{% block body %}
+<body class="bg-tardis-50 text-slate-800 min-h-screen flex flex-col">
+  <main class="flex-1 max-w-6xl w-full mx-auto px-6 py-10">
+    <div class="mb-8">
+      <h2 class="font-display text-2xl sm:text-3xl text-tardis-dark mb-2">Recently Recovered Items</h2>
+      <p class="text-slate-600 max-w-2xl mb-4">
+        Items materialize here after being left behind across all of time and space. Recognize something?
+        Select it below to view details and file a claim.
+      </p>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4">
+            <div class="col-span-1 mb-6">
+                <div class="rounded-xl h-56 flex items-center justify-center text-9xl border-2 border-tardis-50 mb-6 py-2 bg-[#2C4A52]">
+                  <img class="h-full w-auto" src="{{ asset('images/almanac.png') }}">
+                </div>
+                <h2 class="font-display text-2xl text-tardis-dark mb-3">Almanac</h2>
+                <p class="text-slate-600 mb-4 line-clamp-3">Biff Tannen has made a rather large fortune from the information in this almanac. If this is yours, please claim it as soon as possible, and take care where you park your DeLorean.</p>
+                <a href="{{ path('app_items_show', {id: 1}) }}" class="w-full bg-accent hover:bg-accent-dark text-white font-semibold px-5 py-3 rounded-lg transition-colors">Claim Item</a>
+            </div>
+            <div class="col-span-1 mb-6">
+                <div class="rounded-xl h-56 flex items-center justify-center text-9xl border-2 border-tardis-50 mb-6 py-2 bg-[#5B3256]">
+                  <img class="h-full w-auto" src="{{ asset('images/book.png') }}">
+                </div>
+                <h2 class="font-display text-2xl text-tardis-dark mb-3">Book</h2>
+                <p class="text-slate-600 mb-4 line-clamp-3">The cultural development of the inhabitants of Sigma Iotia has been severely altered by the contents of this book, leading to a boom in fedora manufacturing. Everyone sounds like they’re on the set of The Godfather…</p>
+                <a href="{{ path('app_items_show', {id: 2}) }}" class="w-full bg-accent hover:bg-accent-dark text-white font-semibold px-5 py-3 rounded-lg transition-colors">Claim Item</a>
+            </div>
+            <div class="col-span-1 mb-6">
+                <div class="rounded-xl h-56 flex items-center justify-center text-9xl border-2 border-tardis-50 mb-6 py-2 bg-[#8B4A3C]">
+                  <img class="h-full w-auto" src="{{ asset('images/phone.png') }}">
+                </div>
+                <h2 class="font-display text-2xl text-tardis-dark mb-3">Smart Phone</h2>
+                <p class="text-slate-600 mb-4 line-clamp-3">Earth’s earliest inhabitants are in an uproar after discovering this smartphone in a cave in the Nouvelle-Aquitaine region of France. When it ran out of battery, the locals built a large stone circle where it is now displayed.</p>
+                <a href="{{ path('app_items_show', {id: 2}) }}" class="w-full bg-accent hover:bg-accent-dark text-white font-semibold px-5 py-3 rounded-lg transition-colors">Claim Item</a>
+            </div>
+            <div class="col-span-1 mb-6">
+                <div class="rounded-xl h-56 flex items-center justify-center text-9xl border-2 border-tardis-50 mb-6 py-2 bg-[#A67C3D]">
+                  <img class="h-full w-auto" src="{{ asset('images/cdplayer.png') }}">
+                </div>
+                <h2 class="font-display text-2xl text-tardis-dark mb-3">Portable CD Player</h2>
+                <p class="text-slate-600 mb-4 line-clamp-3">Crews working to terraform the moon have discovered this portable CD player tucked away in a crater. It contains a copy of Now That’s What I Call Music 5, and even though it has “Skip Protection”, it definitely skips…</p>
+                <a href="{{ path('app_items_show', {id: 1}) }}" class="w-full bg-accent hover:bg-accent-dark text-white font-semibold px-5 py-3 rounded-lg transition-colors">Claim Item</a>
+            </div>
+            <div class="col-span-1 mb-6">
+                <div class="rounded-xl h-56 flex items-center justify-center text-9xl border-2 border-tardis-50 mb-6 py-2 bg-[#35533F]">
+                  <img class="h-full w-auto" src="{{ asset('images/phaser.png') }}">
+                </div>
+                <h2 class="font-display text-2xl text-tardis-dark mb-3">Phaser</h2>
+                <p class="text-slate-600 mb-4 line-clamp-3">This phaser was collected by officials aboard the USS Enterprise in Alameda, CA after an intruder tossed it during a chase. This intruder later disappeared from a nearby hospital under mysterious circumstances.</p>
+                <a href="{{ path('app_items_show', {id: 2}) }}" class="w-full bg-accent hover:bg-accent-dark text-white font-semibold px-5 py-3 rounded-lg transition-colors">Claim Item</a>
+            </div>
+            <div class="col-span-1 mb-6">
+                <div class="rounded-xl h-56 flex items-center justify-center text-9xl border-2 border-tardis-50 mb-6 py-2 bg-[#2E3F5C]">
+                  <img class="h-full w-auto" src="{{ asset('images/newspaper.png') }}">
+                </div>
+                <h2 class="font-display text-2xl text-tardis-dark mb-3">Newspaper</h2>
+                <p class="text-slate-600 mb-4 line-clamp-3">A copy of the Chicago Tribune, dated September 3rd 2016, was confiscated from a gentleman a few days prior to the game as he was attempting to place a suspiciously large bet in favor of the Cubs.</p>
+                <a href="{{ path('app_items_show', {id: 2}) }}" class="w-full bg-accent hover:bg-accent-dark text-white font-semibold px-5 py-3 rounded-lg transition-colors">Claim Item</a>
+            </div>
+        </div>
+    </div>
 
-{% block title %}List items{% endblock %}
+    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6" id="item-grid">
+      <!-- Cards injected by script -->
+    </div>
+  </main>
 
-{% block body %}
-    <ul>
-        <li><a href="{{ path('app_items_show', {id: 1}) }}">Item 1</a></li>
-        <li><a href="{{ path('app_items_show', {id: 2}) }}">Item 2</a></li>
-    </ul>
+  <script src="data.js"></script>
+  <script>
+    document.getElementById('year').textContent = new Date().getFullYear();
+
+    const grid = document.getElementById('item-grid');
+
+    LOST_ITEMS.forEach((item) => {
+      const card = document.createElement('a');
+      card.href = `item.html?id=${encodeURIComponent(item.id)}`;
+      card.className = 'item-card block bg-white rounded-xl border-2 border-tardis-50 overflow-hidden';
+
+      card.innerHTML = `
+        <div class="${item.colorClass} h-36 flex items-center justify-center text-6xl">
+          ${item.emoji}
+        </div>
+        <div class="p-5">
+          <h3 class="font-display text-base text-tardis-dark mb-1 leading-snug">${item.name}</h3>
+          <p class="text-sm text-slate-600 mb-3 line-clamp-2">${item.description}</p>
+          <p class="text-xs text-slate-500 mb-4 flex items-center gap-1">
+            <span>🕐</span> Found: ${item.dateFound}
+          </p>
+          <span class="inline-flex items-center gap-1 text-sm font-semibold text-white bg-accent hover:bg-accent-dark px-4 py-2 rounded-lg transition-colors">
+            View Details &rarr;
+          </span>
+        </div>
+      `;
+
+      grid.appendChild(card);
+    });
+  </script>
+</body>
+</html>
 {% endblock %}
diff --git a/templates/items/show.html.twig b/templates/items/show.html.twig
@@ -3,5 +3,82 @@
 {% block title %}Show Item{% endblock %}
 
 {% block body %}
-    (the item)
+    <main class="flex-1 max-w-5xl w-full mx-auto px-6 py-10">
+    <a href="index.html" class="inline-flex items-center gap-1 text-tardis font-semibold text-sm mb-6 hover:text-tardis-light">
+      &larr; Back to all items
+    </a>
+
+    <div id="item-container" class="grid md:grid-cols-2 gap-10">
+      <div>
+          <div class="${item.colorClass} rounded-xl h-72 flex items-center justify-center text-9xl border-2 border-tardis-50 mb-6">
+            {# IMAGE GOES HERE #}
+          </div>
+          <h2 class="font-display text-2xl text-tardis-dark mb-3">Smart Watch</h2>
+          <p class="text-slate-600 mb-4">Valyrian Steel infused smart watch, compatible with devices from 3300 and after</p>
+          <p class="text-sm text-slate-500 flex items-center gap-1 bg-white border border-tardis-50 rounded-lg px-4 py-3 w-fit">
+            <span>🕐</span> Found: 1965, Venice Italy, Earth
+          </p>
+      </div>
+
+        <div>
+          <div class="bg-white border-2 border-tardis-50 rounded-xl p-6">
+            <h3 class="font-display text-lg text-tardis-dark mb-1">Claim This Item</h3>
+            <p class="text-sm text-slate-500 mb-6">Believe this is yours? Fill out the form below and our Temporal Claims department will be in touch (eventually, possibly before you submit it).</p>
+
+            <form id="claim-form" class="space-y-5" novalidate>
+              <div>
+                <label for="brand" class="block text-sm font-semibold text-slate-700 mb-1">Brand</label>
+                <input type="text" id="brand" name="brand" required
+                  placeholder="e.g. Bad Wolf Industries"
+                  class="w-full border-2 border-tardis-50 rounded-lg px-3 py-2.5 text-sm transition" />
+              </div>
+
+              <div>
+                <label for="fullname" class="block text-sm font-semibold text-slate-700 mb-1">Your Name</label>
+                <input type="text" id="fullname" name="fullname" required
+                  placeholder="e.g. River Song"
+                  class="w-full border-2 border-tardis-50 rounded-lg px-3 py-2.5 text-sm transition" />
+              </div>
+
+              <div>
+                <label for="email" class="block text-sm font-semibold text-slate-700 mb-1">Email Address</label>
+                <input type="email" id="email" name="email" required
+                  placeholder="e.g. you@example.com"
+                  class="w-full border-2 border-tardis-50 rounded-lg px-3 py-2.5 text-sm transition" />
+              </div>
+
+              <div>
+                <label for="model" class="block text-sm font-semibold text-slate-700 mb-1">Model of Time Machine</label>
+                <input type="text" id="model" name="model" required
+                  placeholder="e.g. TARDIS Type 40, Mark III"
+                  class="w-full border-2 border-tardis-50 rounded-lg px-3 py-2.5 text-sm transition" />
+              </div>
+
+              <div class="flex items-start gap-2">
+                <input type="checkbox" id="terms" name="terms" required
+                  class="mt-1 w-4 h-4 accent-tardis border-2 border-tardis-50 rounded" />
+                <label for="terms" class="text-sm text-slate-600">
+                  I accept the <a href="#" class="text-tardis font-semibold hover:underline">Terms of Temporal Claims</a>, including the clause about paradoxes being non-refundable.
+                </label>
+              </div>
+
+              <button type="submit"
+                class="w-full bg-accent hover:bg-accent-dark text-white font-semibold px-5 py-3 rounded-lg transition-colors">
+                Submit Claim
+              </button>
+
+              <p id="form-success" class="hidden text-sm text-green-700 bg-green-50 border border-green-200 rounded-lg px-4 py-3">
+                Claim submitted! A Temporal Claims agent will contact you at some point in your personal timeline.
+              </p>
+            </form>
+          </div>
+        </div>
+    </div>
+
+    <div id="not-found" class="hidden text-center py-20">
+      <p class="font-display text-2xl text-tardis-dark mb-2">Item Not Found</p>
+      <p class="text-slate-600">This item may have slipped into a parallel timeline.</p>
+      <a href="index.html" class="inline-block mt-6 bg-accent hover:bg-accent-dark text-white font-semibold px-5 py-2.5 rounded-lg">Return to Lost &amp; Found</a>
+    </div>
+  </main>
 {% endblock %}
diff --git a/yarn.lock b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
		# yarn lockfile v1