<?php
session_start();

// Verifica se o usuário está logado
if (!isset($_SESSION['user_id'])) {
    // Redireciona para a página de login se não estiver logado
    header("Location: login.html");
    exit;
}

// Aqui vai o restante do seu código PHP...
?>

<?php
session_start();

if (isset($_SESSION['username'])) {
    echo "" . $_SESSION[''];
} else {
    echo "";
}
?>


<!DOCTYPE html>
<html lang="pt-BR">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pr&eacute;-Visualiza&ccedil;&atilde;o e Edi&ccedil;&atilde;o</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap" rel="stylesheet" /><!-- Estilos combinados -->
	<style type="text/css">body {
            font-family: Arial, sans-serif;
            font-size: 20px;
            background-color: #ffffff;
            margin: 0;
            padding-top: 50px; /* Adiciona espaço para a barra de busca fixa */
            align-items: center;
        }

/* Estilos para o modo escuro */
body.dark-mode {
  background-color: #333;
  color: #fff;
}

.short-text {
    display: none; /* esconde o texto curto por padrão */
}

@media (max-width: 768px) {
    .full-text {
        display: none; /* esconde o texto completo em telas pequenas */
    }

    .short-text {
        display: inline; /* mostra o texto curto em telas pequenas */
    }
}


        @media (min-width: 4800px) {
            .result-list {
                grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            }
        }






    /* Estilos para o rodapé */
    footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 8px;
        padding: 3px;
        background-color: #f2f2f2;
        border-top: 1px solid #ccc;
    }



.category-buttons-container {
  position: fixed;
  top: 25px;
  left: 0;
  right: 0;
  z-index: 998;
  max-width: 100%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  overflow-x: auto;
  white-space: nowrap;
  padding: 5px;
  background-color: transparent; /* Torna o fundo transparente */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Adicione sombra para profundidade */
  overflow: hidden;
}

.category-buttons {
  display: flex;
  justify-content: space-between; /* Posiciona os botões nas extremidades */
  align-items: center;
}

.left-arrow,
.right-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: #F7F7F7;
  border-radius: 50%;
  font-size: 1.2rem;
  color: #333333;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Adicione sombra para profundidade */
}

.left-arrow:hover,
.right-arrow:hover {
  background-color: #EAEAEA;
  transform: scale(1.1); /* Efeito de zoom ao passar o mouse */
}

.category-button {
    margin: 0 0.5rem;
    background-color: #F7F7F7;
    border: none;
    border-radius: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-family: 'Arial', sans-serif; /* Substitua por qualquer fonte de sua escolha */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Adicione sombra para profundidade */
}

.category-button:hover {
    background-color: #EAEAEA;
    transform: scale(1.05); /* Adicione um efeito de "zoom" ao passar o mouse */
}

        .category-buttons-wrapper {
            display: flex;
            align-items: center;
            overflow-x: auto;
            scrollbar-width: none;
        }

        .category-buttons-wrapper::-webkit-scrollbar {
            display: none;
        }

.category-button.all {
    background-color: #e8e9e8;
    color: #000000;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
    border: none;
    padding: 0 5px; /* Espaçamento horizontal de 5px */
    border-radius: 4px;
    line-height: 32px; /* Altura da linha para controlar o espaçamento vertical */
    transition: background-color 0.3s ease; /* Transição suave para a mudança de cor de fundo */
}

.category-button.all:hover {
    background-color: #d2d3d2;
}


.category-button.world-news {
    background-color: #e8e9e8;
    color: #000000;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
    border: none;
    padding: 0 5px; /* Espaçamento horizontal de 5px */
    border-radius: 4px;
    line-height: 32px; /* Altura da linha para controlar o espaçamento vertical */
    transition: background-color 0.3s ease; /* Transição suave para a mudança de cor de fundo */
}}

.category-button.world-news:hover {
    background-color: #d2d3d2;
}

.category-button.entertainment {
    background-color: #e8e9e8;
    color: #000000;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
    border: none;
    padding: 0 5px; /* Espaçamento horizontal de 5px */
    border-radius: 4px;
    line-height: 32px; /* Altura da linha para controlar o espaçamento vertical */
    transition: background-color 0.3s ease; /* Transição suave para a mudança de cor de fundo */
}

.category-button.entertainment:hover {
    background-color: #d2d3d2;
}


.category-button.sports {
    background-color: #e8e9e8;
    color: #000000;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
    border: none;
    padding: 0 5px; /* Espaçamento horizontal de 5px */
    border-radius: 4px;
    line-height: 32px; /* Altura da linha para controlar o espaçamento vertical */
    transition: background-color 0.3s ease; /* Transição suave para a mudança de cor de fundo */
}

.category-button.sports:hover {
    background-color: #d2d3d2;
}

