my-deepspace / index.html
DelMonte's picture
Update index.html
40e7350 verified
Raw History Blame Contribute Delete
33.2 kB
<!DOCTYPE html>
<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>