<?php
/* ============================================================
   CONFIGURACAO DO SEU SITE GEOCITIES
   Edite apenas este bloco. Nao mexa no restante do arquivo.
   ============================================================ */

// --- IDENTIDADE ---
// Seu apelido exibido no topo e no menu
$cfg_nick        = "SeuNick";

// Titulo da janela do navegador
$cfg_titulo_aba  = "A Pagina de SeuNick - GeoCities Nashville";

// Frase de abertura exibida no cabecalho
$cfg_subtitulo   = "Bem-vindo a minha pagina pessoal de musica!";

// Frase que aparece piscando abaixo do subtitulo
$cfg_frase_blink = "Atualizado em: " . date('d/m/Y');


// --- SOBRE MIM ---
// Cada linha vira um paragrafo na secao "Sobre Mim"
// Deixe "" para nao exibir aquele paragrafo
$cfg_sobre = [
    "Ola! Meu nome e [seu nome] e esta e a minha pagina pessoal.",
    "Escreva aqui o segundo paragrafo com algo sobre voce.",
    "Terceiro paragrafo opcional.",
    "",  // paragrafo vazio nao aparece
];

// Dados pessoais exibidos na coluna lateral
// Deixe "" para omitir o campo
$cfg_perfil = [
    "Idade"      => "",
    "Cidade"     => "",
    "Instrumento"=> "",
    "Genero"     => "",   // genero musical favorito
    "Artista fav"=> "",
    "ICQ"        => "",
    "MSN"        => "",
    "Status"     => "",
];


// --- MUSICAS FAVORITAS ---
// Cada entrada: [ "Artista", "Musica", "Ano" ]
// Apague ou adicione linhas conforme quiser
$cfg_musicas = [
    [ "Artista 1", "Nome da Musica", "2000" ],
    [ "Artista 2", "Nome da Musica", "1999" ],
    [ "Artista 3", "Nome da Musica", "1998" ],
    [ "Artista 4", "Nome da Musica", "1997" ],
];

// Musica exibida como "tocando agora" na sidebar
$cfg_tocando_artista = "Artista";
$cfg_tocando_musica  = "Nome da Musica";


// --- LINKS FAVORITOS ---
// Cada entrada: [ "Nome do site", "https://url.com", "Descricao curta" ]
$cfg_links = [
    [ "Google",      "https://google.com",  "O melhor buscador" ],
    [ "UOL",         "https://uol.com.br",  "Portal brasileiro"  ],
    [ "Yahoo! BR",   "https://yahoo.com",   "Chat e e-mail"      ],
    // Adicione quantos quiser:
    // [ "Nome", "URL", "Descricao" ],
];


// --- LIVRO DE VISITAS ---
// Mensagens fixas que sempre aparecem (historico)
// Cada entrada: [ "Autor", "Mensagem", "DD/MM/AAAA" ]
$cfg_recados = [
    [ "Visitante1",  "Deixe aqui uma mensagem de exemplo.",     "01/01/2000" ],
    [ "Visitante2",  "Outra mensagem de exemplo.",               "02/01/2000" ],
];

// E-mail para onde o formulario de recados sera enviado
// Requer configuracao de mail() no seu servidor PHP
// Deixe "" para desabilitar o envio por e-mail
$cfg_email_recados = "";


// --- MARQUEE DO TOPO ---
// Texto que rola na barra superior
$cfg_marquee = "Bem-vindo a minha pagina! -- GeoCities / Nashville -- Assine meu livro de visitas! -- Troca de links!";


// --- CORES E VISUAL ---
// Esquema de cores. Altere os valores hexadecimais.
$cfg_cor_fundo        = "#000000";  // fundo da pagina
$cfg_cor_fundo_tabela = "#111111";  // fundo das caixas
$cfg_cor_borda        = "#996600";  // cor das bordas das caixas
$cfg_cor_titulo       = "#ffcc00";  // cor dos titulos
$cfg_cor_texto        = "#cccccc";  // cor do texto principal
$cfg_cor_link         = "#ffaa00";  // cor dos links
$cfg_cor_marquee_bg   = "#222200";  // fundo da barra marquee
$cfg_cor_marquee_txt  = "#ffcc00";  // texto da barra marquee
$cfg_cor_header_bg    = "#221100";  // fundo do cabecalho

/* ============================================================
   FIM DA CONFIGURACAO
   ============================================================ */

