Spaces:

dbeck22
/

site-builder

Running

App Files Files Community

dbeck22 commited on May 24

Commit

df2b11e

verified ·

1 Parent(s): 0564bdf

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +104 -19
prompts.txt +3 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Site Builder
-emoji: 🚀
-colorFrom: yellow
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: site-builder
+emoji: 🐳
+colorFrom: green
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,104 @@
-<!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>

+Here's the complete HTML file with the "Why Choose YouCantSeeMeVPN?" section added below the hero section:
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YouCantSeeMeVPN - Bypass Adult Content Restrictions</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #111;
+            color: white;
+        }
+        h1, h2, h3, h4 {
+            font-family: 'Montserrat', sans-serif;
+        }
+        .logo {
+            font-weight: 900;
+        }
+        .logo-vpn {
+            background-color: #f8981d;
+            color: #111;
+            padding: 0 8px;
+            border-radius: 4px;
+            font-weight: 700;
+        }
+        .hero-bg {
+            background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
+            background-size: cover;
+            background-position: center;
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+        }
+        .feature-icon {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+        }
+        .modal {
+            transition: opacity 0.3s ease, visibility 0.3s ease;
+        }
+        .modal-content {
+            transform: translateY(20px);
+            transition: transform 0.3s ease;
+        }
+        .modal.active {
+            opacity: 1;
+            visibility: visible;
+        }
+        .modal.active .modal-content {
+            transform: translateY(0);
+        }
+        .accordion-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease;
+        }
+        .accordion.active .accordion-content {
+            max-height: 300px;
+        }
+    </style>
+</head>
+<body>
+    <!-- Sticky Navbar -->
+    <nav class="sticky top-0 z-50 bg-black/80 backdrop-blur-sm border-b border-gray-800">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center space-x-8">
+                <a href="#" class="text-white text-2xl font-bold logo">
+                    YouCantSee<span class="logo-vpn">VPN</span>
+                </a>
+                <div class="hidden md:flex space-x-6">
+                    <a href="#features" class="text-gray-300 hover:text-white transition">Features</a>
+                    <a href="#pricing" class="text-gray-300 hover:text-white transition">Pricing</a>
+                    <a href="#faq" class="text-gray-300 hover:text-white transition">FAQ</a>
+                    <a href="#contact" class="text-gray-300 hover:text-white transition">Contact</a>
+                </div>
+            </div>
+            <div class="flex items-center space-x-4">
+                <button id="loginBtn" class="text-gray-300 hover:text-white transition">Login</button>
+                <button id="signupBtn" class="bg-[#f8981d] hover:bg-[#e68a17] text-black font-bold py-2 px-4 rounded transition">
+                    Sign Up
+                </button>
+                <button class="md:hidden text-white">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="hero-bg min-h-[70vh] flex items-center">
+        <div class="container mx-auto px-4 py-20">
+            <div class="max-w-3xl">
+                <h1 class="text-4xl md:text-6xl font-bold mb-6">
+                    Trouble Accessing Adult Sites?
+                </h1>
+                <p class="text-xl md:text-2xl text-gray-300 mb-8">
+                    Alabama and other states are blocking

