admin.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Administração de Produtos</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            padding: 0;
        }
        header {
            width: 100%;
            background-color: #f8f8f8;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        header h1 {
            margin: 0;
            font-size: 24px;
        }
        .form-container, .products-container, .categories-container {
            width: 100%;
            max-width: 600px;
            margin: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            background-color: #fff;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input, .form-group select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .form-group button {
            background-color: #add8e6;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .form-group button:hover {
            background-color: #87ceeb;
        }
        .product-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
        }
        .product-item button {
            background-color: #ff6961;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .product-item button:hover {
            background-color: #ff5c5c;
        }
        .product-item .edit-button {
            background-color: #f0ad4e;
        }
        .product-item .edit-button:hover {
            background-color: #ec971f;
        }
    </style>
</head>
<body>
    <header>
        <h1>Administração de Produtos</h1>
    </header>
    <div class="form-container">
        <div class="form-group">
            <label for="product-name">Nome do Produto</label>
            <input type="text" id="product-name" required>
        </div>
        <div class="form-group">
            <label for="product-image">Imagem do Produto</label>
            <input type="file" id="product-image" accept="image/*">
            <img id="product-image-preview" style="max-width: 100%; display: block; margin-top: 10px;">
        </div>
        <div class="form-group">
            <label for="product-link">Link do Produto</label>
            <input type="url" id="product-link" required>
        </div>
        <div class="form-group">
            <label for="product-category">Categoria do Produto</label>
            <select id="product-category" required>
                <!-- Options will be dynamically added -->
            </select>
        </div>
        <div class="form-group">
            <button id="add-button" onclick="addProduct()">Adicionar Produto</button>
            <button id="update-button" onclick="updateProduct()" style="display: none;">Atualizar Produto</button>
        </div>
    </div>
    <div class="categories-container">
        <h2>Categorias</h2>
        <button onclick="addCategory()">Adicionar Categoria</button>
        <ul id="category-list"></ul>
    </div>
    <div class="products-container">
        <h2>Produtos</h2>
        <div id="product-list"></div>
    </div>
    <script src="admin.js"></script>
</body>
</html>


admin.js

let products = [];
let categories = [];

function addProduct() {
    const name = document.getElementById('product-name').value;
    const image = document.getElementById('product-image').files[0];
    const link = document.getElementById('product-link').value;
    const category = document.getElementById('product-category').value;

    if (name && link && category) {
        const reader = new FileReader();
        reader.onload = function(event) {
            const imageDataUrl = event.target.result;
            const newProduct = {
                id: generateProductId(),
                name: name,
                image: imageDataUrl,
                link: link,
                category: category
            };
            products.push(newProduct);
            saveProducts();
            alert('Produto adicionado com sucesso!');
            clearForm();
            loadProducts();
        };
        reader.readAsDataURL(image);
    } else {
        alert('Por favor, preencha todos os campos obrigatórios.');
    }
}

function addCategory() {
    const categoryName = prompt('Digite o nome da nova categoria:');
    if (categoryName) {
        categories.push(categoryName);
        saveCategories();
        alert('Categoria adicionada com sucesso!');
        updateCategoryOptions();
    }
}

function saveProducts() {
    localStorage.setItem('products', JSON.stringify(products));
}

function saveCategories() {
    localStorage.setItem('categories', JSON.stringify(categories));
}

function loadProducts() {
    const storedProducts = localStorage.getItem('products');
    if (storedProducts) {
        products = JSON.parse(storedProducts);
    }
    displayProducts();
}

function loadCategories() {
    const storedCategories = localStorage.getItem('categories');
    if (storedCategories) {
        categories = JSON.parse(storedCategories);
    }
    updateCategoryOptions();
}

function updateCategoryOptions() {
    const categorySelect = document.getElementById('product-category');
    categorySelect.innerHTML = '';
    categories.forEach(category => {
        const option = document.createElement('option');
        option.value = category;
        option.textContent = category;
        categorySelect.appendChild(option);
    });
}

function displayProducts() {
    const productList = document.getElementById('product-list');
    productList.innerHTML = '';

    products.forEach((product, index) => {
        const productItem = document.createElement('div');
        productItem.className = 'product-item';
        productItem.innerHTML = 
            <span>${product.name}</span>
            <div>
                <button class="edit-button" onclick="editProduct(${index})">Editar</button>
                <button onclick="deleteProduct(${index})">Excluir</button>
            </div>
        ;
        productList.appendChild(productItem);
    });
}

function editProduct(index) {
    const product = products[index];
    document.getElementById('product-name').value = product.name;
    document.getElementById('product-link').value = product.link;
    document.getElementById('product-category').value = product.category;
    document.getElementById('product-image').value = ''; // Clear the file input
    document.getElementById('product-image-preview').src = product.image; // Display current image
    document.getElementById('add-button').style.display = 'none';
    document.getElementById('update-button').style.display = 'inline-block';
    document.getElementById('update-button').setAttribute('data-index', index); // Set index as data attribute
}

