-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
141 lines (134 loc) · 6.99 KB
/
index.php
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Esta Pagina revela el clima</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="A new design system for developing with less effort.">
<meta name="author" content="BootstrapBay">
<link href="assets/img/favicon.ico" rel="icon" type="image/png">
<!-- Bootstrap -->
<link rel="stylesheet" href="./assets/vendor/bootstrap/bootstrap.min.css">
<!-- Tema -->
<link rel="stylesheet" href="./assets/css/lazy.css">
<link rel="stylesheet" href="./assets/css/demo.css">
<!-- Iconos -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css"
integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous">
</head>
<body class="landing">
<!-- Inicio de la Barra de Navegación -->
<nav class="navbar navbar-expand-md navbar-light bg-white mb-4">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="./"><img src="assets/img/logo.svg"
alt="Example Navbar 1" class="mr-2" height="30"> ClimaAPI</a>
<!-- Menu Hamburguesa -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-3"
aria-controls="navbarNavDropdown-3" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Fin del Menu Haburguesa -->
<div class="collapse navbar-collapse mr-auto text-center" id="navbarNavDropdown-3">
<ul class="navbar-nav ml-auto ">
<li class="nav-item mx-2">
<a class="btn btn-outline-primary" href="https://github.com/velosergio/ClimaAPI">
<i class="fab fa-github"></i> GitHub
</a>
</li>
<li class="nav-item m-2 m-md-0">
<a class="btn btn-primary" href="https://github.com/velosergio/ClimaAPI/archive/master.zip">
<i class="fa fa-download"></i> Descargar
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Fin de Barra de Navegación -->
<!-- Parte Izquierda-->
<div class="header bg-white">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<h1 class="display-4">Conoce el estado del tiempo de:</h1>
<p class="lead my-4">Elige una ciudad</p>
<div class="btn-group" role="group" aria-label="Listas de ciudades">
<button type="button" class="btn btn-primary">Sincelejo</button>
<div class="btn-group" role="group">
<button id="ciudades" type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="ciudades">
<a class="dropdown-item" href="#">Proximanete mas ciudades</a>
</div>
</div>
</div>
</div>
<!-- Parte Derecha-->
<div class="col-12 col-md-6">
<!-- Incluir a la api-->
<?php include('api.php');?>
<div class="devices pl-md-4 pt-5 pt-md-0">
<!-- Ciudad -->
<h1 class="display-1"><?php echo $data->name; ?></h1>
<!-- Temperatura -->
<h1 class="display-8">Temperatura: <?php echo $data->main->temp; ?>°C</h1>
<!-- Descripción -->
<h1 class="display-8"><?php echo ucwords($data->weather[0]->description); ?></h1>
<!-- Humedad - Vientos -->
<h3 class="display-12">Humedad: <?php echo $data->main->humidity; ?> % - Vientos: <?php echo $data->wind->speed; ?> km/h</h1>
<!-- Presion Atmosferica -->
<h3 class="display-12">Presion Atmosferica: <?php echo $data->main->pressure; ?> hPa </h3>
</div>
</div>
</div>
</div>
</div>
<div class="features bg-white">
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
<div class="feature">
<div class="big-icon text-primary"><i class="fas fa-tools"></i></div>
<h5 class="text-primary">Hecho con Bootstrap</h5>
<p class="lead">Bootstrap 4, FontAwesome 5 y Open Weather Map.</p>
</div>
</div>
<div class="col-12 col-md-4">
<div class="feature">
<div class="big-icon text-secondary"><i class="fas fa-puzzle-piece"></i></div>
<h5 class="text-secondary">Open Weather Map</h5>
<p class="lead">Usamos la API de <a href="https://openweathermap.org">https://openweathermap.org</a>.</p>
</div>
</div>
<div class="col-12 col-md-4">
<div class="feature">
<div class="big-icon text-success"><i class="fas fa-palette"></i></div>
<h5 class="text-success">Lazy Kit Tema</h5>
<p class="lead">Usamos el tema Lazy Kit para darle un estilo fresco a la pagina, <a href="https://github.com/bootstrapbay/lazy-kit">Ver GitHub</a>.</p>
</div>
</div>
</div>
</div>
</div>
<div class="cta bg-primary text-center text-white">
<h1 class="text-white">Nuevas Actualizaciones pronto...</h1>
<p class="lead">Mas ciudades, correciones de errores, toda la documentación en GitHub</p>
<a href="#a" class="btn btn-white btn-lg mt-4"><i class="fab fa-github"></i> Ver GitHub</a>
</div>
<footer class="footer-1 bg-light text-dark">
<div class="copyright text-center">
<hr />
<p class="small">© 2019, hecho por German Perez, Carolina Peralta, Moises Troncoso y Hugo Valeta</p>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="./assets/vendor/jquery/jquery.min.js"></script>
<script src="./assets/vendor/popper/popper.min.js"></script>
<script src="./assets/vendor/bootstrap/bootstrap.min.js"></script>
<!-- optional plugins -->
<script src="./assets/vendor/nouislider/js/nouislider.min.js"></script>
<!-- lazy javascript -->
<script src="./assets/js/lazy.js"></script>
</body>
</html>