prompts.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+I need a vpn site built from openvpn community edition so its free for me to build but i can charge people to use it. The site is called youcantseemevpn.com and here are your instructions: 🔥 YouCantSeeMeVPN – Instruction Prompt for Frontend AI Builder      Build a bold and highly persuasive front end for a commercial VPN service called YouCantSeeMeVPN using HTML, Tailwind CSS, and JavaScript. This service is more than just another VPN — it's a liberation tool, especially for users in regions like Alabama where adult content access is restricted. This website should appeal directly to people who are frustrated by blocked content, especially PornHub-style adult sites. Go bold, go persuasive, and make it punch.  💡 Visual Brand Direction      Logo: Similar layout to Pornhub but says: YouCantSeeMeVPN          "YouCantSeeMe" in white          "VPN" in orange background (like Pornhub's “hub” style)      Color Scheme:          Background: dark gray to black          Accent: Pornhub orange #f8981d and pure white #ffffff          Fonts: Bold, modern sans-serif (e.g., Inter or Montserrat)      Design: Clean, adult, punchy, and slick — should feel like a mix between Pornhub and NordVPN’s UI  🛡️ Hero Section (Hook)      Headline:     "Having Trouble Accessing Adult Content?"      Subheadline:     “Alabama and other states have blocked sites like Pornhub, XHamster, and XVideos. But you don’t have to suffer.”      Call to Action Buttons:          “Unblock My Sites” → opens signup modal          “See How It Works” → scrolls to explainer section      Include background image or subtle animation of a globe with restricted signs crossed out  🔐 Features Section – What Makes Us Better Than Nord      Grid-style cards with icons:          Adult Site Access Restored – "Watch what you want, when you want. No judgment."          More Global Servers – "From Boston to Botswana. We cover more than Nord."          No Logs, No Censorship – "We don’t track you, throttle you, or ask questions."          Optional Onion Routing – "Advanced users can tunnel through Tor for max anonymity."          Military-Grade Encryption – "OpenVPN + AES-256 keeps you locked tight."          Stream Anything, Anywhere – "Netflix, Hulu, and yes... late night favorites."  💰 Pricing Section      Use Pornhub-style layout with bold, simplified cards      Plan tiers:          Casual Watcher – $9.99/month          Nightly Binger – $5.99/month (billed yearly)          VIP Access – $14.99/month – 10 devices, high-speed priority servers  Add badges like “Most Popular” or “Save 40%” where needed. ⚙️ How It Works (Simple Steps)      Sign Up & Choose Plan      Download Your Custom Config      Activate and Get Watching  🔗 Supported Devices      Icons for: Windows, Mac, iOS, Android, Linux, Smart TVs, and Router setups  🔐 Login/Signup/Payment Modals      Use modal popups with form fields styled in dark mode      Signup CTA:     “Stop missing out. Sign up and enjoy your content unrestricted.”  🧠 Dashboard Modal (After Login)      Tabs: Servers | Configs | Devices | Account      Show server list with ping/load + Connect button      Download .ovpn config per device      Connection status indicator: 🔴 Disconnected / 🟢 Connected      Button: “Connect to VPN” toggles status  🧾 FAQ Section (Spicy but Legal)  Example questions:      "Can I watch Pornhub with this?" → "Yes. And Xhamster, XVideos, and more."      "Will my ISP know?" → "Nope. Encrypted tunnels + no logs = private browsing."      "Do you accept crypto?" → "Absolutely. BTC, ETH, and Monero."  📞 Contact & Footer      Email support, live chat dummy section      Footer should feel like a mix of Netflix and Pornhub          Terms, Privacy, Refunds          Socials: Reddit, Discord, X  💡 Notes for the AI:      Make it persuasive, fun, and a little edgy but keep it clean enough to not trigger browser blocks.      You can use placeholder text for payment details and config download links.
+continue where this left off with the next section.. as in,keep what you already have and add this: Now add the "Why Choose YouCantSeeMeVPN?" section directly below the hero. This should be a 3-column responsive grid showing features like:  1. Adult Content Access Restored    - Icon: 🔓    - Text: "Unblock sites like Pornhub, XHamster, XVideos in restricted states."  2. Global Server Network    - Icon: 🌍    - Text: "Connect from Boston, LA, Tokyo, or Africa. More locations than Nord."  3. Onion Routing Option    - Icon: 🧅    - Text: "For the ultra-private — route through the Tor network."  Use dark background with Tailwind and the same ph-orange highlight. Add subtle hover effects on each card.
+Create a full, single-page responsive HTML website using TailwindCSS and JavaScript for a VPN service called **YouCantSeeMeVPN**. This service helps users bypass adult content restrictions in states like Alabama where sites such as Pornhub, XHamster, and XVideos are blocked.  The tone is bold, cheeky, adult-friendly, and persuasive. Think a mashup of NordVPN’s visual professionalism and Pornhub’s rebellious attitude.  ---  🏷️ BRANDING: - Logo: "YouCantSeeMe" in white, "VPN" in a bold Pornhub-orange box - Fonts: Montserrat for headings, Inter for body - Colors:   - Background: `#111`   - Text: white   - Accent: Pornhub orange `#f8981d` - Icons: Font Awesome  ---  📦 LAYOUT STRUCTURE:  1. ✅ **Sticky Navbar**    - Logo styled like Pornhub    - Links: Features, Pricing, FAQ, Contact    - Buttons: Login (`id="loginBtn"`), Sign Up (`id="signupBtn"`)  2. 🔥 **Hero Section**    - Headline: “Trouble Accessing Adult Sites?”    - Subtext: “Alabama and other states are blocking Pornhub, XHamster, and more. We’ll get you back to your late-night favorites — in seconds.”    - CTA Buttons:      - “Unblock My Sites” → opens signup modal      - “Learn More” → scrolls to Features section    - Background should be suggestive but not explicit — abstract globe or stealth image preferred  3. 💡 **Features Section**    - Adult Content Access Restored    - High-Speed Global Servers    - Zero Logs, Zero Judgment    - 5 Device Connections    - Military-Grade Encryption  4. 💰 **Pricing Section**    - 3 Cards:      - $9.99/month — "Casual Watcher"      - $5.99/month — "Nightly Binger" (billed yearly)      - $14.99/month — "VIP Access" (10 devices)    - Each card has a “Subscribe” button (`class="subscribeBtn"`)  5. ⚙️ **How It Works**    - Step 1: Sign Up    - Step 2: Download Config    - Step 3: Connect & Chill    - Include icons and short blurbs  6. ❓ **FAQ Section** (accordion style)    - “Can I access Pornhub in Alabama?” → “Yes, and every other blocked site.”    - “Is this legal?” → “Using a VPN is 100% legal in the US.”    - “Do you keep logs?” → “Never. What you do is your business.”    - “Do you accept crypto?” → “Yes. We support Bitcoin, Ethereum, and Monero.”    - “Can I use it on my phone?” → “Absolutely. iPhone, Android, tablets, laptops.”  7. 📬 **Footer**    - Links: Terms, Privacy Policy, Refund Policy, DMCA    - Social Icons: Reddit, Twitter, Discord    - Email: support@youcantseemevpn.com  8. 🔐 **Modals**    - Login Modal (`id="loginModal"`):      - Email, password fields      - Save "logged in" to localStorage      - Button opens Dashboard modal    - Signup Modal (`id="signupModal"`):      - Name, Email, Password, Agree to Terms      - On submit: show success, simulate subscription      - Show button to download a dummy `.ovpn` config (use Blob/download simulation)  9. 🧠 **Dashboard Modal** (`id="dashboardModal"`)    - Show user email from localStorage    - Show subscription tier (fake)    - Show data usage bar (fake)    - List 3 servers with:      - Location, Ping, Load      - Connect button that toggles status (🟢 Connected / 🔴 Disconnected)    - Button to “Download Config Again”  ---  📜 **JavaScript Logic To Include:** - Modal open/close - FAQ accordion toggles - Signup/login simulations using `localStorage` - Connect/Disconnect toggle with visual indicator - Generate dummy `.ovpn` file using Blob and download link  ---  ⚠️ ALL code (HTML, CSS, and JavaScript) must be in one file. Use Tailwind CDN, Font Awesome CDN, and inline JavaScript in a `<script>` tag at the bottom. No external JS files.  ---  The focus is on converting users who are frustrated by content bans into paying customers with a site that feels sleek, adult-themed, and empowering. Make the buttons and sections punchy and fun.