Landing page added

Author: raju-anna

corpus/corpus/settings.py

@@ -76,6 +76,7 @@
 
 MIDDLEWARE = [
     "django.middleware.security.SecurityMiddleware",
+    "tlm.middleware.TLMLaunchGateMiddleware",
     "django.contrib.sessions.middleware.SessionMiddleware",
     "django.middleware.common.CommonMiddleware",
     "django.middleware.csrf.CsrfViewMiddleware",

corpus/templates/static/css/tlm.css

@@ -513,3 +513,107 @@ body {
         animation: none !important;
     }
 }
+
+
+/* ═══════════════════════════════════════════════════════════════════
+   TRACK CARDS  (landing page)
+   All selectors are scoped to .tlm-track-card so these rules only
+   apply inside a card and never leak to the hero or other sections.
+   ═══════════════════════════════════════════════════════════════════ */
+
+/* Card shell — portrait 3:4, clips everything inside */
+.tlm-track-card {
+    position: relative;
+    overflow: hidden;          /* clips img zoom AND any text that would escape */
+    cursor: pointer;
+    border: 2px solid #a07830;
+    box-shadow: 4px 4px 0 #3a2d10;
+    flex-shrink: 0;
+    /* Default size used by home.html — landing.html overrides with aspect-ratio */
+    width: 180px;
+    height: 240px;
+}
+
+/* Image — sepia tint at rest, smooth transition for hover */
+.tlm-track-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    filter: sepia(55%) brightness(0.85) contrast(1.05);
+    /* Smooth zoom + desaturate on hover */
+    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+                filter   0.5s ease;
+    transform-origin: center center;
+}
+
+/* Hover: smooth zoom-in + full greyscale */
+.tlm-track-card:hover img {
+    transform: scale(1.1);
+    filter: grayscale(100%) brightness(0.72) contrast(1.15);
+}
+
+/* Dark vignette overlay — left strip + bottom fade.
+   Scoped to .tlm-track-card so it never affects other elements. */
+.tlm-track-card .tlm-track-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1;
+    background:
+        linear-gradient(to right,  rgba(10, 8, 2, 0.55) 0%, transparent 38%),
+        linear-gradient(to top,    rgba(10, 8, 2, 0.60) 0%, transparent 38%);
+}
+
+/* Name strip — a 22 px column flush to the left edge, full card height.
+   Uses writing-mode so text flows vertically without transform hacks,
+   which means the text is always contained within the strip's box and
+   overflow:hidden on .tlm-track-card clips it safely. */
+.tlm-track-card .tlm-track-name-strip {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 22px;
+    z-index: 2;
+    pointer-events: none;
+    /* Stack children bottom-to-top, centred in the strip */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);   /* flip: text now reads bottom → top (CCW) */
+    padding: 0.5rem 0;
+}
+
+/* The name text itself — static inside the strip, no absolute positioning */
+.tlm-track-card .tlm-track-name {
+    position: static;
+    transform: none;
+    left: auto;
+    top: auto;
+    margin-left: 0;
+    font-family: 'JetBrains Mono', 'Courier New', monospace;
+    font-size: 0.72rem;
+    font-weight: 700;
+    color: #ffffff;
+    letter-spacing: 0.1em;
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
+    white-space: nowrap;
+}
+
+/* Points — bottom-right corner, always inside the card */
+.tlm-track-card .tlm-track-pts {
+    position: absolute;
+    bottom: 0.45rem;
+    right: 0.55rem;
+    left: auto;
+    top: auto;
+    z-index: 2;
+    font-family: 'JetBrains Mono', 'Courier New', monospace;
+    font-size: 0.72rem;
+    font-weight: 700;
+    color: #ffffff;
+    letter-spacing: 0.08em;
+    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.95);
+}

corpus/templates/static/img/tlm/5.png

@@ -0,0 +1,46 @@
+{% extends 'tlm/base.html' %}
+{% load static %}
+
+{% block title %}Access Denied{% endblock %}
+
+{% block style %}
+
+{#  Set theme synchronously — same pattern as landing.html  #}
+<script>document.documentElement.setAttribute("data-theme","tlm");</script>
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+
+<style>
+    @font-face {
+        font-family: 'Space Age';
+        src: url({% static 'css/SpaceAge.ttf' %}) format('truetype');
+        font-display: swap;
+    }
+
+    /* ── LOGO FIX — same as landing.html ──
+       Hides the dark logo immediately before any JS runs,
+       so the duplicate never flashes even for a single frame. */
+    .dark-logo  { display: none   !important; }
+    .light-logo { display: inline !important; }
+</style>
+
+<link rel="stylesheet" href="{% static 'css/tlm.css' %}">
+
+{% endblock %}
+
+
+{% block content %}
+
+<section class="tlm-hero min-h-screen w-full flex flex-col items-center justify-center">
+    <div class="relative z-10 text-center px-6 flex flex-col items-center gap-6">
+        <span class="tlm-title-the">Error</span>
+        <h1 class="tlm-title-main" style="font-size: clamp(4rem, 15vw, 10rem); line-height: 1;">403</h1>
+        <p class="tlm-tagline">Access Denied</p>
+        <p class="tlm-date-text">The mission has not begun yet.</p>
+        <p class="tlm-date-text">Return on Mar 20, 2026 at 18:00 IST.</p>
+    </div>
+</section>
+
+{% endblock %}

corpus/templates/static/img/tlm/6.png

@@ -9,10 +9,20 @@
 {% block script %}
 {{ block.super }}
 <script>
+    document.addEventListener("DOMContentLoaded", async function () {
+        await new Promise(r => setTimeout(r, 100));
+        const themeButton = document.getElementById("dark-mode-button");
+        if (themeButton) themeButton.remove();
+        document.documentElement.setAttribute("data-theme", "tlm");
+    });
     // Belt-and-suspenders fallback. The primary theme-set is the
     // synchronous inline script inside the style block in home.html,
     // which runs in <head> before any CSS or body renders.
     // This fallback handles any edge-case where that script didn't fire.
     document.documentElement.setAttribute("data-theme", "tlm");
 </script>
 {% endblock %}
+
+
+
+    

corpus/templates/static/img/tlm/7.png

@@ -75,7 +75,7 @@ <h1 class="tlm-title-main">LAZARUS MISSIONS</h1>
         </div>
 
         {#  Register button - REPLACE # WITH REAL REGISTRATION LINK  #}
-        <a href="#"
+        <a href= {% url 'tlm_landing' %}
         id="tlm-begin-mission-btn"
         class="btn btn-primary tlm-register-btn mt-2"
         style="opacity:0.5;cursor:not-allowed;"