helldivers-theme 1.0.0

data/_sass/_layout.scss

@@ -0,0 +1,205 @@
+// _sass/_layout.scss
+
+.terminal-wrapper {
+  width: 100%;
+  max-width: 1200px;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  position: relative;
+  z-index: 10;
+}
+
+.terminal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 30px;
+
+  // Glass Header
+  background: rgba(2, 4, 10, 0.8);
+  backdrop-filter: blur(10px);
+  border-bottom: 2px solid $hd-gold;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+
+  // Angled corners for sci-fi look
+  clip-path: polygon(0 0, 100% 0, 100% 75%, 98% 100%, 2% 100%, 0 75%);
+
+  h1 {
+    font-family: $font-head;
+    font-size: 3.5rem;
+    color: $hd-white;
+    text-transform: uppercase;
+    margin: 0;
+    text-shadow: 0 0 10px rgba($hd-gold, 0.6);
+    letter-spacing: 2px;
+
+    span {
+        color: $hd-gold;
+    }
+  }
+
+  .subtitle {
+      color: $hd-cyan;
+      font-size: 0.9rem;
+      letter-spacing: 3px;
+      text-shadow: 0 0 5px $hd-cyan;
+      display: block;
+      margin-top: 5px;
+  }
+}
+
+.main-nav {
+  display: flex;
+  gap: 25px;
+}
+
+.nav-link {
+  text-decoration: none;
+  color: $hd-white;
+  font-family: $font-head;
+  font-size: 1.4rem;
+  letter-spacing: 2px;
+  transition: all 0.3s ease;
+  text-transform: uppercase;
+  position: relative;
+
+  &:visited { color: $hd-white; }
+
+  &:hover {
+    color: $hd-cyan;
+    text-shadow: 0 0 12px $hd-cyan;
+    transform: translateY(-2px);
+  }
+
+  &.active {
+    color: $hd-gold;
+    text-shadow: 0 0 15px $hd-gold;
+
+    // Little underline indicator
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: -5px;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background: $hd-gold;
+        box-shadow: 0 0 10px $hd-gold;
+    }
+  }
+}
+
+// Existing Red Pulse
+.live-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background-color: $hd-red; // Default to Red (Offline)
+  border-radius: 50%;
+  margin-left: 6px;
+  box-shadow: 0 0 5px $hd-red;
+  animation: pulse-red 1.5s infinite;
+  transition: all 0.5s ease; // Smooth color change
+  flex-shrink: 0; // CRITICAL: Prevents the dot from squishing
+  margin: 0;      // Remove default margins, use gap in parent instead
+}
+
+// New Green Pulse (Added via JS when live)
+.live-dot.is-live {
+  background-color: #0f0; // Bright Green
+  box-shadow: 0 0 8px #0f0;
+  animation: pulse-green 1.5s infinite;
+}
+
+@keyframes pulse-red {
+  0% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.2); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes pulse-green {
+  0% { opacity: 1; transform: scale(1); box-shadow: 0 0 5px #0f0; }
+  50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 15px #0f0; }
+  100% { opacity: 1; transform: scale(1); box-shadow: 0 0 5px #0f0; }
+}
+
+// THE MAIN HOLOGRAPHIC CARD
+
+// _sass/_layout.scss
+
+.terminal-card {
+  display: grid;
+  // DEFAULT: Sidebar (280px) + Content (Rest)
+  // This applies to the Home Page automatically because it has an <aside>
+  grid-template-columns: 280px 1fr;
+  gap: 25px;
+
+  // Glassmorphism & Borders
+  background: $glass-bg;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid $glass-border;
+  border-top: 1px solid rgba($hd-gold, 0.6);
+  border-left: 1px solid rgba($hd-cyan, 0.3);
+  padding: 30px;
+  border-radius: 4px;
+  box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 30px rgba(0, 240, 255, 0.05);
+  position: relative;
+  min-height: 600px;
+
+  // Decorative Corners
+  &::before, &::after {
+      content: '';
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      border: 2px solid $hd-cyan;
+      transition: all 0.3s ease;
+      z-index: 10;
+  }
+  &::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
+  &::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }
+
+  &:hover {
+      box-shadow: 0 20px 60px rgba(0,0,0,0.7), inset 0 0 40px rgba(0, 240, 255, 0.1);
+      &::before, &::after {
+          width: 30px;
+          height: 30px;
+          border-color: $hd-gold;
+          box-shadow: 0 0 10px $hd-gold;
+      }
+  }
+
+  // --- EXCEPTION: ENLIST & INTEL PAGES ---
+  // If the direct child is our specific centered containers, force single column
+  &:has(> .enlist-container),
+  &:has(> .intel-container),
+  &:has(> .comms-container),
+  &:has(> .watch-container) {
+    grid-template-columns: 1fr; // Remove sidebar column
+    justify-items: center;      // Center content
+  }
+}
+
+// Force these containers to span full width and center themselves
+.enlist-container, .intel-container, .comms-container, .watch-container {
+  grid-column: 1 / -1; // Span across all columns
+  width: 100%;
+  max-width: 1200px;   // Cap width so it doesn't stretch too far
+  margin: 0 auto;      // Center horizontally
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+// Mobile Responsiveness
+@media (max-width: 900px) {
+  .terminal-card {
+    grid-template-columns: 1fr; // Stack sidebar on top for mobile
+  }
+
+  .enlist-container, .intel-container {
+    max-width: 100%;
+  }
+}

data/_sass/_sidebar.scss

@@ -0,0 +1,49 @@
+// _sass/_sidebar.scss
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.panel-box {
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba($hd-cyan, 0.2);
+  padding: 15px;
+  position: relative;
+  backdrop-filter: blur(5px);
+
+  // Small corner accents
+  &::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0;
+      width: 10px; height: 10px;
+      border-top: 2px solid $hd-gold;
+      border-left: 2px solid $hd-gold;
+  }
+
+  h3 {
+    font-family: $font-head;
+    color: $hd-cyan;
+    font-size: 1.2rem;
+    margin-bottom: 10px;
+    border-bottom: 1px solid rgba($hd-cyan, 0.3);
+    padding-bottom: 5px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    text-shadow: 0 0 5px rgba($hd-cyan, 0.4);
+  }
+}
+
+.alert-marquee {
+  background: rgba($hd-red, 0.2); // Transparent red
+  border: 1px solid $hd-red;
+  color: #ffaaaa;
+  // ... keep animation code same ...
+
+  .marquee-content span::before {
+      color: $hd-red;
+      text-shadow: 0 0 5px $hd-red;
+  }
+}

data/_sass/_variables.scss

@@ -0,0 +1,19 @@
+// _sass/_variables.scss
+
+// Core Colors
+$hd-blue-deep: #02040a;       // Almost black space
+$hd-blue-space: #0b1021;      // Deep navy
+$hd-gold: #ffd700;            // Liberty Gold
+$hd-red: #ff2a2a;             // Alert Crimson
+$hd-cyan: #00f0ff;            // Holographic Tech Blue
+$hd-white: #e6f2ff;           // Slightly blue-tinted white
+
+// Fonts
+$font-head: 'Bebas Neue', sans-serif;
+$font-mono: 'Share Tech Mono', monospace;
+
+// Effects
+$glass-bg: rgba(11, 16, 33, 0.65); // Transparent dark blue
+$glass-border: rgba(255, 215, 0, 0.3); // Faint gold border
+$glow-gold: 0 0 15px rgba(255, 215, 0, 0.4);
+$glow-cyan: 0 0 15px rgba(0, 240, 255, 0.4);

data/about.md

@@ -0,0 +1,107 @@
+---
+layout: default
+title: Intel
+permalink: /about/
+---
+
+<div class="intel-container">
+
+    <!-- HEADER & QUOTE -->
+    <div class="section-header">
+        <h2>// SQUAD DOSSIER: {{ site.data.squad.squad_name | upcase }}</h2>
+        <div class="line-accent"></div>
+        <p class="squad-motto" style="margin-top: 15px; color: var(--hd-cyan); font-style: italic; font-size: 1.1rem;">
+            {{ site.data.squad.motto }} <span style="color: #888;">{{ site.data.squad.commander_quote }}</span>
+        </p>
+    </div>
+
+    <!-- SMALL GAP AFTER QUOTE -->
+    <div class="intel-spacer"></div>
+
+    <!-- TOP ROW: STATS (Left) + LOADOUTS (Right) -->
+    <div class="intel-dashboard-row">
+
+        <!-- STATS PANEL (Left Side) -->
+        <div class="stats-panel-compact">
+            <h3>// OPERATIONAL STATS</h3>
+            <ul class="stat-list-compact">
+                {% for stat in site.data.squad.stats %}
+                <li>
+                    <span class="stat-label">{{ stat.label }}:</span>
+                    <span class="stat-value" style="{% if stat.color %}color: {{ stat.color }};{% endif %}">
+                        {{ stat.value }}
+                    </span>
+                </li>
+                {% endfor %}
+            </ul>
+        </div>
+
+        <!-- LOADOUT TABS (Right Side - Takes remaining space) -->
+        <div class="panel-box intel-panel loadout-panel-compact">
+            <h3>// TACTICAL LOADOUT DATABASE</h3>
+
+            <!-- Tab Buttons -->
+            <div class="loadout-tabs">
+                {% for loadout in site.data.squad.loadouts %}
+                <button class="tab-btn {% if forloop.first %}active{% endif %}"
+                        onclick="openLoadout(event, 'loadout-{{ forloop.index }}')"
+                        data-color="{{ loadout.theme_color }}">
+                    {{ loadout.name }}
+                </button>
+                {% endfor %}
+            </div>
+
+            <!-- Tab Content Areas -->
+            <div class="loadout-content-area">
+                {% for loadout in site.data.squad.loadouts %}
+                <div id="loadout-{{ forloop.index }}"
+                     class="loadout-tab-content {% if forloop.first %}active{% endif %}"
+                     data-theme="{{ loadout.theme_color }}">
+
+                    <div class="loadout-header" style="border-bottom-color: var(--hd-{{ loadout.theme_color }}); color: var(--hd-{{ loadout.theme_color }});">
+                        {{ loadout.name | upcase }}
+                    </div>
+                    <ul class="loadout-items">
+                        {% for item in loadout.items %}
+                        <li>{{ item }}</li>
+                        {% endfor %}
+                    </ul>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+
+    <!-- LARGE GAP BEFORE STORY -->
+    <div class="intel-spacer-large"></div>
+
+    <!-- BOTTOM ROW: ORIGIN STORY (Full Width) -->
+    <div class="panel-box intel-panel story-panel-wide">
+        <h3>// ORIGIN STORY</h3>
+        <div class="story-content">
+            {{ site.data.squad.story }}
+        </div>
+    </div>
+
+</div>
+
+<!-- JAVASCRIPT FOR TABS -->
+<script>
+function openLoadout(evt, loadoutName) {
+    var i, tabcontent, tablinks;
+    tabcontent = document.getElementsByClassName("loadout-tab-content");
+    for (i = 0; i < tabcontent.length; i++) {
+        tabcontent[i].style.display = "none";
+        tabcontent[i].classList.remove("active");
+    }
+    tablinks = document.getElementsByClassName("tab-btn");
+    for (i = 0; i < tablinks.length; i++) {
+        tablinks[i].className = tablinks[i].className.replace(" active", "");
+    }
+    document.getElementById(loadoutName).style.display = "block";
+    setTimeout(() => {
+        document.getElementById(loadoutName).classList.add("active");
+    }, 10);
+    evt.currentTarget.className += " active";
+}
+</script>

data/assets/css/style.scss

@@ -0,0 +1,8 @@
+---
+---
+
+@import "variables";
+@import "base";
+@import "layout";
+@import "components";
+@import "sidebar";

data/assets/js/main.js

@@ -0,0 +1,57 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+    // --- 1. CONFIGURATION ---
+    // Official Helldivers 2 Steam News Feed URL
+    const RSS_URL = 'https://store.steampowered.com/feeds/news/app/553850/';
+    const FEED_CONTAINER = document.getElementById('rss-feed');
+
+    // --- 2. FETCH UPDATES FUNCTION ---
+    async function loadGameUpdates() {
+        try {
+            // We use rss2json.com to convert the XML feed to JSON and bypass CORS
+            const apiUrl = `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(RSS_URL)}`;
+
+            const response = await fetch(apiUrl);
+
+            if (!response.ok) throw new Error('Network response was not ok');
+
+            const data = await response.json();
+
+            // Clear the loading text
+            FEED_CONTAINER.innerHTML = '';
+
+            // Create a list for the items
+            const list = document.createElement('ul');
+            list.className = 'news-list';
+
+            // Loop through the top 5 news items
+            data.items.slice(0, 5).forEach(item => {
+                const li = document.createElement('li');
+
+                // Format the date nicely
+                const dateObj = new Date(item.pubDate);
+                const dateStr = dateObj.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+
+                li.innerHTML = `
+                    <span class="news-date">[${dateStr}]</span>
+                    <a href="${item.link}" target="_blank" class="news-link">${item.title}</a>
+                `;
+                list.appendChild(li);
+            });
+
+            FEED_CONTAINER.appendChild(list);
+
+        } catch (error) {
+            console.error('Failed to load updates:', error);
+            FEED_CONTAINER.innerHTML = `
+                <div class="error-msg">
+                    ⚠️ COMM LINK INTERRUPTED<br>
+                    <small>Unable to reach Super Earth servers.</small>
+                </div>
+            `;
+        }
+    }
+
+    // --- 3. INITIALIZE ---
+    loadGameUpdates();
+});