.category-button.videogames {
    background-color: #e8e9e8;
    color: #000000;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
    border: none;
    padding: 0 5px; /* Espaçamento horizontal de 5px */
    border-radius: 4px;
    line-height: 32px; /* Altura da linha para controlar o espaçamento vertical */
    transition: background-color 0.3s ease; /* Transição suave para a mudança de cor de fundo */
}

.category-button.videogames:hover {
    background-color: #d2d3d2;
}

.category-button.pins {
    background-color: #1f8aef;
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
    border: none;
    padding: 0 5px; /* Espaçamento horizontal de 5px */
    border-radius: 4px;
    line-height: 32px; /* Altura da linha para controlar o espaçamento vertical */
    transition: background-color 0.3s ease; /* Transição suave para a mudança de cor de fundo */
}

.category-button.pins:hover {
    background-color: #d2d3d2;
}

.category-button.plus {
    background-color: #ff0000;
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
    border: none;
    padding: 0 5px; /* Espaçamento horizontal de 5px */
    border-radius: 4px;
    line-height: 32px; /* Altura da linha para controlar o espaçamento vertical */
    transition: background-color 0.3s ease; /* Transição suave para a mudança de cor de fundo */
}

.category-button.plus:hover {
    background-color: #d2d3d2;
}

.category-button.pin {
    background-color: #1f8aef;
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
    border: none;
    padding: 0 10px; /* Espaçamento horizontal de 10px */
    border-radius: 4px;
    line-height: 32px; /* Altura da linha para controlar o espaçamento vertical */
    transition: background-color 0.3s ease; /* Transição suave para a mudança de cor de fundo */
}

.category-button.pin:hover {
    background-color: #f8ae01;
}
#myBtn {
            display: none;
            position: fixed;
            bottom: 40px;
            right: 12px;
            z-index: 99;
            font-size: 18px;
            border: none;
            outline: none;
            background-color: red;
            color: white;
            cursor: pointer;
            padding: 15px;
            border-radius: 4px;
        }

        #myBtn:hover {
            background-color: #d2d3d2;
        }


/* Estilos para o botão "Modo Escuro" */
#dark-mode-toggle {
            background-color: #333;
            border: none;
            border-radius: .4rem;
            color: #ffffff;
            cursor: pointer;
            font-size: 1.5rem;
            font-weight: bold;
            height: 2rem;
            width: 10%; /* ajuste esta porcentagem conforme necessário */
            outline: none;
            transition: background-color 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
    overflow: visible; /* permite que o conteúdo ultrapasse os limites do botão */
  margin-right: 5px;
}

#dark-mode-toggle:hover {
  background-color: #555;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #e9ecef;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 20px;
}

.welcome-message {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px; /* Aumenta o espaço abaixo da mensagem */
    background-color: #f8f9fa; /* Fundo sutil */
    padding: 20px;
    max-width: 600px;
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra leve para profundidade */
}

.welcome-message h2 {
    color: #007bff; /* Cor azul vibrante para o título */
    font-size: 2.8rem; /* Tamanho ligeiramente maior */
    font-weight: 600; /* Peso da fonte um pouco mais ousado */
    margin-bottom: 15px; /* Espaçamento ajustado abaixo do título */
}

.welcome-message p {
    color: #333; /* Cor mais escura para contraste */
    font-size: 1.3rem; /* Tamanho de fonte ligeiramente maior */
    margin-top: 0; /* Removido o espaço adicional acima do parágrafo */
}

@media (max-width: 768px) {
    .welcome-message h2 {
        font-size: 2.2rem; /* Tamanho menor para telas pequenas */
    }

    .welcome-message p {
        font-size: 1.1rem;
    }
}


.login-form-container {
    background-color: #fff;
    padding: 40px; /* Aumento do padding para mais espaço */
    border-radius: 10px; /* Bordas mais arredondadas */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada */
    width: 100%;
    max-width: 600px; /* Largura máxima ajustada */
    text-align: left; /* Alinhamento do texto */
}

.input-group {
    position: relative;
    margin-bottom: 25px;
    width: 100%;
    max-width: 600px;
}

.input-group i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%); /* Centraliza verticalmente */
    color: #495057;
    z-index: 3;
}

.input-group input {
    width: 100%;
    padding: 15px 15px 15px 40px; /* Aumenta o padding esquerdo para evitar sobreposição do ícone */
    border-radius: 5px;
    border: 1px solid #ced4da;
    box-sizing: border-box;
    font-size: 1rem;
    background-color: #f8f9fa;
}

input[type="submit"], input[type="button"] {
    width: 100%;
    border-radius: 5px;
    padding: 12px; /* Padding maior para botões */
    font-weight: bold; /* Peso da fonte para destaque */
    transition: all 0.3s ease;
}

input[type="submit"] {
    background-color: #28a745;
    color: white;
}

input[type="submit"]:hover {
    background-color: #218838;
    transform: scale(1.05); /* Efeito de zoom ao passar o mouse */
}

input[type="button"] {
    background-color: #007bff;
    color: white;
    margin-top: 5px; /* Espaço extra acima do botão de registro */
}

