File: /var/www/html/tmpr/..//tmpr/../indexg.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GLITCH GANG - Tech Enthusiasts & Digital Creators Community</title>
<meta name="description" content="Join Glitch Gang, a vibrant community of tech enthusiasts creating cutting-edge content, tutorials, and reviews. Explore hardware, software, and everything tech with passionate creators.">
<meta name="keywords" content="tech community, digital creators, hardware reviews, software tutorials, tech enthusiasts, glitch gang, technology content">
<meta name="author" content="Glitch Gang">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://glitchgang.com/">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://glitchgang.com/">
<meta property="og:title" content="GLITCH GANG - Tech Enthusiasts & Digital Creators Community">
<meta property="og:description" content="Join Glitch Gang, a vibrant community of tech enthusiasts creating cutting-edge content, tutorials, and reviews. Explore hardware, software, and everything tech with passionate creators.">
<meta property="og:image" content="https://glitchgang.com/images/gold.png">
<meta property="og:site_name" content="Glitch Gang">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://glitchgang.com/">
<meta property="twitter:title" content="GLITCH GANG - Tech Enthusiasts & Digital Creators Community">
<meta property="twitter:description" content="Join Glitch Gang, a vibrant community of tech enthusiasts creating cutting-edge content, tutorials, and reviews. Explore hardware, software, and everything tech with passionate creators.">
<meta property="twitter:image" content="https://glitchgang.com/images/gold.png">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Roboto:wght@300;400;500;700&family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="icon" href="images/gg-logo.svg" type="image/svg+xml">
<link rel="alternate icon" href="images/gold.png" type="image/png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Glitch Gang",
"url": "https://glitchgang.com",
"logo": "https://glitchgang.com/images/gold.png",
"description": "A vibrant community of tech enthusiasts creating cutting-edge content, tutorials, and reviews.",
"sameAs": [
"https://twitter.com/glitchgang",
"https://youtube.com/glitchgang"
],
"contactPoint": {
"@type": "ContactPoint",
"contactType": "customer service",
"email": "contact@glitchgang.com"
}
}
</script>
</head>
<body>
<!-- Loading Screen -->
<div id="loading-screen" class="loading-screen">
<div class="loading-content">
<div class="glitch-loader">
<div class="glitch-text" data-text="GLITCH GANG">GLITCH GANG</div>
</div>
<div class="loading-bar">
<div class="loading-progress"></div>
</div>
<div class="loading-text">Initializing...</div>
</div>
</div>
<div class="container">
<!-- Particle Background -->
<div id="particles-container" class="particles-container"></div>
<!-- Navigation -->
<header>
<nav>
<div class="logo">
<h1>GLITCH GANG</h1>
</div>
<div class="nav-links">
<a href="index.html" class="active">Home</a>
<a href="content.html">Content</a>
<a href="about.html">About</a>
<a href="projects.html">Projects</a>
<a href="merch.html">Merch</a>
<a href="join.html">Join Us</a>
</div>
<div id="theme-toggle" class="theme-toggle" aria-label="Toggle theme" role="button" tabindex="0">
<i class="fas fa-moon"></i>
</div>
<div class="cta-button">
<a href="join.html" class="btn">Subscribe</a>
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
</nav>
</header>
<!-- Hero Section -->
<section id="home" class="hero hero-left">
<div class="hero-content">
<div class="hero-brand">
<img src="images/gold.png" alt="Glitch Gang Logo" class="gold-logo">
<h1>We Are <span class="highlight">Glitch Gang</span></h1>
</div>
<p>Hacking the matrix with cutting-edge tech content and digital innovation ✨💻🔧🧠</p>
<div class="hero-buttons">
<a href="#content" class="btn primary">Watch Videos ▶️</a>
<a href="#contact" class="btn secondary">Join The Gang 🤜🤛</a>
</div>
</div>
</section>
<!-- Channel Section -->
<section id="services" class="services">
<div class="section-header">
<h2>About Our <span class="highlight">Channel</span> 🎬📡</h2>
<p>Tech content created by enthusiasts for enthusiasts</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-laptop"></i>
</div>
<h3>Tech Reviews 🔍🧪</h3>
<p>In-depth analysis and honest opinions on the latest hardware, peripherals, and tech gadgets.</p>
<a href="#" class="learn-more">Watch Reviews <i class="fas fa-arrow-right"></i></a>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-comment-alt"></i>
</div>
<h3>Reviewer Reviews 🗣️⭐</h3>
<p>We review other tech reviewers to help you find the most trustworthy sources in tech media.</p>
<a href="#" class="learn-more">Watch Series <i class="fas fa-arrow-right"></i></a>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-tools"></i>
</div>
<h3>DIY Tech Projects</h3>
<p>Step-by-step guides for building, modding, and upgrading your tech with our weekly tutorials.</p>
<a href="#" class="learn-more">See Projects <i class="fas fa-arrow-right"></i></a>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-gamepad"></i>
</div>
<h3>Gaming Content</h3>
<p>Game reviews, hardware benchmarks, and optimization guides for the ultimate gaming experience.</p>
<a href="#" class="learn-more">Game On <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about">
<div class="about-content">
<div class="section-header">
<h2>About <span class="highlight">Glitch Gang</span></h2>
<p>Tech enthusiasts creating content for the community</p>
</div>
<p class="about-text">
Glitch Gang is a collective of tech enthusiasts passionate about hardware, software, and everything in between. We create videos, tutorials, and reviews to help our community stay informed about the latest tech trends and innovations.
</p>
<div class="about-features">
<div class="feature">
<i class="fas fa-check-circle"></i>
<span>Weekly Tech Content</span>
</div>
<div class="feature">
<i class="fas fa-check-circle"></i>
<span>Community-Driven Projects</span>
</div>
<div class="feature">
<i class="fas fa-check-circle"></i>
<span>Live Tech Streams</span>
</div>
<div class="feature">
<i class="fas fa-check-circle"></i>
<span>Exclusive Merch</span>
</div>
</div>
</div>
<div class="about-visual">
<div class="security-dashboard">
<!-- Dashboard logo placed inside the rectangle -->
<img src="images/gold.png" alt="Glitch Gang Logo" class="dashboard-logo" loading="lazy" decoding="async">
</div>
</div>
</section>
<!-- Solutions Section -->
<section id="solutions" class="solutions-section">
<div class="container">
<h2 class="section-title">Our Projects</h2>
<p class="section-subtitle">Cutting-edge tech solutions from the Glitch Gang</p>
<div class="solutions-tabs">
<div class="tabs-nav">
<button class="tab-btn active" data-tab="tab1">Hardware Hacks</button>
<button class="tab-btn" data-tab="tab2">Software Mods</button>
<button class="tab-btn" data-tab="tab3">Gaming Rigs</button>
</div>
<div class="tabs-content">
<div class="tab-content active" id="tab1">
<div class="tab-image">
<div class="solution-icon"><i class="fas fa-microchip"></i></div>
</div>
<div class="tab-text">
<h3>Hardware Hacks</h3>
<p>Our custom hardware modifications push technology beyond factory limitations. We specialize in overclocking, custom cooling solutions, and hardware modifications that extract maximum performance from your tech.</p>
<ul>
<li>Custom PC builds with RGB synchronization</li>
<li>Raspberry Pi project implementations</li>
<li>Arduino-based smart home solutions</li>
<li>Retro hardware modernization</li>
</ul>
<a href="#contact" class="btn btn-primary">View Hardware Projects</a>
</div>
</div>
<div class="tab-content" id="tab2">
<div class="tab-image">
<div class="solution-icon"><i class="fas fa-code"></i></div>
</div>
<div class="tab-text">
<h3>Software Mods</h3>
<p>Unlock hidden potential in your software with our custom modifications. From OS optimizations to game mods, we create software solutions that enhance functionality and deliver unique experiences.</p>
<ul>
<li>Custom ROM development for mobile devices</li>
<li>Game modification and asset creation</li>
<li>Performance optimization scripts</li>
<li>Automation tools for productivity</li>
</ul>
<a href="#contact" class="btn btn-primary">View Software Projects</a>
</div>
</div>
<div class="tab-content" id="tab3">
<div class="tab-image">
<div class="solution-icon"><i class="fas fa-gamepad"></i></div>
</div>
<div class="tab-text">
<h3>Gaming Rigs</h3>
<p>Experience gaming like never before with our custom-built gaming rigs. We design and build high-performance systems optimized for gaming, streaming, and content creation with unique Glitch Gang aesthetics.</p>
<ul>
<li>Custom water cooling loops with UV reactive fluid</li>
<li>Overclocked GPUs and CPUs for maximum FPS</li>
<li>Custom case modifications with LED integration</li>
<li>Stream-ready setups with multi-monitor support</li>
</ul>
<a href="#contact" class="btn btn-primary">View Gaming Rigs</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Community feedback removed as requested -->
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="section-header">
<h2>Join <span class="highlight">The Gang</span></h2>
<p>Connect with the Glitch Gang tech community</p>
</div>
<div class="contact-container">
<!-- Messaging form removed as requested -->
<div class="contact-info">
<div class="info-item">
<i class="fas fa-map-marker-alt"></i>
<div>
<h4>Workshop</h4>
<p>42 Hack Street, Tech District, TD 01337</p>
</div>
</div>
<div class="info-item">
<i class="fas fa-gamepad"></i>
<div>
<h4>Discord</h4>
<p>discord.gg/glitchgang</p>
</div>
</div>
<div class="info-item">
<i class="fas fa-envelope"></i>
<div>
<h4>Email</h4>
<p>glitchgang@gmail.com</p>
</div>
</div>
<div class="social-links">
<a href="#" class="social-icon"><i class="fab fa-twitch"></i></a>
<a href="#" class="social-icon"><i class="fab fa-youtube"></i></a>
<a href="#" class="social-icon"><i class="fab fa-discord"></i></a>
<a href="#" class="social-icon"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-top">
<div class="footer-logo">
<div class="logo">
<span class="logo-text">GLITCH<span class="highlight">GANG</span></span>
</div>
<p>Pushing tech beyond its limits</p>
</div>
<div class="footer-links footer-links-grid">
<div class="footer-column">
<h4>Explore</h4>
<ul>
<li><a href="#about">About Us</a></li>
<li><a href="#content">Content</a></li>
<li><a href="#solutions">Projects</a></li>
<li><a href="#contact">Join Us</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Resources</h4>
<ul>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Build Logs</a></li>
<li><a href="#">Code Snippets</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Community</h4>
<ul>
<li><a href="#">Discord Server</a></li>
<li><a href="#">Twitch Streams</a></li>
<li><a href="#">YouTube Channel</a></li>
<li><a href="#">GitHub Repos</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 Glitch Gang.</p>
<p><a href="admin.html" class="footer-admin-link">Admin</a></p>
<p class="footer-tagline"><span class="glitch-text">Hack. Mod. Create.</span></p>
<div class="social-icons">
<a href="#"><i class="fab fa-twitch"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-discord"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
</div>
</footer>
</div>
<!-- Floating Security Status Indicator -->
<div class="security-status">
<div class="status-indicator secure">
<i class="fas fa-lock"></i>
<span>Secure Connection</span>
</div>
</div>
<script src="js/api.js"></script>
<script src="script.js"></script>
<!-- Join Membership Modal -->
<div id="joinModal" class="modal-overlay">
<div class="modal-content">
<button class="close-modal">×</button>
<h2 class="section-title" style="margin-bottom: 1.5rem;">JOIN THE GANG</h2>
<form id="joinForm">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" required placeholder="Enter your alias">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required placeholder="your@email.com">
</div>
<div class="form-group">
<label>Discord ID (Optional)</label>
<input type="text" name="discord" placeholder="User#1234">
</div>
<button type="submit" class="cta-button primary">CONFIRM JOIN ▶</button>
</form>
</div>
</div>
</body>
</html>