Spaces:

BlackMonsterMedia
/

jogo_alma

Running

App Files Files Community

BlackMonsterMedia commited on Sep 29

Commit

3e75cce

verified ·

1 Parent(s): cb7e27f

push it

Browse files

Files changed (1) hide show

index.html +271 -117

index.html CHANGED Viewed

@@ -1,124 +1,278 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Soulful Gaming Adventure</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
     <style>
-        .vanta-bg {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -1;
-        }
-        .choice-btn {
-            transition: all 0.3s ease;
-        }
-        .choice-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-        }
-    </style>
 </head>
-<body class="min-h-screen flex flex-col items-center justify-center bg-gray-900 text-white p-4">
-    <div id="vanta-bg" class="vanta-bg"></div>
-    <div class="max-w-2xl w-full bg-gray-800 bg-opacity-80 backdrop-blur-sm rounded-xl p-8 shadow-2xl border border-gray-700">
-        <div class="text-center mb-8">
-            <h1 class="text-4xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
-                Soulful Gaming Adventure
-            </h1>
-            <p class="text-gray-300 mb-6">Your journey begins at the gates of Alma</p>
-            <img src="http://static.photos/mystical/640x360/42" alt="Mystical gate" class="w-full h-64 object-cover rounded-lg mb-6 border-2 border-purple-500">
-        </div>
-        <div id="text-container" class="text-center mb-8">
-            <p id="story-text" class="text-xl mb-8">You stand before the ancient gates of Alma. The air hums with mysterious energy. Do you dare to enter?</p>
-        </div>
-        <div class="flex flex-col sm:flex-row gap-4 justify-center">
-            <button id="enter-btn" onclick="makeChoice('enter')" class="choice-btn bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-bold py-3 px-6 rounded-lg flex items-center justify-center gap-2">
-                <i data-feather="door-open"></i> Enter the Gates
-            </button>
-            <button id="leave-btn" onclick="makeChoice('leave')" class="choice-btn bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 text-white font-bold py-3 px-6 rounded-lg flex items-center justify-center gap-2">
-                <i data-feather="x"></i> Walk Away
-            </button>
-        </div>
-    </div>
-    <script>
-        // Initialize Vanta.js background
-        VANTA.GLOBE({
-            el: "#vanta-bg",
-            mouseControls: true,
-            touchControls: true,
-            gyroControls: false,
-            minHeight: 200.00,
-            minWidth: 200.00,
-            scale: 1.00,
-            scaleMobile: 1.00,
-            color: 0x7f3ff5,
-            backgroundColor: 0x111827
-        });
-        // Initialize feather icons
-        feather.replace();
-        function makeChoice(choice) {
-            const storyText = document.getElementById('story-text');
-            const enterBtn = document.getElementById('enter-btn');
-            const leaveBtn = document.getElementById('leave-btn');
-            if (choice === 'enter') {
-                storyText.innerHTML = "As you pass through the gates, you find yourself in a grand hall with two mysterious doors glowing with different energies.";
-                enterBtn.innerHTML = '<i data-feather="compass"></i> Follow the Blue Light';
-                enterBtn.onclick = function() { makeChoice('blue') };
-                enterBtn.className = "choice-btn bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3 px-6 rounded-lg flex items-center justify-center gap-2";
-                leaveBtn.innerHTML = '<i data-feather="moon"></i> Follow the Purple Glow';
-                leaveBtn.onclick = function() { makeChoice('purple') };
-                leaveBtn.className = "choice-btn bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold py-3 px-6 rounded-lg flex items-center justify-center gap-2";
-                document.querySelector('img').src = "http://static.photos/mystical/640x360/43";
-            }
-            else if (choice === 'leave') {
-                storyText.innerHTML = "You turn away from the gates, but as you walk, the path behind you disappears. You're lost in an endless void...";
-                enterBtn.style.display = 'none';
-                leaveBtn.innerHTML = '<i data-feather="refresh-cw"></i> Start Over';
-                leaveBtn.onclick = function() { window.location.reload() };
-                leaveBtn.className = "choice-btn bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white font-bold py-3 px-6 rounded-lg flex items-center justify-center gap-2";
-                document.querySelector('img').src = "http://static.photos/abstract/640x360/99";
-            }
-            else if (choice === 'blue') {
-                storyText.innerHTML = "The blue light envelops you, transporting you to a crystal cave filled with ancient knowledge. What do you seek?";
-                enterBtn.innerHTML = '<i data-feather="book"></i> Study the Knowledge';
-                enterBtn.onclick = function() { makeChoice('study') };
-                leaveBtn.innerHTML = '<i data-feather="trending-up"></i> Seek Power';
-                leaveBtn.onclick = function() { makeChoice('power') };
-                document.querySelector('img').src = "http://static.photos/technology/640x360/77";
-            }
-            else if (choice === 'purple') {
-                storyText.innerHTML = "The purple glow leads you to a mystical garden where time seems to stand still. What will you do?";
-                enterBtn.innerHTML = '<i data-feather="flower"></i> Meditate';
-                enterBtn.onclick = function() { makeChoice('meditate') };
-                leaveBtn.innerHTML = '<i data-feather="eye"></i> Observe';
-                leaveBtn.onclick = function() { makeChoice('observe') };
-                document.querySelector('img').src = "http://static.photos/nature/640x360/88";
-            }
-            feather.replace();
         }
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="pt">
 <head>
