Spaces:

Cairo303
/

anycoder-bc1ac3dc

Running

App Files Files Community

Cairo303 commited on Dec 6, 2025

Commit

55d002c

verified ·

1 Parent(s): a1fa4f0

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +199 -379

index.html CHANGED Viewed

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Underworld Chronicles - Join the Syndicate</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
     /* Underworld Crime UI Framework */
@@ -73,7 +73,7 @@
     .uc-logo {
       font-size: 2.3rem;
       font-weight: bold;
-      background: linear-gradient(45deg, var(--gold), var(--light-gold));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
@@ -149,7 +149,7 @@
     }
     .uc-btn-primary {
-      background: linear-gradient(45deg, var(--gold), var(--light-gold));
       color: var(--charcoal);
     }
@@ -185,7 +185,7 @@
       font-size: 4rem;
       margin-bottom: 1rem;
       font-family: 'Impact', fantasy;
-      background: linear-gradient(45deg, var(--gold), var(--light-gold));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-shadow: 0 0 25px rgba(212, 175, 55, 0.7);
@@ -207,7 +207,7 @@
       text-align: center;
       font-size: 3rem;
       margin-bottom: 3rem;
-      background: linear-gradient(45deg, var(--gold), var(--light-gold));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
@@ -696,272 +696,90 @@
       background: linear-gradient(transparent, rgba(212, 175, 55, 0.1);
     }
-    /* Main content */
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 2rem;
       display: flex;
-      flex-direction: column;
       align-items: center;
-      min-height: 100vh;
-      position: relative;
-      z-index: 1;
     }
-    .header {
-      text-align: center;
-      margin-bottom: 2rem;
-      width: 100%;
     }
-    .logo {
-      font-size: 4rem;
       font-weight: 900;
-      text-transform: uppercase;
-      margin-bottom: 1rem;
-      background: linear-gradient(45deg, var(--gold), var(--light-gold)));
       -webkit-background-clip: text;
-      background-clip: text;
-      color: transparent;
-      text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
-      letter-spacing: 3px;
-      animation: glow 2s ease-in-out infinite alternate;
     }
-    .tagline {
-      font-size: 1.5rem;
       color: var(--light-gold);
-      text-shadow: 0 0 5px var(--light-gold);
-      margin-bottom: 0.5rem;
-      font-style: italic;
     }
-    .subtitle {
-      font-size: 1rem;
-      color: #aaa;
       max-width: 600px;
-      margin: 0 auto 2rem;
-      line-height: 1.5;
     }
-    /* Signup form */
-    .signup-container {
-      background: rgba(10, 10, 10, 0.8);
-      border: 2px solid var(--gold);
-      border-radius: 10px;
-      padding: 2rem;
-      width: 100%;
       max-width: 500px;
-      box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
-      position: relative;
-      overflow: hidden;
-    }
-    .signup-container::before {
-      content: '';
-      position: absolute;
-      top: -10px;
-      left: -10px;
-      right: -10px;
-      bottom: -10px;
-      background: linear-gradient(45deg, var(--gold), var(--light-gold)));
-      z-index: -1;
-      border-radius: 12px;
-      opacity: 0.3;
-      animation: borderGlow 3s linear infinite;
-    }
-    .form-title {
-      text-align: center;
-      font-size: 1.8rem;
-      margin-bottom: 1.5rem;
-      color: var(--light-gold);
-      text-shadow: 0 0 5px var(--light-gold);
-    }
-    .form-group {
-      margin-bottom: 1.5rem;
       position: relative;
     }
-    .form-label {
-      display: block;
-      margin-bottom: 0.5rem;
-      color: var(--light-gold);
-      font-weight: 600;
-    }
-    .form-input {
       width: 100%;
-      padding: 12px 15px;
-      background: rgba(30, 30, 30, 0.8);
-      border: 1px solid rgba(212, 175, 55, 0.35);
-      border-radius: 5px;
-      color: white;
       font-size: 1rem;
-      transition: all 0.3s;
     }
