job-simulator-portfolio/index.html at master · SarAvi21805/job-simulator-portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Saraí | Emotional Console Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Barra de estado -->
    <div class="status-bar">
        <div class="status-left">
            <span id="system-status">● Sistema: Activo</span>
            <span class="separator">|</span>
            <span id="emotional-state">Estado: Estable</span>
        </div>
        <div class="status-right">
            <span id="current-time">00:00 AM</span>
            <button class="power-btn" onclick="sleepMode()" title="Apagar Mente">⏻</button>
        </div>
    </div>

    <div class="console-container">
        <!-- Pantalla de visualización -->
        <header class="main-screen">
            <div id="avatar-container">
                <img src="/src/images/Sarai.png" alt="Avatar de Saraí" id="avatar" height="350px">
                <div class="avatar-glow"></div>
            </div>
            <h1 id="emotion-title">Bienvenidos al Cuartel General</h1>
            <p id="emotion-description">Soy Saraí, desarrolladora de software. Selecciona un pensamiento para empezar.</p>
        </header>

        <!-- Botón de Inicio -->
        <div id="overlay" onclick="startConsole()">
            <div class="start-msg">
                <div class="glow-orb"></div>
                <h1>ENCENDER CONSOLA MENTAL</h1>
                <p>Haz clic para iniciar sistema</p>
            </div>
        </div>

        <!-- Contenedor de Proyectos (Memories) -->
        <main id="content-display" class="grid-projects">
            <!-- Aquí se inyectará -->
        </main>

        <!-- Partículas de fondo -->
        <div id="particles-js"></div>

        <!-- Panel de Control Extendido -->
        <nav class="control-panel">
            <div class="sphere-group">
                <small>Recuerdos (Proyectos)</small>
                <div class="buttons">
                    <button class="sphere joy" onclick="filterEmotion('joy')"></button>
                    <button class="sphere sadness" onclick="filterEmotion('sadness')"></button>
                    <button class="sphere fear" onclick="filterEmotion('fear')"></button>
                    <button class="sphere disgust" onclick="filterEmotion('disgust')"></button>
                </div>
            </div>

            <div class="nav-links">
                <button class="nav-btn" onclick="showAbout()">Isla de Personalidad</button>
                <button class="nav-btn" onclick="showSkills()">Manual de Sistemas</button>
                <button class="nav-btn" onclick="showContact()">Conexión</button>
            </div>
        </nav>
    </div>
    <script src="script.js"></script>

    <div class="music-player">
        <button id="music-toggle" onclick="toggleMusic()">🎵 Play BGM</button>
        <audio id="bgm" loop>
            <source src="src/audio/Disney Pixar's Inside Out - 01 - Bundle Of Joy.mp3" type="audio/mpeg">
        </audio>
    </div>
</body>
</html>