Hugging Face's logo

Spaces:
AssenavGnuj
/
test
Running

App Files Community
test / index.html
AssenavGnuj's picture
AssenavGnuj
Add 3 files
e383fb0 verified
raw
history blame contribute delete
72.5 kB
 <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cachimbos & Tabacos</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.dropdown-menu {
display: none;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
display: block;
}
.image-container {
width: 1080px;
height: 1080px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.image-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.pipe-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.pipe-card {
transition: transform 0.3s ease;
}
.pipe-card:hover {
transform: translateY(-5px);
}
.comment-section {
max-height: 400px;
overflow-y: auto;
}
.admin-panel {
transition: all 0.3s ease;
transform: translateX(-100%);
}
.admin-panel.open {
transform: translateX(0);
}
/* Custom scrollbar */
.comment-section::-webkit-scrollbar {
width: 8px;
}
.comment-section::-webkit-scrollbar-track {
background: #f1f1f1;
}
.comment-section::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.comment-section::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Prevent dropdown from closing when clicking inside */
.dropdown-menu {
pointer-events: auto;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<!-- Admin Panel Toggle -->
<button id="admin-toggle" class="fixed top-4 left-4 bg-amber-800 text-white p-3 rounded-full shadow-lg z-50">
<i class="fas fa-user-cog"></i>
</button>
<!-- Admin Panel -->
<div id="admin-panel" class="admin-panel fixed top-0 left-0 h-full w-80 bg-gray-800 text-white shadow-xl z-40 p-4 overflow-y-auto">
<div class="flex justify-between items-center mb-6 border-b border-gray-700 pb-4">
<h2 class="text-xl font-bold">Painel de Administração</h2>
<button id="close-admin" class="text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-4">
<div class="admin-section">
<h3 class="font-semibold mb-2 flex items-center justify-between cursor-pointer" onclick="toggleAdminSection(this)">
<span>Cachimbos</span>
<i class="fas fa-chevron-down"></i>
</h3>
<div class="admin-content hidden pl-4 space-y-2">
<button class="admin-btn w-full text-left" onclick="showAdminContent('add-pipe')">
<i class="fas fa-plus mr-2"></i> Adicionar Cachimbo
</button>
<button class="admin-btn w-full text-left" onclick="showAdminContent('manage-pipes')">
<i class="fas fa-edit mr-2"></i> Gerenciar Cachimbos
</button>
<button class="admin-btn w-full text-left" onclick="showAdminContent('pipe-categories')">
<i class="fas fa-tags mr-2"></i> Categorias
</button>
</div>
</div>
<div class="admin-section">
<h3 class="font-semibold mb-2 flex items-center justify-between cursor-pointer" onclick="toggleAdminSection(this)">
<span>Acessórios</span>
<i class="fas fa-chevron-down"></i>
</h3>
<div class="admin-content hidden pl-4 space-y-2">
<button class="admin-btn w-full text-left" onclick="showAdminContent('add-accessory')">
<i class="fas fa-plus mr-2"></i> Adicionar Acessório
</button>
<button class="admin-btn w-full text-left" onclick="showAdminContent('manage-accessories')">
<i class="fas fa-edit mr-2"></i> Gerenciar Acessórios
</button>
</div>
</div>
<div class="admin-section">
<h3 class="font-semibold mb-2 flex items-center justify-between cursor-pointer" onclick="toggleAdminSection(this)">
<span>Materiais para Restauração</span>
<i class="fas fa-chevron-down"></i>
</h3>
<div class="admin-content hidden pl-4 space-y-2">
<button class="admin-btn w-full text-left" onclick="showAdminContent('add-restoration')">
<i class="fas fa-plus mr-2"></i> Adicionar Material
</button>
<button class="admin-btn w-full text-left" onclick="showAdminContent('manage-restorations')">
<i class="fas fa-edit mr-2"></i> Gerenciar Materiais
</button>
</div>
</div>
<div class="admin-section">
<h3 class="font-semibold mb-2 flex items-center justify-between cursor-pointer" onclick="toggleAdminSection(this)">
<span>Tabacos</span>
<i class="fas fa-chevron-down"></i>
</h3>
<div class="admin-content hidden pl-4 space-y-2">
<button class="admin-btn w-full text-left" onclick="showAdminContent('add-tobacco')">
<i class="fas fa-plus mr-2"></i> Adicionar Tabaco
</button>
<button class="admin-btn w-full text-left" onclick="showAdminContent('manage-tobaccos')">
<i class="fas fa-edit mr-2"></i> Gerenciar Tabacos
</button>
<button class="admin-btn w-full text-left" onclick="showAdminContent('tobacco-categories')">
<i class="fas fa-tags mr-2"></i> Categorias
</button>
</div>
</div>
<div class="admin-section">
<h3 class="font-semibold mb-2 flex items-center justify-between cursor-pointer" onclick="toggleAdminSection(this)">
<span>Comentários</span>
<i class="fas fa-chevron-down"></i>
</h3>
<div class="admin-content hidden pl-4 space-y-2">
<button class="admin-btn w-full text-left" onclick="showAdminContent('manage-comments')">
<i class="fas fa-comments mr-2"></i> Gerenciar Comentários
</button>
</div>
</div>
<div class="admin-section">
<h3 class="font-semibold mb-2 flex items-center justify-between cursor-pointer" onclick="toggleAdminSection(this)">
<span>Configurações</span>
<i class="fas fa-chevron-down"></i>
</h3>
<div class="admin-content hidden pl-4 space-y-2">
<button class="admin-btn w-full text-left" onclick="showAdminContent('site-settings')">
<i class="fas fa-cog mr-2"></i> Configurações do Site
</button>
<button class="admin-btn w-full text-left" onclick="showAdminContent('user-management')">
<i class="fas fa-users mr-2"></i> Gerenciar Usuários
</button>
</div>
</div>
</div>
<!-- Admin Content Area -->
<div id="admin-content-area" class="mt-8 hidden">
<!-- Content will be loaded here dynamically -->
</div>
</div>
<!-- Header -->
<header class="bg-amber-900 text-white shadow-lg">
<div class="container mx-auto px-4 py-6">
<h1 class="text-4xl font-bold text-center mb-6">Cachimbos & Tabacos</h1>
<!-- Navigation -->
<nav class="relative">
<ul class="flex justify-center space-x-8">
<li>
<a href="#home" class="hover:text-amber-200 font-medium">Home</a>
</li>
<!-- Cachimbos Dropdown -->
<li class="dropdown relative">
<button class="hover:text-amber-200 font-medium flex items-center focus:outline-none">
Cachimbos <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<ul class="dropdown-menu absolute bg-white text-gray-800 shadow-lg rounded mt-2 w-48 z-10">
<li><a href="#dinamarqueses" class="block px-4 py-2 hover:bg-amber-100">Dinamarqueses</a></li>
<li><a href="#franceses" class="block px-4 py-2 hover:bg-amber-100">Franceses</a></li>
<li><a href="#holandeses" class="block px-4 py-2 hover:bg-amber-100">Holandeses</a></li>
<li><a href="#ingleses" class="block px-4 py-2 hover:bg-amber-100">Ingleses</a></li>
<li><a href="#irlandeses" class="block px-4 py-2 hover:bg-amber-100">Irlandeses</a></li>
<li><a href="#italianos" class="block px-4 py-2 hover:bg-amber-100">Italianos</a></li>
<li><a href="#norte-americanos" class="block px-4 py-2 hover:bg-amber-100">Norte-americanos</a></li>
<li><a href="#outros-paises" class="block px-4 py-2 hover:bg-amber-100">Outros Países</a></li>
</ul>
</li>
<!-- Acessórios Dropdown -->
<li class="dropdown relative">
<button class="hover:text-amber-200 font-medium flex items-center focus:outline-none">
Acessórios <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<ul class="dropdown-menu absolute bg-white text-gray-800 shadow-lg rounded mt-2 w-48 z-10">
<li><a href="#tampers" class="block px-4 py-2 hover:bg-amber-100">Tampers</a></li>
<li><a href="#diversos-acessorios" class="block px-4 py-2 hover:bg-amber-100">Diversos</a></li>
</ul>
</li>
<!-- Materiais para Restauração Dropdown -->
<li class="dropdown relative">
<button class="hover:text-amber-200 font-medium flex items-center focus:outline-none">
Materiais para Restauração <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<ul class="dropdown-menu absolute bg-white text-gray-800 shadow-lg rounded mt-2 w-48 z-10">
<li><a href="#polimento" class="block px-4 py-2 hover:bg-amber-100">Polimento</a></li>
<li><a href="#diversos-materiais" class="block px-4 py-2 hover:bg-amber-100">Diversos</a></li>
</ul>
</li>
<!-- Tabacos Dropdown -->
<li class="dropdown relative">
<button class="hover:text-amber-200 font-medium flex items-center focus:outline-none">
Tabacos <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<ul class="dropdown-menu absolute bg-white text-gray-800 shadow-lg rounded mt-2 w-48 z-10">
<li><a href="#aromaticos" class="block px-4 py-2 hover:bg-amber-100">Aromáticos</a></li>
<li><a href="#misturas-inglesas" class="block px-4 py-2 hover:bg-amber-100">Misturas Inglesas</a></li>
<li><a href="#orientais" class="block px-4 py-2 hover:bg-amber-100">Orientais</a></li>
<li><a href="#diversos-tabacos" class="block px-4 py-2 hover:bg-amber-100">Diversos</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<!-- Home Section -->
<section id="home" class="mb-12">
<div class="bg-white rounded-lg shadow-md p-8">
<h2 class="text-3xl font-bold text-amber-900 mb-6">Bem-vindo à Minha Coleção</h2>
<p class="text-gray-700 mb-4">
Esta é a minha coleção pessoal de cachimbos e tabacos, acumulada ao longo de muitos anos de paixão por essa arte. Aqui você encontrará peças de diversas origens, estilos e períodos históricos.
</p>
<p class="text-gray-700 mb-4">
Cada cachimbo tem sua própria história and características únicas. Explore a coleção navegando pelas categorias acima e descubra as maravilhas do mundo dos cachimbos.
</p>
<p class="text-gray-700">
Se você também é um entusiasta, sinta-se à vontade para deixar seus comentários e compartilhar suas experiências!
</p>
</div>
</section>
<!-- Pipe Collection Section (Dynamically loaded based on selection) -->
<section id="pipe-collection" class="hidden">
<div class="flex justify-between items-center mb-6">
<h2 id="collection-title" class="text-3xl font-bold text-amber-900"></h2>
<div class="flex space-x-4">
<button id="add-pipe-btn" class="bg-amber-700 hover:bg-amber-800 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-plus mr-2"></i> Novo Cachimbo
</button>
<div class="relative">
<input type="text" id="search-pipes" placeholder="Buscar cachimbos..." class="border border-gray-300 rounded-lg px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-amber-500">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
</div>
</div>
<!-- Pipe Gallery -->
<div id="pipe-gallery" class="pipe-gallery">
<!-- Pipes will be loaded here dynamically -->
</div>
</section>
<!-- Pipe Detail Modal -->
<div id="pipe-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-11/12 max-w-6xl max-h-screen overflow-y-auto">
<div class="p-6">
<div class="flex justify-between items-start mb-6">
<h3 id="pipe-modal-title" class="text-2xl font-bold text-amber-900"></h3>
<button id="close-modal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Pipe Images -->
<div>
<div class="image-container bg-gray-200 rounded-lg mb-4">
<img id="main-pipe-image" src="" alt="Cachimbo" class="w-full h-auto">
</div>
<div class="grid grid-cols-5 gap-2">
<div class="image-thumbnail cursor-pointer border-2 border-transparent hover:border-amber-500">
<img src="" alt="Thumbnail 1" class="w-full h-20 object-cover">
</div>
<div class="image-thumbnail cursor-pointer border-2 border-transparent hover:border-amber-500">
<img src="" alt="Thumbnail 2" class="w-full h-20 object-cover">
</div>
<div class="image-thumbnail cursor-pointer border-2 border-transparent hover:border-amber-500">
<img src="" alt="Thumbnail 3" class="w-full h-20 object-cover">
</div>
<div class="image-thumbnail cursor-pointer border-2 border-transparent hover:border-amber-500">
<img src="" alt="Thumbnail 4" class="w-full h-20 object-cover">
</div>
<div class="image-thumbnail cursor-pointer border-2 border-transparent hover:border-amber-500">
<img src="" alt="Thumbnail 5" class="w-full h-20 object-cover">
</div>
</div>
</div>
<!-- Pipe Details -->
<div>
<div class="mb-6">
<h4 class="text-lg font-semibold text-amber-800 mb-2">Detalhes do Cachimbo</h4>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">Marca</label>
<p id="pipe-brand" class="mt-1 text-gray-900"></p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Nome</label>
<p id="pipe-name" class="mt-1 text-gray-900"></p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Stem (Piteira)</label>
<p id="pipe-stem" class="mt-1 text-gray-900"></p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Filter (Filtro)</label>
<p id="pipe-filter" class="mt-1 text-gray-900"></p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Shape (Forma)</label>
<p id="pipe-shape" class="mt-1 text-gray-900"></p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Texture (Textura)</label>
<p id="pipe-texture" class="mt-1 text-gray-900"></p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Condition (Condição)</label>
<p id="pipe-condition" class="mt-1 text-gray-900"></p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Level of Restoration</label>
<p id="pipe-restoration" class="mt-1 text-gray-900"></p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Country (País</label>
<p id="pipe-country" class="mt-1 text-gray-900"></p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Observações</label>
<p id="pipe-notes" class="mt-1 text-gray-900"></p>
</div>
</div>
</div>
<div class="flex space-x-4">
<button id="edit-pipe-btn" class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-edit mr-2"></i> Editar
</button>
<button id="delete-pipe-btn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-trash mr-2"></i> Excluir
</button>
</div>
</div>
</div>
<!-- Comments Section -->
<div class="mt-8 border-t pt-6">
<h4 class="text-lg font-semibold text-amber-800 mb-4">Comentários</h4>
<div id="comments-container" class="comment-section mb-6 space-y-4">
<!-- Comments will be loaded here -->
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h5 class="font-medium text-gray-800 mb-3">Deixe seu comentário</h5>
<form id="comment-form" class="space-y-3">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="comment-name" class="block text-sm font-medium text-gray-700">Nome *</label>
<input type="text" id="comment-name" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-amber-500 focus:border-amber-500">
</div>
<div>
<label for="comment-email" class="block text-sm font-medium text-gray-700">E-mail *</label>
<input type="email" id="comment-email" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-amber-500 focus:border-amber-500">
</div>
</div>
<div>
<label for="comment-phone" class="block text-sm font-medium text-gray-700">Telefone (opcional)</label>
<input type="tel" id="comment-phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-amber-500 focus:border-amber-500">
</div>
<div>
<label for="comment-text" class="block text-sm font-medium text-gray-700">Comentário *</label>
<textarea id="comment-text" rows="3" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-amber-500 focus:border-amber-500"></textarea>
</div>
<div class="flex justify-end">
<button type="submit" class="bg-amber-700 hover:bg-amber-800 text-white px-4 py-2 rounded-lg">
Enviar Comentário
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Add/Edit Pipe Form Modal -->
<div id="pipe-form-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-11/12 max-w-4xl max-h-screen overflow-y-auto">
<div class="p-6">
<div class="flex justify-between items-start mb-6">
<h3 id="pipe-form-title" class="text-2xl font-bold text-amber-900">Adicionar Novo Cachimbo</h3>
<button id="close-form-modal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<form id="pipe-form" class="space-y-4">
<input type="hidden" id="pipe-id">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Left Column -->
<div class="space-y-4">
<div>
<label for="pipe-brand-input" class="block text-sm font-medium text-gray-700">Marca *</label>
<div class="mt-1 flex">
<input type="text" id="pipe-brand-input" required class="flex-1 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-amber-500 focus:border-amber-500">
<button type="button" id="add-brand-btn" class="ml-2 bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-2 rounded-md">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
<div>
<label for="pipe-name-input" class="block text-sm font-medium text-gray-700">Nome *</label>
<input type="text" id="pipe-name-input" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-amber-500 focus:border-amber-500">
</div>
<div>
<label for="pipe-stem-input" class="block text-sm font-medium text-gray-700">Stem (Piteira) *</label>
<select id="pipe-stem-input" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-amber-500 focus:border-amber-500">
<option value="">Selecione...</option>
<option value="acrylic">Acrylic</option>
<option value="vulcanite">Vulcanite</option>
<option value="cumberland">Cumberland</option>
</select>
</div>
<div>
<label for="pipe-filter-input" class="block text-sm font-medium text-gray-700">Filter (Filtro) *</label>
<select id="pipe-filter-input" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-amber-500 focus:border-amber-500">
<option value="">Selecione...</option>
<option value="no">No</option>
<option value="6mm">6mm</option>
<option value="9mm">9mm</option>
<option value="balsa">Balsa</option>
</select>
</div>
<div>
<label for="pipe-shape-input" class="block text-sm font-medium text-gray-700">Shape (Forma)</label>
<input type="text" id="pipe-shape-input" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-amber-500 focus:border-amber-500">
</div>
</div>
<!-- Right Column -->
<div class="space-y-4">
<div>
<label for="pipe-texture-input" class="block text-sm font-medium text-gray-700">Texture (Textura) *</label>
<select id="pipe-texture-input" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-amber-500 focus:border-amber-500">
<option value="">Selecione...</option>
<option value="smooth">Smooth</option>
<option value="rusticated">Rusticated</option>
<option value="sandblasted">Sandblasted</option>
<option value="corn cob">Corn Cob</option>
</select>
</div>
<div>
<label for="pipe-condition-input" class="block text-sm font-medium text-gray-700">Condition (Condição) *</label>
<select id="pipe-condition-input" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-amber-500 focus:border-amber-500">
<option value="">Selecione...</option>
<option value="estate">Estate</option>
<option value="new">New</option>
</select>
</div>
<div>
<label for="pipe-restoration-input" class="block text-sm font-medium text-gray-700">Level of Restoration *</label>
<select id="pipe-restoration-input" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-amber-500 focus:border-amber-500">
<option value="">Selecione...</option>
<option value="Level 1">Level 1</option>
<option value="Level 2">Level 2</option>
<option value="Level 3">Level 3</option>
<option value="Level 4">Level 4</option>
<option value="Level 5">Level 5</option>
</select>
</div>
<div>
<label for="pipe-country-input" class="block text-sm font-medium text-gray-700">Country (País) *</label>
<div class="mt-1 flex">
<input type="text" id="pipe-country-input" required class="flex-1 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-amber-500 focus:border-amber-500">
<button type="button" id="add-country-btn" class="ml-2 bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-2 rounded-md">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
<div>
<label for="pipe-notes-input" class="block text-sm font-medium text-gray-700">Observações</label>
<textarea id="pipe-notes-input" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-amber-500 focus:border-amber-500"></textarea>
</div>
</div>
</div>
<div class="border-t pt-4">
<h4 class="text-lg font-medium text-gray-800 mb-3">Fotos do Cachimbo</h4>
<div class="grid grid-cols-5 gap-4">
<div class="image-upload-container border-2 border-dashed border-gray-300 rounded-lg h-32 flex items-center justify-center cursor-pointer">
<input type="file" class="image-upload hidden" accept="image/*">
<div class="text-center">
<i class="fas fa-camera text-gray-400 text-2xl mb-1"></i>
<p class="text-xs text-gray-500">Foto 1</p>
</div>
</div>
<div class="image-upload-container border-2 border-dashed border-gray-300 rounded-lg h-32 flex items-center justify-center cursor-pointer">
<input type="file" class="image-upload hidden" accept="image/*">
<div class="text-center">
<i class="fas fa-camera text-gray-400 text-2xl mb-1"></i>
<p class="text-xs text-gray-500">Foto 2</p>
</div>
</div>
<div class="image-upload-container border-2 border-dashed border-gray-300 rounded-lg h-32 flex items-center justify-center cursor-pointer">
<input type="file" class="image-upload hidden" accept="image/*">
<div class="text-center">
<i class="fas fa-camera text-gray-400 text-2xl mb-1"></i>
<p class="text-xs text-gray-500">Foto 3</p>
</div>
</div>
<div class="image-upload-container border-2 border-dashed border-gray-300 rounded-lg h-32 flex items-center justify-center cursor-pointer">
<input type="file" class="image-upload hidden" accept="image/*">
<div class="text-center">
<i class="fas fa-camera text-gray-400 text-2xl mb-1"></i>
<p class="text-xs text-gray-500">Foto 4</p>
</div>
</div>
<div class="image-upload-container border-2 border-dashed border-gray-300 rounded-lg h-32 flex items-center justify-center cursor-pointer">
<input type="file" class="image-upload hidden" accept="image/*">
<div class="text-center">
<i class="fas fa-camera text-gray-400 text-2xl mb-1"></i>
<p class="text-xs text-gray-500">Foto 5</p>
</div>
</div>
</div>
</div>
<div class="flex justify-end space-x-4 pt-6">
<button type="button" id="cancel-pipe-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg">
Cancelar
</button>
<button type="submit" id="save-pipe-btn" class="bg-amber-700 hover:bg-amber-800 text-white px-4 py-2 rounded-lg">
Salvar Cachimbo
</button>
</div>
</form>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-amber-900 text-white py-8">
<div class="container mx-auto px-4 text-center">
<p>&copy; 2023 Cachimbos & Tabacos. Todos os direitos reservados.</p>
<p class="mt-2 text-amber-200">Uma coleção pessoal de cachimbos e tabacos de todo o mundo.</p>
</div>
</footer>
<!-- Admin Content Templates -->
<template id="add-pipe-template">
<div class="bg-gray-700 p-4 rounded-lg">
<h4 class="text-lg font-semibold mb-4">Adicionar Novo Cachimbo</h4>
<form id="admin-pipe-form" class="space-y-4">
<div>
<label class="block text-sm font-medium mb-1">Categoria</label>
<select class="w-full bg-gray-600 border border-gray-500 rounded px-3 py-2">
<option>Dinamarqueses</option>
<option>Franceses</option>
<option>Holandeses</option>
<option>Ingleses</option>
<option>Irlandeses</option>
<option>Italianos</option>
<option>Norte-americanos</option>
<option>Outros Países</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-1">Marca</label>
<input type="text" class="w-full bg-gray-600 border border-gray-500 rounded px-3 py-2">
</div>
<div>
<label class="block text-sm font-medium mb-1">Nome</label>
<input type="text" class="w-full bg-gray-600 border border-gray-500 rounded px-3 py-2">
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium mb-1">Stem (Piteira)</label>
<select class="w-full bg-gray-600 border border-gray-500 rounded px-3 py-2">
<option>Acrylic</option>
<option>Vulcanite</option>
<option>Cumberland</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-1">Filter (Filtro</label>
<select class="w-full bg-gray-600 border border-gray-500 rounded px-3 py-2">
<option>No</option>
<option>6mm</option>
<option>9mm</option>
<option>Balsa</option>
</select>
</div>
</div>
<div>
<label class="block text-sm font-medium mb-1">Fotos</label>
<div class="border-2 border-dashed border-gray-500 rounded p-4 text-center">
<i class="fas fa-camera text-gray-400 text-2xl mb-2"></i>
<p class="text-sm text-gray-300">Arraste e solte fotos aqui ou clique para selecionar</p>
<input type="file" multiple class="hidden">
</div>
</div>
<div class="flex justify-end">
<button type="submit" class="bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded">Salvar</button>
</div>
</form>
</div>
</template>
<template id="manage-pipes-template">
<div class="bg-gray-700 p-4 rounded-lg">
<h4 class="text-lg font-semibold mb-4">Gerenciar Cachimbos</h4>
<div class="mb-4 flex justify-between items-center">
<div class="relative w-64">
<input type="text" placeholder="Buscar cachimbos..." class="w-full bg-gray-600 border border-gray-500 rounded px-3 py-2 pl-8">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<select class="bg-gray-600 border border-gray-500 rounded px-3 py-2">
<option>Todas categorias</option>
<option>Dinamarqueses</option>
<option>Franceses</option>
<option>Holandeses</option>
<option>Ingleses</option>
<option>Irlandeses</option>
<option>Italianos</option>
<option>Norte-americanos</option>
<option>Outros Países</option>
</select>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-gray-600">
<th class="text-left py-2">Marca</th>
<th class="text-left py-2">Nome</th>
<th class="text-left py-2">Categoria</th>
<th class="text-left py-2">Ações</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-600 hover:bg-gray-600">
<td class="py-3">Stanwell</td>
<td>Hans Christian Andersen</td>
<td>Dinamarqueses</td>
<td>
<button class="text-amber-400 hover:text-amber-300 mr-2"><i class="fas fa-edit"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr class="border-b border-gray-600 hover:bg-gray-600">
<td class="py-3">Nording</td>
<td>Signature Freehand</td>
<td>Dinamarqueses</td>
<td>
<button class="text-amber-400 hover:text-amber-300 mr-2"><i class="fas fa-edit"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr class="border-b border-gray-600 hover:bg-gray-600">
<td class="py-3">Chacom</td>
<td>Gravat</td>
<td>Franceses</td>
<td>
<button class="text-amber-400 hover:text-amber-300 mr-2"><i class="fas fa-edit"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr class="border-b border-gray-600 hover:bg-gray-600">
<td class="py-3">Dunhill</td>
<td>Shell Briar</td>
<td>Ingleses</td>
<td>
<button class="text-amber-400 hover:text-amber-300 mr-2"><i class="fas fa-edit"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-600">
<td class="py-3">Peterson</td>
<td>System Standard 307</td>
<td>Irlandeses</td>
<td>
<button class="text-amber-400 hover:text-amber-300 mr-2"><i class="fas fa-edit"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4 flex justify-between items-center">
<div class="text-sm text-gray-400">Mostrando 1 a 5 de 15 itens</div>
<div class="flex space-x-1">
<button class="bg-gray-600 hover:bg-gray-500 px-3 py-1 rounded"><i class="fas fa-chevron-left"></i></button>
<button class="bg-amber-600 px-3 py-1 rounded">1</button>
<button class="bg-gray-600 hover:bg-gray-500 px-3 py-1 rounded">2</button>
<button class="bg-gray-600 hover:bg-gray-500 px-3 py-1 rounded">3</button>
<button class="bg-gray-600 hover:bg-gray-500 px-3 py-1 rounded"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</template>
<template id="pipe-categories-template">
<div class="bg-gray-700 p-4 rounded-lg">
<h4 class="text-lg font-semibold mb-4">Categorias de Cachimbos</h4>
<div class="mb-4 flex justify-between items-center">
<div class="relative w-64">
<input type="text" placeholder="Buscar categorias..." class="w-full bg-gray-600 border border-gray-500 rounded px-3 py-2 pl-8">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<button class="bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded flex items-center">
<i class="fas fa-plus mr-2"></i> Nova Categoria
</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-gray-600">
<th class="text-left py-2">Nome</th>
<th class="text-left py-2">Itens</th>
<th class="text-left py-2">Ações</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-600 hover:bg-gray-600">
<td class="py-3">Dinamarqueses</td>
<td>12</td>
<td>
<button class="text-amber-400 hover:text-amber-300 mr-2"><i class="fas fa-edit"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr class="border-b border-gray-600 hover:bg-gray-600">
<td class="py-3">Franceses</td>
<td>8</td>
<td>
<button class="text-amber-400 hover:text-amber-300 mr-2"><i class="fas fa-edit"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr class="border-b border-gray-600 hover:bg-gray-600">
<td class="py-3">Holandeses</td>
<td>5</td>
<td>
<button class="text-amber-400 hover:text-amber-300 mr-2"><i class="fas fa-edit"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr class="border-b border-gray-600 hover:bg-gray-600">
<td class="py-3">Ingleses</td>
<td>15</td>
<td>
<button class="text-amber-400 hover:text-amber-300 mr-2"><i class="fas fa-edit"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-600">
<td class="py-3">Irlandeses</td>
<td>7</td>
<td>
<button class="text-amber-400 hover:text-amber-300 mr-2"><i class="fas fa-edit"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<template id="add-accessory-template">
<div class="bg-gray-700 p-4 rounded-lg">
<h4 class="text-lg font-semibold mb-4">Adicionar Acessório</h4>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium mb-1">Tipo</label>
<select class="w-full bg-gray-600 border border-gray-500 rounded px-3 py-2">
<option>Tampers</option>
<option>Diversos</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-1">Nome</label>
<input type="text" class="w-full bg-gray-600 border border-gray-500 rounded px-3 py-2">
</div>
<div>
<label class="block text-sm font-medium mb-1">Descrição</label>
<textarea class="w-full bg-gray-600 border border-gray-500 rounded px-3 py-2"></textarea>
</div>
<div>
<label class="block text-sm font-medium mb-1">Foto</label>
<div class="border-2 border-dashed border-gray-500 rounded p-4 text-center">
<i class="fas fa-camera text-gray-400 text-2xl mb-2"></i>
<p class="text-sm text-gray-300">Arraste e solte a foto aqui ou clique para selecionar</p>
<input type="file" class="hidden">
</div>
</div>
<div class="flex justify-end">
<button type="submit" class="bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded">Salvar</button>
</div>
</form>
</div>
</template>
<template id="manage-comments-template">
<div class="bg-gray-700 p-4 rounded-lg">
<h4 class="text-lg font-semibold mb-4">Gerenciar Comentários</h4>
<div class="mb-4">
<div class="relative w-full">
<input type="text" placeholder="Buscar comentários..." class="w-full bg-gray-600 border border-gray-500 rounded px-3 py-2 pl-8">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
</div>
<div class="space-y-4">
<div class="bg-gray-600 p-3 rounded">
<div class="flex justify-between items-start">
<div>
<h5 class="font-medium">João Silva</h5>
<p class="text-sm text-gray-300">joao@email.com</p>
</div>
<span class="text-xs text-gray-400">2023-05-15</span>
</div>
<p class="mt-2 text-sm">Adoro este cachimbo! A textura sandblasted é incrível.</p>
<div class="mt-3 flex justify-end space-x-2">
<button class="text-green-400 hover:text-green-300 text-sm"><i class="fas fa-check mr-1"></i> Aprovar</button>
<button class="text-red-400 hover:text-red-300 text-sm"><i class="fas fa-trash mr-1"></i> Excluir</button>
</div>
</div>
<div class="bg-gray-600 p-3 rounded">
<div class="flex justify-between items-start">
<div>
<h5 class="font-medium">Carlos Mendes</h5>
<p class="text-sm text-gray-300">carlos@email.com</p>
</div>
<span class="text-xs text-gray-400">2023-06-02</span>
</div>
<p class="mt-2 text-sm">Tenho um similar. Excelente para tabacos aromáticos.</p>
<div class="mt-3 flex justify-end space-x-2">
<button class="text-green-400 hover:text-green-300 text-sm"><i class="fas fa-check mr-1"></i> Aprovar</button>
<button class="text-red-400 hover:text-red-300 text-sm"><i class="fas fa-trash mr-1"></i> Excluir</button>
</div>
</div>
<div class="bg-gray-600 p-3 rounded">
<div class="flex justify-between items-start">
<div>
<h5 class="font-medium">Ana Paula</h5>
<p class="text-sm text-gray-300">ana@email.com</p>
</div>
<span class="text-xs text-gray-400">2023-04-20</span>
</div>
<p class="mt-2 text-sm">Lindíssimo trabalho de freehand! Parabéns pela aquisição.</p>
<div class="mt-3 flex justify-end space-x-2">
<button class="text-green-400 hover:text-green-300 text-sm"><i class="fas fa-check mr-1"></i> Aprovar</button>
<button class="text-red-400 hover:text-red-300 text-sm"><i class="fas fa-trash mr-1"></i> Excluir</button>
</div>
</div>
</div>
</div>
</template>
<script>
// Sample data for demonstration
const pipeData = {
'dinamarqueses': [
{
id: 1,
brand: 'Stanwell',
name: 'Hans Christian Andersen',
stem: 'vulcanite',
filter: '9mm',
shape: 'Bent Apple',
texture: 'sandblasted',
condition: 'estate',
restoration: 'Level 2',
country: 'Dinamarca',
notes: 'Excelente cachimbo para fumar tabacos aromáticos. Adquirido em 2018.',
images: [
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Stanwell+HCA+1',
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Stanwell+HCA+2',
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Stanwell+HCA+3',
'',
''
]
},
{
id: 2,
brand: 'Nording',
name: 'Signature Freehand',
stem: 'acrylic',
filter: 'no',
shape: 'Freehand',
texture: 'rusticated',
condition: 'new',
restoration: 'Level 1',
country: 'Dinamarca',
notes: 'Presente de aniversário em 2020. Lindo cachimbo esculpido à mão.',
images: [
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Nording+Freehand+1',
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Nording+Freehand+2',
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Nording+Freehand+3',
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Nording+Freehand+4',
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Nording+Freehand+5'
]
}
],
'franceses': [
{
id: 3,
brand: 'Chacom',
name: 'Gravat',
stem: 'cumberland',
filter: '6mm',
shape: 'Bent Billiard',
texture: 'smooth',
condition: 'estate',
restoration: 'Level 3',
country: 'França',
notes: 'Restaurado em 2019. Excelente fumada.',
images: [
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Chacom+Gravat+1',
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Chacom+Gravat+2',
'',
'',
''
]
}
],
'ingleses': [
{
id: 4,
brand: 'Dunhill',
name: 'Shell Briar',
stem: 'vulcanite',
filter: 'no',
shape: 'Straight Billiard',
texture: 'sandblasted',
condition: 'estate',
restoration: 'Level 4',
country: 'Inglaterra',
notes: 'Peça vintage dos anos 60. Requer cuidados especiais.',
images: [
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Dunhill+Shell+1',
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Dunhill+Shell+2',
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Dunhill+Shell+3',
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Dunhill+Shell+4',
''
]
},
{
id: 5,
brand: 'Peterson',
name: 'System Standard 307',
stem: 'acrylic',
filter: '9mm',
shape: 'Bent Billiard',
texture: 'smooth',
condition: 'new',
restoration: 'Level 1',
country: 'Irlanda',
notes: 'Adquirido novo em 2021. Excelente para viagens.',
images: [
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Peterson+307+1',
'https://via.placeholder.com/1080x1080/cccccc/999999?text=Peterson+307+2',
'',
'',
''
]
}
]
};
// Comments data
const commentsData = {
1: [
{ name: 'João Silva', email: 'joao@email.com', phone: '', text: 'Adoro este cachimbo! A textura sandblasted é incrível.', date: '2023-05-15' },
{ name: 'Carlos Mendes', email: 'carlos@email.com', phone: '(11) 98765-4321', text: 'Tenho um similar. Excelente para tabacos aromáticos.', date: '2023-06-02' }
],
2: [
{ name: 'Ana Paula', email: 'ana@email.com', phone: '', text: 'Lindíssimo trabalho de freehand! Parabéns pela aquisição.', date: '2023-04-20' }
],
3: [
{ name: 'Pierre Dubois', email: 'pierre@email.com', phone: '', text: 'Classic French pipe! Beautiful grain.', date: '2023-07-10' }
],
4: [
{ name: 'Robert Smith', email: 'robert@email.com', phone: '(44) 1234-5678', text: 'Vintage Dunhills are the best. Great restoration work!', date: '3/15/2023' }
],
5: [
{ name: 'Miguel Torres', email: 'miguel@email.com', phone: '(21) 99876-5432', text: 'Peterson System é meu favorito. Boa escolha!', date: '8/5/2023' }
]
};
// Current state
let currentCollection = '';
let currentPipeId = null;
let editingPipe = false;
// DOM elements
const homeSection = document.getElementById('home');
const pipeCollectionSection = document.getElementById('pipe-collection');
const collectionTitle = document.getElementById('collection-title');
const pipeGallery = document.getElementById('pipe-gallery');
const pipeModal = document.getElementById('pipe-modal');
const pipeModalTitle = document.getElementById('pipe-modal-title');
const mainPipeImage = document.getElementById('main-pipe-image');
const pipeFormModal = document.getElementById('pipe-form-modal');
const pipeFormTitle = document.getElementById('pipe-form-title');
const pipeForm = document.getElementById('pipe-form');
const pipeIdInput = document.getElementById('pipe-id');
const searchPipesInput = document.getElementById('search-pipes');
const commentsContainer = document.getElementById('comments-container');
const commentForm = document.getElementById('comment-form');
const adminPanel = document.getElementById('admin-panel');
const adminToggle = document.getElementById('admin-toggle');
const closeAdmin = document.getElementById('close-admin');
const adminContentArea = document.getElementById('admin-content-area');
// Admin Panel Functions
function toggleAdminPanel() {
adminPanel.classList.toggle('open');
}
function toggleAdminSection(sectionHeader) {
const sectionContent = sectionHeader.nextElementSibling;
sectionContent.classList.toggle('hidden');
const icon = sectionHeader.querySelector('i');
icon.classList.toggle('fa-chevron-down');
icon.classList.toggle('fa-chevron-up');
}
function showAdminContent(contentType) {
const template = document.getElementById(`${contentType}-template`);
if (template) {
adminContentArea.innerHTML = '';
adminContentArea.appendChild(template.content.cloneNode(true));
adminContentArea.classList.remove('hidden');
}
}
// Admin Panel Event Listeners
adminToggle.addEventListener('click', toggleAdminPanel);
closeAdmin.addEventListener('click', toggleAdminPanel);
// Navigation event listeners
document.querySelectorAll('nav a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href').substring(1);
if (targetId === 'home') {
showHomeSection();
} else if (['dinamarqueses', 'franceses', 'holandeses', 'ingleses', 'irlandeses', 'italianos', 'norte-americanos', 'outros-paises'].includes(targetId)) {
showPipeCollection(targetId);
}
// Scroll to section
document.getElementById(targetId)?.scrollIntoView({ behavior: 'smooth' });
});
});
// Show home section
function showHomeSection() {
homeSection.classList.remove('hidden');
pipeCollectionSection.classList.add('hidden');
currentCollection = '';
}
// Show pipe collection
function showPipeCollection(collectionId) {
homeSection.classList.add('hidden');
pipeCollectionSection.classList.remove('hidden');
currentCollection = collectionId;
// Set collection title based on ID
const titles = {
'dinamarqueses': 'Cachimbos Dinamarqueses',
'franceses': 'Cachimbos Franceses',
'holandeses': 'Cachimbos Holandeses',
'ingleses': 'Cachimbos Ingleses',
'irlandeses': 'Cachimbos Irlandeses',
'italianos': 'Cachimbos Italianos',
'norte-americanos': 'Cachimbos Norte-americanos',
'outros-paises': 'Cachimbos de Outros Países'
};
collectionTitle.textContent = titles[collectionId] || 'Coleção de Cachimbos';
// Load pipes for this collection
loadPipes(collectionId);
}
// Load pipes for a collection
function loadPipes(collectionId, searchTerm = '') {
pipeGallery.innerHTML = '';
const pipes = pipeData[collectionId] || [];
const filteredPipes = searchTerm
? pipes.filter(pipe =>
pipe.brand.toLowerCase().includes(searchTerm.toLowerCase()) ||
pipe.name.toLowerCase().includes(searchTerm.toLowerCase()))
: pipes;
if (filteredPipes.length === 0) {
pipeGallery.innerHTML = `
<div class="col-span-full text-center py-12">
<i class="fas fa-pipe text-4xl text-gray-400 mb-4"></i>
<p class="text-gray-600">Nenhum cachimbo encontrado nesta categoria.</p>
${searchTerm ? '<p class="text-gray-500 mt-2">Tente ajustar sua busca.</p>' : ''}
</div>
`;
return;
}
filteredPipes.forEach(pipe => {
const pipeCard = document.createElement('div');
pipeCard.className = 'pipe-card bg-white rounded-lg shadow-md overflow-hidden cursor-pointer';
pipeCard.innerHTML = `
<div class="h-48 bg-gray-200 flex items-center justify-center">
<img src="${pipe.images[0] || 'https://via.placeholder.com/300x300/cccccc/999999?text=No+Image'}" alt="${pipe.brand} ${pipe.name}" class="w-full h-full object-cover">
</div>
<div class="p-4">
<h3 class="font-bold text-lg text-amber-900">${pipe.brand}</h3>
<p class="text-gray-700">${pipe.name}</p>
<div class="mt-2 flex justify-between items-center">
<span class="text-sm text-gray-500">${pipe.country}</span>
<span class="text-xs px-2 py-1 rounded ${pipe.condition === 'new' ? 'bg-green-100 text-green-800' : 'bg-amber-100 text-amber-800'}">
${pipe.condition === 'new' ? 'Novo' : 'Usado'}
</span>
</div>
</div>
`;
pipeCard.addEventListener('click', () => showPipeDetails(pipe.id));
pipeGallery.appendChild(pipeCard);
});
}
// Show pipe details
function showPipeDetails(pipeId) {
const collectionPipes = pipeData[currentCollection] || [];
const pipe = collectionPipes.find(p => p.id === pipeId);
if (!pipe) return;
currentPipeId = pipeId;
pipeModalTitle.textContent = `${pipe.brand} ${pipe.name}`;
// Set main image
const firstImage = pipe.images.find(img => img) || 'https://via.placeholder.com/1080x1080/cccccc/999999?text=No+Image';
mainPipeImage.src = firstImage;
mainPipeImage.alt = `${pipe.bbrand} ${pipe.name}`;
// Set thumbnails
document.querySelectorAll('.image-thumbnail img').forEach((img, index) => {
if (pipe.images[index]) {
img.src = pipe.images[index];
img.alt = `${pipe.brand} ${pipe.name} ${index + 1}`;
img.parentElement.style.display = 'block';
} else {
img.parentElement.style.display = 'none';
}
});
// Set details
document.getElementById('pipe-brand').textContent = pipe.brand;
document.getElementById('pipe-name').textContent = pipe.name;
document.getElementById('pipe-stem').textContent = getDisplayValue('stem', pipe.stem);
document.getElementById('pipe-filter').textContent = getDisplayValue('filter', pipe.filter);
document.getElementById('pipe-shape').textContent = pipe.shape || 'N/A';
document.getElementById('pipe-texture').textContent = getDisplayValue('texture', pipe.texture);
document.getElementById('pipe-condition').textContent = getDisplayValue('condition', pipe.condition);
document.getElementById('pipe-restoration').textContent = pipe.restoration;
document.getElementById('pipe-country').textContent = pipe.country;
document.getElementById('pipe-notes').textContent = pipe.notes || 'Nenhuma observação.';
// Load comments
loadComments(pipeId);
// Show modal
pipeModal.classList.remove('hidden');
}
// Get display value for pipe properties
function getDisplayValue(property, value) {
const displayValues = {
'stem': {
'acrylic': 'Acrílico',
'vulcanite': 'Vulcanite',
'cumberland': 'Cumberland'
},
'filter': {
'no': 'Sem filtro',
'6mm': '6mm',
'9mm': '9mm',
'balsa': 'Balsa'
},
'texture': {
'smooth': 'Liso',
'rusticated': 'Rusticado',
'sandblasted': 'Jateado',
'corn cob': 'Milho'
},
'condition': {
'estate': 'Usado',
'new': 'Novo'
}
};
return displayValues[property]?.[value] || value;
}
// Load comments for a pipe
function loadComments(pipeId) {
commentsContainer.innerHTML = '';
const comments = commentsData[pipeId] || [];
if (comments.length === 0) {
commentsContainer.innerHTML = `
<div class="text-center py-4 text-gray-500">
Nenhum comentário ainda. Seja o primeiro a comentar!
</div>
`;
return;
}
comments.forEach(comment => {
const commentElement = document.createElement('div');
commentElement.className = 'bg-gray-50 p-4 rounded-lg';
commentElement.innerHTML = `
<div class="flex justify-between items-start">
<h5 class="font-medium text-gray-800">${comment.name}</h5>
<span class="text-xs text-gray-500">${comment.date}</span>
</div>
${comment.phone ? `<p class="text-xs text-gray-600 mt-1">${comment.phone}</p>` : ''}
<p class="mt-2 text-gray-700">${comment.text}</p>
`;
commentsContainer.appendChild(commentElement);
});
}
// Add new pipe
document.getElementById('add-pipe-btn').addEventListener('click', () => {
editingPipe = false;
pipeFormTitle.textContent = 'Adicionar Novo Cachimbo';
pipeIdInput.value = '';
pipeForm.reset();
// Reset image upload containers
document.querySelectorAll('.image-upload-container').forEach(container => {
container.innerHTML = `
<input type="file" class="image-upload hidden" accept="image/*">
<div class="text-center">
<i class="fas fa-camera text-gray-400 text-2xl mb-1"></i>
<p class="text-xs text-gray-500">Foto ${container.dataset.index}</p>
</div>
`;
});
pipeFormModal.classList.remove('hidden');
});
// Edit pipe
document.getElementById('edit-pipe-btn').addEventListener('click', () => {
const collectionPipes = pipeData[currentCollection] || [];
const pipe = collectionPipes.find(p => p.id === currentPipeId);
if (!pipe) return;
editingPipe = true;
pipeFormTitle.textContent = 'Editar Cachimbo';
pipeIdInput.value = pipe.id;
// Fill form with pipe data
document.getElementById('pipe
</html>