-    .form-input:focus {
-      outline: none;
-      border-color: var(--gold);
-      box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
-    }
-    .select-wrapper {
-      position: relative;
-    }
-    .select-wrapper::after {
-      content: '\f078';
-      font-family: 'Font Awesome 6 Free';
-      font-weight: 900;
       position: absolute;
-      right: 15px;
       top: 50%;
       transform: translateY(-50%);
-      color: var(--gold);
-      pointer-events: none;
-    }
-    .form-select {
-      width: 100%;
-      padding: 12px 15px;
-      background: rgba(30, 30, 30, 0.8);
-      border: 1px solid rgba(212, 175, 55, 0.35);
-      border-radius: 5px;
-      color: white;
-      font-size: 1rem;
-      appearance: none;
-      cursor: pointer;
-    }
-    .form-select:focus {
-      outline: none;
-      border-color: var(--gold);
-      box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
-    }
-    .checkbox-group {
-      display: flex;
-      align-items: center;
-      margin-bottom: 1.5rem;
-    }
-    .checkbox-input {
-      margin-right: 10px;
-      accent-color: var(--gold);
-    }
-    .checkbox-label {
-      color: #ccc;
-      font-size: 0.9rem;
-    }
-    .checkbox-label a {
-      color: var(--light-gold);
-      text-decoration: none;
-    }
-    .checkbox-label a:hover {
-      text-decoration: underline;
-    }
-    .submit-btn {
-      width: 100%;
-      padding: 15px;
       background: linear-gradient(45deg, var(--gold), var(--dark-gold)));
       border: none;
-      border-radius: 5px;
-      color: white;
-      font-size: 1.2rem;
       font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 1px;
       cursor: pointer;
       transition: all 0.3s;
-      position: relative;
-      overflow: hidden;
     }
-    .submit-btn:hover {
       background: linear-gradient(45deg, var(--dark-gold), var(--gold)));
-      box-shadow: 0 0 15px rgba(212, 175, 55, 0.7);
-      transform: translateY(-2px);
-    }
-    .submit-btn:active {
-      transform: translateY(0);
-    }
-    .submit-btn::after {
-      content: '';
-      position: absolute;
-      top: -50%;
-      left: -50%;
-      width: 200%;
-      height: 200%;
-      background: rgba(255, 255, 255, 0.1);
-      transform: rotate(45deg);
-      transition: all 0.5s;
-    }
-    .submit-btn:hover::after {
-      transform: rotate(45deg) translate(10%, 10%);
-    }
-    /* Features section */
-    .features {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));
-      gap: 2rem;
-      margin-top: 3rem;
-      width: 100%;
-    }
-    .feature-card {
-      background: rgba(20, 20, 20, 0.8);
-      border: 1px solid rgba(212, 175, 55, 0.35);
-      border-radius: 8px;
-      padding: 1.5rem;
-      text-align: center;
-      transition: all 0.3s;
-    }
-    .feature-card:hover {
-      border-color: var(--gold);
-      transform: translateY(-5px);
-      box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
-    }
-    .feature-icon {
-      font-size: 2.5rem;
-      color: var(--light-gold);
-      margin-bottom: 1rem;
-    }
-    .feature-title {
-      font-size: 1.2rem;
-      margin-bottom: 0.5rem;
-      color: var(--light-gold);
     }
-    .feature-desc {
-      color: #aaa;
-      font-size: 0.9rem;
-      line-height: 1.4;
-    }
-    /* Animations */
-    @keyframes glow {
-      from {
-        text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
-      }
-      to {
-        text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 30px rgba(212, 175, 55, 0.6);
-      }
     }
     @keyframes flicker {
@@ -994,36 +812,78 @@
       }
     }
-    /* Responsive */
-    @media (max-width: 768px) {
-      .logo {
-        font-size: 2.5rem;
       }
-      .tagline {
-        font-size: 1.2rem;
       }
-      .signup-container {
-        padding: 1.5rem;
       }
-      .features {
-        grid-template-columns: 1fr;
       }
     }
-    @media (max-width: 480px) {
-      .container {
-        padding: 1rem;
       }
-      .logo {
         font-size: 2rem;
       }
-      .signup-container {
-        padding: 1rem;
       }
     }
   </style>
@@ -1049,15 +909,6 @@
     </div>
   </header>
-  <section class="uc-hero">
-    <div class="uc-container">
-      <h1 class="uc-hero-title">UNDERWORLD CHRONICLES</h1>
-      <p class="uc-hero-subtitle">Join the Syndicate. Rule the Streets. Build your criminal empire in this gritty text-based
-        MMORPG.</p>
-      <button class="uc-btn uc-btn-primary uc-pulse"><i class="fas fa-skull"></i> Start Your Reign</button>
-    </div>
-  </section>
   <div class="alley-container">
     <div class="alley-wall left"></div>
     <div class="alley-wall right"></div>
