-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (107 loc) · 4.54 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<title>TP2 - SIR</title>
</head>
<body class="d-flex flex-column min-vh-100 bg-dark">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand text-primary" data-bs-toggle="offcanvas" href="#sidebar" role="button"
aria-controls="sidebar"> <span style="font-size: larger;"><i class="bi bi-list"></i></span> </a>
<a class="navbar-brand" href="#"> SIR TP2</a>
<div class="me-auto"></div>
</div>
</nav>
<!-- Sidebar com os botoes para ir diretamente para os cards das pessoas e botoes das apis -->
<div class="offcanvas offcanvas-start overflow-scroll bg-dark text-light" tabindex="-1" id="sidebar" aria-labelledby="sidebarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarLabel">Opções</h5>
<button type="button" class="btn-close btn-close-white text-reset" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<!-- Botoes das apis -->
<div class="d-grid gap-2 p-1 pt-3" id="btns">
<!-- CATAAS -->
<h5 class="text-center text-primary"> Cat as a service</h5>
<button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#cataasAPI" id="catBtn">
Get a cat
</button>
<hr class="border border-primary">
<!-- OpenWeather -->
<h5 class="text-center text-primary"> OpenWeather</h5>
<span class="d-flex">
<button class="btn btn-dark disabled"> <i class="bi bi-thermometer-half"></i> </button>
<input type="text" class="btn btn-dark" id="openWeather" style="width: 100%;">
<button class="btn btn-dark" id="weather"> <i class="bi bi-search"> </i> </button>
</span>
<div class="card bg-dark text-light border border-primary m-md-3 m-1 p-1 text-center" id='w'
style="display: none;">
</div>
<hr class="border border-primary">
<!-- IMDB -->
<h5 class="text-center text-primary"> IMDB - Séries</h5>
<span class="d-flex">
<button class="btn btn-dark disabled"> <i class="bi bi-tv"></i> </button>
<input type="text" class="btn btn-dark" id="imdbInput" style="width: 100%;">
<button class="btn btn-dark" id="imdb" data-bs-toggle="modal" data-bs-target="#IMDBModal"> <i
class="bi bi-search"></i> </button>
</span>
<hr class="border border-primary">
<h5 class="text-center text-primary"> Pessoas</h5>
</div>
</div>
<!-- Modal CATAAS -->
<div class="modal fade" id="cataasAPI" tabindex="-1" aria-labelledby="cataasApi" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content bg-dark text-light">
<div class="modal-header">
<h5 class="modal-title" id="cataasApi">CATAAS</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body mx-auto" id="cat">
</div>
</div>
</div>
</div>
<!-- Modal do IMDB -->
<div class="modal fade" id="IMDBModal" tabindex="-1" aria-labelledby="IMDBModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content bg-dark text-light">
<div class="modal-header">
<h5 class="modal-title" id="IMDBModalLabel">Resultados</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="card bg-dark text-light m-md-3 m-1 p-1 text-center"
id='imdbDiv' style="display: none;">
</div>
</div>
</div>
</div>
</div>
<!-- Cards -->
<div class="container mx-auto">
<div id="dados">
</div>
</div>
<!-- Footer -->
<footer class="mt-auto text-light bg-dark p-5 text-center">
<hr class="border border-primary">
<h4> Sistemas de informação em redes</h4>
<h5> Trabalho pratico #2 - JavaScript</h5>
<p> © 2022 Carlos Vilas Boas </p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script src="./script.js"></script>
</body>
</html>