<div class="flex flex-col min-h-screen"> <div class="flex-1 flex gap-8"> <div class="wine-cellar flex-1"> <div class="flex justify-between items-center mb-6"> <div class="flex items-center gap-4"> <h1 id="cellar-title" class="text-2xl font-bold dark:text-gray-200" onclick="editTitle()">My Wine Cellar</h1> </div> </div> <div class="mt-8 bg-white dark:bg-gray-800 shadow dark:shadow-none rounded-lg p-4 transition-colors duration-200 storage-section" data-storage-type=""> <div class="border-b dark:border-gray-700 pb-2 mb-4"> <h3 class="text-xl font-semibold dark:text-white">Standard Storage</h3> </div> <div class="storage-grid grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-3 sm:gap-4 mt-4"> <div class="aspect-square border rounded-lg shadow-sm flex items-center justify-center dark:border-gray-700 transition-colors duration-200 wine-spot bg-white hover:bg-gray-50 dark:bg-gray-900/50 dark:hover:bg-gray-800 border-gray-300 dark:border-gray-700" data-position="undefined-1" onclick="showBulkUpload('undefined')" style="cursor: pointer" > <span class="text-2xl text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 wine-add-btn">+</span> </div> </div> </div> <div class="mt-8 bg-white dark:bg-gray-800 shadow dark:shadow-none rounded-lg p-4 transition-colors duration-200 storage-section" data-storage-type=""> <div class="border-b dark:border-gray-700 pb-2 mb-4"> <h3 class="text-xl font-semibold dark:text-white">Secondary Storage</h3> </div> <div class="storage-grid grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-3 sm:gap-4 mt-4"> <div class="aspect-square border rounded-lg shadow-sm flex items-center justify-center dark:border-gray-700 transition-colors duration-200 wine-spot bg-white hover:bg-gray-50 dark:bg-gray-900/50 dark:hover:bg-gray-800 border-gray-300 dark:border-gray-700" data-position="undefined-1" onclick="showBulkUpload('undefined')" style="cursor: pointer" > <span class="text-2xl text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 wine-add-btn">+</span> </div> </div> </div> <div class="mt-8 bg-white dark:bg-gray-800 shadow dark:shadow-none rounded-lg p-4 transition-colors duration-200 storage-section" data-storage-type=""> <div class="border-b dark:border-gray-700 pb-2 mb-4"> <h3 class="text-xl font-semibold dark:text-white">Bulk Storage</h3> </div> <div class="storage-grid grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-3 sm:gap-4 mt-4"> <div class="aspect-square border rounded-lg shadow-sm flex items-center justify-center dark:border-gray-700 transition-colors duration-200 wine-spot bg-white hover:bg-gray-50 dark:bg-gray-900/50 dark:hover:bg-gray-800 border-gray-300 dark:border-gray-700" data-position="undefined-1" onclick="showBulkUpload('undefined')" style="cursor: pointer" > <span class="text-2xl text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 wine-add-btn">+</span> </div> </div> </div> </div> <div class="w-64 bg-white dark:bg-gray-800 p-6 shadow-sm rounded-lg h-fit transition-colors"> <h2 class="text-lg font-semibold mb-4 dark:text-gray-200">Collection Stats</h2> <div class="space-y-2"> <div class="flex justify-between items-center text-sm"> <span class="text-gray-600 dark:text-gray-400">Total Bottles</span> <span class="font-medium dark:text-gray-200">0</span> </div> <div class="flex justify-between items-center text-sm"> <span class="text-gray-600 dark:text-gray-400">Red</span> <span class="font-medium dark:text-gray-200">0</span> </div> <div class="flex justify-between items-center text-sm"> <span class="text-gray-600 dark:text-gray-400">White</span> <span class="font-medium dark:text-gray-200">0</span> </div> <div class="flex justify-between items-center text-sm"> <span class="text-gray-600 dark:text-gray-400">Champagne</span> <span class="font-medium dark:text-gray-200">0</span> </div> <div class="flex justify-between items-center text-sm"> <span class="text-gray-600 dark:text-gray-400">Sparkling</span> <span class="font-medium dark:text-gray-200">0</span> </div> <div class="flex justify-between items-center text-sm"> <span class="text-gray-600 dark:text-gray-400">Rosé</span> <span class="font-medium dark:text-gray-200">0</span> </div> </div> </div> </div> </div>