@@ -1065,142 +916,111 @@
     <div class="dripping-effect"></div>
   </div>
-  <div class="container">
-    <header class="header">
-      <h1 class="logo">Underworld Chronicles</h1>
-      <p class="tagline">Join the Syndicate. Rule the Streets.</p>
-      <p class="subtitle">Build your criminal empire in this gritty text-based MMORPG. Forge alliances, pull off heists,
-        and become the most feared name in the underworld.</p>
-    </header>
-    <div class="signup-container">
-      <h2 class="form-title">Create Your Criminal Identity</h2>
-      <form id="signup-form">
-        <div class="form-group">
-          <label class="form-label" for="username">Underworld Alias</label>
-          <input type="text" id="username" class="form-input" placeholder="Enter your criminal name" required>
-        </div>
-        <div class="form-group">
-          <label class="form-label" for="email">Contact (Email)</label>
-          <input type="email" id="email" class="form-input" placeholder="Your secure communication channel" required>
-        </div>
-        <div class="form-group">
-          <label class="form-label" for="password">Secret Code</label>
-          <input type="password" id="password" class="form-input" placeholder="Create your access code" required>
         </div>
-        <div class="form-group">
-          <label class="form-label" for="confirm-password">Verify Secret Code</label>
-          <input type="password" id="confirm-password" class="form-input" placeholder="Confirm your access code" required>
         </div>
-        <div class="form-group">
-          <label class="form-label" for="faction">Choose Your Faction</label>
-          <div class="select-wrapper">
-            <select id="faction" class="form-select" required>
-              <option value="">Select your crew</option>
-              <option value="syndicate">The Syndicate</option>
-              <option value="cartel">Cartel Kings</option>
-              <option value="mafia">Mafia Family</option>
-              <option value="yakuza">Yakuza Clan</option>
-              <option value="freelance">Freelance Operator</option>
-            </select>
           </div>
-        </div>
-        <div class="form-group">
-          <label class="form-label" for="specialty">Criminal Specialty</label>
-          <div class="select-wrapper">
-            <select id="specialty" class="form-select" required>
-              <option value="">Select your expertise</option>
-              <option value="heist">Master Heist Planner</option>
-              <option value="smuggling">Smuggling Operations</option>
-              <option value="enforcement">Enforcement & Protection</option>
-              <option value="cybercrime">Cyber Crime</option>
-              <option value="drugs">Narcotics Distribution</option>
-            </select>
           </div>
-        </div>
-        <div class="checkbox-group">
-          <input type="checkbox" id="terms" class="checkbox-input" required>
-          <label for="terms" class="checkbox-label">
-            I accept the <a href="#">Underworld Code</a> and understand the risks involved in criminal enterprise
-          </label>
-        </div>
-        <button type="submit" class="submit-btn">Join the Underworld</button>
-      </form>
-    </div>
-    <div class="features">
-      <div class="feature-card">
-        <div class="feature-icon">
-          <i class="fas fa-user-secret"></i>
-        </div>
-        <h3 class="feature-title">Build Your Empire</h3>
-        <p class="feature-desc">Start from the bottom and work your way up to become the city's most powerful crime
-          lord.</p>
-      </div>
-      <div class="feature-card">
-        <div class="feature-icon">
-          <i class="fas fa-fist-raised"></i>
-        </div>
-        <h3 class="feature-title">Form Alliances & Rivalries</h3>
-        <p class="feature-desc">Forge powerful alliances or create bitter rivalries in the dangerous underworld.</p>
-      </div>
-      <div class="feature-card">
-        <div class="feature-icon">
-          <i class="fas fa-money-bill-wave"></i>
         </div>
-        <h3 class="feature-title">Execute Lucrative Heists</h3>
-        <p class="feature-desc">Plan and execute high-stakes heists to fund your criminal operations.</p>
       </div>
     </div>
-    <footer class="footer">
-      <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a> | Enter at
-        your own risk</p>
-    </footer>
-  </div>
   <script>
