Spaces:
Running
Running
Download index.html from DelMonte/my-deepspace: direct link, hf CLI and curl.
- Browser
- Download file 33.2 kB
-
https://huggingface.co/spaces/DelMonte/my-deepspace/resolve/main/index.html
- Command line
-
hf download hf://spaces/DelMonte/my-deepspace/index.html
-
curl -L -o index.html https://huggingface.co/spaces/DelMonte/my-deepspace/resolve/main/index.html
33.2 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mojí Confessions 🍫💩</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --pistachio: #CDE0C9; | |
| --vanilla: #FFF8E7; | |
| --mocha: #4A3F35; | |
| --dusty-rose: #D4A5A5; | |
| --gold: #D4AF37; | |
| --rose-petal: #FADADD; | |
| --cocoa-dust: #A67B5B; | |
| --berry: #E8A0B3; | |
| --lavender: #E6DAF0; | |
| } | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: var(--pistachio); | |
| color: var(--mocha); | |
| } | |
| .font-serif { | |
| font-family: 'Cormorant Garamond', serif; | |
| } | |
| .card-bg { | |
| background-color: var(--vanilla); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); | |
| } | |
| .intensity-btn { | |
| transition: all 0.3s ease; | |
| background-color: var(--gold); | |
| color: var(--mocha); | |
| border: none; | |
| } | |
| .intensity-btn:hover { | |
| transform: translateY(-3px); | |
| background-color: var(--rose-petal); | |
| color: var(--mocha); | |
| } | |
| .intensity-btn.active { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); | |
| } | |
| .confession-input { | |
| min-height: 120px; | |
| background-color: rgba(255, 255, 255, 0.7); | |
| border: 1px solid var(--cocoa-dust); | |
| color: var(--mocha); | |
| } | |
| .confession-input:focus { | |
| outline: none; | |
| border-color: var(--gold); | |
| box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3); | |
| } | |
| .recipe-card { | |
| background-color: var(--vanilla); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); | |
| border: 1px solid var(--cocoa-dust); | |
| } | |
| .emoji-picker { | |
| position: absolute; | |
| bottom: 100%; | |
| right: 0; | |
| background: var(--vanilla); | |
| border-radius: 8px; | |
| padding: 10px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| border: 1px solid var(--cocoa-dust); | |
| z-index: 10; | |
| display: none; | |
| } | |
| .tea-suggestion { | |
| background-color: rgba(212, 175, 55, 0.1); | |
| border-left: 4px solid var(--gold); | |
| padding: 12px; | |
| margin: 16px 0; | |
| border-radius: 0 8px 8px 0; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .btn-primary { | |
| background-color: var(--gold); | |
| color: var(--mocha); | |
| font-weight: 600; | |
| border: none; | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--rose-petal); | |
| color: var(--mocha); | |
| } | |
| .text-gold { | |
| color: var(--gold); | |
| } | |
| .text-dusty-rose { | |
| color: var(--dusty-rose); | |
| } | |
| .border-cocoa { | |
| border-color: var(--cocoa-dust); | |
| } | |
| .warning-box { | |
| background-color: rgba(232, 160, 179, 0.2); | |
| border-left: 4px solid var(--berry); | |
| } | |
| .sample-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .sample-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .modal-bg { | |
| background-color: rgba(255, 248, 231, 0.95); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <div class="flex justify-center items-center mb-4"> | |
| <i class="fas fa-poop text-4xl text-dusty-rose mr-3 floating"></i> | |
| <h1 class="text-4xl md:text-5xl font-bold text-dusty-rose font-serif"> | |
| Mojí Confessions | |
| </h1> | |
| <i class="fas fa-ice-cream text-4xl text-gold ml-3 floating" style="animation-delay: 0.5s;"></i> | |
| </div> | |
| <p class="text-lg md:text-xl text-mocha max-w-2xl mx-auto"> | |
| A luxurious AI-powered experience created by Leticia del Monte that blends fine chocolate, gut health, and wicked humor. | |
| Confess what you ate yesterday and receive a custom-crafted laxative chocolate recipe! | |
| </p> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-4xl mx-auto"> | |
| <!-- Confession Form --> | |
| <div class="card-bg rounded-2xl shadow-xl p-6 mb-8 border border-cocoa"> | |
| <h2 class="text-2xl font-bold mb-4 text-dusty-rose font-serif">Your Food Confession</h2> | |
| <p class="text-mocha mb-4">Tell us about yesterday's "food sins" and we'll craft you a bespoke chocolate laxative recipe.</p> | |
| <div class="relative mb-6"> | |
| <textarea id="confessionText" class="confession-input w-full p-4 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent" placeholder="Example: 'Pizza, cookies, soda, and three coffees. No water.'"></textarea> | |
| <button id="emojiBtn" class="absolute right-3 bottom-3 text-cocoa-dust hover:text-gold"> | |
| <i class="far fa-smile text-2xl"></i> | |
| </button> | |
| <div id="emojiPicker" class="emoji-picker"> | |
| <div class="grid grid-cols-6 gap-2"> | |
| <span class="emoji-option cursor-pointer text-xl" data-emoji="🍕">🍕</span> | |
| <span class="emoji-option cursor-pointer text-xl" data-emoji="🍔">🍔</span> | |
| <span class="emoji-option cursor-pointer text-xl" data-emoji="🍟">🍟</span> | |
| <span class="emoji-option cursor-pointer text-xl" data-emoji="🍩">🍩</span> | |
| <span class="emoji-option cursor-pointer text-xl" data-emoji="🍪">🍪</span> | |
| <span class="emoji-option cursor-pointer text-xl" data-emoji="🍫">🍫</span> | |
| <span class="emoji-option cursor-pointer text-xl" data-emoji="☕">☕</span> | |
| <span class="emoji-option cursor-pointer text-xl" data-emoji="🍺">🍺</span> | |
| <span class="emoji-option cursor-pointer text-xl" data-emoji="🍷">🍷</span> | |
| <span class="emoji-option cursor-pointer text-xl" data-emoji="🍕">🍕</span> | |
| <span class="emoji-option cursor-pointer text-xl" data-emoji="🌮">🌮</span> | |
| <span class="emoji-option cursor-pointer text-xl" data-emoji="🍣">🍣</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-3 text-dusty-rose font-serif">Desired Laxative Intensity</h3> | |
| <div class="flex flex-wrap gap-3"> | |
| <button class="intensity-btn flex-1 min-w-[100px] py-2 px-4 rounded-lg flex flex-col items-center" data-intensity="mild"> | |
| <span class="text-2xl">💨</span> | |
| <span class="text-sm">Gentle Breeze</span> | |
| </button> | |
| <button class="intensity-btn flex-1 min-w-[100px] py-2 px-4 rounded-lg flex flex-col items-center active" data-intensity="medium"> | |
| <span class="text-2xl">🌊</span> | |
| <span class="text-sm">Steady Flow</span> | |
| </button> | |
| <button class="intensity-btn flex-1 min-w-[100px] py-2 px-4 rounded-lg flex flex-col items-center" data-intensity="strong"> | |
| <span class="text-2xl">🚽</span> | |
| <span class="text-sm">Emergency Flush</span> | |
| </button> | |
| </div> | |
| </div> | |
| <button id="generateBtn" class="w-full btn-primary font-bold py-3 px-6 rounded-lg transition-all duration-300 flex items-center justify-center"> | |
| <i class="fas fa-magic mr-2"></i> Craft My Choco Cleanser | |
| </button> | |
| </div> | |
| <!-- Recipe Display --> | |
| <div id="recipeContainer" class="hidden"> | |
| <div class="recipe-card rounded-2xl p-6 mb-8"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h2 id="recipeTitle" class="text-2xl font-bold text-dusty-rose font-serif">The Choco Cleanser</h2> | |
| <span id="recipeIntensity" class="text-xl">🌊</span> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-2 text-dusty-rose font-serif">Ingredients</h3> | |
| <ul id="recipeIngredients" class="list-disc pl-5 space-y-1 text-mocha"> | |
| <li>Dark chocolate (70% cocoa or higher)</li> | |
| <li>Psyllium husk (1 tbsp)</li> | |
| <li>Dried figs (chopped, 2-3 pieces)</li> | |
| <li>Coconut oil (1 tsp)</li> | |
| <li>Cayenne pepper (a pinch)</li> | |
| <li>Cinnamon (1/2 tsp)</li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-2 text-dusty-rose font-serif">Instructions</h3> | |
| <ol id="recipeInstructions" class="list-decimal pl-5 space-y-2 text-mocha"> | |
| <li>Melt the dark chocolate and coconut oil together in a double boiler.</li> | |
| <li>Remove from heat and stir in psyllium husk, cayenne, and cinnamon.</li> | |
| <li>Fold in chopped figs.</li> | |
| <li>Pour into molds and refrigerate for at least 2 hours.</li> | |
| <li>Consume 1-2 squares as needed.</li> | |
| </ol> | |
| </div> | |
| <!-- Tea Suggestion Section --> | |
| <div id="teaSuggestion" class="tea-suggestion"> | |
| <p class="text-mocha"><i class="fas fa-mug-hot text-gold mr-2"></i> Suggested Tea Pairing: <span class="font-semibold text-gold">Mint Tea</span> – classic pairing for digestive ease.</p> | |
| </div> | |
| <div class="warning-box p-4 mb-4"> | |
| <p id="recipeWarning" class="text-mocha font-medium">⚠️ <i>Don't trust a fart.</i> This recipe may cause sudden urges. Stay near facilities.</p> | |
| </div> | |
| <div class="flex flex-wrap gap-3"> | |
| <button id="regenerateBtn" class="flex-1 btn-primary py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> Regenerate | |
| </button> | |
| <button id="shareBtn" class="flex-1 btn-primary py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-share-alt mr-2"></i> Share | |
| </button> | |
| <button id="printBtn" class="flex-1 btn-primary py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-print mr-2"></i> Print | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sample Confessions --> | |
| <div class="card-bg rounded-2xl shadow-xl p-6 border border-cocoa"> | |
| <h2 class="text-2xl font-bold mb-4 text-dusty-rose font-serif">Need Inspiration?</h2> | |
| <p class="text-mocha mb-4">Try these sample confessions:</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <button class="sample-btn bg-white hover:bg-rose-petal text-mocha py-2 px-4 rounded-lg border border-cocoa text-left"> | |
| "Cheeseburger, fries, milkshake, and a whole bag of gummy bears." | |
| </button> | |
| <button class="sample-btn bg-white hover:bg-rose-petal text-mocha py-2 px-4 rounded-lg border border-cocoa text-left"> | |
| "Pasta carbonara, garlic bread, tiramisu, and 4 espressos." | |
| </button> | |
| <button class="sample-btn bg-white hover:bg-rose-petal text-mocha py-2 px-4 rounded-lg border border-cocoa text-left"> | |
| "Buffet binge: sushi, pizza, fried chicken, and 3 desserts." | |
| </button> | |
| <button class="sample-btn bg-white hover:bg-rose-petal text-mocha py-2 px-4 rounded-lg border border-cocoa text-left"> | |
| "Microwave meals all day with zero vegetables in sight." | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-16 text-center text-mocha"> | |
| <p class="mb-2">🍫💩 An idea by Leticia del Monte 🚽✨</p> | |
| <p class="text-sm">Disclaimer: These recipes are for entertainment purposes only. Consult a doctor before making dietary changes.</p> | |
| </footer> | |
| </div> | |
| <!-- Share Modal --> | |
| <div id="shareModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="modal-bg rounded-2xl p-6 max-w-md w-full mx-4 border border-gold"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-dusty-rose font-serif">Share Your Recipe</h3> | |
| <button id="closeShareModal" class="text-mocha hover:text-gold"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <input type="text" id="shareLink" class="w-full p-2 bg-white border border-gold rounded-lg text-mocha" readonly value="https://moji-confessions.example.com/share/abc123"> | |
| </div> | |
| <div class="flex justify-center space-x-4"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full"> | |
| <i class="fab fa-facebook-f"></i> | |
| </button> | |
| <button class="bg-blue-400 hover:bg-blue-500 text-white p-3 rounded-full"> | |
| <i class="fab fa-twitter"></i> | |
| </button> | |
| <button class="bg-pink-600 hover:bg-pink-700 text-white p-3 rounded-full"> | |
| <i class="fab fa-instagram"></i> | |
| </button> | |
| <button class="bg-green-600 hover:bg-green-700 text-white p-3 rounded-full"> | |
| <i class="fab fa-whatsapp"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Emoji picker functionality | |
| const emojiBtn = document.getElementById('emojiBtn'); | |
| const emojiPicker = document.getElementById('emojiPicker'); | |
| const confessionText = document.getElementById('confessionText'); | |
| const emojiOptions = document.querySelectorAll('.emoji-option'); | |
| emojiBtn.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| emojiPicker.style.display = emojiPicker.style.display === 'block' ? 'none' : 'block'; | |
| }); | |
| emojiOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| const emoji = this.getAttribute('data-emoji'); | |
| confessionText.value += emoji; | |
| emojiPicker.style.display = 'none'; | |
| }); | |
| }); | |
| document.addEventListener('click', function() { | |
| emojiPicker.style.display = 'none'; | |
| }); | |
| // Intensity buttons | |
| const intensityBtns = document.querySelectorAll('.intensity-btn'); | |
| intensityBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| intensityBtns.forEach(b => b.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Sample confession buttons | |
| const sampleBtns = document.querySelectorAll('.sample-btn'); | |
| sampleBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| confessionText.value = this.textContent.trim(); | |
| }); | |
| }); | |
| // Generate recipe | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const recipeContainer = document.getElementById('recipeContainer'); | |
| generateBtn.addEventListener('click', function() { | |
| if (confessionText.value.trim() === '') { | |
| alert('Please confess your food sins first!'); | |
| return; | |
| } | |
| // Simulate AI generation (in a real app, this would call an API) | |
| generateRecipe(); | |
| recipeContainer.classList.remove('hidden'); | |
| window.scrollTo({ | |
| top: recipeContainer.offsetTop - 20, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Regenerate recipe | |
| const regenerateBtn = document.getElementById('regenerateBtn'); | |
| regenerateBtn.addEventListener('click', generateRecipe); | |
| // Share functionality | |
| const shareBtn = document.getElementById('shareBtn'); | |
| const shareModal = document.getElementById('shareModal'); | |
| const closeShareModal = document.getElementById('closeShareModal'); | |
| shareBtn.addEventListener('click', function() { | |
| shareModal.classList.remove('hidden'); | |
| }); | |
| closeShareModal.addEventListener('click', function() { | |
| shareModal.classList.add('hidden'); | |
| }); | |
| // Print functionality | |
| const printBtn = document.getElementById('printBtn'); | |
| printBtn.addEventListener('click', function() { | |
| window.print(); | |
| }); | |
| // Tea pairing suggestion function | |
| function suggestTea(chocolateFlavors) { | |
| const teaPairings = { | |
| "orange": "Earl Grey", | |
| "fig": "Dandelion Root Tea", | |
| "prune": "Ginger Tea", | |
| "coconut": "Chamomile", | |
| "cinnamon": "Dandelion Root Tea", | |
| "lavender": "Green Tea", | |
| "pepper": "Peppermint", | |
| "cardamom": "Chai", | |
| "honey": "Rooibos", | |
| "chia": "Matcha", | |
| "ginger": "Lemongrass or Ginger Tea", | |
| "mint": "Peppermint Tea", | |
| "turmeric": "Golden Milk", | |
| "lemon": "Lemon Ginger Tea", | |
| "berry": "Hibiscus Tea" | |
| }; | |
| for (const [keyword, tea] of Object.entries(teaPairings)) { | |
| if (chocolateFlavors.includes(keyword)) { | |
| return `<i class="fas fa-mug-hot text-gold mr-2"></i> Suggested Tea Pairing: <span class="font-semibold text-gold">${tea}</span> – complements the chocolate's ${keyword} notes and supports digestion.`; | |
| } | |
| } | |
| return `<i class="fas fa-mug-hot text-gold mr-2"></i> Suggested Tea: <span class="font-semibold text-gold">Mint Tea</span> – classic pairing for digestive ease.`; | |
| } | |
| // Recipe generation function | |
| function generateRecipe() { | |
| const confession = confessionText.value; | |
| const activeIntensityBtn = document.querySelector('.intensity-btn.active'); | |
| const intensity = activeIntensityBtn.getAttribute('data-intensity'); | |
| // Determine intensity emoji and description | |
| let intensityEmoji, intensityDesc; | |
| switch(intensity) { | |
| case 'mild': | |
| intensityEmoji = '💨'; | |
| intensityDesc = 'Gentle Breeze'; | |
| break; | |
| case 'medium': | |
| intensityEmoji = '🌊'; | |
| intensityDesc = 'Steady Flow'; | |
| break; | |
| case 'strong': | |
| intensityEmoji = '🚽'; | |
| intensityDesc = 'Emergency Flush'; | |
| break; | |
| } | |
| // Generate recipe based on confession and intensity | |
| const recipeTitles = [ | |
| "The Choco Cleanser", | |
| "Gut Reset Delight", | |
| "Bowel Buddy Bars", | |
| "The Colon Conductor", | |
| "Poop-a-Licious", | |
| "The Digestive Diplomat", | |
| "Chocolate Colon Cleanse", | |
| "The Laxative Luminary", | |
| "Cocoa Colonizer", | |
| "The Bowel Bouncer" | |
| ]; | |
| // Expanded ingredient categories | |
| const baseIngredients = [ | |
| "Dark chocolate (70% cocoa or higher)", | |
| "Coconut oil (1 tsp)" | |
| ]; | |
| const nutsSeeds = [ | |
| "Chia seeds (1 tbsp - high fiber, great texture)", | |
| "Flax seeds (1 tbsp ground - omega-3 + fiber)", | |
| "Hemp seeds (1 tbsp - nutty flavor, protein boost)", | |
| "Almonds (chopped, 2 tbsp - good fat + fiber)", | |
| "Walnuts (chopped, 2 tbsp - smooth flavor, natural oils)", | |
| "Pumpkin seeds (1 tbsp - magnesium rich)", | |
| "Sunflower seeds (1 tbsp - crunchy texture)" | |
| ]; | |
| const driedFruits = [ | |
| "Prunes (chopped, 2-3 - classic laxative)", | |
| "Figs (chopped, 2-3 - elegant crunch)", | |
| "Dates (chopped, 2 - sweet binder)", | |
| "Apricots (chopped, 2-3 - subtle tang)", | |
| "Raisins (1 tbsp - reliable fiber)", | |
| "Golden berries (1 tbsp - tart and trendy)", | |
| "Goji berries (1 tbsp - antioxidant boost)" | |
| ]; | |
| const spicesBotanicals = [ | |
| "Ginger (grated, 1/2 tsp - spicy warmth)", | |
| "Cinnamon (1/2 tsp - metabolism booster)", | |
| "Cayenne pepper (pinch - fiery flush)", | |
| "Licorice root powder (1/4 tsp - gut-soothing)", | |
| "Cardamom (1/4 tsp - exotic floral)", | |
| "Fennel seeds (1/4 tsp - bloating relief)", | |
| "Turmeric (1/4 tsp - anti-inflammatory)", | |
| "Black pepper (pinch - enhances absorption)" | |
| ]; | |
| const herbalPlantBased = [ | |
| "Psyllium husk (1-2 tbsp - ultimate fiber)", | |
| "Senna powder (1/8 tsp - powerful, use caution)", | |
| "Mint leaves (chopped, 1 tsp - cooling)", | |
| "Dandelion root powder (1/2 tsp - detox)", | |
| "Matcha powder (1 tsp - gentle caffeine)", | |
| "Spirulina (1/2 tsp - nutrient dense)", | |
| "Maca powder (1 tsp - adaptogenic)" | |
| ]; | |
| const citrusFloral = [ | |
| "Orange zest (1 tsp - bright citrus)", | |
| "Lemon peel (1/2 tsp - stimulating)", | |
| "Lavender buds (1/4 tsp - soothing)", | |
| "Chamomile flowers (1/2 tsp - calming)", | |
| "Rose petals (1/4 tsp - romantic)", | |
| "Earl Grey tea (1 tsp - bergamot flavor)" | |
| ]; | |
| const functionalAdditions = [ | |
| "Activated charcoal (1/4 tsp - trendy detox)", | |
| "Magnesium citrate (1/4 tsp - medical-grade)", | |
| "Aloe vera powder (1/2 tsp - gentle mover)", | |
| "Probiotic powder (1/4 tsp - gut flora)", | |
| "Collagen peptides (1 tsp - gut lining)", | |
| "Apple cider vinegar powder (1/2 tsp - digestion)" | |
| ]; | |
| const instructions = [ | |
| "Melt the dark chocolate and coconut oil together in a double boiler.", | |
| "Remove from heat and stir in dry ingredients (seeds, spices, powders).", | |
| "Fold in chopped fruits and nuts.", | |
| "Pour into molds and refrigerate for at least 2 hours.", | |
| "Consume 1-2 squares as needed, preferably with water." | |
| ]; | |
| const warnings = [ | |
| "⚠️ <i>Don't trust a fart.</i> This recipe may cause sudden urges. Stay near facilities.", | |
| "⚠️ <i>Clear your schedule.</i> You'll want to be home for this experience.", | |
| "⚠️ <i>Hydrate well.</i> These ingredients absorb water like a sponge.", | |
| "⚠️ <i>Start with half a serving.</i> You can always have more later.", | |
| "⚠️ <i>Brace yourself.</i> The gates of digestion are about to open.", | |
| "⚠️ <i>Not for the faint of heart.</i> This is serious business.", | |
| "⚠️ <i>Keep electrolytes handy.</i> You might need them." | |
| ]; | |
| // Select random elements | |
| const title = recipeTitles[Math.floor(Math.random() * recipeTitles.length)]; | |
| const warning = warnings[Math.floor(Math.random() * warnings.length)]; | |
| // Build ingredient list based on intensity | |
| let selectedIngredients = [...baseIngredients]; | |
| // Always include psyllium for fiber base | |
| selectedIngredients.push("Psyllium husk (1-2 tbsp)"); | |
| // Add ingredients based on intensity | |
| if (intensity === 'mild') { | |
| // Gentle ingredients | |
| selectedIngredients.push( | |
| ...selectRandom(1, nutsSeeds), | |
| ...selectRandom(1, driedFruits), | |
| ...selectRandom(1, spicesBotanicals.filter(i => !i.includes('Cayenne'))), | |
| ...selectRandom(1, citrusFloral) | |
| ); | |
| } else if (intensity === 'medium') { | |
| // Moderate ingredients | |
| selectedIngredients.push( | |
| ...selectRandom(2, nutsSeeds), | |
| ...selectRandom(2, driedFruits), | |
| ...selectRandom(2, spicesBotanicals), | |
| ...selectRandom(1, herbalPlantBased.filter(i => !i.includes('Senna'))), | |
| ...selectRandom(1, citrusFloral) | |
| ); | |
| } else { | |
| // Strong ingredients | |
| selectedIngredients.push( | |
| ...selectRandom(2, nutsSeeds), | |
| ...selectRandom(2, driedFruits), | |
| ...selectRandom(2, spicesBotanicals), | |
| ...selectRandom(2, herbalPlantBased), | |
| ...selectRandom(1, functionalAdditions) | |
| ); | |
| // Ensure at least one strong ingredient | |
| const strongOptions = [ | |
| "Senna powder (1/8 tsp - powerful laxative)", | |
| "Magnesium citrate (1/4 tsp - medical-grade results)", | |
| "Cayenne pepper (1/4 tsp - fiery flush)", | |
| "Aloe vera powder (1 tsp - tropical mover)" | |
| ]; | |
| selectedIngredients.push(strongOptions[Math.floor(Math.random() * strongOptions.length)]); | |
| } | |
| // Update the DOM | |
| document.getElementById('recipeTitle').textContent = title; | |
| document.getElementById('recipeIntensity').textContent = intensityEmoji; | |
| const ingredientsList = document.getElementById('recipeIngredients'); | |
| ingredientsList.innerHTML = ''; | |
| selectedIngredients.forEach(ing => { | |
| const li = document.createElement('li'); | |
| li.textContent = ing; | |
| ingredientsList.appendChild(li); | |
| }); | |
| const instructionsList = document.getElementById('recipeInstructions'); | |
| instructionsList.innerHTML = ''; | |
| instructions.forEach((inst, idx) => { | |
| const li = document.createElement('li'); | |
| li.textContent = inst; | |
| // Add intensity-specific instructions | |
| if (intensity === 'strong' && idx === instructions.length - 1) { | |
| li.textContent += " Warning: Effects may be rapid and intense. Do not consume before travel."; | |
| } else if (intensity === 'mild' && idx === instructions.length - 1) { | |
| li.textContent += " May take 6-12 hours for full effect."; | |
| } | |
| instructionsList.appendChild(li); | |
| }); | |
| // Generate tea suggestion | |
| const chocolateDescription = selectedIngredients.join(' ').toLowerCase(); | |
| const teaSuggestion = suggestTea(chocolateDescription); | |
| document.getElementById('teaSuggestion').innerHTML = teaSuggestion; | |
| document.getElementById('recipeWarning').innerHTML = warning; | |
| // Show loading animation | |
| generateBtn.innerHTML = '<i class="fas fa-cog fa-spin mr-2"></i> Crafting Your Recipe...'; | |
| setTimeout(() => { | |
| generateBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Craft My Choco Cleanser'; | |
| }, 1500); | |
| } | |
| // Helper function to select random items from an array | |
| function selectRandom(count, array) { | |
| const shuffled = [...array].sort(() => 0.5 - Math.random()); | |
| return shuffled.slice(0, count); | |
| } | |
| // Helper function to shuffle array | |
| function shuffleArray(array) { | |
| const newArray = [...array]; | |
| for (let i = newArray.length - 1; i > 0; i--) { | |
| const j = Math.floor(Math.random() * (i + 1)); | |
| [newArray[i], newArray[j]] = [newArray[j], newArray[i]]; | |
| } | |
| return newArray; | |
| } | |
| }); | |
| </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=DelMonte/my-deepspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |