|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Hallmark Holiday Plot Magic</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> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
background-color: #f8f9fa; |
|
|
} |
|
|
|
|
|
.snowflake { |
|
|
position: absolute; |
|
|
color: #fff; |
|
|
user-select: none; |
|
|
pointer-events: none; |
|
|
animation: fall linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes fall { |
|
|
to { |
|
|
transform: translateY(100vh); |
|
|
} |
|
|
} |
|
|
|
|
|
.festive-border { |
|
|
border-image: linear-gradient(45deg, #e63946, #f4a261, #2a9d8f, #264653) 1; |
|
|
border-width: 4px; |
|
|
border-style: solid; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen bg-gradient-to-b from-red-50 to-green-50 relative overflow-x-hidden"> |
|
|
|
|
|
<div id="snowflakes"></div> |
|
|
|
|
|
<div class="container mx-auto px-4 py-12 max-w-4xl"> |
|
|
<header class="text-center mb-12"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-red-600 font-playfair mb-4">Hallmark Holiday Plot Magic</h1> |
|
|
<p class="text-xl text-gray-700">Generate your perfect holiday movie plot!</p> |
|
|
<div class="mt-6"> |
|
|
<i data-feather="film" class="w-12 h-12 text-green-600 mx-auto"></i> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="bg-white rounded-xl shadow-xl p-6 md:p-8 festive-border"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<label class="block text-lg font-semibold text-gray-800 mb-2">Heroine's Profession</label> |
|
|
<select id="female_1" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-red-400"> |
|
|
<option value="Architect">Architect</option> |
|
|
<option value="Baker">Baker</option> |
|
|
<option value="Veterinarian">Veterinarian</option> |
|
|
<option value="Art Teacher">Art Teacher</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-lg font-semibold text-gray-800 mb-2">Setting</label> |
|
|
<select id="setting" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-red-400"> |
|
|
<option value="small coastal town">Small Coastal Town</option> |
|
|
<option value="mountain village">Mountain Village</option> |
|
|
<option value="rural farming community">Rural Farming Community</option> |
|
|
<option value="historic downtown district">Historic Downtown District</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-lg font-semibold text-gray-800 mb-2">Her Mission</label> |
|
|
<select id="decision" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-red-400"> |
|
|
<option value="restore the old community center">Restore the Old Community Center</option> |
|
|
<option value="organize the annual festival">Organize the Annual Festival</option> |
|
|
<option value="save the local business">Save the Local Business</option> |
|
|
<option value="reconnect with her roots">Reconnect With Her Roots</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-lg font-semibold text-gray-800 mb-2">Her Current Fiancé</label> |
|
|
<select id="male_1" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-red-400"> |
|
|
<option value="Corporate Executive">Corporate Executive</option> |
|
|
<option value="Successful Attorney">Successful Attorney</option> |
|
|
<option value="Real Estate Developer">Real Estate Developer</option> |
|
|
<option value="Tech Entrepreneur">Tech Entrepreneur</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<label class="block text-lg font-semibold text-gray-800 mb-2">The Local Love Interest</label> |
|
|
<select id="male_2" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-red-400"> |
|
|
<option value="Local Contractor">Local Contractor</option> |
|
|
<option value="Elementary School Principal">Elementary School Principal</option> |
|
|
<option value="Marine Biologist">Marine Biologist</option> |
|
|
<option value="Historian">Historian</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-lg font-semibold text-gray-800 mb-2">The Wise Helper</label> |
|
|
<select id="helper" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-red-400"> |
|
|
<option value="Town Elder">Town Elder</option> |
|
|
<option value="Former Teacher">Former Teacher</option> |
|
|
<option value="Local Librarian">Local Librarian</option> |
|
|
<option value="Community Volunteer">Community Volunteer</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-lg font-semibold text-gray-800 mb-2">The Special Place</label> |
|
|
<select id="place" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-red-400"> |
|
|
<option value="community center">Community Center</option> |
|
|
<option value="bookstore">Bookstore</option> |
|
|
<option value="bakery">Bakery</option> |
|
|
<option value="old theater">Old Theater</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-4 pt-2"> |
|
|
<button id="generateBtn" class="flex-1 bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center"> |
|
|
<i data-feather="play" class="w-5 h-5 mr-2"></i> Generate Plot |
|
|
</button> |
|
|
<button id="randomizeBtn" class="flex-1 bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center"> |
|
|
<i data-feather="shuffle" class="w-5 h-5 mr-2"></i> Randomize |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 font-playfair">Your Hallmark Holiday Movie Plot</h2> |
|
|
<div id="plotOutput" class="bg-red-50 p-6 rounded-lg border-l-4 border-red-500 text-gray-700 leading-relaxed"> |
|
|
<p class="italic text-gray-500">Select your options and click "Generate Plot" to create your perfect holiday movie!</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-center"> |
|
|
<button id="shareBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300 flex items-center"> |
|
|
<i data-feather="share-2" class="w-4 h-4 mr-2"></i> Share This Plot |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer class="mt-12 text-center text-gray-600"> |
|
|
<p>Made with <i data-feather="heart" class="w-4 h-4 inline text-red-500"></i> for holiday movie lovers</p> |
|
|
</footer> |
|
|
</div> |
|
|
<script src="script.js"></script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