-    document.getElementById('signup-form').addEventListener('submit', function (e) {
-      e.preventDefault();
-      const password = document.getElementById('password').value;
-      const confirmPassword = document.getElementById('confirm-password').value;
-      if (password !== confirmPassword) {
-        alert('Secret codes do not match! Verify your access codes.');
-        return;
-      }
-      // In a real application, this would submit the form to a server
-      alert('Welcome to the Underworld! Your criminal identity is being processed. Check your email for further instructions.');
-      // Reset form
-      this.reset();
-    });
-    // Add some interactive effects
-    document.querySelectorAll('.form-input, .form-select').forEach(element => {
-      element.addEventListener('focus', function () {
-        this.parentElement.classList.add('focused');
       });
-      element.addEventListener('blur', function () {
-        this.parentElement.classList.remove('focused');
       });
-    });
-    // Mobile menu toggle (placeholder functionality)
-    document.querySelector('.uc-btn-login').addEventListener('click', function () {
-      alert('Login functionality would go here');
     });
   </script>
 </body>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>404 - Underworld Chronicles</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
     /* Underworld Crime UI Framework */
     .uc-logo {
       font-size: 2.3rem;
       font-weight: bold;
+      background: linear-gradient(45deg, var(--gold), var(--light-gold)));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
     }
     .uc-btn-primary {
+      background: linear-gradient(45deg, var(--gold), var(--light-gold)));
       color: var(--charcoal);
     }
       font-size: 4rem;
       margin-bottom: 1rem;
       font-family: 'Impact', fantasy;
+      background: linear-gradient(45deg, var(--gold), var(--light-gold)));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-shadow: 0 0 25px rgba(212, 175, 55, 0.7);
       text-align: center;
       font-size: 3rem;
       margin-bottom: 3rem;
+      background: linear-gradient(45deg, var(--gold), var(--light-gold)));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
       background: linear-gradient(transparent, rgba(212, 175, 55, 0.1);
     }
+    /* 404 Page Specific Styles */
+    .uc-error-page {
+      min-height: 100vh;
       display: flex;
       align-items: center;
+      justify-content: center;
+      padding-top: 120px;
+      padding-bottom: 3rem;
+      text-align: center;
     }
+    .uc-error-content {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 2rem;
     }
+    .uc-error-number {
+      font-size: 12rem;
       font-weight: 900;
+      background: linear-gradient(45deg, var(--error), var(--warning)));
       -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-shadow: 0 0 30px rgba(231, 76, 60, 0.5);
+      margin-bottom: 1rem;
+      line-height: 1;
+      font-family: 'Impact', fantasy;
     }
+    .uc-error-title {
+      font-size: 2.5rem;
       color: var(--light-gold);
+      margin-bottom: 1.5rem;
+      text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
     }
+    .uc-error-message {
+      font-size: 1.2rem;
       max-width: 600px;
+      margin: 0 auto 2.5rem;
+      color: var(--platinum);
+      line-height: 1.6;
     }
+    .uc-error-search {
       max-width: 500px;
+      margin: 2rem auto;
       position: relative;
     }
+    .uc-error-search-input {
       width: 100%;
+      padding: 1rem 1.5rem;
+      border-radius: 50px;
+      border: 2px solid var(--gold);
+      background: rgba(0, 0, 0, 0.4);
+      color: var(--platinum);
       font-size: 1rem;
     }
+    .uc-error-search-btn {
       position: absolute;
+      right: 5px;
       top: 50%;
       transform: translateY(-50%);
       background: linear-gradient(45deg, var(--gold), var(--dark-gold)));
       border: none;
+      border-radius: 50px;
+      padding: 0.8rem 1.5rem;
+      color: var(--charcoal);
       font-weight: 700;
       cursor: pointer;
       transition: all 0.3s;
     }
+    .uc-error-search-btn:hover {
       background: linear-gradient(45deg, var(--dark-gold), var(--gold)));
     }
+    .uc-error-actions {
+      display: flex;
+      gap: 1.5rem;
+      justify-content: center;
+      margin-top: 2rem;
     }
     @keyframes flicker {
       }
     }
+    /* Enhanced 404 animations */
+    @keyframes float {
+      0%,
+      100% {
+        transform: translateY(0);
+      }
+      50% {
+        transform: translateY(-10px);
       }
+    }
+    .uc-float {
+      animation: float 3s ease-in-out infinite;
+    }
+    @keyframes shake {
+      0%,
+      100% {
+        transform: translateX(0);
       }
+      10%,
+      30%,
+      50%,
+      70%,
+      90% {
+        transform: translateX(-5px);
       }
+      20%,
+      40%,
+      60%,
+      80% {
+        transform: translateX(5px);
       }
     }
