site-builder / prompts.txt
dbeck22's picture
Add 3 files
df2b11e verified
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.