+  <meta charset="UTF-8">
+  <title>Aventura Noir - Alma</title>
     <style>
+      @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');
+      body {
+        background-color: #0a0a0a;
+        background-image: url('http://static.photos/office/1200x630/1');
+        background-size: cover;
+        background-position: center;
+        color: #f5f5f5;
+        font-family: 'Inconsolata', monospace;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        text-align: center;
+        padding: 40px;
+        flex-direction: column;
+      }
+    #texto {
+      max-width: 700px;
+      font-size: 20px;
+      line-height: 1.6;
+      white-space: pre-line;
+      text-shadow: 0 0 8px rgba(230, 57, 70, 0.6);
+      background-color: rgba(10, 10, 10, 0.7);
+      padding: 30px;
+      border-radius: 10px;
+      border-left: 3px solid #e63946;
+    }
+.botoes {
+      margin-top: 30px;
+      display: none; /* aparecem só no fim */
+    }
+    button {
+      margin: 10px;
+      padding: 12px 30px;
+      border: 2px solid #e63946;
+      border-radius: 6px;
+      cursor: pointer;
+      background: transparent;
+      color: #e63946;
+      font-size: 18px;
+      font-weight: bold;
+      transition: all 0.3s ease;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+    button:hover {
+      background: #e63946;
+      color: #0a0a0a;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(230, 57, 70, 0.4);
+    }
+</style>
 </head>
+<body>
+  <div id="texto"></div>
+  <div class="botoes"></div>
+  <script>
+    const textoDiv = document.getElementById("texto");
+    const botoesDiv = document.querySelector(".botoes");
+    let narrativaAtual = "";
+    let i = 0;
+    let speed = 40;
+    function escreverTexto(callback) {
+      if (i < narrativaAtual.length) {
+        textoDiv.innerHTML += narrativaAtual.charAt(i);
+        i++;
+        setTimeout(() => escreverTexto(callback), speed);
+      } else {
+        if (callback) callback();
+      }
+    }
+    function mostrarTexto(texto, botoes = []) {
+      narrativaAtual = texto;
+      i = 0;
+      textoDiv.innerHTML = "";
+      botoesDiv.innerHTML = "";
+      botoesDiv.style.display = "none";
+      escreverTexto(() => {
+        if (botoes.length > 0) {
+          botoes.forEach(btn => {
+            const button = document.createElement("button");
+            button.innerText = btn.label;
+            button.onclick = btn.action;
+            botoesDiv.appendChild(button);
+          });
+          botoesDiv.style.display = "block";
         }
+      });
+    }
+    // ———————————— Cena Inicial
+    mostrarTexto(
+`É tarde, já passa da 00. Toda a gente no escritório já foi para casa, estás sozinha na sala de reuniões a rever algumas respostas ao briefings para o marketing do Alma Shopping do ano que vem.
+De repente as luzes lá fora começam a tremelicar.
+Está um silêncio que quase se consegue sentir.
+Silencioso demais...
+Knock Knock Knock.
+Ouves a porta bater mas não há sombra debaixo da porta, espreitas pelas persianas mas não vês ninguém.
+Abres a porta?`,
+      [
+        { label: "Sim", action: escolhaSim },
+        { label: "Não", action: escolhaNao }
+      ]
+    );
+    // ———————————— Ramo NÃO
+    function escolhaNao() {
+      mostrarTexto(
+`As luzes voltam ao normal.
+Voltas para a secretária e continuas a rever campanhas normais…
+(Game Over)`
+      );
+    }
+    // ———————————— Ramo SIM
+    function escolhaSim() {
+      mostrarTexto(
+`Dizes: Quem está aí?
+Olhas à volta do escritório mas não vês nada.
+De repente vês um vulto sair do teu escritório e ouves o barulho de qualquer coisa a partir.
+O que fazes?`,
+        [
+          { label: "Correr para investigar", action: correrInvestigacao },
+          { label: "Fechar a porta", action: fecharPorta }
+        ]
+      );
+    }
+    function fecharPorta() {
+      mostrarTexto(
+`Fechas a porta.
+As luzes voltam ao normal.
+Voltas para a secretária e continuas a rever campanhas normais…
+(Game Over)`
+      );
+    }
+    // ———————————— Investigação
+    function correrInvestigacao() {
+      mostrarTexto(
+`Chegas à porta do escritório e vês que a tua chávena preferida está no chão, partida.
+Encontras um envelope que diz "TOP SECRET".
+O que fazes?`,
+        [
+          { label: "Abrir envelope", action: abrirEnvelope },
+          { label: "Ligar à polícia por causa da chávena", action: ligarPolicia }
+        ]
+      );
+    }
+    function abrirEnvelope() {
+    mostrarTexto(
+`Abriste o envelope e encontas um bilhete:
+"Se queres descobrir a verdade sobre o que aconteceu no Alma Shopping em 1999,
+segue as pistas que deixei no teu computador."
+O computador está ligado mas bloqueado. Sabes a password?
+`,
+      [
+        { label: "Tentar password", action: tentarPassword },
+        { label: "Desistir", action: desistir }
+      ]
+    );
+    function tentarPassword() {
+      mostrarTexto(
+`Introduzes a password que sempre usas: "Alma2023"
+O ecrã pisca e aparece uma mensagem:
+"Errado. Mas deixei-te uma pista. Procura no arquivo físico."
+Vês uma gaveta entreaberta na secretária do teu chefe.`,
+        [
+          { label: "Revistar a gaveta", action: revistarGaveta },
+          { label: "Ir embora", action: irEmbora }
+        ]
+      );
+    }
+    function desistir() {
+      mostrarTexto(
+`Decidiste não investigar mais.
+Voltas para a secretária e continuas a rever campanhas normais…
+(Game Over)`
+      );
+    }
+    function revistarGaveta() {
+      mostrarTexto(
+`Encontras um dossier antigo marcado "Projeto Vermelho - 1999"
+Ao abrires, vês fotos de construção do shopping com áreas que nunca foram abertas ao público.
+Há um mapa com uma passagem secreta marcada perto da loja de música.
+Queres investigar mais?`,
+        [
+          { label: "Sim, ir ao shopping", action: irShopping },
+          { label: "Não, esquecer isto", action: esquecer }
+        ]
+      );
+    }
+    function irEmbora() {
+      mostrarTexto(
+`Decidiste que já chega de mistérios por hoje.
+Voltas para casa, mas a mensagem continua na tua cabeça...
+(Game Over)`
+      );
+    }
+    function irShopping() {
+      mostrarTexto(
+`Vais ao shopping depois do horário de funcionamento.
+A segurança reconhece-te e deixa-te entrar.
+Diriges-te para a loja de música abandonada...
+(Continua 🚧)`
+      );
+    }
+    function esquecer() {
+      mostrarTexto(
+`Decidiste que é melhor não mexer no passado.
+Mas nos dias seguintes, notas que estás a ser seguida...
+(Game Over)`
+      );
+    }
+}
+    function ligarPolicia() {
+      mostrarTexto(
+`Chamaste a polícia.
+Eles não ligaram muito à chávena partida e disseram-te para comprares outra.
+Mas enquanto falavas, reparaste que o envelope desapareceu...
+(Game Over)`
+      );
+    }
+</script>
 </body>
 </html>