|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>PromptHub Blog</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #ffffff; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
.gradient-bar { |
|
|
background: linear-gradient(to bottom, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57); |
|
|
width: 6px; |
|
|
height: 32px; |
|
|
border-radius: 3px; |
|
|
animation: shimmer 3s ease-in-out infinite; |
|
|
} |
|
|
@keyframes shimmer { |
|
|
0%, 100% { opacity: 0.9; } |
|
|
50% { opacity: 1; } |
|
|
} |
|
|
.menu-icon span { |
|
|
transition: all 0.3s ease; |
|
|
transform-origin: center; |
|
|
} |
|
|
.menu-icon.active span:nth-child(1) { |
|
|
transform: translateY(6px) rotate(45deg); |
|
|
} |
|
|
.menu-icon.active span:nth-child(2) { |
|
|
opacity: 0; |
|
|
} |
|
|
.menu-icon.active span:nth-child(3) { |
|
|
transform: translateY(-6px) rotate(-45deg); |
|
|
} |
|
|
.mobile-menu { |
|
|
transform: translateY(-100%); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
.mobile-menu.active { |
|
|
transform: translateY(0); |
|
|
} |
|
|
.subscription-box { |
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); |
|
|
transition: box-shadow 0.3s ease; |
|
|
} |
|
|
.subscription-box:hover { |
|
|
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12); |
|
|
} |
|
|
.subscribe-btn { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.subscribe-btn::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); |
|
|
transition: left 0.5s; |
|
|
} |
|
|
.subscribe-btn:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
.subscribe-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4); |
|
|
} |
|
|
.substack-logo { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
fill: #ff6719; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
.substack-logo:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
input:focus { |
|
|
outline: none; |
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.8s ease-out; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
.blog-title { |
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #4a5568 100%); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="w-full px-4 sm:px-6 lg:px-8 py-6"> |
|
|
<div class="max-w-4xl mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="gradient-bar"></div> |
|
|
<h1 class="text-2xl font-bold text-gray-900">PromptHub</h1> |
|
|
</div> |
|
|
<button id="menu-toggle" class="menu-icon md:hidden p-2"> |
|
|
<span class="block w-5 h-0.5 bg-gray-800 mb-1"></span> |
|
|
<span class="block w-5 h-0.5 bg-gray-800 mb-1"></span> |
|
|
<span class="block w-5 h-0.5 bg-gray-800"></span> |
|
|
</button> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="text-gray-700 hover:text-gray-900 transition-colors">Blog</a> |
|
|
<a href="#" class="text-gray-700 hover:text-gray-900 transition-colors">About</a> |
|
|
<a href="#" class="text-gray-700 hover:text-gray-900 transition-colors">Contact</a> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="mobile-menu md:hidden fixed top-0 left-0 w-full bg-white shadow-lg z-50"> |
|
|
<div class="flex justify-end p-4"> |
|
|
<button id="close-menu" class="p-2"> |
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<nav class="flex flex-col items-center space-y-4 py-8"> |
|
|
<a href="#" class="text-gray-700 text-lg">Blog</a> |
|
|
<a href="#" class="text-gray-700 text-lg">About</a> |
|
|
<a href="#" class="text-gray-700 text-lg">Contact</a> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<main class="flex-1 w-full px-4 sm:px-6 lg:px-8 py-8"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="fade-in mb-12"> |
|
|
<h1 class="blog-title text-4xl md:text-5xl lg:text-6xl font-bold mb-4">PromptHub Blog</h1> |
|
|
<p class="text-lg md:text-xl text-gray-600 max-w-2xl">Updates, tips, and tactics to help you get more out of your prompts</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="subscription-box fade-in bg-white border border-gray-200 rounded-lg p-6 md:p-8 max-w-md"> |
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-4">Get the latest updates, directly in your inbox</h2> |
|
|
|
|
|
<form id="subscription-form" class="space-y-4"> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">Type your email:</label> |
|
|
<input |
|
|
type="email" |
|
|
id="email" |
|
|
name="email" |
|
|
placeholder="your@email.com" |
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" |
|
|
required |
|
|
> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="subscribe-btn w-full text-white py-3 rounded-md font-medium"> |
|
|
Subscribe |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<p class="text-xs text-gray-500 mt-4"> |
|
|
By subscribing you agree to Substack's |
|
|
<a href="#" class="text-gray-600 underline">Terms of Use</a>, |
|
|
our <a href="#" class="text-gray-600 underline">Privacy Policy</a> |
|
|
and our information <a href="#" class="text-gray-600 underline">collection notice</a> |
|
|
</p> |
|
|
|
|
|
<div class="flex justify-center mt-6"> |
|
|
<a href="https://substack.com" target="_blank" rel="noopener noreferrer" class="inline-block"> |
|
|
<svg class="substack-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> |
|
|
<path d="M7.83 9.19L12 5.69L16.17 9.19C16.69 9.62 17 10.25 17 10.95V21H7V10.95C7 10.25 7.31 9.62 7.83 9.19ZM11 16H13V18H11V16ZM11 14H13V12H11V14ZM11 10H13V8H11V10Z"/> |
|
|
</svg> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
|
|
|
const menuToggle = document.getElementById('menu-toggle'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
const closeMenu = document.getElementById('close-menu'); |
|
|
|
|
|
menuToggle.addEventListener('click', () => { |
|
|
mobileMenu.classList.add('active'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
|
|
|
closeMenu.addEventListener('click', () => { |
|
|
mobileMenu.classList.remove('active'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
}); |
|
|
|
|
|
|
|
|
mobileMenu.addEventListener('click', (e) => { |
|
|
if (e.target === mobileMenu) { |
|
|
mobileMenu.classList.remove('active'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const form = document.getElementById('subscription-form'); |
|
|
form.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
const email = document.getElementById('email'); |
|
|
const button = form.querySelector('button[type="submit"]'); |
|
|
|
|
|
|
|
|
if (!email.value || !email.validity.valid) { |
|
|
email.style.borderColor = '#ef4444'; |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
button.textContent = 'Subscribing...'; |
|
|
button.disabled = true; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
button.textContent = 'Subscribed!'; |
|
|
button.style.background = 'linear-gradient(135deg, #48bb78 0%, #38a169 100%)'; |
|
|
email.value = ''; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
button.textContent = 'Subscribe'; |
|
|
button.disabled = false; |
|
|
button.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; |
|
|
}, 3000); |
|
|
}, 1500); |
|
|
}); |
|
|
|
|
|
|
|
|
const observerOptions = { |
|
|
threshold: 0.1, |
|
|
rootMargin: '0px 0px -50px 0px' |
|
|
}; |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.style.opacity = '1'; |
|
|
entry.target.style.transform = 'translateY(0)'; |
|
|
} |
|
|
}); |
|
|
}, observerOptions); |
|
|
|
|
|
document.querySelectorAll('.fade-in').forEach(el => { |
|
|
el.style.opacity = '0'; |
|
|
el.style.transform = 'translateY(20px)'; |
|
|
el.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; |
|
|
observer.observe(el); |
|
|
}); |
|
|
</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=Ai-ethic/template" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