function updateProduct() {
    const index = parseInt(document.getElementById('update-button').getAttribute('data-index'));
    const name = document.getElementById('product-name').value;
    const image = document.getElementById('product-image').files[0];
    const link = document.getElementById('product-link').value;
    const category = document.getElementById('product-category').value;

    if (name && link && category) {
        const reader = new FileReader();
        reader.onload = function(event) {
            const imageDataUrl = event.target.result;
            products[index] = {
                ...products[index],
                name: name,
                image: imageDataUrl,
                link: link,
                category: category
            };
            saveProducts();
            alert('Produto atualizado com sucesso!');
            clearForm();
            loadProducts();
            document.getElementById('add-button').style.display = 'inline-block';
            document.getElementById('update-button').style.display = 'none';
            document.getElementById('product-image-preview').src = ''; // Clear image preview
        };
        reader.readAsDataURL(image);
    } else {
        alert('Por favor, preencha todos os campos obrigatórios.');
    }
}

function deleteProduct(index) {
    if (confirm('Tem certeza que deseja excluir este produto?')) {
        products.splice(index, 1);
        saveProducts();
        loadProducts();
    }
}

function clearForm() {
    document.getElementById('product-name').value = '';
    document.getElementById('product-image').value = '';
    document.getElementById('product-link').value = '';
    document.getElementById('product-category').value = '';
    document.getElementById('product-image-preview').src = ''; // Clear image preview
    document.getElementById('add-button').style.display = 'inline-block';
    document.getElementById('update-button').style.display = 'none';
}

function generateProductId() {
    return products.length > 0 ? products[products.length - 1].id + 1 : 1;
}

window.onload = function() {
    loadProducts();
    loadCategories();
};

index.HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loja de Produtos</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f8f8f8;
        }
        header {
            width: 100%;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        header h1 {
            margin: 0;
        }
        #product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            padding: 20px;
            width: 100%;
            max-width: 1200px;
        }
        .product {
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .product img {
            max-width: 100%;
            height: auto;
        }
        .product h3 {
            margin: 10px 0;
        }
        .product button {
            background-color: #add8e6;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .product button:hover {
            background-color: #87ceeb;
        }
        #pagination {
            margin: 20px;
        }
        #pagination button {
            background-color: #add8e6;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin: 0 5px;
        }
        #pagination button:hover {
            background-color: #87ceeb;
        }
        #category-list {
            list-style-type: none;
            padding: 0;
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        #category-list li {
            margin: 0 10px;
        }
        #category-list a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        #category-list a:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <header>
        <h1>Minha Loja</h1>
    </header>
    <ul id="category-list"></ul>
    <div id="product-grid"></div>
    <div id="pagination"></div>
    <script src="script.js"></script>
</body>
</html>

script.js

const productsPerPage = 20;
let currentPage = 1;
let products = [];
let categories = [];

function loadProductsFromStorage() {
    const storedProducts = localStorage.getItem('products');
    if (storedProducts) {
        products = JSON.parse(storedProducts);
    }
}

function loadCategoriesFromStorage() {
    const storedCategories = localStorage.getItem('categories');
    if (storedCategories) {
        categories = JSON.parse(storedCategories);
    }
}

function loadProducts(page) {
    loadProductsFromStorage();
    const start = (page - 1) * productsPerPage;
    const end = start + productsPerPage;
    const productsToShow = products.slice(start, end);

    const productGrid = document.getElementById("product-grid");
    productGrid.innerHTML = "";

    productsToShow.forEach(product => {
        const productElement = document.createElement("div");
        productElement.className = "product";
        productElement.innerHTML = 
            <img src="${product.image}" alt="${product.name}">
            <h3>${product.name}</h3>
            <button onclick="window.location.href='${product.link}'">Ver Produto</button>
        ;
        productGrid.appendChild(productElement);
    });

    loadPagination(page);
}

function loadProductsByCategory(category) {
    const filteredProducts = products.filter(product => product.category === category);
    const productGrid = document.getElementById("product-grid");
    productGrid.innerHTML = "";

    filteredProducts.forEach(product => {
        const productElement = document.createElement("div");
        productElement.className = "product";
        productElement.innerHTML = 
            <img src="${product.image}" alt="${product.name}">
            <h3>${product.name}</h3>
            <button onclick="window.location.href='${product.link}'">Ver Produto</button>
        ;
        productGrid.appendChild(productElement);
    });
}

function loadPagination(page) {
    const pagination = document.getElementById("pagination");
    pagination.innerHTML = "";

    const totalPages = Math.ceil(products.length / productsPerPage);

    if (page > 1) {
        const prevButton = document.createElement("button");
        prevButton.textContent = "Anterior";
        prevButton.onclick = () => loadProducts(page - 1);
        pagination.appendChild(prevButton);
    }

    if (page < totalPages) {
        const nextButton = document.createElement("button");
        nextButton.textContent = "Próxima";
        nextButton.onclick = () => loadProducts(page + 1);
        pagination.appendChild(nextButton);
    }
}

function loadCategoryList() {
    const categoryList = document.getElementById("category-list");
    categoryList.innerHTML = '';

    categories.forEach(category => {
        const categoryItem = document.createElement('li');
        categoryItem.innerHTML = 
            <a href="#" onclick="loadProductsByCategory('${category}')">${category}</a>
        ;
        categoryList.appendChild(categoryItem);
    });
}

// Inicializa a página com os produtos e categorias
loadProducts(currentPage);
loadCategoriesFromStorage();
loadCategoryList();


vou chamar este conjunto de codigos de loja01
para quando eu qzuier voltar as paginas orignais elas estarao aqui apra eu te solicitar e voltar para esta configuração de partida para novas implementação