Spaces:

44xClub
/

educational-page-examples

Running

App Files Files Community

44xClub commited on May 22, 2025

Commit

c1308ab

verified ·

1 Parent(s): 42627b6

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +202 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Educational Page Examples
-emoji: 👀
-colorFrom: purple
 colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: educational-page-examples
+emoji: 🐳
+colorFrom: red
 colorTo: gray
 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,202 @@
-<!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>CLUB44 - Recovery Blueprint</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: #0A0A0A;
+            color: #FFFFFF;
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            -khtml-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+        .content-card {
+            background: linear-gradient(145deg, #1A1A1A, #121212);
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+        }
+        .progress-bar {
+            background: linear-gradient(90deg, #FF5F6D, #FFC371);
+        }
+        .locked-content {
+            background: repeating-linear-gradient(
+                45deg,
+                #1A1A1A,
+                #1A1A1A 10px,
+                #222222 10px,
+                #222222 20px
+            );
+        }
+        .nav-icon {
+            filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+        }
+        .nav-icon.active {
+            filter: invert(76%) sepia(29%) saturate(659%) hue-rotate(314deg) brightness(101%) contrast(101%);
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Header -->
+    <header class="pt-12 pb-4 px-6">
+        <div class="flex justify-between items-center">
+            <button class="p-2 rounded-full bg-gray-900">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                </svg>
+            </button>
+            <div class="text-center">
+                <h1 class="text-xl font-bold">Recovery Blueprint</h1>
+                <p class="text-xs text-gray-400 mt-1">Chapter 3 of 12</p>
+            </div>
+            <button class="p-2 rounded-full bg-gray-900">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
+                </svg>
+            </button>
+        </div>
+        <!-- Progress bar -->
+        <div class="mt-4">
+            <div class="w-full bg-gray-800 rounded-full h-1.5">
+                <div class="progress-bar h-1.5 rounded-full" style="width: 25%"></div>
+            </div>
+            <div class="flex justify-between text-xs text-gray-400 mt-1">
+                <span>25% completed</span>
+                <span>12 min read</span>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="flex-1 overflow-y-auto px-6 py-4">
+        <div class="content-card rounded-2xl p-6 mb-6">
+            <h2 class="text-lg font-bold mb-4">The Science of Muscle Recovery</h2>
+            <p class="text-sm text-gray-300 mb-4 leading-relaxed">
+                Recovery is where the magic happens. When you train, you're breaking down muscle tissue. It's during recovery that your body repairs these microtears, making your muscles stronger than before.
+            </p>
+            <p class="text-sm text-gray-300 mb-4 leading-relaxed">
+                The process involves three key phases:
+            </p>
+            <ol class="list-decimal list-inside text-sm text-gray-300 mb-4 space-y-2">
+                <li class="leading-relaxed"><span class="font-bold">Inflammation Phase</span> (0-6 hours post-workout): Your body sends nutrients to damaged areas</li>
+                <li class="leading-relaxed"><span class="font-bold">Repair Phase</span> (6-48 hours): Muscle fibers rebuild with protein synthesis</li>
+                <li class="leading-relaxed"><span class="font-bold">Remodeling Phase</span> (48-72 hours): Muscles adapt to handle future stress</li>
+            </ol>
+            <div class="my-6 p-4 bg-gray-900 rounded-lg">
+                <h3 class="text-sm font-bold mb-2 text-yellow-400">CLUB44 Insight</h3>
+                <p class="text-xs text-gray-300 leading-relaxed">
+                    Elite athletes spend as much time optimizing recovery as they do training. Your 1% gains compound when you master both.
+                </p>
+            </div>
+            <p class="text-sm text-gray-300 mb-4 leading-relaxed">
+                Sleep is the ultimate recovery tool. During deep sleep, your body releases growth hormone which stimulates muscle growth and repair. Aim for 7-9 hours of quality sleep, especially on training days.
+            </p>
+        </div>
+        <!-- Locked Content Section -->
+        <div class="content-card rounded-2xl p-6 mb-6 locked-content relative">
+            <div class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center rounded-2xl">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-yellow-400 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                </svg>
+                <h3 class="font-bold text-center">Premium Content Locked</h3>
+                <p class="text-xs text-gray-300 text-center mt-1 px-6">Complete previous chapters to unlock this content</p>
+            </div>
+            <h2 class="text-lg font-bold mb-4">Advanced Recovery Protocols</h2>
+            <p class="text-sm text-gray-300 mb-4 leading-relaxed">
+                For those looking to optimize every aspect of recovery, these advanced techniques can help you bounce back faster and perform at your peak.
+            </p>
+            <ul class="list-disc list-inside text-sm text-gray-300 mb-4 space-y-2">
+                <li class="leading-relaxed">Cold water immersion (15°C for 11-15 minutes)</li>
+                <li class="leading-relaxed">Pneumatic compression therapy</li>
+                <li class="leading-relaxed">Targeted photobiomodulation</li>
+                <li class="leading-relaxed">Nutrient timing strategies</li>
+            </ul>
+        </div>
+        <!-- Action Buttons -->
+        <div class="flex space-x-4 mb-16">
+            <button class="flex-1 bg-gray-900 hover:bg-gray-800 text-white font-bold py-3 px-4 rounded-xl flex items-center justify-center">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                Mark as Read
+            </button>
+            <button class="flex-1 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-4 rounded-xl flex items-center justify-center">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                </svg>
+                Reflect
+            </button>
+        </div>
+    </main>
+    <!-- Bottom Navigation -->
+    <nav class="bg-gray-900 border-t border-gray-800 px-6 py-3 flex justify-around">
+        <a href="#" class="flex flex-col items-center">
+            <img src="https://cdn-icons-png.flaticon.com/512/3652/3652191.png" class="h-6 w-6 nav-icon" alt="Dashboard">
+            <span class="text-xs mt-1">Dashboard</span>
+        </a>
+        <a href="#" class="flex flex-col items-center">
+            <img src="https://cdn-icons-png.flaticon.com/512/3652/3652151.png" class="h-6 w-6 nav-icon" alt="Logs">
+            <span class="text-xs mt-1">Logs</span>
+        </a>
+        <a href="#" class="flex flex-col items-center">
+            <img src="https://cdn-icons-png.flaticon.com/512/3652/3652124.png" class="h-6 w-6 nav-icon active" alt="Vault">
+            <span class="text-xs mt-1 text-yellow-400">Vault</span>
+        </a>
+        <a href="#" class="flex flex-col items-center">
+            <img src="https://cdn-icons-png.flaticon.com/512/3652/3652169.png" class="h-6 w-6 nav-icon" alt="Journal">
+            <span class="text-xs mt-1">Journal</span>
+        </a>
+        <a href="#" class="flex flex-col items-center">
+            <img src="https://cdn-icons-png.flaticon.com/512/3652/3652139.png" class="h-6 w-6 nav-icon" alt="Profile">
+            <span class="text-xs mt-1">Profile</span>
+        </a>
+    </nav>
+    <script>
+        // Prevent text selection
+        document.addEventListener('selectstart', function(e) {
+            e.preventDefault();
+            return false;
+        });
+        // Simulate button interactions
+        const buttons = document.querySelectorAll('button');
+        buttons.forEach(button => {
+            button.addEventListener('mousedown', () => {
+                button.classList.add('scale-95');
+                button.classList.add('opacity-90');
+            });
+            button.addEventListener('mouseup', () => {
+                button.classList.remove('scale-95');
+                button.classList.remove('opacity-90');
+            });
+            button.addEventListener('mouseleave', () => {
+                button.classList.remove('scale-95');
+                button.classList.remove('opacity-90');
+            });
+        });
+        // Mark as read functionality
+        const markAsRead = document.querySelectorAll('button')[2];
+        markAsRead.addEventListener('click', () => {
+            alert('Chapter marked as read. Progress updated!');
+        });
+        // Reflect button functionality
+        const reflectBtn = document.querySelectorAll('button')[3];
+        reflectBtn.addEventListener('click', () => {
+            alert('Opening journal to reflect on this chapter...');
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=44xClub/educational-page-examples" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ Design a sleek, modern mobile app interface for a fitness and lifestyle brand called CLUB44, targeting 18–30-year-old men focused on self-discipline, growth, fitness, and routine. The app should use a dark color theme with Montserrat Bold font, and have a clean, minimal Apple-like design aesthetic. ⚙️ App Platform: iOS and Android 🎨 Theme: Dark mode, minimalist, sharp UI 📱 Screen Size: Standard mobile screens (iPhone 14 / Pixel 7) 🧭 Navigation: Bottom nav bar with icons for: Dashboard, Logs, Vault, Journal, Profile Design the following key screens with interactive elements and modern UX: Educational Resources Pages Title at top (e.g., Recovery Blueprint) Scrollable page with text content Styled like an e-book chapter Lock content from downloads or copy CTA buttons to “Mark as Read” or “Reflect in Journal”