input[type="button"]:hover {
    background-color: #0056b3;
    transform: scale(1.05); /* Efeito de zoom ao passar o mouse */
}

.additional-links a {
    color: #007bff;
    margin-top: 20px; /* Espaçamento adicional */
    display: inline-block; /* Alinhamento adequado */
}


        /* Melhorias para responsividade */
        @media (max-width: 768px) {
            .category-button {
                font-size: 16px; /* Tamanho menor da fonte para dispositivos móveis */
                padding: 0.4rem 0.8rem; /* Padding menor */
            }

            form {
                width: 95%; /* Largura maior para o formulário em dispositivos móveis */
                max-width: none;
            }

            .input-group input {
                padding: 10px 10px 10px 30px; /* Padding ajustado para ícones */
            }

            .input-group i {
                left: 8px; /* Ajuste na posição do ícone */
            }
        }

        /* Adaptações para telas maiores */
        @media (min-width: 1024px) {
            .category-buttons-container {
                width: 80%; /* Largura ajustada para telas maiores */
            }

            form {
                max-width: 500px; /* Largura máxima maior para o formulário */
            }
        }
	</style>
</head>
<body>
<div class="category-buttons-container">
<div class="category-buttons">
<div class="left-arrow"></div>

<div class="category-buttons-wrapper"><a class="category-button pins" href="https://digupdog.com" target="_self">Pins</a><a class="category-button all" href="https://digupdog.net/FEED/home.html" target="_self">All</a><a class="category-button world-news" href="https://digupdog.net/FEED/news.html" target="_self">World News</a><a class="category-button entertainment" href="https://digupdog.net/FEED/entertainment.html" target="_self">Entertainment</a><a class="category-button sports" href="https://digupdog.net/FEED/sports.html" target="_self">Sports</a><a class="category-button videogames" href="https://digupdog.net/FEED/videogames.html" target="_self">Video Games</a><a class="category-button plus" href="https://digupdog.com/plus" target="_self">18+</a><a class="category-button pin" href="https://digupdog.com//aaa1.php" target="_self">+</a><button id="dark-mode-toggle"><span class="full-text">DARK</span><span class="short-text">D</span></button></div>

<div class="right-arrow"></div>
</div>
</div>

<div class="welcome-message">
<h2>Welcome Back!</h2>

<p>Please login to access your account.</p></div>

<div class="login-form-container">
<form action="login_php.php" method="post">
<div class="input-group">
    <i class="fa fa-user icon"></i>
    <input id="username" name="username" placeholder="Username or Email" required="" type="text" />
</div>

<div class="input-group">
    <i class="fa fa-lock icon"></i>
    <input id="password" name="password" placeholder="Password" required="" type="password" />
</div>

<input type="submit" value="&#xf2f6; Login" style="font-family: Arial, 'Font Awesome 5 Free'"> 
<input onclick="location.href='register.html';" type="button" value="&#xf234; Register" style="font-family: Arial, 'Font Awesome 5 Free'">


<div class="additional-links"><a href="index.php">Forgot Password?</a></div>
</div>
<!-- Scripts Bootstrap e jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script><script>
var container = document.querySelector('.category-buttons-container');
var wrapper = document.querySelector('.category-buttons-wrapper');
var leftArrow = document.querySelector('.left-arrow');
var rightArrow = document.querySelector('.right-arrow');
var scrollAmount = 0;
var scrollStep = 5;
var scrollInterval;

function startScrollLeft() {
    scrollInterval = setInterval(function() {
        wrapper.scrollLeft -= scrollStep;  // Ajuste o valor de scrollLeft diretamente
    }, 10);
}

function startScrollRight() {
    scrollInterval = setInterval(function() {
        wrapper.scrollLeft += scrollStep;  // Ajuste o valor de scrollLeft diretamente
    }, 10);
}

function stopScroll() {
  clearInterval(scrollInterval);
}

leftArrow.addEventListener('mousedown', startScrollLeft);
leftArrow.addEventListener('mouseup', stopScroll);
leftArrow.addEventListener('mouseleave', stopScroll);
rightArrow.addEventListener('mousedown', startScrollRight);
rightArrow.addEventListener('mouseup', stopScroll);
rightArrow.addEventListener('mouseleave', stopScroll);

leftArrow.addEventListener('touchstart', startScrollLeft);
leftArrow.addEventListener('touchend', stopScroll);
rightArrow.addEventListener('touchstart', startScrollRight);
rightArrow.addEventListener('touchend', stopScroll);



// Seletor para o botão de alternar modo escuro
const darkModeToggle = document.querySelector('#dark-mode-toggle');

// Evento de clique no botão
darkModeToggle.addEventListener('click', function() {
  // Adiciona ou remove a classe 'dark-mode' no elemento body
  document.body.classList.toggle('dark-mode');
});

</script></div>
</body>
</html>