Spaces:

ReikerXx
/

Me

Running

App Files Files Community

Reaperxxxx commited on Jun 18

Commit

a504181

verified ·

1 Parent(s): be14b95

Update index.html

Browse files

Files changed (1) hide show

index.html +388 -19

index.html CHANGED Viewed

@@ -1,19 +1,388 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Reiker's Links | CodeNest</title>
+  <style>
+    :root {
+      --glass-bg: rgba(255, 255, 255, 0.08);
+      --glass-border: rgba(255, 255, 255, 0.1);
+      --glass-shadow: rgba(0, 0, 0, 0.2);
+      --accent-color: #58a6ff;
+      --accent-glow: rgba(88, 166, 255, 0.5);
+      --text-color: rgba(255, 255, 255, 0.9);
+      --secondary-text: rgba(255, 255, 255, 0.6);
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      background-color: #000;
+      color: var(--text-color);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      min-height: 100vh;
+      padding: 40px 20px;
+      position: relative;
+      overflow-x: hidden;
+    }
+    body::before {
+      content: "";
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background:
+        radial-gradient(circle at 20% 20%, rgba(88, 166, 255, 0.15), transparent 40%),
+        radial-gradient(circle at 80% 80%, rgba(255, 100, 200, 0.15), transparent 40%);
+      z-index: -1;
+    }
+    .container {
+      max-width: 500px;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 24px;
+      position: relative;
+      z-index: 1;
+    }
+    .header {
+      text-align: center;
+      margin-bottom: 20px;
+      position: relative;
+    }
+    h1 {
+      color: var(--text-color);
+      font-size: 2.5rem;
+      font-weight: 700;
+      margin-bottom: 10px;
+      background: linear-gradient(135deg, #fff, #58a6ff);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      position: relative;
+    }
+    h1::after {
+      content: "🌐";
+      position: absolute;
+      top: -15px;
+      right: -30px;
+      font-size: 1.5rem;
+      -webkit-text-fill-color: initial;
+      filter: drop-shadow(0 0 10px var(--accent-glow));
+      animation: float 3s ease-in-out infinite;
+    }
+    .subtitle {
+      color: var(--secondary-text);
+      font-size: 1rem;
+      margin-bottom: 30px;
+    }
+    .links {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      width: 100%;
+    }
+    .link {
+      display: flex;
+      align-items: center;
+      padding: 16px 24px;
+      background: var(--glass-bg);
+      border: 1px solid var(--glass-border);
+      border-radius: 16px;
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      color: var(--text-color);
+      text-decoration: none;
+      font-weight: 500;
+      font-size: 1rem;
+      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+      position: relative;
+      overflow: hidden;
+      box-shadow: 0 4px 20px var(--glass-shadow);
+    }
+    .link:hover {
+      transform: translateY(-2px) scale(1.02);
+      background: rgba(255, 255, 255, 0.12);
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    }
+    .link:active {
+      transform: translateY(1px) scale(0.98);
+    }
+    .link::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.2),
+        transparent
+      );
+      transition: 0.5s;
+    }
+    .link:hover::before {
+      left: 100%;
+    }
+    .link-icon {
+      font-size: 1.5rem;
+      margin-right: 16px;
+      min-width: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .link-text {
+      flex: 1;
+    }
+    .link-arrow {
+      opacity: 0;
+      transform: translateX(-10px);
+      transition: all 0.3s ease;
+    }
+    .link:hover .link-arrow {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    .footer {
+      margin-top: 40px;
+      text-align: center;
+      color: var(--secondary-text);
+      font-size: 0.9rem;
+      position: relative;
+      padding: 16px;
+      background: var(--glass-bg);
+      border-radius: 12px;
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+      border: 1px solid var(--glass-border);
+      width: 100%;
+      max-width: 300px;
+    }
+    .heart {
+      display: inline-block;
+      color: #ff6b6b;
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+    .blob {
+      position: fixed;
+      border-radius: 50%;
+      filter: blur(80px);
+      opacity: 0.4;
+      z-index: -1;
+    }
+    .blob-1 {
+      width: 300px;
+      height: 300px;
+      background: rgba(88, 166, 255, 0.4);
+      top: -100px;
+      right: -100px;
+      animation: blob-move-1 20s infinite alternate ease-in-out;
+    }
+    .blob-2 {
+      width: 250px;
+      height: 250px;
+      background: rgba(255, 107, 107, 0.4);
+      bottom: -50px;
+      left: -100px;
+      animation: blob-move-2 15s infinite alternate ease-in-out;
+    }
+    @keyframes pulse {
+      0%, 100% { transform: scale(1); }
+      50% { transform: scale(1.2); }
+    }
+    @keyframes float {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-10px); }
+    }
+    @keyframes blob-move-1 {
+      0% { transform: translate(0, 0) scale(1); }
+      100% { transform: translate(-100px, 100px) scale(1.2); }
+    }
+    @keyframes blob-move-2 {
+      0% { transform: translate(0, 0) scale(1); }
+      100% { transform: translate(100px, -50px) scale(1.3); }
+    }
+    /* Mobile optimizations */
+    @media (max-width: 600px) {
+      h1 {
+        font-size: 2rem;
+      }
+      .link {
+        padding: 14px 20px;
+      }
+      .blob-1, .blob-2 {
+        opacity: 0.3;
+      }
+    }
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --glass-bg: rgba(255, 255, 255, 0.08);
+        --glass-border: rgba(255, 255, 255, 0.1);
+      }
+    }
+    /* Light mode support */
+    @media (prefers-color-scheme: light) {
+      :root {
+        --glass-bg: rgba(255, 255, 255, 0.2);
+        --glass-border: rgba(255, 255, 255, 0.3);
+        --text-color: rgba(0, 0, 0, 0.8);
+        --secondary-text: rgba(0, 0, 0, 0.6);
+      }
+      body {
+        background-color: #000;
+      }
+      h1 {
+        background: linear-gradient(135deg, #000, #0066cc);
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="blob blob-1"></div>
+  <div class="blob blob-2"></div>
+  <div class="container">
+    <div class="header">
+      <h1>Reiker's Links</h1>
+      <p class="subtitle">Connect with CodeNest services</p>
+    </div>
+    <div class="links">
+      <a href="https://CodeNest.zone.id" target="_blank" class="link">
+        <span class="link-icon">🛠️</span>
+        <span class="link-text">Free Pterodactyl Panel</span>
+        <span class="link-arrow">→</span>
+      </a>
+      <a href="https://t.me/reikerx" target="_blank" class="link">
+        <span class="link-icon">📢</span>
+        <span class="link-text">Telegram Channel</span>
+        <span class="link-arrow">→</span>
+      </a>
+      <a href="https://GitHub.com/ReirLair/Levi-Md" target="_blank" class="link">
+        <span class="link-icon">🤖</span>
+        <span class="link-text">WhatsApp Bot (Levi-Md)</span>
+        <span class="link-arrow">→</span>
+      </a>
+      <a href="https://t.me/reixxverifybot" target="_blank" class="link">
+        <span class="link-icon">💳</span>
+        <span class="link-text">CodeNest Payment Bot</span>
+        <span class="link-arrow">→</span>
+      </a>
+      <a href="https://whatsapp.com/channel/0029VasyE7u2v1Ijck0HDf2C" target="_blank" class="link">
+        <span class="link-icon">📱</span>
+        <span class="link-text">WhatsApp Channel</span>
+        <span class="link-arrow">→</span>
+      </a>
+      <a href="https://t.me/ikjava" target="_blank" class="link">
+        <span class="link-icon">👤</span>
+        <span class="link-text">Telegram Username</span>
+        <span class="link-arrow">→</span>
+      </a>
+      <a href="https://reikerapi.zone.id" target="_blank" class="link">
+        <span class="link-icon">📡</span>
+        <span class="link-text">Free Developer APIs</span>
+        <span class="link-arrow">→</span>
+      </a>
+    </div>
+    <div class="footer">
+      Made with <span class="heart">❤️</span> by Reiker
+    </div>
+  </div>
+  <script>
+    // Add interactive liquid effect on mouse movement
+    document.addEventListener('mousemove', function(e) {
+      const blobs = document.querySelectorAll('.blob');
+      const x = e.clientX / window.innerWidth;
+      const y = e.clientY / window.innerHeight;
+      blobs.forEach((blob, index) => {
+        const offsetX = (index === 0) ? -x * 20 : x * 20;
+        const offsetY = (index === 0) ? -y * 20 : y * 20;
+        blob.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
+      });
+    });
+    // Add touch interaction for mobile
+    document.addEventListener('touchmove', function(e) {
+      if (e.touches.length > 0) {
+        const touch = e.touches[0];
+        const x = touch.clientX / window.innerWidth;
+        const y = touch.clientY / window.innerHeight;
+        const blobs = document.querySelectorAll('.blob');
+        blobs.forEach((blob, index) => {
+          const offsetX = (index === 0) ? -x * 10 : x * 10;
+          const offsetY = (index === 0) ? -y * 10 : y * 10;
+          blob.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
+        });
+      }
+    });
+    // Add subtle animation to links on page load
+    document.addEventListener('DOMContentLoaded', function() {
+      const links = document.querySelectorAll('.link');
+      links.forEach((link, index) => {
+        link.style.opacity = '0';
+        link.style.transform = 'translateY(20px)';
+        setTimeout(() => {
+          link.style.transition = 'all 0.5s cubic-bezier(0.16, 1, 0.3, 1)';
+          link.style.opacity = '1';
+          link.style.transform = 'translateY(0)';
+        }, 100 + (index * 100));
+      });
+    });
+  </script>
+</body>
+</html>