pixflow-motion-magic

Running

App Files Files Community

simsdin55 commited on Oct 21, 2025

Commit

d95ce5c

verified ·

1 Parent(s): 69f265a

make it nsfw

Browse files

Files changed (5) hide show

components/footer.js +9 -9
components/navbar.js +7 -7
index.html +39 -41
nsfw-warning.js +61 -0
style.css +48 -5

components/footer.js CHANGED Viewed

@@ -21,8 +21,8 @@ class CustomFooter extends HTMLElement {
         .footer-logo {
           font-size: 1.5rem;
           font-weight: bold;
-          background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-          -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           margin-bottom: 1rem;
         }
@@ -71,8 +71,8 @@ class CustomFooter extends HTMLElement {
         <div class="footer-content">
           <div class="footer-about">
             <div class="footer-logo">PixFlow</div>
-            <p>Transform your static images into stunning animated videos with our powerful AI technology.</p>
-            <div class="social-links">
               <a href="#"><i data-feather="twitter"></i></a>
               <a href="#"><i data-feather="instagram"></i></a>
               <a href="#"><i data-feather="facebook"></i></a>
@@ -82,11 +82,11 @@ class CustomFooter extends HTMLElement {
           <div class="footer-links">
             <h3>Product</h3>
             <ul>
-              <li><a href="#">Features</a></li>
-              <li><a href="#">Pricing</a></li>
-              <li><a href="#">Examples</a></li>
-              <li><a href="#">Download</a></li>
-            </ul>
           </div>
           <div class="footer-links">
             <h3>Company</h3>

         .footer-logo {
           font-size: 1.5rem;
           font-weight: bold;
+          background: linear-gradient(135deg, #ef4444 0%, #ec4899 100%);
+-webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           margin-bottom: 1rem;
         }
         <div class="footer-content">
           <div class="footer-about">
             <div class="footer-logo">PixFlow</div>
+            <p>Create private adult animations from your images with our NSFW AI technology.</p>
+<div class="social-links">
               <a href="#"><i data-feather="twitter"></i></a>
               <a href="#"><i data-feather="instagram"></i></a>
               <a href="#"><i data-feather="facebook"></i></a>
           <div class="footer-links">
             <h3>Product</h3>
             <ul>
+              <li><a href="#">Adult Styles</a></li>
+              <li><a href="#">VIP Membership</a></li>
+              <li><a href="#">OnlyFans Tools</a></li>
+              <li><a href="#">Discreet Billing</a></li>
+</ul>
           </div>
           <div class="footer-links">
             <h3>Company</h3>

components/navbar.js CHANGED Viewed

@@ -19,8 +19,8 @@ class CustomNavbar extends HTMLElement {
           color: white;
           font-weight: bold;
           font-size: 1.5rem;
-          background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-          -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           display: flex;
           align-items: center;
@@ -45,8 +45,8 @@ class CustomNavbar extends HTMLElement {
           color: white;
         }
         .nav-links a.active {
-          color: #8b5cf6;
-        }
         .mobile-menu-btn {
           display: none;
           background: none;
@@ -69,9 +69,9 @@ class CustomNavbar extends HTMLElement {
         </a>
         <ul class="nav-links">
           <li><a href="/" class="active"><i data-feather="home"></i> Home</a></li>
-          <li><a href="#"><i data-feather="star"></i> Premium</a></li>
-          <li><a href="#"><i data-feather="help-circle"></i> Help</a></li>
-          <li><a href="#"><i data-feather="user"></i> Account</a></li>
         </ul>
         <button class="mobile-menu-btn">
           <i data-feather="menu"></i>

           color: white;
           font-weight: bold;
           font-size: 1.5rem;
+          background: linear-gradient(135deg, #ef4444 0%, #ec4899 100%);
+-webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           display: flex;
           align-items: center;
           color: white;
         }
         .nav-links a.active {
+          color: #ef4444;
+}
         .mobile-menu-btn {
           display: none;
           background: none;
         </a>
         <ul class="nav-links">
           <li><a href="/" class="active"><i data-feather="home"></i> Home</a></li>
+          <li><a href="#"><i data-feather="star"></i> Premium Content</a></li>
+          <li><a href="#"><i data-feather="shield"></i> Privacy</a></li>
+<li><a href="#"><i data-feather="user"></i> Account</a></li>
         </ul>
         <button class="mobile-menu-btn">
           <i data-feather="menu"></i>

index.html CHANGED Viewed

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PixFlow - Transform Images to Videos</title>
-    <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -13,19 +13,18 @@
     <script src="components/footer.js"></script>
 </head>
 <body class="bg-gray-900 text-white min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>
-    <main class="flex-grow container mx-auto px-4 py-12">
         <section class="max-w-4xl mx-auto text-center mb-16">
-            <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600">
-                Bring Your Images to Life
             </h1>
             <p class="text-xl text-gray-300 mb-10">
-                Upload any image and we'll transform it into a stunning animated video with just one click.
-            </p>
-            <div class="bg-gray-800 rounded-2xl p-8 shadow-lg border border-gray-700">
-                <div id="dropzone" class="border-2 border-dashed border-gray-600 rounded-xl p-12 text-center cursor-pointer hover:border-purple-500 transition-colors duration-300">
                     <div class="flex flex-col items-center">
                         <i data-feather="upload-cloud" class="w-12 h-12 text-purple-400 mb-4"></i>
                         <h3 class="text-xl font-semibold mb-2">Drag & Drop Your Image Here</h3>
@@ -62,11 +61,11 @@
                             <div>
                                 <label class="block text-gray-300 mb-2">Style</label>
                                 <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
-                                    <option>Cinematic</option>
-                                    <option>Watercolor</option>
-                                    <option>Sketch</option>
-                                    <option>Pixel Art</option>
-                                </select>
                             </div>
                             <div>
                                 <label class="block text-gray-300 mb-2">Duration (seconds)</label>
@@ -75,11 +74,11 @@
                             <div>
                                 <label class="block text-gray-300 mb-2">Background Music</label>
                                 <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
-                                    <option>None</option>
-                                    <option>Epic Cinematic</option>
-                                    <option>Chill Vibes</option>
-                                    <option>Upbeat</option>
-                                </select>
                             </div>
                         </div>
                     </div>
@@ -90,39 +89,38 @@
                 </div>
             </div>
         </section>
         <section class="max-w-6xl mx-auto mt-20">
-            <h2 class="text-3xl font-bold text-center mb-12">How It Works</h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition-colors duration-300">
-                    <div class="bg-purple-500/10 w-14 h-14 rounded-lg flex items-center justify-center mb-4">
-                        <i data-feather="upload" class="w-6 h-6 text-purple-400"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Upload Image</h3>
-                    <p class="text-gray-400">Drag and drop or select any image file from your device</p>
                 </div>
-                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition-colors duration-300">
-                    <div class="bg-purple-500/10 w-14 h-14 rounded-lg flex items-center justify-center mb-4">
-                        <i data-feather="sliders" class="w-6 h-6 text-purple-400"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Customize Effects</h3>
-                    <p class="text-gray-400">Choose from various animation styles and durations</p>
                 </div>
-                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition-colors duration-300">
-                    <div class="bg-purple-500/10 w-14 h-14 rounded-lg flex items-center justify-center mb-4">
-                        <i data-feather="film" class="w-6 h-6 text-purple-400"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Download Video</h3>
-                    <p class="text-gray-400">Get your high-quality animated video ready to share</p>
                 </div>
             </div>
         </section>
-    </main>
     <custom-footer></custom-footer>
     <script src="script.js"></script>
-    <script>
         feather.replace();
         // Animation for the preview section

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PixFlow NSFW - Adult Image Animation</title>
+<link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="components/footer.js"></script>
 </head>
 <body class="bg-gray-900 text-white min-h-screen flex flex-col">
+    <nsfw-warning></nsfw-warning>
     <custom-navbar></custom-navbar>
+<main class="flex-grow container mx-auto px-4 py-12">
         <section class="max-w-4xl mx-auto text-center mb-16">
+            <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-pink-500">
+                Animate Your Adult Content
             </h1>
             <p class="text-xl text-gray-300 mb-10">
+                Upload private images and we'll transform them into high-quality animated adult videos.
+</p>
+                <div class="bg-gray-800 rounded-2xl p-8 shadow-lg border border-pink-700">
+<div id="dropzone" class="border-2 border-dashed border-gray-600 rounded-xl p-12 text-center cursor-pointer hover:border-purple-500 transition-colors duration-300">
                     <div class="flex flex-col items-center">
                         <i data-feather="upload-cloud" class="w-12 h-12 text-purple-400 mb-4"></i>
                         <h3 class="text-xl font-semibold mb-2">Drag & Drop Your Image Here</h3>
                             <div>
                                 <label class="block text-gray-300 mb-2">Style</label>
                                 <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
+                    <option>Passionate</option>
+                    <option>Sensual</option>
+                    <option>Erotic</option>
+                    <option>Fetish</option>
+</select>
                             </div>
                             <div>
                                 <label class="block text-gray-300 mb-2">Duration (seconds)</label>
                             <div>
                                 <label class="block text-gray-300 mb-2">Background Music</label>
                                 <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
+                    <option>Moans & Groans</option>
+                    <option>Sensual Beats</option>
+                    <option>Dirty Talk</option>
+                    <option>None</option>
+</select>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </section>
         <section class="max-w-6xl mx-auto mt-20">
+            <h2 class="text-3xl font-bold text-center mb-12">Create Adult Animations</h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-gray-800 p-6 rounded-xl border border-pink-700 hover:border-red-500 transition-colors duration-300">
+                    <div class="bg-red-500/20 w-14 h-14 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="lock" class="w-6 h-6 text-red-400"></i>
                     </div>
+                    <h3 class="text-xl font-semibold mb-2">Private Processing</h3>
+                    <p class="text-gray-400">Your content is processed securely and never stored on our servers</p>
                 </div>
+                <div class="bg-gray-800 p-6 rounded-xl border border-pink-700 hover:border-red-500 transition-colors duration-300">
+                    <div class="bg-red-500/20 w-14 h-14 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="heart" class="w-6 h-6 text-red-400"></i>
                     </div>
+                    <h3 class="text-xl font-semibold mb-2">Realistic Animations</h3>
+                    <p class="text-gray-400">AI-powered animations that bring your fantasies to life</p>
                 </div>
+                <div class="bg-gray-800 p-6 rounded-xl border border-pink-700 hover:border-red-500 transition-colors duration-300">
+                    <div class="bg-red-500/20 w-14 h-14 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="eye-off" class="w-6 h-6 text-red-400"></i>
                     </div>
+                    <h3 class="text-xl font-semibold mb-2">Discreet Downloads</h3>
+                    <p class="text-gray-400">No watermarks or identifying metadata on your downloads</p>
                 </div>
             </div>
         </section>
+</main>
     <custom-footer></custom-footer>
+    <script src="nsfw-warning.js"></script>
     <script src="script.js"></script>
+<script>
         feather.replace();
         // Animation for the preview section

nsfw-warning.js ADDED Viewed

	@@ -0,0 +1,61 @@

+class NsfwWarning extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .nsfw-warning {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: rgba(0,0,0,0.9);
+          z-index: 9999;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          padding: 2rem;
+        }
+        .nsfw-warning h2 {
+          font-size: 2.5rem;
+          color: #ef4444;
+          margin-bottom: 1.5rem;
+        }
+        .nsfw-warning p {
+          font-size: 1.2rem;
+          color: white;
+          max-width: 600px;
+          margin-bottom: 2rem;
+        }
+        .nsfw-warning button {
+          background: #ef4444;
+          color: white;
+          border: none;
+          padding: 1rem 2rem;
+          font-size: 1.1rem;
+          border-radius: 5px;
+          cursor: pointer;
+          transition: background 0.3s;
+        }
+        .nsfw-warning button:hover {
+          background: #dc2626;
+        }
+      </style>
+      <div class="nsfw-warning">
+        <h2>ADULT CONTENT WARNING</h2>
+        <p>This website contains adult content and is intended for mature audiences only. By entering, you confirm that you are at least 18 years of age or the legal age in your jurisdiction to view such material.</p>
+        <button id="enter-btn">ENTER SITE</button>
+        <a href="https://www.google.com" style="color: #999; margin-top: 1rem;">I want to leave</a>
+      </div>
+    `;
+    this.shadowRoot.getElementById('enter-btn').addEventListener('click', () => {
+      this.remove();
+      document.cookie = "nsfw_warning_accepted=true; path=/; max-age=86400"; // 1 day
+    });
+  }
+}
+customElements.define('nsfw-warning', NsfwWarning);

style.css CHANGED Viewed

@@ -13,14 +13,13 @@ body {
 ::-webkit-scrollbar-track {
     background: #1e293b;
 }
 ::-webkit-scrollbar-thumb {
-    background: #7c3aed;
     border-radius: 5px;
 }
 ::-webkit-scrollbar-thumb:hover {
-    background: #6d28d9;
 }
 /* Animation effects */
@@ -32,7 +31,51 @@ body {
         transform: translateY(-10px);
     }
 }
 .floating {
     animation: float 3s ease-in-out infinite;
-}

 ::-webkit-scrollbar-track {
     background: #1e293b;
 }
 ::-webkit-scrollbar-thumb {
+    background: #ef4444;
     border-radius: 5px;
 }
 ::-webkit-scrollbar-thumb:hover {
+    background: #dc2626;
 }
 /* Animation effects */
         transform: translateY(-10px);
     }
 }
 .floating {
     animation: float 3s ease-in-out infinite;
+}
+/* NSFW warning overlay */
+.nsfw-warning {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.9);
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 2rem;
+}
+.nsfw-warning h2 {
+    font-size: 2.5rem;
+    color: #ef4444;
+    margin-bottom: 1.5rem;
+}
+.nsfw-warning p {
+    font-size: 1.2rem;
+    color: white;
+    max-width: 600px;
+    margin-bottom: 2rem;
+}
+.nsfw-warning button {
+    background: #ef4444;
+    color: white;
+    border: none;
+    padding: 1rem 2rem;
+    font-size: 1.1rem;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+.nsfw-warning button:hover {
+    background: #dc2626;
+}