Spaces:

adriano2005
/

brincando

Running

App Files Files Community

adriano2005 commited on Mar 8

Commit

7c3c6fa

verified ·

1 Parent(s): b3087b2

Update index.html

Browse files

Files changed (1) hide show

index.html +14 -312

index.html CHANGED Viewed

@@ -1,315 +1,17 @@
 <!DOCTYPE html>
 <html lang="pt-BR">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ACME Pro - Premium Store</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
-  <script>
-    tailwind.config = {
-      theme: {
-        extend: {
-          fontFamily: { sans: ['Inter', 'sans-serif'] },
-          colors: { appleGray: '#f5f5f7', airbnbDark: '#161117' },
-          animation: {
-            'fade-up': 'fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards',
-            'slide-in-right': 'slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards',
-          },
-          keyframes: {
-            fadeUp: {
-              '0%': { opacity: '0', transform: 'translateY(20px)' },
-              '100%': { opacity: '1', transform: 'translateY(0)' },
-            },
-            slideInRight: {
-              '0%': { transform: 'translateX(100%)' },
-              '100%': { transform: 'translateX(0)' },
-            }
-          }
-        }
-      }
-    }
-  </script>
-  <style>
-    body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
-    .no-scrollbar::-webkit-scrollbar { display: none; }
-    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
-    /* Utilitário para delay dinâmico nas animações */
-    .delay-100 { animation-delay: 100ms; }
-    .delay-200 { animation-delay: 200ms; }
-    .delay-300 { animation-delay: 300ms; }
-  </style>
-  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-</head>
-<body class="bg-white text-gray-900 overflow-x-hidden selection:bg-black selection:text-white">
-  <div id="root"></div>
-  <script type="text/babel" data-presets="react">
-    const { useState, useMemo } = React;
-    const mockProducts = [
-      { id: "1", name: "Tênis Phantom Pro", price: 899.00, category: "Performance", description: "Engenharia aeroespacial para seus pés. O Phantom Pro redefine o conceito de amortecimento com nossa nova espuma cinética.", imageUrl: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=800&q=80" },
-      { id: "2", name: "Jaqueta Apex Zero", price: 1249.00, category: "Vestuário", description: "Impermeabilidade absoluta. Isolamento térmico de titânio. Desenhada para ambientes extremos, feita para a cidade.", imageUrl: "https://images.unsplash.com/photo-1551028719-00167b16eac5?w=800&q=80" },
-      { id: "3", name: "Mochila Stealth 2.0", price: 549.00, category: "Acessórios", description: "Design minimalista com proteção militar. Compartimentos magnéticos e tecido balístico resistente a cortes.", imageUrl: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=800&q=80" },
-      { id: "4", name: "Vision Watch Ultra", price: 3299.00, category: "Eletrônicos", description: "Corpo em titânio escovado. Tela de safira contínua. O smartwatch mais avançado já criado pela humanidade.", imageUrl: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=800&q=80" }
-    ];
-    const Icons = {
-      Cart: () => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>,
-      Close: () => <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
-      ArrowLeft: () => <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
-    };
-    function App() {
-      const [cartItems, setCartItems] = useState([]);
-      const [currentView, setCurrentView] = useState('home');
-      const [selectedProduct, setSelectedProduct] = useState(null);
-      const [isCartOpen, setIsCartOpen] = useState(false);
-      const addToCart = (product) => {
-        setCartItems(prev => {
-          const exists = prev.find(i => i.id === product.id);
-          if (exists) return prev.map(i => i.id === product.id ? { ...i, quantity: i.quantity + 1 } : i);
-          return [...prev, { ...product, quantity: 1 }];
-        });
-        setIsCartOpen(true);
-      };
-      const removeFromCart = (productId) => setCartItems(prev => prev.filter(i => i.id !== productId));
-      const totalCartValue = useMemo(() => cartItems.reduce((acc, item) => acc + (item.price * item.quantity), 0), [cartItems]);
-      const totalItemsCount = useMemo(() => cartItems.reduce((acc, item) => acc + item.quantity, 0), [cartItems]);
-      const openProduct = (product) => {
-        setSelectedProduct(product);
-        setCurrentView('product');
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-      };
-      const goHome = () => {
-        setCurrentView('home');
-        setSelectedProduct(null);
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-      };
-      return (
-        <div className="min-h-screen flex flex-col">
-          {/* 🎯 HEADER APPLE-STYLE: Glassmorphism e minimalismo absoluto */}
-          <header className="fixed top-0 z-40 w-full bg-white/70 backdrop-blur-xl border-b border-gray-100/50 transition-all duration-300">
-            <div className="max-w-7xl mx-auto px-6 md:px-12 h-16 flex justify-between items-center">
-              <h1 onClick={goHome} className="text-xl font-bold tracking-tight cursor-pointer hover:text-gray-500 transition-colors">
-                ACME <span className="font-light">Pro</span>
-              </h1>
-              <div className="flex items-center gap-6">
-                <button onClick={() => setIsCartOpen(true)} className="relative p-2 text-gray-900 hover:text-gray-500 transition-colors group">
-                  <Icons.Cart />
-                  {totalItemsCount > 0 && (
-                    <span className="absolute top-0 right-0 bg-black text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center transform group-hover:scale-110 transition-transform">
-                      {totalItemsCount}
-                    </span>
-                  )}
-                </button>
-              </div>
-            </div>
-          </header>
-          <main className="flex-grow w-full pt-16">
-            {currentView === 'home' && (
-              <HomeView products={mockProducts} onSelectProduct={openProduct} />
-            )}
-            {currentView === 'product' && selectedProduct && (
-              <ProductView product={selectedProduct} onBack={goHome} onAdd={() => addToCart(selectedProduct)} />
-            )}
-          </main>
-          {/* 🎯 FOOTER AIRBNB-STYLE: Fundo escuro, links estruturados */}
-          <footer className="bg-airbnbDark text-white py-16 px-6 md:px-12 mt-24">
-            <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
-              <div>
-                <h3 className="text-lg font-bold mb-4">ACME Pro</h3>
-                <p className="text-gray-400 text-sm leading-relaxed">Projetado na Califórnia.<br/>Construído para o mundo.</p>
-              </div>
-              <div>
-                <h4 className="font-semibold mb-4 text-sm">Explorar</h4>
-                <ul className="space-y-2 text-gray-400 text-sm">
-                  <li><a href="#" className="hover:text-white transition-colors">Lançamentos</a></li>
-                  <li><a href="#" className="hover:text-white transition-colors">Mais Vendidos</a></li>
-                  <li><a href="#" className="hover:text-white transition-colors">Acessórios</a></li>
-                </ul>
-              </div>
-              <div>
-                <h4 className="font-semibold mb-4 text-sm">Suporte</h4>
-                <ul className="space-y-2 text-gray-400 text-sm">
-                  <li><a href="#" className="hover:text-white transition-colors">Fale Conosco</a></li>
-                  <li><a href="#" className="hover:text-white transition-colors">Garantia</a></li>
-                  <li><a href="#" className="hover:text-white transition-colors">Devoluções</a></li>
-                </ul>
-              </div>
-              <div>
-                <h4 className="font-semibold mb-4 text-sm">Legal</h4>
-                <ul className="space-y-2 text-gray-400 text-sm">
-                  <li><a href="#" className="hover:text-white transition-colors">Privacidade</a></li>
-                  <li><a href="#" className="hover:text-white transition-colors">Termos de Uso</a></li>
-                </ul>
-              </div>
-            </div>
-            <div className="max-w-7xl mx-auto border-t border-gray-800 mt-12 pt-8 text-sm text-gray-500 text-center">
-              © 2026 ACME Store. Padrão Elite Staff Engineer.
-            </div>
-          </footer>
-          {/* MODAL DO CARRINHO (SLIDE LATERAL) */}
-          {isCartOpen && (
-            <div className="fixed inset-0 z-50 flex justify-end">
-              <div className="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" onClick={() => setIsCartOpen(false)}></div>
-              <div className="relative w-full max-w-md bg-white h-full flex flex-col animate-slide-in-right shadow-2xl">
-                <div className="flex items-center justify-between p-6 border-b border-gray-100">
-                  <h2 className="text-2xl font-bold tracking-tight">Sacola</h2>
-                  <button onClick={() => setIsCartOpen(false)} className="p-2 hover:bg-gray-100 rounded-full transition-colors"><Icons.Close /></button>
-                </div>
-                <div className="flex-1 overflow-y-auto p-6 no-scrollbar">
-                  {cartItems.length === 0 ? (
-                    <div className="flex flex-col items-center justify-center h-full text-gray-400">
-                      <Icons.Cart />
-                      <p className="mt-4 font-medium">Sua sacola está vazia.</p>
-                    </div>
-                  ) : (
-                    <ul className="space-y-8">
-                      {cartItems.map(item => (
-                        <li key={item.id} className="flex items-center gap-6 group">
-                          <div className="w-24 h-24 bg-appleGray rounded-2xl p-2 flex-shrink-0">
-                            <img src={item.imageUrl} alt={item.name} className="w-full h-full object-cover rounded-xl" />
-                          </div>
-                          <div className="flex-1">
-                            <h4 className="font-semibold text-gray-900">{item.name}</h4>
-                            <p className="text-gray-500 text-sm mt-1">Qtd: {item.quantity}</p>
-                            <p className="font-bold mt-2">R$ {(item.price * item.quantity).toFixed(2)}</p>
-                          </div>
-                          <button onClick={() => removeFromCart(item.id)} className="text-gray-300 hover:text-red-500 text-sm font-medium transition-colors">Remover</button>
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </div>
-                <div className="p-8 border-t border-gray-100 bg-white">
-                  <div className="flex justify-between font-bold text-xl mb-6">
-                    <span>Total</span>
-                    <span>R$ {totalCartValue.toFixed(2)}</span>
-                  </div>
-                  <button disabled={cartItems.length === 0} className="w-full bg-black text-white py-4 rounded-full font-semibold text-lg hover:scale-[1.02] hover:bg-gray-800 disabled:opacity-50 disabled:hover:scale-100 disabled:cursor-not-allowed transition-all">
-                    Finalizar Compra
-                  </button>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      );
-    }
-    // --- VIEW: HOME ---
-    function HomeView({ products, onSelectProduct }) {
-      return (
-        <div className="w-full animate-fade-up">
-          {/* HERO SECTION APPLE-STYLE */}
-          <section className="w-full max-w-7xl mx-auto px-6 md:px-12 pt-12 pb-24 text-center">
-            <h2 className="text-5xl md:text-7xl font-black tracking-tighter mb-6 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-500">
-              Projetado para <br/> a excelência.
-            </h2>
-            <p className="text-xl text-gray-500 max-w-2xl mx-auto mb-10 font-light">
-              Descubra a nova coleção. Materiais premium, design implacável e a performance que você exige no seu dia a dia.
-            </p>
-          </section>
-          {/* GRID DE PRODUTOS MINIMALISTA */}
-          <section className="w-full max-w-7xl mx-auto px-6 md:px-12 pb-24">
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-16">
-              {products.map((product, index) => (
-                <article
-                  key={product.id}
-                  onClick={() => onSelectProduct(product)}
-                  className={`group cursor-pointer flex flex-col opacity-0 animate-fade-up delay-${index * 100}`}
-                  style={{ animationDelay: `${index * 100}ms` }}
-                >
-                  <div className="relative aspect-[4/5] rounded-[2rem] bg-appleGray mb-6 overflow-hidden transition-all duration-500 group-hover:shadow-2xl group-hover:shadow-black/10 group-hover:-translate-y-2">
-                    <img
-                      src={product.imageUrl}
-                      alt={product.name}
-                      className="object-cover w-full h-full p-4 mix-blend-multiply group-hover:scale-105 transition-transform duration-700 ease-out"
-                    />
-                  </div>
-                  <div className="text-center px-2">
-                    <span className="text-xs font-semibold tracking-widest uppercase text-orange-500 mb-2 block">{product.category}</span>
-                    <h3 className="font-bold text-xl text-gray-900 mb-1">{product.name}</h3>
-                    <p className="text-gray-500 font-medium">R$ {product.price.toFixed(2)}</p>
-                  </div>
-                </article>
-              ))}
-            </div>
-          </section>
-        </div>
-      );
-    }
-    // --- VIEW: DETALHES DO PRODUTO ---
-    function ProductView({ product, onBack, onAdd }) {
-      return (
-        <div className="max-w-7xl mx-auto px-6 md:px-12 py-12 animate-fade-up">
-          <button onClick={onBack} className="flex items-center gap-2 text-gray-500 hover:text-black mb-12 font-medium transition-colors">
-            <Icons.ArrowLeft /> Voltar
-          </button>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-16 lg:gap-24 items-center">
-            {/* Imagem grande com fundo AppleGray */}
-            <div className="relative aspect-square md:aspect-[4/5] rounded-[3rem] bg-appleGray p-8 md:p-12">
-              <img src={product.imageUrl} alt={product.name} className="object-cover w-full h-full mix-blend-multiply rounded-2xl" />
-            </div>
-            <div className="flex flex-col">
-              <span className="text-sm font-bold tracking-widest uppercase text-orange-500 mb-4">{product.category}</span>
-              <h1 className="text-5xl md:text-6xl font-black tracking-tighter mb-6 text-gray-900">{product.name}</h1>
-              <p className="text-3xl text-gray-500 mb-10 font-light">R$ {product.price.toFixed(2)}</p>
-              <p className="text-gray-600 text-lg leading-relaxed mb-12 font-light">
-                {product.description}
-              </p>
-              <button
-                onClick={onAdd}
-                className="w-full md:w-auto bg-black text-white px-10 py-5 rounded-full font-semibold text-lg hover:bg-gray-800 active:scale-95 transition-all duration-200"
-              >
-                Adicionar à Sacola
-              </button>
-              <div className="mt-16 pt-10 border-t border-gray-100 grid grid-cols-2 gap-8 text-sm">
-                <div>
-                  <span className="block font-bold text-gray-900 mb-2">Envio Rápido</span>
-                  <span className="text-gray-500">Entrega gratuita em compras acima de R$ 999.</span>
-                </div>
-                <div>
-                  <span className="block font-bold text-gray-900 mb-2">Devoluções</span>
-                  <span className="text-gray-500">Devolva gratuitamente em até 14 dias.</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    }
-    const root = ReactDOM.createRoot(document.getElementById('root'));
-    root.render(<App />);
-  </script>
-</body>
 </html>

 <!DOCTYPE html>
 <html lang="pt-BR">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="E-commerce estático de alta performance hospedado no Hugging Face." />
+    <title>E-commerce | Elite Architecture</title>
+  </head>
+  <body class="bg-gray-50 text-gray-900 antialiased">
+    <noscript>Você precisa habilitar o JavaScript para rodar este aplicativo.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>