Quantum-Comp/funcionamento.html at main · ThomyThom/Quantum-Comp · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!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">
    <title>Funcionamento - QuantumComp</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,700|Sen:400,700,800&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
</head>
<body class="fade-out">
    <header class="header_section">
        <div class="container">
            <nav class="nav-futuristic">
                <ul>
                    <li><a href="index.html">Início</a></li>
                    <li><a href="aiquantica.html">IA Quântica</a></li>
                    <li><a href="funcionamento.html" class="active">Funcionamento</a></li>
                    <li><a href="aplicacoes.html">Aplicações</a></li>
                    <li><a href="futuro.html">Futuro</a></li>
                    <li><a href="maquete.html">Maquete</a></li>
                </ul>
            </nav>
            <button class="menu_mobile_button"><i data-lucide="menu"></i></button>
        </div>
    </header>

    <div class="mobile_menu">
        <ul>
            <li><a href="index.html">Início</a></li>
            <li><a href="aiquantica.html">IA Quântica</a></li>
            <li><a href="funcionamento.html" class="active">Funcionamento</a></li>
            <li><a href="aplicacoes.html">Aplicações</a></li>
            <li><a href="futuro.html">Futuro</a></li>
            <li><a href="maquete.html">Maquete</a></li>
        </ul>
    </div>

    <main class="main_section">
        <section class="hosting_section layout_padding">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h1 class="hosting_taital">Como Funciona a Magia Quântica?</h1>
                        <p class="hosting_text">A computação quântica opera com base em princípios da mecânica quântica. Em vez de bits clássicos (0 ou 1), ela usa qubits, que podem representar 0 (zero), 1 (um) ou ambos os valores ao mesmo tempo (estado de superposição). Algoritmos quânticos exploram essas propriedades para resolver problemas complexos de forma muito mais eficiente que computadores clássicos.</p>
                    </div>
                    <div class="col-md-6">
                        <div class="hosting_img">
                            <img src="images/computação.png" alt="Funcionamento Quântico">
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <button id="fab-bloch-sphere" class="fab-bloch-sphere">
        Explore a Esfera 3D
    </button>
    <footer class="copyright_section">
        <div class="container">
            <p class="copyright_text">2025 © Todos os Direitos Reservados | Design criado por Renan Moia e Thomaz André de Camargo</p>
        </div>
    </footer>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script>
        lucide.createIcons();
        $('.menu_mobile_button').on('click', function() {
            $('.mobile_menu').toggleClass('active');
        });

        // Efeito de BG com mouse aprimorado
        document.addEventListener('mousemove', function(e) {
            const x = (e.clientX / window.innerWidth) * 100;
            const y = (e.clientY / window.innerHeight) * 100;
            document.body.style.setProperty('--mouse-x', x + 'vw');
            document.body.style.setProperty('--mouse-y', y + 'vh');
        });

        // Efeito de transição de página (fade in/out)
        document.body.classList.add('fade-out');
        window.onload = function() {
            document.body.classList.remove('fade-out');
            document.body.classList.add('fade-in');
        };
        document.querySelectorAll('a[href]').forEach(function(link) {
            link.addEventListener('click', function(e) {
                const url = link.getAttribute('href');
                if (url && !url.startsWith('http') && !url.startsWith('#') && !link.hasAttribute('target')) {
                    e.preventDefault();
                    document.body.classList.remove('fade-in');
                    document.body.classList.add('fade-out');
                    setTimeout(function() {
                        window.location.href = url;
                    }, 500);
                }
            });
        });

        // Redirecionamento do Botão Flutuante
        document.getElementById('fab-bloch-sphere').addEventListener('click', function() {
            window.open('https://quantum-bloch.vercel.app/', '_blank');
        });
    </script>
</body>
</html>