Spaces:

matthewspring
/

anycoder-609cacf6

Running

App Files Files Community

matthewspring commited on Feb 5

Commit

e997b3f

verified ·

1 Parent(s): 99fdfda

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +518 -253

index.html CHANGED Viewed

@@ -1,268 +1,533 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Oops! My Fault</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        :root {
-            --primary: #ff6b6b;
-            --secondary: #4ecdc4;
-            --dark: #292f36;
-            --light: #f7fff7;
-            --accent: #ff9f1c;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        body {
-            background: linear-gradient(135deg, var(--light), #e2f3f8);
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: 2rem;
-            color: var(--dark);
-        }
-        header {
-            position: absolute;
-            top: 1rem;
-            left: 1rem;
-        }
-        header a {
-            color: var(--dark);
-            text-decoration: none;
-            font-size: 0.9rem;
-            opacity: 0.7;
-            transition: opacity 0.3s;
-        }
-        header a:hover {
-            opacity: 1;
-        }
-        .container {
-            background-color: white;
-            border-radius: 1.5rem;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-            padding: 3rem;
-            max-width: 600px;
-            width: 100%;
-            text-align: center;
-            position: relative;
-            overflow: hidden;
-        }
-        h1 {
-            color: var(--primary);
-            margin-bottom: 1.5rem;
-            font-size: 2.5rem;
-        }
-        p {
-            font-size: 1.1rem;
-            line-height: 1.6;
-            margin-bottom: 2rem;
-            color: var(--dark);
-        }
-        .emoji {
-            font-size: 4rem;
-            margin-bottom: 1.5rem;
-            animation: bounce 2s infinite;
-        }
-        .buttons {
-            display: flex;
-            gap: 1rem;
-            justify-content: center;
-            flex-wrap: wrap;
-        }
-        button {
-            padding: 0.8rem 1.5rem;
-            border: none;
-            border-radius: 50px;
-            font-size: 1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        .primary-btn {
-            background-color: var(--primary);
-            color: white;
-        }
-        .primary-btn:hover {
-            background-color: #ff5252;
-            transform: translateY(-2px);
-        }
-        .secondary-btn {
-            background-color: var(--secondary);
-            color: white;
-        }
-        .secondary-btn:hover {
-            background-color: #3dbeb6;
-            transform: translateY(-2px);
-        }
-        .confetti {
-            position: absolute;
-            width: 10px;
-            height: 10px;
-            background-color: var(--accent);
-            opacity: 0;
-        }
-        @keyframes bounce {
-            0%, 100% {
-                transform: translateY(0);
-            }
-            50% {
-                transform: translateY(-20px);
-            }
-        }
-        .hidden {
-            display: none;
         }
-        .message-box {
-            background-color: rgba(255, 255, 255, 0.9);
-            padding: 2rem;
-            border-radius: 1rem;
-            margin-top: 2rem;
-            animation: fadeIn 0.5s;
         }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
         }
-        @media (max-width: 600px) {
-            .container {
-                padding: 2rem 1.5rem;
-            }
-            h1 {
-                font-size: 2rem;
-            }
-            .emoji {
-                font-size: 3rem;
-            }
         }
-    </style>
-</head>
-<body>
-    <header>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
-    </header>
-    <div class="container">
-        <div class="emoji">😅</div>
-        <h1>Oops! My Fault</h1>
-        <p>Looks like something went wrong, but don't worry! Feel free to attempt again or try something different.</p>
-        <div class="buttons">
-            <button class="primary-btn" id="tryAgainBtn">Try Again</button>
-            <button class="secondary-btn" id="somethingElseBtn">Do Something Else</button>
-        </div>
-        <div id="tryAgainMessage" class="message-box hidden">
-            <h2>You're Persistent! 🎉</h2>
-            <p>That's the spirit! Trying again often leads to success. Here's a virtual high-five! ✋</p>
-            <div class="emoji">👏</div>
-        </div>
-        <div id="somethingElseMessage" class="message-box hidden">
-            <h2>Great Choice! 🌟</h2>
-            <p>Sometimes a fresh approach is exactly what you need. What would you like to try next?</p>
-            <div class="emoji">🤔</div>
-        </div>
-    </div>
-    <script>
-        const tryAgainBtn = document.getElementById('tryAgainBtn');
-        const somethingElseBtn = document.getElementById('somethingElseBtn');
-        const tryAgainMessage = document.getElementById('tryAgainMessage');
-        const somethingElseMessage = document.getElementById('somethingElseMessage');
-        tryAgainBtn.addEventListener('click', () => {
-            tryAgainMessage.classList.remove('hidden');
-            somethingElseMessage.classList.add('hidden');
-            createConfetti();
-        });
-        somethingElseBtn.addEventListener('click', () => {
-            somethingElseMessage.classList.remove('hidden');
-            tryAgainMessage.classList.add('hidden');
-        });
-        function createConfetti() {
-            const container = document.querySelector('.container');
-            for (let i = 0; i < 50; i++) {
-                const confetti = document.createElement('div');
-                confetti.classList.add('confetti');
-                // Random properties
-                const size = Math.random() * 10 + 5;
-                const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
-                const left = Math.random() * 100;
-                const animationDuration = Math.random() * 3 + 2;
-                confetti.style.width = `${size}px`;
-                confetti.style.height = `${size}px`;
-                confetti.style.backgroundColor = color;
-                confetti.style.left = `${left}%`;
-                confetti.style.top = '-10px';
-                confetti.style.position = 'absolute';
-                confetti.style.borderRadius = '50%';
-                confetti.style.opacity = '1';
-                // Animation
-                confetti.style.animation = `fall ${animationDuration}s linear forwards`;
-                // Keyframes
-                const keyframes = `
-                    @keyframes fall {
-                        to {
-                            transform: translateY(calc(100vh + 20px)) rotate(${Math.random() * 360}deg);
-                            opacity: 0;
-                        }
-                    }
-                `;
-                // Add style if not already present
-                if (!document.getElementById('confettiAnimation')) {
-                    const style = document.createElement('style');
-                    style.id = 'confettiAnimation';
-                    style.innerHTML = keyframes;
-                    document.head.appendChild(style);
-                }
-                container.appendChild(confetti);
-                // Remove confetti after animation
-                setTimeout(() => {
-                    confetti.remove();
-                }, animationDuration * 1000);
-            }
-        }
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Artistic Oops!</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    :root {
+      --primary: #ff6b6b;
+      --secondary: #4ecdc4;
+      --dark: #292f36;
+      --light: #f7fff7;
+      --accent: #ff9f1c;
+      --purple: #9b5de5;
+      --pink: #f15bb5;
+      --yellow: #fee440;
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: 'Comic Neue', cursive, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
+    body {
+      background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+      color: var(--dark);
+      overflow-x: hidden;
+    }
+    header {
+      position: absolute;
+      top: 1rem;
+      left: 1rem;
+      z-index: 100;
+    }
+    header a {
+      color: var(--dark);
+      text-decoration: none;
+      font-size: 0.9rem;
+      opacity: 0.7;
+      transition: all 0.3s;
+      background: rgba(255, 255, 255, 0.7);
+      padding: 0.3rem 0.6rem;
+      border-radius: 20px;
+      backdrop-filter: blur(5px);
+    }
+    header a:hover {
+      opacity: 1;
+      transform: scale(1.05);
+    }
+    .container {
+      background-color: white;
+      border-radius: 1.5rem;
+      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+      padding: 3rem;
+      max-width: 600px;
+      width: 100%;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      backdrop-filter: blur(10px);
+      z-index: 10;
+    }
+    .container::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      background: radial-gradient(circle, rgba(255, 107, 107, 0.1) 0%, rgba(78, 205, 196, 0.1) 100%);
+      z-index: -1;
+      animation: rotate 20s linear infinite;
+    }
+    h1 {
+      color: var(--primary);
+      margin-bottom: 1.5rem;
+      font-size: 2.5rem;
+      text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
+      position: relative;
+      display: inline-block;
+    }
+    h1::after {
+      content: '';
+      position: absolute;
+      bottom: -5px;
+      left: 0;
+      width: 100%;
+      height: 3px;
+      background: linear-gradient(90deg, var(--primary), var(--secondary));
+      border-radius: 3px;
+    }
+    p {
+      font-size: 1.1rem;
+      line-height: 1.6;
+      margin-bottom: 2rem;
+      color: var(--dark);
+    }
+    .emoji {
+      font-size: 4rem;
+      margin-bottom: 1.5rem;
+      animation: bounce 2s infinite, rotateEmoji 5s infinite;
+      display: inline-block;
+      text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
+    }
+    .buttons {
+      display: flex;
+      gap: 1rem;
+      justify-content: center;
+      flex-wrap: wrap;
+      margin-top: 2rem;
+    }
+    button {
+      padding: 0.8rem 1.5rem;
+      border: none;
+      border-radius: 50px;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    button::after {
+      content: '';
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      background: rgba(255, 255, 255, 0.2);
+      transform: rotate(30deg);
+      transition: all 0.3s;
+    }
+    button:hover::after {
+      left: 100%;
+    }
+    .primary-btn {
+      background: linear-gradient(45deg, var(--primary), var(--pink));
+      color: white;
+    }
+    .primary-btn:hover {
+      transform: translateY(-3px) scale(1.05);
+      box-shadow: 0 7px 14px rgba(255, 107, 107, 0.3);
+    }
+    .secondary-btn {
+      background: linear-gradient(45deg, var(--secondary), var(--purple));
+      color: white;
+    }
+    .secondary-btn:hover {
+      transform: translateY(-3px) scale(1.05);
+      box-shadow: 0 7px 14px rgba(78, 205, 196, 0.3);
+    }
+    .confetti {
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      background-color: var(--accent);
+      opacity: 0;
+      z-index: 5;
+    }
+    .floating-shapes {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      z-index: -1;
+      overflow: hidden;
+    }
+    .shape {
+      position: absolute;
+      opacity: 0.6;
+      border-radius: 50%;
+      filter: blur(1px);
+      animation: float 15s infinite linear;
+    }
+    @keyframes bounce {
+      0%,
+      100% {
+        transform: translateY(0) rotate(0deg);
+      }
+      50% {
+        transform: translateY(-20px) rotate(5deg);
+      }
+    }
+    @keyframes rotateEmoji {
+      0% {
+        transform: rotate(0deg);
+      }
+      25% {
+        transform: rotate(5deg);
+      }
+      50% {
+        transform: rotate(0deg);
+      }
+      75% {
+        transform: rotate(-5deg);
+      }
+      100% {
+        transform: rotate(0deg);
+      }
+    }
+    @keyframes rotate {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    @keyframes float {
+      0% {
+        transform: translateY(0) rotate(0deg);
+      }
+      100% {
+        transform: translateY(-100vh) rotate(360deg);
+      }
+    }
+    .hidden {
+      display: none;
+    }
+    .message-box {
+      background-color: rgba(255, 255, 255, 0.95);
+      padding: 2rem;
+      border-radius: 1rem;
+      margin-top: 2rem;
+      animation: fadeIn 0.5s;
+      border: 1px solid rgba(0, 0, 0, 0.05);
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+      position: relative;
+      overflow: hidden;
+    }
+    .message-box::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 5px;
+      height: 100%;
+      background: linear-gradient(to bottom, var(--primary), var(--secondary));
+    }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(20px) scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+    .artistic-border {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: -1;
+    }
+    .border-element {
+      position: absolute;
+      background: var(--accent);
+      opacity: 0.3;
+      border-radius: 50%;
+    }
+    @media (max-width: 600px) {
+      .container {
+        padding: 2rem 1.5rem;
+      }
+      h1 {
+        font-size: 2rem;
+      }
+      .emoji {
+        font-size: 3rem;
+      }
+      .buttons {
+        flex-direction: column;
+      }
+      button {
+        width: 100%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="floating-shapes" id="floatingShapes"></div>
+  <header>
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
+  </header>
+  <div class="container">
+    <div class="emoji">🎨</div>
+    <h1>Creative Oops!</h1>
+    <p>Every mistake is just a happy accident waiting to become something beautiful. Let's turn this oops into art!</p>
+    <div class="buttons">
+      <button class="primary-btn" id="tryAgainBtn">Paint Again</button>
+      <button class="secondary-btn" id="somethingElseBtn">Try New Canvas</button>
+    </div>
+    <div id="tryAgainMessage" class="message-box hidden">
+      <h2>Artistic Persistence! 🖌️</h2>
+      <p>The masters didn't create masterpieces on their first try either. Keep going - your next stroke might be perfect!</p>
+      <div class="emoji">✨</div>
+    </div>
+    <div id="somethingElseMessage" class="message-box hidden">
+      <h2>Fresh Perspective! 🌈</h2>
+      <p>Sometimes the most beautiful art comes from unexpected directions. What creative path will you explore next?</p>
+      <div class="emoji">🧠</div>
+    </div>
+  </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const tryAgainBtn = document.getElementById('tryAgainBtn');
+      const somethingElseBtn = document.getElementById('somethingElseBtn');
+      const tryAgainMessage = document.getElementById('tryAgainMessage');
+      const somethingElseMessage = document.getElementById('somethingElseMessage');
+      const floatingShapes = document.getElementById('floatingShapes');
+      // Create floating background shapes
+      createFloatingShapes(15);
+      tryAgainBtn.addEventListener('click', () => {
+        tryAgainMessage.classList.remove('hidden');
+        somethingElseMessage.classList.add('hidden');
+        createConfetti();
+        createPaintSplatters();
+      });
+      somethingElseBtn.addEventListener('click', () => {
+        somethingElseMessage.classList.remove('hidden');
+        tryAgainMessage.classList.add('hidden');
+        createColorBurst();
+      });
+      function createFloatingShapes(count) {
+        for (let i = 0; i < count; i++) {
+          const shape = document.createElement('div');
+          shape.classList.add('shape');
+          const size = Math.random() * 100 + 50;
+          const colors = ['var(--primary)', 'var(--secondary)', 'var(--accent)', 'var(--purple)', 'var(--pink)'];
+          const color = colors[Math.floor(Math.random() * colors.length)];
+          shape.style.width = `${size}px`;
+          shape.style.height = `${size}px`;
+          shape.style.backgroundColor = color;
+          shape.style.left = `${Math.random() * 100}%`;
+          shape.style.top = `${Math.random() * 100 + 100}%`;
+          shape.style.animationDuration = `${Math.random() * 20 + 10}s`;
+          shape.style.animationDelay = `${Math.random() * 5}s`;
+          floatingShapes.appendChild(shape);
         }
+      }
+      function createConfetti() {
+        const container = document.querySelector('.container');
+        for (let i = 0; i < 100; i++) {
+          const confetti = document.createElement('div');
+          confetti.classList.add('confetti');
+          // Random properties
+          const size = Math.random() * 12 + 3;
+          const color = `hsl(${Math.random() * 360}, 100%, 70%)`;
+          const left = Math.random() * 100;
+          const animationDuration = Math.random() * 3 + 2;
+          confetti.style.width = `${size}px`;
+          confetti.style.height = `${size}px`;
+          confetti.style.backgroundColor = color;
+          confetti.style.left = `${left}%`;
+          confetti.style.top = '-10px';
+          confetti.style.position = 'absolute';
+          confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
+          confetti.style.opacity = '1';
+          // Animation
+          confetti.style.animation = `fall ${animationDuration}s linear forwards`;
+          // Keyframes
+          const keyframes = `
+              @keyframes fall {
+                  to {
+                      transform: translateY(calc(100vh + 20px)) rotate(${Math.random() * 360}deg);
+                      opacity: 0;
+                  }
+              }
+          `;
+          // Add style if not already present
+          if (!document.getElementById('confettiAnimation')) {
+              const style = document.createElement('style');
+              style.id = 'confettiAnimation';
+              style.innerHTML = keyframes;
+              document.head.appendChild(style);
+          }
+          container.appendChild(confetti);
+          // Remove confetti after animation
+          setTimeout(() => {
+              confetti.remove();
+          }, animationDuration * 1000);
         }
+      }
+      function createPaintSplatters() {
+        const container = document.querySelector('.container');
+        const splatters = ['🎨', '🖌️', '🧑‍🎨', '👩‍🎨', '🖼️', '🌈'];
+        for (let i = 0; i < 15; i++) {
+          const splatter = document.createElement('div');
+          splatter.textContent = splatters[Math.floor(Math.random() * splatters.length)];
+          splatter.style.position = 'absolute';
+          splatter.style.fontSize = `${Math.random() * 20 + 10}px`;
+          splatter.style.left = `${Math.random() * 80 + 10}%`;
+          splatter.style.top = `${Math.random() * 80 + 10}%`;
+          splatter.style.opacity = '0.7';
+          splatter.style.transform = `rotate(${Math.random() * 360}deg) scale(${Math.random() * 0.5 + 0.5})`;
+          splatter.style.animation = `fadeOut 2s ${i * 0.1}s forwards`;
+          container.appendChild(splatter);
+          setTimeout(() => {
+              splatter.remove();
+          }, 2000 + i * 100);
         }
+        // Add fadeOut animation if not present
+        if (!document.getElementById('fadeOutAnimation')) {
+          const style = document.createElement('style');
+          style.id = 'fadeOutAnimation';
+          style.innerHTML = `
+              @keyframes fadeOut {
+                  to {
+                      opacity: 0;
+                      transform: translateY(20px) rotate(360deg) scale(0);
+                  }
+              }
+          `;
+          document.head.appendChild(style);
         }
+      }
+      function createColorBurst() {
+        const container = document.querySelector('.container');
+        const burst = document.createElement('div');
+        burst.style.position = 'absolute';
+        burst.style.width = '0';
+        burst.style.height = '0';
+        burst.style.left = '50%';
+        burst.style.top = '50%';
+        burst.style.borderRadius = '50%';
+        burst.style.transform = 'translate(-50%, -50%)';
+        burst.style.boxShadow = '0 0 0 0 rgba(255, 107, 107, 0.7)';
+        burst.style.transition = 'box-shadow 1s ease-out';
+        container.appendChild(burst);
+        // Trigger the burst
+        setTimeout(() => {
+          burst.style.boxShadow = '0 0 0 200px rgba(255, 107, 107, 0)';
+        }, 10);
+        // Remove after animation
+        setTimeout(() => {
+          burst.remove();
+        }, 1100);
+      }
+    });
+  </script>
 </body>
 </html>