currentWeatherAPI/index.html at master · MauricioBarrueta/currentWeatherAPI · 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
<!DOCTYPE html>
<html lang="es-MX">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="css/styles.css">

    <title>Pronóstico del clima</title>
    <link rel="icon" type="image/x-icon" href="img/favicon.ico">
</head>
<body id="body">
    <div class="container">
        <span id="info">El acceso a su ubicación se utiliza únicamente para obtener el pronóstico del tiempo de su región</span>

        <div class="city-name-input input-group">
            <span class="input-group-text"><i class="fa-solid fa-city"></i></span>
            <input class="form-control" type="text" placeholder="Ciudad" oninput="this.value = this.value.charAt(0).toUpperCase() + this.value.slice(1)" autofocus required>

            <button class="btn btn-dark" title="Buscar">&#xf002;&nbsp; Buscar</button>
        </div>

        <div class="lat-lot-input input-group">
            <span class="input-group-text"><i class="fa-solid fa-arrows-up-down"></i></span>
            <input id="lat" type="text" class="form-control"  placeholder="Latitud (N/S)" required>

            <span class="input-group-text"><i class="fa-solid fa-arrows-left-right"></i></span>
            <input id="lon" type="text" class="form-control" placeholder="Longitud (E/W)" required>

            <button class="lat-lot-btn btn btn-dark" title="Buscar">&#xf002;&nbsp; Buscar</button>
        </div>

        <div class="weather-city-container">
            <span class="alertSpan"><i class="fa-solid fa-circle-info"></i>Los datos se mostrarán aquí</span>
            <div class="weather-card">
                <div class="weather-details">
                    <div class="humidity"> </div>
                    <div class="wind"> </div>
                </div>
                <div class="sunrise-sunset-container">
                    <div class="sunrise-div"> </div>
                    <div class="sunset-div"> </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://momentjs.com/downloads/moment.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>