// Processamento do formulario de recados
$mensagem_enviada = false;
$erro_form = "";
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['rec_nome'], $_POST['rec_msg'])) {
    $rec_nome = trim(htmlspecialchars($_POST['rec_nome']));
    $rec_msg  = trim(htmlspecialchars($_POST['rec_msg']));
    if ($rec_nome === "" || $rec_msg === "") {
        $erro_form = "Preencha o nome e a mensagem.";
    } else {
        $mensagem_enviada = true;
        if ($cfg_email_recados !== "") {
            $assunto = "Novo recado de $rec_nome no seu site GeoCities";
            $corpo   = "Nome: $rec_nome\nMensagem: $rec_msg\n";
            mail($cfg_email_recados, $assunto, $corpo);
        }
    }
}

$visitas = rand(10000, 99999); // Substitua por um contador real se quiser
$hora    = date('H:i:s');
$data    = date('d/m/Y');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="pt-BR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="<?= htmlspecialchars($cfg_nick) ?>">
<title><?= htmlspecialchars($cfg_titulo_aba) ?></title>
<style>
/* Fonte padrao dos anos 2000 */
body {
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: 12px;
    background-color: <?= $cfg_cor_fundo ?>;
    color: <?= $cfg_cor_texto ?>;
    margin: 0;
    padding: 0;
}