data/assets/js/particles.js

@@ -0,0 +1,119 @@
+// assets/js/bg-particles.js
+
+const canvas = document.createElement('canvas');
+const ctx = canvas.getContext('2d');
+document.body.appendChild(canvas);
+
+// Style the canvas to sit behind everything
+canvas.style.position = 'fixed';
+canvas.style.top = '0';
+canvas.style.left = '0';
+canvas.style.width = '100%';
+canvas.style.height = '100%';
+canvas.style.zIndex = '0'; // Behind the content
+canvas.style.pointerEvents = 'none'; // Click through it
+canvas.style.opacity = '0.4'; // Subtle effect
+
+let width, height;
+let particles = [];
+
+// Configuration
+const particleCount = 150; // Fewer particles needed for Canvas to look full
+const connectionDistance = 100;
+const baseHue = 50; // Cyan/Blue (Helldivers Tech vibe)
+
+// Resize handling
+function resize() {
+  width = window.innerWidth;
+  height = window.innerHeight;
+  canvas.width = width;
+  canvas.height = height;
+}
+window.addEventListener('resize', resize);
+resize();
+
+// Particle Class
+class Particle {
+  constructor() {
+    this.reset();
+  }
+
+  reset() {
+    this.x = Math.random() * width;
+    this.y = Math.random() * height;
+    this.vx = (Math.random() - 0.5) * 0.5; // Slow drift velocity
+    this.vy = (Math.random() - 0.5) * 0.5;
+    this.size = Math.random() * 2 + 1;
+    // Vary hue slightly for depth
+    this.hue = baseHue + (Math.random() * 40 - 20); 
+    this.life = Math.random() * 100;
+    this.maxLife = 100 + Math.random() * 100;
+  }
+
+  update() {
+    this.x += this.vx;
+    this.y += this.vy;
+    this.life++;
+
+    // Wrap around screen
+    if (this.x < 0) this.x = width;
+    if (this.x > width) this.x = 0;
+    if (this.y < 0) this.y = height;
+    if (this.y > height) this.y = 0;
+
+    // Fade in/out cycle
+    if (this.life > this.maxLife) {
+      this.reset();
+      this.life = 0;
+    }
+  }
+
+  draw() {
+    const opacity = Math.sin((this.life / this.maxLife) * Math.PI); // Smooth fade
+    ctx.fillStyle = `hsla(${this.hue}, 100%, 60%, ${opacity})`;
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+    ctx.fill();
+  }
+}
+
+// Initialize
+for (let i = 0; i < particleCount; i++) {
+  particles.push(new Particle());
+}
+
+// Animation Loop
+function animate() {
+  ctx.clearRect(0, 0, width, height);
+  
+  // Draw particles
+  particles.forEach(p => {
+    p.update();
+    p.draw();
+  });
+
+  // Optional: Draw subtle connections (lines) between close particles
+  // Only do this if performance allows (comment out if too slow)
+  /*
+  ctx.strokeStyle = `hsla(${baseHue}, 100%, 50%, 0.1)`;
+  ctx.lineWidth = 0.5;
+  for (let i = 0; i < particles.length; i++) {
+    for (let j = i + 1; j < particles.length; j++) {
+      const dx = particles[i].x - particles[j].x;
+      const dy = particles[i].y - particles[j].y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      
+      if (dist < connectionDistance) {
+        ctx.beginPath();
+        ctx.moveTo(particles[i].x, particles[i].y);
+        ctx.lineTo(particles[j].x, particles[j].y);
+        ctx.stroke();
+      }
+    }
+  }
+  */
+
+  requestAnimationFrame(animate);
+}
+
+animate();

