---
layout: new
title: "Welcome to LTG"
permalink: /
---
<style>
  /* Centering Container */
  .landing-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh; 
    padding: 0 20px; /* Slight margin on left/right */
  }

  /* Keep the grid constrained so it doesn't stretch too far */
  .landing-grid {
    width: 100%;
    max-width: 1400px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }

  .feature-panel { display: flex; flex-direction: column; height: 100%; }
  .feature-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; gap: 10px; }
  .feature-title { margin: 0; font-size: 1.4rem; display: flex; align-items: center; gap: 10px; }
  
  /* Expandable Details Styling */
  .expandable-info { margin-top: auto; border-top: 1px dashed var(--border); padding-top: 15px; }
  .expandable-info summary { cursor: pointer; font-weight: bold; color: var(--blue); outline: none; list-style: none; display: flex; align-items: center; justify-content: space-between; font-size: 0.9rem; user-select: none; }
  .expandable-info summary::-webkit-details-marker { display: none; }
  .expandable-info summary::after { content: "expand_more"; font-family: "Material Symbols Outlined"; font-size: 20px; transition: transform 0.2s; }
  .expandable-info[open] summary::after { transform: rotate(180deg); }
  .expandable-info p { margin: 15px 0 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--gray); }
</style>

<div class="landing-wrapper">
  <div class="landing-grid">
    
    <div class="panel feature-panel">
      <div class="feature-content">
        <h2 class="feature-title"><span class="material-symbols-outlined blue">folder_open</span> Video Directory</h2>
        <p style="margin: 0; color: var(--text);">Browse our entire structured catalog of Gameplay Series.</p>
        
        <a href="/yt/" class="btn btn-blue" style="text-align: center; margin-top: 10px;">Browse Games</a>

        <details class="expandable-info">
          <summary>About the Directory</summary>
          <p>Organizes my YouTube catalog by Game, providing deep analytics on Playlists. It gives the ability to sort by a variety of metrics and game filtering by genre.</p>
        </details>
      </div>
    </div>

    <div class="panel feature-panel">
      <div class="feature-content">
        <h2 class="feature-title"><span class="material-symbols-outlined red">smart_display</span> Custom Watch Player</h2>
        <p style="margin: 0; color: var(--text);">Paste a URL below to watch without the bloat.</p>

        <div style="margin: 10px 0;">
          {% include search.html %}
        </div>

        <details class="expandable-info" style="margin-top: auto; padding-top: 15px; border-top: none;">
          <summary>View Player Capabilities</summary>
          <p>Drop a YouTube VOD, or a Twitch, YouTube, or Kick livestream link above.<br><br>
          <strong>Features:</strong><br>
          • <strong>Ad-Free Experience:</strong> Currently seems to play videos without ads(?)<br>
          • <strong>Advanced Controls:</strong> Built-in playback speed control and theater mode.<br>
          • <strong>Keyboard Shortcuts:</strong> Press <strong>'S'</strong> while watching to view the full list of hotkeys.</p>
        </details>
      </div>
    </div>

    <div class="panel feature-panel">
      <div class="feature-content">
        <h2 class="feature-title"><span class="material-symbols-outlined orange">forum</span> Contextual Chat</h2>
        <p style="margin: 0; color: var(--text);">A persistent chat system built directly into every page of the site.</p>

        <details class="expandable-info" style="margin-top: auto; padding-top: 15px; border-top: none;">
          <summary>Chat Features & Filtering</summary>
          <p>Filter conversations by Global, General, specific Game Series, Live Directory, or individual Streamers.<br><br>
          Easy video timestamps with resume, automatic page linking.</p>
        </details>
      </div>
    </div>

    <div class="panel feature-panel">
      <div class="feature-content">
        <h2 class="feature-title"><span class="material-symbols-outlined purple">sensors</span> Live Directory</h2>
        <p style="margin: 0; color: var(--text);">Use the sidebar to track when your favorite streamers go live.</p>
        
        <a href="/home/" class="btn btn-gray" style="text-align: center; margin-top: 10px;">Customize Dashboard</a>

        <details class="expandable-info">
          <summary>Tracking & Requests</summary>
          <p>The sidebar polls Twitch, YouTube, and Kick every 5 minutes to show you who is currently live. You can customize exactly which streamers you want to track by visiting your Home dashboard.<br><br>
          <strong>Want a streamer added?</strong> Drop a request in Chat.</p>
        </details>
      </div>
    </div>

  </div>
</div>