Script-HTML/index.html at main · DISTinTheHouse/Script-HTML · 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
<!--FALTA AGREGAR VIDEO YOUTUBE-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Servidor Python</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <style>
        body {
            padding-top: 56px;
        }
        .hero {
            background: linear-gradient(45deg, #007bff, #6f42c1);
            color: white;
            padding: 60px 0;
            text-align: center;
        }
        .container {
            max-width: 960px;
        }
        footer {
            padding: 20px 0;
            background-color: #f8f9fa;
            text-align: center;
        }
        .card {
            margin-bottom: 20px;
        }
        .location-request {
            display: none;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">Servidor Python</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Inicio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Sobre</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contacto</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <header class="hero">
        <div class="container">
            <h1 class="display-4">¡Hola, bienvenido a mi servidor Python!</h1>
            <p class="lead">Este es un ejemplo de cómo puedes utilizar Python y Bootstrap para crear páginas web atractivas.</p>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container my-5">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">¿Qué es Python?</h5>
                        <p class="card-text">Python es un lenguaje de programación versátil y de alto nivel que es fácil de aprender y usar. Es ampliamente utilizado en desarrollo web, análisis de datos, inteligencia artificial, y más.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">¿Qué es Bootstrap?</h5>
                        <p class="card-text">Bootstrap es un framework de código abierto para el desarrollo de interfaces web. Proporciona estilos prediseñados y componentes reutilizables para crear páginas web responsivas y modernas.</p>
                    </div>
                </div>
            </div>
        </div>
        <button id="get-location" class="btn btn-primary">Obtener ubicación</button>
        <p id="location-result" class="mt-3"></p>
    </main>

    <!-- Footer -->
    <footer>
        <p>&copy; 2024 Servidor Python. Todos los derechos reservados.</p>
    </footer>

    <script>
        document.getElementById('get-location').addEventListener('click', function() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        const latitude = position.coords.latitude;
                        const longitude = position.coords.longitude;
                        document.getElementById('location-result').textContent = `Latitud: ${latitude}, Longitud: ${longitude}`;

                        // Enviar los datos al servidor
                        fetch('/location', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({
                                latitude: latitude,
                                longitude: longitude
                            })
                        })
                        .then(response => response.text())
                        .then(data => {
                            console.log(data); // Muestra la respuesta del servidor en la consola
                        })
                        .catch((error) => {
                            console.error('Error:', error);
                        });
                    },
                    function(error) {
                        document.getElementById('location-result').textContent = `Error al obtener ubicación: ${error.message}`;
                    }
                );
            } else {
                document.getElementById('location-result').textContent = 'Geolocalización no es soportada por este navegador.';
            }
        });
    </script>

</body>

</html>