<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 class="flex gap-2"> <button onclick="showBulkUpload()" class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-md flex items-center gap-2" > <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" /> </svg> Scan Label or List </button> <button onclick="shareWineCellar()" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md" > Share </button> </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>