+    .uc-shake {
+      animation: shake 0.5s ease-in-out;
+    }
+    /* Responsive adjustments for 404 page */
+    @media (max-width: 768px) {
+      .uc-error-number {
+        font-size: 8rem;
       }
+      .uc-error-title {
         font-size: 2rem;
       }
+      .uc-error-actions {
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+      }
+      .uc-error-search {
+        max-width: 350px;
+      }
+    }
+    @media (max-width: 480px) {
+      .uc-error-number {
+        font-size: 6rem;
+      }
+      .uc-error-title {
+        font-size: 1.5rem;
       }
     }
   </style>
     </div>
   </header>
   <div class="alley-container">
     <div class="alley-wall left"></div>
     <div class="alley-wall right"></div>
     <div class="dripping-effect"></div>
   </div>
+  <section class="uc-error-page">
+    <div class="uc-container">
+      <div class="uc-error-content">
+        <div class="uc-error-number uc-float">404</div>
+        <h1 class="uc-error-title">TERRITORY LOST</h1>
+        <p class="uc-error-message">This turf has been claimed by a rival syndicate. The path you're looking for doesn't exist in our territory. Time to retreat and regroup.</p>
+        <div class="uc-error-search">
+          <input type="text" class="uc-error-search-input" placeholder="Search for safe routes in the underworld...">
+          <button class="uc-error-search-btn"><i class="fas fa-search"></i></button>
         </div>
+        <div class="uc-error-actions">
+          <button class="uc-btn uc-btn-primary" onclick="window.location.href='#'">
+            <i class="fas fa-home"></i> Return to Base
+          </button>
+          <button class="uc-btn uc-btn-outline" onclick="window.location.href='#'">
+            <i class="fas fa-map"></i> View Territory Map
+          </button>
+          <button class="uc-btn uc-btn-outline" onclick="window.location.href='#'">
+            <i class="fas fa-headset"></i> Contact Support
+          </button>
         </div>
+        <div class="uc-grid-3" style="margin-top: 3rem;">
+          <div class="uc-card">
+            <div class="uc-card-body">
+              <div class="uc-feature-icon">
+                <i class="fas fa-exclamation-triangle"></i>
+              </div>
+              <h3>Territory Alert</h3>
+              <p>This area is under surveillance by rival factions. Proceed with caution.</p>
+            </div>
           </div>
+          <div class="uc-card">
+            <div class="uc-card-body">
+              <div class="uc-feature-icon">
+                <i class="fas fa-user-secret"></i>
+              </div>
+              <h3>Underworld Tip</h3>
+              <p>Always verify your routes. Rivals often set up decoys to trap unsuspecting operatives.</p>
+            </div>
           </div>
+          <div class="uc-card">
+            <div class="uc-card-body">
+              <div class="uc-feature-icon">
+                <i class="fas fa-shield-alt"></i>
+              </div>
+              <h3>Security Protocol</h3>
+              <p>Our intelligence suggests this location has been compromised. Avoid at all costs.</p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
+  </section>
+  <footer class="uc-footer">
+    <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a> | Enter at your own risk</p>
+  </footer>
   <script>
+    // Add interactive effects for the 404 page
+    document.addEventListener('DOMContentLoaded', function() {
+      const errorNumber = document.querySelector('.uc-error-number');
+      // Add hover effect to error number
+      errorNumber.addEventListener('mouseenter', function() {
+        this.classList.add('uc-shake');
       });
+      errorNumber.addEventListener('animationend', function() {
+        this.classList.remove('uc-shake');
+      });
+      // Search functionality
+      const searchInput = document.querySelector('.uc-error-search-input');
+      const searchBtn = document.querySelector('.uc-error-search-btn');
+      searchBtn.addEventListener('click', function() {
+        if (searchInput.value.trim() !== '') {
+          alert('Searching underworld for: ' + searchInput.value);
+        } else {
+          searchInput.focus();
+        }
+      });
+      searchInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+          alert('Searching underworld for: ' + searchInput.value);
+        }
+      });
+      // Add pulse effect to buttons on load
+      const buttons = document.querySelectorAll('.uc-btn');
+      buttons.forEach((btn, index) => {
+        setTimeout(() => {
+          btn.classList.add('uc-pulse');
+          setTimeout(() => {
+            btn.classList.remove('uc-pulse');
+          }, 2000);
+      }, index * 500);
       });
     });
   </script>
 </body>