DashStore/error.php at main · pedroh-dev255/DashStore · 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<?php
    date_default_timezone_set('America/Araguaina');
    $env = parse_ini_file('.env');


?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../style/favicon.ico" type="image/x-icon">
    <title>Erro de Conexão</title>
    <script src="../js/clarity.js"></script>
    <style>
        /* Fundo com transição suave de cores */
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(270deg, #8a2be2, #ff0000, #0000ff);
            background-size: 600% 600%;
            animation: gradientAnimation 10s ease infinite;
            font-family: Arial, sans-serif;
        }

        /* Animação do gradiente de fundo */
        @keyframes gradientAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Caixa de erro no centro da tela */
        .error-box {
            width: 90%;
            max-width: 500px;
            background-color: #ffffff;
            border: 2px solid #00ffff; /* Ciano */
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        }

        /* Título */
        .error-box h1 {
            color: #333;
            font-size: 24px;
            margin-top: 0;
        }

        /* Informações do erro */
        .error-details {
            margin: 15px 0;
            color: #555;
            font-size: 16px;
        }

        /* Mensagem adicional */
        .additional-info {
            color: #333;
            font-size: 14px;
            margin-top: 10px;
        }
        /* Estilo do botão */
        .reconnect-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            background-color: #cccccc;
            color: #333;
            font-size: 16px;
            font-weight: bold;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 20px;
            position: relative;
        }

        .reconnect-btn:hover {
            background-color: #bbbbbb;
        }

        /* Ícone de reconexão */
        .reconnect-icon {
            width: 16px;
            height: 16px;
            border: 2px solid #333;
            border-top: 2px solid transparent;
            border-radius: 50%;
            margin-right: 8px;
            animation: spin 1s linear infinite;
        }

        /* Animação de rotação */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Estilo do timer dentro do botão */
        .timer {
            font-weight: bold;
            color: #333;
            margin-left: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <?php
        // Informações de erro para exibição
        $dbHost = $env['DB_HOST']; // ou outro host
        $errorMessage = 'Erro ao conectar ao banco de dados.';
    ?>

    <div class="error-box">
        <h1>Erro de Conexão<br>com Banco de Dados</h1>
        <div class="error-details">
            <strong>Host:</strong> <?php echo htmlspecialchars($dbHost); ?><br>
            <strong>Erro:</strong> <?php echo htmlspecialchars($errorMessage); ?>
        </div>
        <div class="additional-info">
            Entre em contato com o administrador se o problema persistir.
        </div>

        <!-- Botão de reconexão com timer dentro -->
        <button class="reconnect-btn" onclick="redirectToLogin()">
            <div class="reconnect-icon"></div>
            Tentando Reconnectar em <span class="timer" id="countdown">10.0</span>
        </button>
    </div>

    <script>
        // Função de redirecionamento manual
        function redirectToLogin() {
            window.location.href = 'login.php';
        }

        // Temporizador de 10 segundos contando décimos de segundo
        let countdown = 10.0;
        const countdownElement = document.getElementById('countdown');

        const timer = setInterval(() => {
            countdown -= 0.1;
            countdownElement.textContent = countdown.toFixed(1); // Mostra com uma casa decimal

            // Redireciona automaticamente quando o timer chega a 0
            if (countdown <= 0) {
                clearInterval(timer);
                redirectToLogin();
            }
        }, 100); // Atualiza a cada décimo de segundo (100ms)
    </script>
</body>
</html>