Spaces:

Saad4web
/

ebook

Running

App Files Files Community

Saad4web commited on Sep 4, 2025

Commit

e716234

verified ·

1 Parent(s): e3f8be9

Please create a complete, single-file HTML landing page for an ebook titled "A Beginner's Guide to Google Play Points." The goal of this page is to promote the guide and gate the download behind a mock content locker to simulate a CPA offer.

Browse files

The landing page must be a single HTML file with all CSS (using Tailwind via CDN) and JavaScript embedded within it. The design should be clean, modern, fully responsive, and mobile-first, using a friendly color palette and rounded corners.
Landing Page Content and Structure:
Header Section:
Headline: A compelling, benefit-driven headline like "Unlock Free Rewards on Google Play! Get Your Free Guide."
Sub-headline: A brief, clear description of the ebook: "Your complete guide to earning, leveling up, and maximizing your Google Play Points."
Hero Section:
Ebook Image: Use a placeholder image URL for an ebook cover (e.g., https://placehold.co/300x400/22c55e/ffffff?text=Ebook+Cover) to visually represent the guide.
Benefit List: A bulleted list highlighting the key benefits of the ebook, such as:
"Step-by-step guide to joining the program."
"Hidden ways to earn points for free."
"How to level up to Gold and Platinum tiers fast."
"Maximize the value of your points with smart redemptions."
Call to Action (CTA) Section:
A prominent, visually distinct button labeled "Download Your Free Guide."
This button should be "locked" initially. When a user clicks it, do not download the file immediately.
Content Locker Functionality (JavaScript):
When the "Download Your Free Guide" button is clicked, a modal or pop-up should appear on top of the landing page.
This modal should have a title like "Complete a Quick Offer to Unlock."
Inside the modal, provide a short text explanation: "To get your free guide, please complete one of the sponsored offers below. This helps us continue to provide valuable content for free."
Create a placeholder for a list of "offers." You can use mock buttons or text links for this, for example:
[Mock Offer 1: Install a Free App]
[Mock Offer 2: Take a Short Survey]
Add a final button labeled "I Have Completed an Offer."
When the "I Have Completed an Offer" button is clicked, the modal should close.
The original "Download Your Free Guide" button should then change its behavior. When clicked again, it should now direct the user to a mock download URL (e.g., https://example.com/ebook_download.pdf). For the purpose of this mock-up, a simple alert() or console message confirming the "download" is also acceptable if a direct link is not feasible.
Technical and Design Requirements:
Use a modern, clean font like "Inter."
Ensure all elements have soft, rounded corners using Tailwind classes (e.g., rounded-lg).
The layout should be centered on the page and adapt gracefully to different screen sizes.
Add comments in the HTML to explain the different sections and in the JavaScript to explain the logic of the content locker. - Initial Deployment

Files changed (3) hide show

README.md +7 -5
index.html +134 -18
prompts.txt +31 -0

README.md CHANGED Viewed

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

 ---
+title: ebook
+emoji: 🐳
+colorFrom: green
+colorTo: yellow
 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,135 @@
-<!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.0">
+    <title>Unlock Free Rewards on Google Play - Get Your Free Guide</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-blue-50 to-green-50 min-h-screen">
+    <!-- Header Section -->
+    <header class="container mx-auto px-4 py-8 text-center">
+        <h1 class="text-3xl md:text-4xl font-bold text-blue-800 mb-4">Unlock Free Rewards on Google Play!</h1>
+        <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">Your complete guide to earning, leveling up, and maximizing your Google Play Points.</p>
+    </header>
+    <!-- Hero Section -->
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex flex-col md:flex-row items-center justify-center gap-8">
+            <!-- Ebook Image -->
+            <div class="w-full md:w-1/3 flex justify-center">
+                <img src="https://placehold.co/300x400/22c55e/ffffff?text=Ebook+Cover" alt="Google Play Points Guide" class="rounded-2xl shadow-xl w-full max-w-xs">
+            </div>
+            <!-- Benefits List -->
+            <div class="w-full md:w-1/2">
+                <h2 class="text-2xl font-semibold text-gray-800 mb-6">What You'll Learn:</h2>
+                <ul class="space-y-4">
+                    <li class="flex items-start">
+                        <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i>
+                        <span class="text-gray-700">Step-by-step guide to joining the program</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i>
+                        <span class="text-gray-700">Hidden ways to earn points for free</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i>
+                        <span class="text-gray-700">How to level up to Gold and Platinum tiers fast</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i>
+                        <span class="text-gray-700">Maximize the value of your points with smart redemptions</span>
+                    </li>
+                </ul>
+                <!-- CTA Button -->
+                <button id="downloadBtn" class="mt-8 w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-4 px-6 rounded-xl shadow-lg transition-all duration-300 transform hover:scale-105">
+                    Download Your Free Guide
+                </button>
+            </div>
+        </div>
+    </main>
+    <!-- Content Locker Modal -->
+    <div id="lockerModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+        <div class="bg-white rounded-2xl p-6 m-4 max-w-md w-full shadow-2xl">
+            <h3 class="text-2xl font-bold text-gray-800 mb-4">Complete a Quick Offer to Unlock</h3>
+            <p class="text-gray-600 mb-6">To get your free guide, please complete one of the sponsored offers below. This helps us continue to provide valuable content for free.</p>
+            <div class="space-y-4 mb-6">
+                <div class="border border-gray-200 rounded-xl p-4 hover:bg-gray-50 cursor-pointer transition-colors">
+                    <h4 class="font-semibold text-gray-800">Install a Free App</h4>
+                    <p class="text-sm text-gray-600">Quick and easy - takes less than 2 minutes</p>
+                </div>
+                <div class="border border-gray-200 rounded-xl p-4 hover:bg-gray-50 cursor-pointer transition-colors">
+                    <h4 class="font-semibold text-gray-800">Take a Short Survey</h4>
+                    <p class="text-sm text-gray-600">Share your opinion and help brands improve</p>
+                </div>
+            </div>
+            <button id="completeOfferBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-4 rounded-xl transition-colors">
+                I Have Completed an Offer
+            </button>
+        </div>
+    </div>
+    <script>
+        // Initialize feather icons
+        feather.replace();
+        // Content locker functionality
+        let isUnlocked = false;
+        const downloadBtn = document.getElementById('downloadBtn');
+        const lockerModal = document.getElementById('lockerModal');
+        const completeOfferBtn = document.getElementById('completeOfferBtn');
+        // Handle download button click
+        downloadBtn.addEventListener('click', function() {
+            if (!isUnlocked) {
+                // Show the content locker modal
+                lockerModal.classList.remove('hidden');
+            } else {
+                // Download the guide (mock implementation)
+                window.location.href = 'https://example.com/ebook_download.pdf';
+                // Alternative mock implementation:
+                // alert('Your download is starting!');
+            }
+        });
+        // Handle offer completion
+        completeOfferBtn.addEventListener('click', function() {
+            // Hide the modal
+            lockerModal.classList.add('hidden');
+            // Unlock the download
+            isUnlocked = true;
+            // Update button text and style
+            downloadBtn.textContent = 'Download Now';
+            downloadBtn.classList.remove('bg-green-500', 'hover:bg-green-600');
+            downloadBtn.classList.add('bg-blue-500', 'hover:bg-blue-600');
+            // Show success message (optional)
+            alert('Thank you! Your guide is now unlocked.');
+        });
+        // Close modal when clicking outside
+        lockerModal.addEventListener('click', function(e) {
+            if (e.target === lockerModal) {
+                lockerModal.classList.add('hidden');
+            }
+        });
+    </script>
+</body>
 </html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,31 @@

+Please create a complete, single-file HTML landing page for an ebook titled "A Beginner's Guide to Google Play Points." The goal of this page is to promote the guide and gate the download behind a mock content locker to simulate a CPA offer.
+The landing page must be a single HTML file with all CSS (using Tailwind via CDN) and JavaScript embedded within it. The design should be clean, modern, fully responsive, and mobile-first, using a friendly color palette and rounded corners.
+Landing Page Content and Structure:
+Header Section:
+Headline: A compelling, benefit-driven headline like "Unlock Free Rewards on Google Play! Get Your Free Guide."
+Sub-headline: A brief, clear description of the ebook: "Your complete guide to earning, leveling up, and maximizing your Google Play Points."
+Hero Section:
+Ebook Image: Use a placeholder image URL for an ebook cover (e.g., https://placehold.co/300x400/22c55e/ffffff?text=Ebook+Cover) to visually represent the guide.
+Benefit List: A bulleted list highlighting the key benefits of the ebook, such as:
+"Step-by-step guide to joining the program."
+"Hidden ways to earn points for free."
+"How to level up to Gold and Platinum tiers fast."
+"Maximize the value of your points with smart redemptions."
+Call to Action (CTA) Section:
+A prominent, visually distinct button labeled "Download Your Free Guide."
+This button should be "locked" initially. When a user clicks it, do not download the file immediately.
+Content Locker Functionality (JavaScript):
+When the "Download Your Free Guide" button is clicked, a modal or pop-up should appear on top of the landing page.
+This modal should have a title like "Complete a Quick Offer to Unlock."
+Inside the modal, provide a short text explanation: "To get your free guide, please complete one of the sponsored offers below. This helps us continue to provide valuable content for free."
+Create a placeholder for a list of "offers." You can use mock buttons or text links for this, for example:
+[Mock Offer 1: Install a Free App]
+[Mock Offer 2: Take a Short Survey]
+Add a final button labeled "I Have Completed an Offer."
+When the "I Have Completed an Offer" button is clicked, the modal should close.
+The original "Download Your Free Guide" button should then change its behavior. When clicked again, it should now direct the user to a mock download URL (e.g., https://example.com/ebook_download.pdf). For the purpose of this mock-up, a simple alert() or console message confirming the "download" is also acceptable if a direct link is not feasible.
+Technical and Design Requirements:
+Use a modern, clean font like "Inter."
+Ensure all elements have soft, rounded corners using Tailwind classes (e.g., rounded-lg).
+The layout should be centered on the page and adapt gracefully to different screen sizes.
+Add comments in the HTML to explain the different sections and in the JavaScript to explain the logic of the content locker.