Update index.html

index.html

@@ -495,4 +495,302 @@
                         <div className="p-4 border-b border-gray-100 flex justify-between items-center bg-white relative">
                             <h2 className="font-bold text-sm uppercase text-gray-500">Deal Inventory</h2>
                             <div className="flex gap-2">
-                            <button onClick={()
+                            <button onClick={() => setDeals(generateSampleData())} className="text-xs bg-gray-100 border border-gray-200 px-3 py-1.5 rounded hover:bg-gray-200 transition-colors">Reset Demo</button>
+                            
+                            {/* IMPORT DROPDOWN */}
+                            <div className="relative">
+                                    <button 
+                                        onClick={() => setShowImportMenu(!showImportMenu)}
+                                        className="text-xs bg-cyan-50 text-cyan-700 border border-cyan-100 px-3 py-1.5 rounded hover:bg-cyan-100 flex items-center gap-1 transition-colors"
+                                    >
+                                        <Upload size={12} /> Import <ChevronDown size={10} />
+                                    </button>
+                                    
+                                    {showImportMenu && (
+                                        <div className="absolute right-0 top-full mt-1 w-48 bg-white border border-gray-200 rounded-lg shadow-xl z-40 py-1 flex flex-col animate-in fade-in slide-in-from-top-2">
+                                            <button 
+                                                onClick={openLinkModal}
+                                                className="text-left px-4 py-2 hover:bg-gray-50 text-xs font-medium text-gray-700 flex items-center gap-2 w-full"
+                                            >
+                                                <LinkIcon size={14} className="text-blue-500" /> From Link / Cloud
+                                            </button>
+                                            <label className="text-left px-4 py-2 hover:bg-gray-50 text-xs font-medium text-gray-700 flex items-center gap-2 cursor-pointer w-full">
+                                                <FileImage size={14} className="text-green-500"/> From Screenshot
+                                                <input type="file" className="hidden" onChange={handleFileUpload} accept=".json,.jpg,.png,.xlsx" />
+                                            </label>
+                                        </div>
+                                    )}
+                            </div>
+                            </div>
+                        </div>
+
+                        {/* TABS */}
+                        <div className="flex border-b border-gray-200">
+                            <button 
+                                onClick={() => setActiveTab('weekend')} 
+                                className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === 'weekend' ? 'border-cyan-500 text-cyan-600 bg-cyan-50' : 'border-transparent text-gray-400 hover:text-gray-600'}`}
+                            >
+                                Weekend
+                            </button>
+                            <button 
+                                onClick={() => setActiveTab('weekday')} 
+                                className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === 'weekday' ? 'border-pink-500 text-pink-600 bg-pink-50' : 'border-transparent text-gray-400 hover:text-gray-600'}`}
+                            >
+                                Weekday
+                            </button>
+                            <button 
+                                onClick={() => setActiveTab('footer')} 
+                                className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === 'footer' ? 'border-yellow-500 text-yellow-700 bg-yellow-50' : 'border-transparent text-gray-400 hover:text-gray-600'}`}
+                            >
+                                Footer
+                            </button>
+                        </div>
+
+                        {/* LIST */}
+                        <div className={`flex-1 overflow-y-auto p-4 space-y-3 ${activeTab === 'weekend' ? 'bg-cyan-50/30' : activeTab === 'weekday' ? 'bg-pink-50/30' : 'bg-yellow-50/30'}`} ref={inventoryListRef}>
+                            {inventoryDeals.length === 0 && (
+                                <div className="text-center py-8 text-gray-400 text-xs italic">No deals in this section.</div>
+                            )}
+                            {inventoryDeals.map((deal) => (
+                            <div key={deal.id} className="bg-white border border-gray-200 p-3 rounded-lg shadow-sm hover:shadow-md transition-all group relative">
+                                <div className="flex justify-between items-center mb-2">
+                                <span className={`text-[10px] font-bold px-2 py-0.5 rounded uppercase ${
+                                    deal.type === 'weekend' ? 'bg-cyan-100 text-cyan-800' : 
+                                    deal.type === 'weekday' ? 'bg-pink-100 text-pink-800' : 
+                                    'bg-yellow-100 text-yellow-800'
+                                }`}>
+                                    {deal.type}
+                                </span>
+                                <div className="flex gap-2">
+                                    <button onClick={() => deleteDeal(deal.id)} className="text-gray-300 hover:text-red-500 transition-colors"><Trash2 size={14} /></button>
+                                </div>
+                                </div>
+
+                                {deal.type === 'footer' ? (
+                                    <div className="space-y-2">
+                                        <div className="flex items-center gap-2">
+                                            <label className="flex-1 flex items-center justify-center gap-2 p-2 border border-dashed border-gray-300 rounded hover:bg-yellow-50 cursor-pointer group transition-colors bg-gray-50">
+                                                <ImageIcon size={14} className="text-gray-400 group-hover:text-yellow-600"/>
+                                                <span className="text-[10px] font-bold text-gray-500 group-hover:text-yellow-700 uppercase">
+                                                    {deal.footerLogo ? 'Change Logo' : 'Brand Logo'}
+                                                </span>
+                                                <input type="file" className="hidden" onChange={(e) => handleFooterLogoUpload(deal.id, e)} accept="image/*"/>
+                                            </label>
+                                            {deal.footerLogo && (
+                                                <div className="w-9 h-9 rounded bg-white flex items-center justify-center border border-gray-200 shrink-0">
+                                                    <img src={deal.footerLogo} alt="Brand" className="w-7 h-7 object-contain" />
+                                                </div>
+                                            )}
+                                        </div>
+                                        <div className="grid grid-cols-2 gap-2">
+                                            <textarea rows={2} value={deal.footerSplitLeft || ''} onChange={(e) => updateDeal(deal.id, 'footerSplitLeft', e.target.value)} placeholder="Left Text" className="text-xs border border-gray-200 rounded p-2 w-full font-mono bg-gray-50 focus:bg-white focus:border-yellow-400 outline-none" />
+                                            <textarea rows={2} value={deal.footerSplitRight || ''} onChange={(e) => updateDeal(deal.id, 'footerSplitRight', e.target.value)} placeholder="Right Text" className="text-xs border border-gray-200 rounded p-2 w-full font-mono bg-gray-50 focus:bg-white focus:border-yellow-400 outline-none" />
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <div className="grid grid-cols-[1fr_80px] gap-2">
+                                        <div>
+                                            <input type="text" value={deal.brand} onChange={(e) => updateDeal(deal.id, 'brand', e.target.value)} className="w-full font-bold text-sm border-b border-gray-100 focus:border-cyan-500 outline-none pb-1 mb-1 bg-transparent" placeholder="Brand Name" />
+                                            <div className="flex gap-2 items-center">
+                                                <input type="text" value={deal.notes || ''} onChange={(e) => updateDeal(deal.id, 'notes', e.target.value)} className="flex-1 text-[10px] text-gray-500 border-b border-gray-100 focus:border-cyan-500 outline-none bg-transparent" placeholder="Notes/Exclusions" />
+                                                <select value={deal.product} onChange={(e) => updateDeal(deal.id, 'product', e.target.value)} className="w-[90px] text-[9px] font-bold text-gray-600 bg-gray-50 border border-gray-200 rounded p-1 focus:border-cyan-500 outline-none">
+                                                    {CATEGORIES.map(cat => (<option key={cat} value={cat}>{cat}</option>))}
+                                                </select>
+                                            </div>
+                                        </div>
+                                        <input type="text" value={deal.discount} onChange={(e) => updateDeal(deal.id, 'discount', e.target.value)} className="text-right font-bold text-red-500 border-b border-gray-100 focus:border-red-500 outline-none h-8 self-start bg-transparent" placeholder="30% OFF" />
+                                    </div>
+                                )}
+                            </div>
+                            ))}
+                            <button onClick={addDeal} className="w-full py-4 border-2 border-dashed border-gray-300 text-gray-400 rounded-lg hover:border-cyan-400 hover:text-cyan-600 hover:bg-white transition-all text-sm font-bold flex items-center justify-center gap-2 uppercase tracking-wide bg-transparent">
+                                <Plus size={16} /> Add {activeTab} Deal
+                            </button>
+                        </div>
+                        </div>
+
+                        {/* PREVIEW PANEL (Right) */}
+                        <div className={`flex-1 bg-gray-200 flex flex-col overflow-hidden transition-all duration-300 ${showInventory ? 'ml-[420px]' : 'ml-0'}`}>
+                            
+                            {/* Size Tabs */}
+                            <div className="h-12 bg-white border-b border-gray-200 flex items-center px-4 gap-2 overflow-x-auto no-scrollbar">
+                                {OUTPUT_SIZES.map((size) => (
+                                    <button
+                                        key={size.id}
+                                        onClick={() => setSelectedSize(size)}
+                                        className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-bold whitespace-nowrap transition-all border ${
+                                            selectedSize.name === size.name 
+                                            ? 'bg-slate-800 text-white border-slate-800' 
+                                            : 'bg-white text-slate-600 border-gray-200 hover:border-gray-400'
+                                        }`}
+                                    >
+                                        {size.icon}
+                                        {size.name} <span className="opacity-50 text-[9px] ml-1 font-normal">({size.width}x{size.height})</span>
+                                    </button>
+                                ))}
+                            </div>
+
+                            {/* Canvas Area */}
+                            <div className="flex-1 flex items-center justify-center overflow-hidden bg-slate-200/50 p-8" ref={containerRef}>
+                                <div 
+                                    ref={posterRef}
+                                    id="poster-container"
+                                    style={{ 
+                                        width: `${selectedSize.width}px`, 
+                                        height: `${selectedSize.height}px`, 
+                                        transform: `scale(${scale})`,
+                                        transformOrigin: 'center',
+                                        boxShadow: '0 30px 80px -20px rgba(0, 0, 0, 0.3)'
+                                    }}
+                                    className="bg-white relative flex flex-col select-none overflow-hidden shrink-0 transition-all duration-500 ease-out"
+                                >
+                                    {/* --- POSTER CONTENT START --- */}
+                                    
+                                    {/* HEADER */}
+                                    <div className={`${isPortrait ? 'h-[7%]' : 'h-[10%]'} bg-black flex items-center justify-between px-[3%] shrink-0 z-10`}>
+                                        <div className="flex items-center gap-[2%] h-full overflow-hidden flex-1">
+                                            <div className="h-full flex items-center shrink-0">
+                                                <h1 className={`${isPortrait ? 'text-[3em]' : 'text-[4em]'} font-black text-white tracking-tight italic uppercase leading-none font-stencil transform scale-y-110`} style={{ fontFamily: 'Black Ops One, cursive' }}>CULTURE</h1>
+                                            </div>
+                                            <div className="h-[40%] w-0.5 bg-gray-600 shrink-0"></div>
+                                            <div className="flex flex-col justify-center min-w-0 flex-1">
+                                                <h2 className={`${isPortrait ? 'text-[1.5em]' : 'text-[2.5em]'} font-bold text-white uppercase tracking-wide leading-none truncate`}>{locationName} WEEKLY DEALS</h2>
+                                                <p className={`${isPortrait ? 'text-[0.6em]' : 'text-[0.8em]'} text-gray-400 uppercase tracking-widest mt-[1%] truncate w-full`}>WE PRICE MATCH ALL PRODUCTS</p>
+                                            </div>
+                                        </div>
+                                        <input
+                                            type="text"
+                                            value={dateRange}
+                                            onChange={(e) => setDateRange(e.target.value)}
+                                            className={`${isPortrait ? 'text-[2.2em]' : 'text-[3.2em]'} font-bold text-yellow-400 tracking-wide leading-none shrink-0 pl-4 bg-transparent border-none outline-none text-right w-[40%] uppercase placeholder:text-yellow-400/50`}
+                                            placeholder="NOV 17 - NOV 23"
+                                        />
+                                    </div>
+
+                                    {/* BODY CONTAINER */}
+                                    <div className={`flex-1 bg-[#4a4a4a] m-[2%] rounded-[30px] p-[2%] flex flex-col gap-[2%] relative shadow-inner overflow-hidden`}>
+                                        
+                                        {/* TOP SECTION */}
+                                        <div className={`flex ${isPortrait ? 'flex-col gap-[2%]' : 'flex-row gap-[2%]'} flex-1 min-h-0`}>
+                                            
+                                            {/* WEEKEND SECTION */}
+                                            <div className={`${isPortrait ? 'w-full h-[50%]' : 'w-[60%] h-full'} flex flex-col`}>
+                                                <div className="h-[15%] bg-[#00c2cb] rounded-t-2xl flex items-center px-[4%] justify-between shrink-0 shadow-md">
+                                                    <span className="text-[2.5em] font-bold text-white uppercase tracking-wide truncate">WEEKEND DEALS</span>
+                                                    <div className="bg-white text-[#00c2cb] px-[3%] py-[0.5%] rounded-full text-[1em] font-black uppercase shrink-0">FRI - SUN</div>
+                                                </div>
+                                                <div className="flex-1 bg-[#4a4a4a] py-[2%] flex flex-col gap-[2%] overflow-hidden">
+                                                    {weekendDeals.map((deal) => (
+                                                        <div key={deal.id} className="bg-white rounded-full flex-1 w-full flex items-center px-[3%] justify-between shadow-sm shrink-0 overflow-hidden min-h-0">
+                                                            <div className="flex items-baseline gap-[3%] overflow-hidden flex-1 pr-[2%] min-w-0">
+                                                                <span className="text-[1.5em] font-black text-black uppercase truncate">{deal.brand}</span>
+                                                                <span className="text-[0.8em] font-bold text-gray-500 uppercase truncate flex-shrink-1 min-w-0">{deal.notes}</span>
+                                                            </div>
+                                                            <div className="bg-[#ef3e42] text-white px-[2%] w-[30%] h-[80%] rounded-full font-black text-[1.6em] italic flex items-center justify-center transform skew-x-[-10deg] shrink-0 shadow-sm">
+                                                                <div className="transform skew-x-[10deg] truncate w-full text-center">{deal.discount}</div>
+                                                            </div>
+                                                        </div>
+                                                    ))}
+                                                </div>
+                                            </div>
+
+                                            {/* WEEKDAY SECTION */}
+                                            <div className={`${isPortrait ? 'w-full h-[50%]' : 'w-[40%] h-full'} flex flex-col`}>
+                                                <div className="h-[15%] bg-[#ff4081] rounded-t-2xl flex items-center px-[4%] justify-between shrink-0 shadow-md">
+                                                    <span className="text-[2.5em] font-bold text-white uppercase tracking-wide truncate">WEEKDAY</span>
+                                                    <div className="bg-white text-[#ff4081] px-[3%] py-[0.5%] rounded-full text-[1em] font-black uppercase shrink-0">MON-THU</div>
+                                                </div>
+                                                <div className="flex-1 py-[2%] flex flex-wrap content-stretch gap-[2%] overflow-hidden">
+                                                    {weekdayDeals.map((deal, idx) => {
+                                                        const isLastItem = idx === weekdayDeals.length - 1;
+                                                        const isOddCount = weekdayDeals.length % 2 !== 0;
+                                                        return (
+                                                            <div 
+                                                                key={deal.id} 
+                                                                className={`bg-gradient-to-b from-white to-pink-50 rounded-xl px-[8%] py-[6%] relative shadow-sm flex flex-col justify-between overflow-hidden flex-grow shrink-0 ${isLastItem && isOddCount ? 'basis-[100%]' : 'basis-[48%]'} min-h-0`}
+                                                            >
+                                                                <div className="flex flex-col w-full min-w-0">
+                                                                    <span className="text-[1.2em] font-black text-[#d81b60] uppercase leading-none truncate w-full">{deal.brand}</span>
+                                                                    <span className="text-[0.9em] font-bold text-black uppercase leading-tight truncate w-full mt-[2%]">{deal.product}</span>
+                                                                    {deal.notes && <span className="text-[0.6em] text-gray-500 uppercase mt-[2%] leading-none truncate w-full">{deal.notes}</span>}
+                                                                </div>
+                                                                <div className="self-end bg-[#ef3e42] text-white w-auto min-w-[45%] h-[2.4em] px-[0.5em] rounded-lg font-black text-[1.6em] shadow-md flex items-center justify-center leading-none truncate">
+                                                                    {deal.discount}
+                                                                </div>
+                                                            </div>
+                                                        );
+                                                    })}
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        {/* FOOTER SECTION */}
+                                        <div className={`${isPortrait ? 'h-[12%] mt-auto' : 'h-[25%]'} flex gap-[2%] shrink-0 w-full min-h-0`}>
+                                            {footerDeals.map((deal, idx) => {
+                                                const isSingleItem = !deal.footerSplitRight;
+                                                return (
+                                                    <div key={deal.id} className="rounded-2xl overflow-hidden flex flex-col bg-black shadow-lg h-full min-h-0 flex-1">
+                                                        <div className="h-[25%] w-full bg-[#ffeb3b] shrink-0 flex items-center justify-center px-[5%] overflow-hidden">
+                                                            {deal.footerLogo ? (
+                                                                <img src={deal.footerLogo} alt="Brand" className="h-[80%] w-auto object-contain" />
+                                                            ) : (
+                                                                <span className="text-[0.7em] font-bold text-yellow-800/30 uppercase tracking-widest">Premium Spot</span>
+                                                            )}
+                                                        </div>
+                                                        <div className="flex-1 flex items-center justify-center px-[5%] text-center overflow-hidden min-w-0">
+                                                            {isSingleItem ? (
+                                                                <div className="flex flex-col items-center w-full min-w-0 py-[5%]">
+                                                                    <pre className="font-black text-white text-[1.4em] uppercase leading-tight font-sans whitespace-pre-wrap overflow-hidden text-ellipsis w-full px-1">{deal.footerSplitLeft || deal.brand}</pre>
+                                                                    <div className="text-[0.8em] text-gray-400 uppercase mt-[2%] truncate w-full px-1">{deal.notes}</div>
+                                                                </div>
+                                                            ) : (
+                                                                <div className="flex w-full h-full items-center">
+                                                                    <div className="flex-1 border-r border-gray-700 h-[80%] flex items-center justify-center overflow-hidden min-w-0 px-1 py-[5%]">
+                                                                        <pre className="font-black text-white text-[1.2em] uppercase leading-none font-sans whitespace-pre-wrap text-center w-full overflow-hidden text-ellipsis">{deal.footerSplitLeft}</pre>
+                                                                    </div>
+                                                                    <div className="flex-1 flex items-center justify-center overflow-hidden h-[80%] min-w-0 px-1 py-[5%]">
+                                                                        <pre className="font-black text-white text-[1.2em] uppercase leading-none font-sans whitespace-pre-wrap text-center w-full overflow-hidden text-ellipsis">{deal.footerSplitRight}</pre>
+                                                                    </div>
+                                                                </div>
+                                                            )}
+                                                        </div>
+                                                        <div className="bg-gray-900 text-gray-500 text-[0.6em] text-center py-[1%] uppercase font-bold shrink-0">
+                                                            NOVEMBER 2025
+                                                        </div>
+                                                    </div>
+                                                );
+                                            })}
+                                        </div>
+
+                                        {/* LEGEND STRIP */}
+                                        <div className="absolute bottom-[1%] left-[2%] right-[2%] flex justify-between items-center text-[0.7em] text-gray-400 uppercase font-bold tracking-wider h-[2%] shrink-0 overflow-hidden">
+                                            <div className="flex gap-[2%] items-center">
+                                                <span className="whitespace-nowrap">CATEGORY LEGEND:</span>
+                                                <div className="flex items-center gap-[0.2em] whitespace-nowrap"><Circle size={'1em'}/> ALL PRODUCTS</div>
+                                                <div className="flex items-center gap-[0.2em] whitespace-nowrap"><Pill size={'1em'}/> PREROLLS</div>
+                                                <div className="flex items-center gap-[0.2em] whitespace-nowrap"><Disc size={'1em'}/> VAPES</div>
+                                                <div className="flex items-center gap-[0.2em] whitespace-nowrap"><Type size={'1em'}/> FLOWERS</div>
+                                                <div className="flex items-center gap-[0.2em] whitespace-nowrap"><Droplet size={'1em'}/> EXTRACTS</div>
+                                                <div className="flex items-center gap-[0.2em] whitespace-nowrap"><Coffee size={'1em'}/> EDIBLES</div>
+                                                <div className="flex items-center gap-[0.2em] whitespace-nowrap"><Wine size={'1em'}/> BEVERAGES</div>
+                                                <div className="flex items-center gap-[0.2em] whitespace-nowrap"><Briefcase size={'1em'}/> WELLNESS</div>
+                                            </div>
+                                            <div className="text-right leading-tight min-w-0 hidden lg:block">
+                                                <div className="text-white truncate">*DEALS AVAILABLE AT {locationName}</div>
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            );
+        };
+
+        const root = ReactDOM.createRoot(document.getElementById('root'));
+        root.render(<DealCardMaker />);
+    </script>
+</body>
+</html>