Spaces:
Running
Running
File size: 13,214 Bytes
ac33a4e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Diet | Miami Menu Matchmaker</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
.checkbox-item:hover {
background-color: #f0fdf4;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-green-600 text-white shadow-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="utensils" class="w-6 h-6"></i>
<span class="font-bold text-xl">Miami Menu Matchmaker</span>
</div>
<div>
<a href="index.html" class="bg-white text-green-600 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition">Back to Home</a>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="container mx-auto px-4 py-12">
<div class="max-w-2xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">
<div class="bg-green-600 text-white p-6">
<h1 class="text-2xl font-bold">Create Your Custom Diet</h1>
<p class="mt-2 opacity-90">Select your specific dietary needs and preferences</p>
</div>
<div class="p-6">
<form id="customDietForm">
<!-- Dietary Restrictions -->
<div class="mb-8">
<h2 class="text-xl font-bold mb-4 text-gray-800">Dietary Restrictions</h2>
<div class="space-y-3">
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="restrictions" value="vegetarian" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Vegetarian (no meat or fish)</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="restrictions" value="vegan" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Vegan (no animal products)</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="restrictions" value="gluten-free" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Gluten-Free</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="restrictions" value="dairy-free" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Dairy-Free</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="restrictions" value="nut-free" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Nut-Free</span>
</label>
</div>
</div>
<!-- Allergies -->
<div class="mb-8">
<h2 class="text-xl font-bold mb-4 text-gray-800">Allergies</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="allergies" value="peanuts" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Peanuts</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="allergies" value="tree-nuts" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Tree Nuts</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="allergies" value="shellfish" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Shellfish</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="allergies" value="soy" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Soy</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="allergies" value="wheat" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Wheat</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="allergies" value="eggs" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Eggs</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="allergies" value="fish" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Fish</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="allergies" value="sesame" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Sesame</span>
</label>
</div>
</div>
<!-- Preferences -->
<div class="mb-8">
<h2 class="text-xl font-bold mb-4 text-gray-800">Dietary Preferences</h2>
<div class="space-y-3">
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="preferences" value="low-carb" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Low-Carb/Keto</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="preferences" value="paleo" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Paleo</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="preferences" value="mediterranean" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Mediterranean</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="preferences" value="organic" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Organic Preferred</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="preferences" value="halal" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Halal</span>
</label>
<label class="checkbox-item flex items-center p-3 rounded-lg cursor-pointer transition">
<input type="checkbox" name="preferences" value="kosher" class="form-checkbox h-5 w-5 text-green-600 rounded">
<span class="ml-3 text-gray-700">Kosher</span>
</label>
</div>
</div>
<!-- Additional Notes -->
<div class="mb-8">
<h2 class="text-xl font-bold mb-4 text-gray-800">Additional Notes</h2>
<textarea name="notes" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-green-500" placeholder="Any other specific dietary needs or preferences..."></textarea>
</div>
<div class="flex justify-center">
<button type="submit" class="bg-green-600 text-white px-8 py-3 rounded-full text-lg font-medium hover:bg-green-700 transition flex items-center">
<i data-feather="search" class="w-5 h-5 mr-2"></i>
Find Matching Meals
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-lg font-bold mb-4">Miami Menu Matchmaker</h3>
<p class="text-gray-400">Helping students find the perfect meal options that fit their dietary needs across Miami University's campus.</p>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Quick Links</h3>
<ul class="space-y-2">
<li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
<li><a href="about.html" class="text-gray-400 hover:text-white transition">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Connect</h3>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
<p>© 2023 Miami Menu Matchmaker. All rights reserved.</p>
</div>
</div>
</footer>
<script>
feather.replace();
document.getElementById('customDietForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
const params = new URLSearchParams();
for (const [key, value] of formData.entries()) {
params.append(key, value);
}
window.location.href = `results.html?${params.toString()}`;
});
</script>
</body>
</html> |