data/assets/js/profile-modal.js

@@ -0,0 +1,110 @@
+// assets/js/profile-modal.js
+
+document.addEventListener('DOMContentLoaded', () => {
+  const dataElement = document.getElementById('leader-data-json');
+
+  if (!dataElement) {
+    console.error("❌ Error: Hidden data div #leader-data-json not found!");
+    return;
+  }
+
+  let squadData = [];
+
+  try {
+    // Parse the JSON from the hidden div
+    squadData = JSON.parse(dataElement.textContent.trim());
+    console.log("✅ Leader data loaded:", squadData);
+  } catch (error) {
+    console.error("❌ CRITICAL ERROR: Failed to parse leader data.");
+    console.error("Raw content causing error:", dataElement.textContent);
+    console.error("Error details:", error);
+    alert("Error loading profile data. Check browser console (F12).");
+    return;
+  }
+
+  // Define Open Function
+  window.openLeaderProfile = function(name) {
+    console.log("🔍 Searching for:", name);
+    const data = squadData.find(l => l.name === name);
+
+    if (!data) {
+      console.error("❌ Leader not found in data:", name);
+      return;
+    }
+
+    console.log("✅ Found data:", data);
+
+    // --- 1. Populate Basic Fields ---
+    document.getElementById('modal-name').innerText = data.name;
+    document.getElementById('modal-role').innerText = data.role;
+    document.getElementById('modal-img').src = data.image;
+    document.getElementById('modal-primary').innerText = data.primary || "Unknown";
+    document.getElementById('modal-stratagem').innerText = data.stratagem || "Unknown";
+    document.getElementById('modal-missions').innerText = data.missions || "0";
+    document.getElementById('modal-kd').innerText = data.kd || "0.0";
+    document.getElementById('modal-specialty').innerText = data.specialty || "None";
+
+    // --- 2. Populate Bio (NEW) ---
+    const bioElement = document.getElementById('modal-bio');
+    if (bioElement) {
+      bioElement.innerText = data.bio || "No service record available.";
+    }
+
+    // --- 3. Populate Medals (NEW) ---
+    const medalsContainer = document.getElementById('modal-medals');
+    if (medalsContainer && data.medals) {
+      medalsContainer.innerHTML = ''; // Clear old content
+      data.medals.forEach(medal => {
+        const badge = document.createElement('span');
+        badge.className = 'medal-badge';
+        badge.innerText = medal;
+        medalsContainer.appendChild(badge);
+      });
+    } else if (medalsContainer) {
+      medalsContainer.innerHTML = '<span style="color:#666; font-style:italic;">No decorations recorded.</span>';
+    }
+
+    // --- 4. Show Modal Animation ---
+    const modal = document.getElementById('leader-modal');
+    modal.style.display = 'flex';
+
+    // Force browser reflow to ensure transition triggers
+    void modal.offsetWidth;
+
+    modal.style.opacity = '1';
+    modal.querySelector('.modal-terminal').style.transform = 'scale(1)';
+
+    // Prevent background scrolling
+    document.body.style.overflow = 'hidden';
+  };
+
+  // Define Close Function
+  window.closeLeaderProfile = function(event) {
+    // Only close if clicking the overlay background or the X button
+    if (event.target.id === 'leader-modal' || event.target.classList.contains('modal-close')) {
+      const modal = document.getElementById('leader-modal');
+
+      // Fade out
+      modal.style.opacity = '0';
+      modal.querySelector('.modal-terminal').style.transform = 'scale(0.9)';
+
+      // Wait for transition to finish before hiding display
+      setTimeout(() => {
+        modal.style.display = 'none';
+        document.body.style.overflow = 'auto'; // Restore scrolling
+        console.log("✅ Modal closed, clicks restored.");
+      }, 300); // Must match CSS transition time
+    }
+  };
+
+  // Escape Key Listener
+  document.addEventListener('keydown', (e) => {
+    if (e.key === "Escape") {
+      const modal = document.getElementById('leader-modal');
+      if (modal.style.display === 'flex') {
+        // Simulate a click on the overlay to trigger close logic
+        window.closeLeaderProfile({ target: { id: 'leader-modal' } });
+      }
+    }
+  });
+});

data/assets/main.scss

@@ -0,0 +1,7 @@
+---
+---
+@import "variables";
+@import "base";
+@import "layout";
+@import "components";
+@import "sidebar";