a            { color: <?= $cfg_cor_link ?>; }
a:visited    { color: #cc8800; }
a:hover      { color: #ffffff; text-decoration: underline; }

hr {
    border: none;
    border-top: 1px solid <?= $cfg_cor_borda ?>;
    margin: 6px 0;
}

/* MARQUEE */
.barra-topo {
    background-color: <?= $cfg_cor_marquee_bg ?>;
    border-top: 2px solid <?= $cfg_cor_borda ?>;
    border-bottom: 2px solid <?= $cfg_cor_borda ?>;
    padding: 3px 0;
    font-size: 11px;
    color: <?= $cfg_cor_marquee_txt ?>;
    font-family: Verdana, Arial, sans-serif;
}

/* CABECALHO */
.header {
    background-color: <?= $cfg_cor_header_bg ?>;
    border-bottom: 3px ridge <?= $cfg_cor_borda ?>;
    padding: 14px 10px 10px 10px;
    text-align: center;
}
.header h1 {
    font-family: "Times New Roman", Georgia, serif;
    font-size: 28px;
    color: <?= $cfg_cor_titulo ?>;
    text-shadow: 1px 1px 0 #000;
    margin: 0 0 4px 0;
}
.header p {
    font-size: 11px;
    color: #aaaaaa;
    margin: 2px 0 0 0;
}
.blink { text-decoration: blink; animation: blink-anim 1s step-end infinite; font-size: 11px; color: <?= $cfg_cor_link ?>; }
@keyframes blink-anim { 0%,100%{opacity:1} 50%{opacity:0} }

/* LAYOUT PRINCIPAL - tabela de 2 colunas */
.layout-table {
    width: 96%;
    max-width: 860px;
    margin: 8px auto 0 auto;
    border-collapse: collapse;
}
.col-lateral { width: 175px; vertical-align: top; padding-right: 8px; }
.col-conteudo { vertical-align: top; }

/* CAIXAS (estilo widget dos anos 2000) */
.caixa {
    background-color: <?= $cfg_cor_fundo_tabela ?>;
    border: 2px outset <?= $cfg_cor_borda ?>;
    margin-bottom: 8px;
    width: 100%;
}
.caixa-titulo {
    background-color: <?= $cfg_cor_borda ?>;
    color: #000000;
    font-weight: bold;
    font-size: 11px;
    padding: 3px 6px;
    font-family: Verdana, Arial, sans-serif;
    letter-spacing: 0.5px;
}
.caixa-corpo {
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.6;
}

/* MENU LATERAL */
.menu-link {
    display: block;
    padding: 4px 6px;
    color: <?= $cfg_cor_link ?>;
    text-decoration: none;
    font-size: 12px;
    border-bottom: 1px dotted #333333;
}
.menu-link:hover { background-color: #222200; }

/* CONTADOR */
.contador {
    font-family: "Courier New", Courier, monospace;
    font-size: 16px;
    font-weight: bold;
    color: #00ff00;
    background-color: #000000;
    border: 2px inset #333;
    padding: 3px 8px;
    letter-spacing: 3px;
    display: inline-block;
}

/* RELOGIO */
#relogio {
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    font-weight: bold;
    color: #00ff00;
    background-color: #000000;
    border: 2px inset #333;
    padding: 2px 6px;
    letter-spacing: 2px;
}

/* TITULOS DE SECAO */
.sec-titulo {
    font-family: "Times New Roman", Georgia, serif;
    font-size: 15px;
    color: <?= $cfg_cor_titulo ?>;
    border-bottom: 1px solid <?= $cfg_cor_borda ?>;
    padding-bottom: 3px;
    margin-bottom: 8px;
}

/* TABELA DE MUSICAS */
.tabela-musicas {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.tabela-musicas th {
    background-color: <?= $cfg_cor_borda ?>;
    color: #000000;
    padding: 3px 8px;
    text-align: left;
    font-size: 11px;
}
.tabela-musicas td {
    padding: 4px 8px;
    border-bottom: 1px solid #222222;
    color: <?= $cfg_cor_texto ?>;
}
.tabela-musicas tr:hover td { background-color: #1a1000; }
.num-musica { color: #666666; font-family: "Courier New", monospace; }
.nome-artista { color: <?= $cfg_cor_titulo ?>; font-weight: bold; }

/* TABELA DE LINKS */
.tabela-links {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.tabela-links td { padding: 4px 6px; border-bottom: 1px dotted #333; }

/* RECADOS */
.recado {
    border-left: 3px solid <?= $cfg_cor_borda ?>;
    padding: 4px 8px;
    margin-bottom: 8px;
    background-color: #0a0800;
}
.recado-autor { font-weight: bold; color: <?= $cfg_cor_titulo ?>; font-size: 11px; }
.recado-data  { float: right; color: #555544; font-size: 11px; }
.recado-msg   { margin-top: 3px; color: <?= $cfg_cor_texto ?>; }

/* FORMULARIO */
.form-campo {
    width: 98%;
    background-color: #0a0800;
    border: 1px inset #555533;
    color: #00ff00;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    padding: 4px;
    margin-bottom: 5px;
}
.form-campo:focus { border-color: <?= $cfg_cor_titulo ?>; outline: none; }
.btn-enviar {
    background-color: #3a2000;
    border: 2px outset #996600;
    color: <?= $cfg_cor_titulo ?>;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 12px;
    cursor: pointer;
}
.btn-enviar:hover { background-color: #5a3000; }
.btn-enviar:active { border-style: inset; }

/* EM CONSTRUCAO */
.em-construcao {
    border: 2px dashed #996600;
    background-color: #0d0800;
    padding: 8px 10px;
    text-align: center;
    font-size: 11px;
    color: #996600;
    margin-bottom: 8px;
}

/* RODAPE */
.rodape {
    border-top: 2px ridge <?= $cfg_cor_borda ?>;
    background-color: <?= $cfg_cor_header_bg ?>;
    text-align: center;
    padding: 10px 0 12px 0;
    margin-top: 10px;
    font-size: 10px;
    color: #555544;
}
.rodape a { color: #665522; }

/* BADGES ANTIGOS (88x31) */
.badges { margin: 6px 0; }
.badge-retro {
    display: inline-block;
    width: 88px;
    height: 31px;
    line-height: 1.3;
    text-align: center;
    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: bold;
    vertical-align: middle;
    border: 1px solid;
    padding: 2px;
    margin: 2px;
}

/* PERFIL LATERAL */
.perfil-tabela { width: 100%; font-size: 11px; border-collapse: collapse; }
.perfil-tabela td { padding: 2px 3px; border-bottom: 1px dotted #222; }
.perfil-label { color: #888866; white-space: nowrap; padding-right: 4px; }
.perfil-valor { color: <?= $cfg_cor_texto ?>; }
</style>
</head>
<body>

<!-- BARRA DE MARQUEE -->
<div class="barra-topo">
    <marquee scrollamount="3" behavior="scroll">
        <?= htmlspecialchars($cfg_marquee) ?>
    </marquee>
</div>

<!-- CABECALHO -->
<div class="header">
    <h1>~*~ <?= htmlspecialchars($cfg_nick) ?> ~*~</h1>
    <p><?= htmlspecialchars($cfg_subtitulo) ?></p>
    <p class="blink"><?= htmlspecialchars($cfg_frase_blink) ?></p>
</div>

<!-- LAYOUT -->
<table class="layout-table" cellpadding="0" cellspacing="0">
<tr>

    <!-- COLUNA LATERAL -->
    <td class="col-lateral">

        <!-- PERFIL -->
        <div class="caixa">
            <div class="caixa-titulo">SOBRE MIM</div>
            <div class="caixa-corpo">
                <table class="perfil-tabela">
                <?php foreach ($cfg_perfil as $label => $valor):
                    if ($valor === "") continue; ?>
                <tr>
                    <td class="perfil-label"><?= htmlspecialchars($label) ?>:</td>
                    <td class="perfil-valor"><?= htmlspecialchars($valor) ?></td>
                </tr>
                <?php endforeach; ?>
                </table>
            </div>
        </div>

        <!-- CONTADOR -->
        <div class="caixa">
            <div class="caixa-titulo">VISITAS</div>
            <div class="caixa-corpo" style="text-align:center;">
                <div style="font-size:10px; color:#888866; margin-bottom:3px;">Voce e o visitante:</div>
                <div class="contador"><?= str_pad($visitas, 6, '0', STR_PAD_LEFT) ?></div>
            </div>
        </div>

        <!-- MENU -->
        <div class="caixa">
            <div class="caixa-titulo">MENU</div>
            <div class="caixa-corpo" style="padding:0;">
                <a class="menu-link" href="#sobre">[ Sobre Mim ]</a>
                <a class="menu-link" href="#musicas">[ Playlist ]</a>
                <a class="menu-link" href="#links">[ Links ]</a>
                <a class="menu-link" href="#recados">[ Recados ]</a>
                <a class="menu-link" href="#contato">[ Contato ]</a>
            </div>
        </div>

        <!-- RELOGIO -->
        <div class="caixa">
            <div class="caixa-titulo">HORARIO</div>
            <div class="caixa-corpo" style="text-align:center;">
                <div id="relogio"><?= $hora ?></div>
                <div style="font-size:10px; color:#555544; margin-top:3px;"><?= $data ?></div>
            </div>
        </div>

        <!-- TOCANDO AGORA -->
        <div class="caixa">
            <div class="caixa-titulo">TOCANDO AGORA</div>
            <div class="caixa-corpo" style="font-size:11px; text-align:center;">
                <div style="color:<?= $cfg_cor_titulo ?>; font-weight:bold;"><?= htmlspecialchars($cfg_tocando_artista) ?></div>
                <div style="color:<?= $cfg_cor_texto ?>; margin-top:2px;"><?= htmlspecialchars($cfg_tocando_musica) ?></div>
                <div style="color:#444433; margin-top:4px; font-family:'Courier New',monospace;">[&gt;&gt; playing... ]</div>
            </div>
        </div>

    </td>

    <!-- COLUNA DE CONTEUDO -->
    <td class="col-conteudo">

        <!-- SOBRE MIM -->
        <a name="sobre"></a>
        <div class="caixa">
            <div class="caixa-titulo">SOBRE MIM</div>
            <div class="caixa-corpo">
                <div class="sec-titulo">Quem sou eu</div>
                <?php foreach ($cfg_sobre as $paragrafo):
                    if ($paragrafo === "") continue; ?>
                <p style="margin:0 0 8px 0;"><?= htmlspecialchars($paragrafo) ?></p>
                <?php endforeach; ?>
            </div>
        </div>

        <!-- EM CONSTRUCAO -->
        <div class="em-construcao">
            [ EM CONSTRUCAO ] &nbsp; Novas secoes em breve. Volte sempre!
        </div>

        <!-- PLAYLIST -->
        <a name="musicas"></a>
        <div class="caixa">
            <div class="caixa-titulo">MINHA PLAYLIST</div>
            <div class="caixa-corpo">
                <div class="sec-titulo">Musicas favoritas</div>
                <table class="tabela-musicas">
                    <tr>
                        <th>#</th>
                        <th>Artista</th>
                        <th>Musica</th>
                        <th>Ano</th>
                    </tr>
                    <?php foreach ($cfg_musicas as $i => $m): ?>
                    <tr>
                        <td class="num-musica"><?= str_pad($i+1, 2, '0', STR_PAD_LEFT) ?></td>
                        <td class="nome-artista"><?= htmlspecialchars($m[0]) ?></td>
                        <td><?= htmlspecialchars($m[1]) ?></td>
                        <td style="color:#555544; font-size:11px;"><?= htmlspecialchars($m[2]) ?></td>
                    </tr>
                    <?php endforeach; ?>
                </table>
            </div>
        </div>

        <!-- LINKS -->
        <a name="links"></a>
        <div class="caixa">
            <div class="caixa-titulo">LINKS FAVORITOS</div>
            <div class="caixa-corpo">
                <div class="sec-titulo">Sites que eu gosto</div>
                <table class="tabela-links">
                    <?php foreach ($cfg_links as $l): ?>
                    <tr>
                        <td style="width:30%; font-weight:bold;">
                            <a href="<?= htmlspecialchars($l[1]) ?>" target="_blank"><?= htmlspecialchars($l[0]) ?></a>
                        </td>
                        <td style="color:#888866;"><?= htmlspecialchars($l[2]) ?></td>
                    </tr>
                    <?php endforeach; ?>
                </table>
            </div>
        </div>

        <!-- LIVRO DE VISITAS -->
        <a name="recados"></a>
        <div class="caixa">
            <div class="caixa-titulo">LIVRO DE VISITAS</div>
            <div class="caixa-corpo">
                <div class="sec-titulo">O que disseram</div>
                <?php foreach ($cfg_recados as $r): ?>
                <div class="recado">
                    <span class="recado-data"><?= htmlspecialchars($r[2]) ?></span>
                    <span class="recado-autor"><?= htmlspecialchars($r[0]) ?></span>
                    <div class="recado-msg"><?= htmlspecialchars($r[1]) ?></div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>

        <!-- FORMULARIO -->
        <a name="contato"></a>
        <div class="caixa">
            <div class="caixa-titulo">DEIXE SEU RECADO</div>
            <div class="caixa-corpo">
                <?php if ($mensagem_enviada): ?>
                <p style="color:#00cc00; font-weight:bold;">Recado enviado com sucesso! Obrigado, <?= htmlspecialchars($rec_nome) ?>.</p>
                <?php elseif ($erro_form !== ""): ?>
                <p style="color:#cc0000;"><?= $erro_form ?></p>
                <?php endif; ?>

                <?php if (!$mensagem_enviada): ?>
                <form method="POST" action="<?= htmlspecialchars($_SERVER['PHP_SELF']) ?>">
                    <div>
                        <label for="rec_nome" style="font-size:11px; color:#888866;">Seu nome / nick:</label><br>
                        <input type="text" id="rec_nome" name="rec_nome" class="form-campo"
                            maxlength="60"
                            value="<?= isset($_POST['rec_nome']) ? htmlspecialchars($_POST['rec_nome']) : '' ?>">
                    </div>
                    <div>
                        <label for="rec_email" style="font-size:11px; color:#888866;">E-mail (opcional):</label><br>
                        <input type="text" id="rec_email" name="rec_email" class="form-campo"
                            maxlength="100"
                            value="<?= isset($_POST['rec_email']) ? htmlspecialchars($_POST['rec_email']) : '' ?>">
                    </div>
                    <div>
                        <label for="rec_msg" style="font-size:11px; color:#888866;">Mensagem:</label><br>
                        <textarea id="rec_msg" name="rec_msg" class="form-campo" rows="4"><?= isset($_POST['rec_msg']) ? htmlspecialchars($_POST['rec_msg']) : '' ?></textarea>
                    </div>
                    <button type="submit" class="btn-enviar">Enviar recado</button>
                </form>
                <?php endif; ?>
            </div>
        </div>

    </td>
</tr>
</table>

<!-- RODAPE -->
<div class="rodape">
    <div class="badges">
        <span class="badge-retro" style="background:#002244; border-color:#4488ff; color:#aaccff;">INTERNET<br>EXPLORER<br>5.5</span>
        <span class="badge-retro" style="background:#221100; border-color:#996600; color:#ffcc00;">GEOCITIES<br>NASHVILLE</span>
        <span class="badge-retro" style="background:#002200; border-color:#006600; color:#aaff88;">BEST IN<br>800x600</span>
        <span class="badge-retro" style="background:#220000; border-color:#880000; color:#ffaaaa;">WINAMP<br>RULES</span>
    </div>
    <hr>
    <p>&copy; <?= date('Y') ?> <?= htmlspecialchars($cfg_nick) ?> &mdash; Todos os direitos reservados.</p>
    <p>Nao copie sem permissao. Ultima atualizacao: <?= $data ?></p>
    <p><a href="#topo">Voltar ao topo</a></p>
</div>

<script>
// Relogio em tempo real
function tick() {
    var n = new Date();
    var h = String(n.getHours()).padStart(2,'0');
    var m = String(n.getMinutes()).padStart(2,'0');
    var s = String(n.getSeconds()).padStart(2,'0');
    var el = document.getElementById('relogio');
    if (el) el.textContent = h + ':' + m + ':' + s;
}
setInterval(tick, 1000);
</script>

</body>
</html>