-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
129 lines (114 loc) · 5.49 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
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guia de Pontos de Ônibus - PUC Campinas</title>
<!-- Importação da fonte Montserrat e Tailwind CSS -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- Customização do popup e outros estilos -->
<style>
body {
font-family: 'Montserrat', sans-serif;
padding: 0 1rem; /* Adiciona espaçamento para mobile */
}
.leaflet-popup-content-wrapper {
background-color: #f8f9fa;
border-radius: 8px;
color: #333;
}
.leaflet-popup-tip {
background-color: #f8f9fa;
}
@media (max-width: 640px) {
/* Ajustes para mobile */
#map { height: 50vh; } /* Reduz altura do mapa */
.max-w-5xl { max-width: 100%; } /* Força largura completa no mobile */
.text-3xl { font-size: 1.5rem; } /* Reduz tamanho dos títulos */
.text-2xl { font-size: 1.25rem; } /* Ajusta sub-títulos */
.text-lg { font-size: 1rem; } /* Texto para botões */
.flex { flex-direction: column; align-items: center; }
}
</style>
</head>
<body class="flex flex-col items-center bg-gray-100 min-h-screen">
<h1 class="text-3xl font-semibold text-blue-800 mt-6 mb-4 text-center">Guia de Pontos de Ônibus - PUC Campinas</h1>
<!-- Campo de busca adaptado -->
<input type="text" id="search" placeholder="Buscar ponto ou prédio" class="w-full max-w-lg p-2 mb-4 border border-gray-300 rounded-lg shadow-md" />
<!-- Mapa adaptado -->
<div id="map" class="w-full max-w-5xl h-[50vh] mb-6 shadow-lg rounded-lg"></div>
<!-- Seção de Drawers para informações dos pontos -->
<div class="w-full max-w-5xl p-4 bg-white rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-gray-800 mb-4 text-center">Pontos de Ônibus Próximos</h2>
<!-- Drawer Template -->
<div x-data="{ open: false }" class="border-t border-gray-200">
<button @click="open = !open" class="w-full text-left p-4 flex justify-between items-center focus:outline-none">
<span class="text-lg font-semibold text-gray-700">Biblioteca</span>
<span :class="{ 'rotate-180': open }" class="transition-transform transform">▼</span>
</button>
<div x-show="open" class="p-4 text-gray-600">
Localização: Próxima à entrada principal da biblioteca, ponto de fácil acesso para estudantes.
</div>
</div>
<!-- Repetir para cada ponto -->
<!--alo-->
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.start();
});
// Inicializar mapa Leaflet
const map = L.map('map').setView([-22.833664, -47.048420], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 20 }).addTo(map);
const busStopIcon = L.icon({
iconUrl: 'bus-stop.png',
iconSize: [40, 40],
iconAnchor: [20, 40],
popupAnchor: [0, -40]
});
const stops = [
{ lat: -22.83413270737902, lng: -47.05124294784846, name: "Biblioteca", details: "Próxima à entrada principal." },
{ lat: -22.832786940312445, lng: -47.049827373275015, name: "Prédio H00", details: "Em frente ao prédio H00." },
{ lat: -22.834525, lng: -47.044767, name: "Ginásio", details: "Próximo ao ginásio principal." },
];
stops.forEach(stop => {
L.marker([stop.lat, stop.lng], { icon: busStopIcon })
.addTo(map)
.bindPopup(`<b>${stop.name}</b><br>${stop.details}`);
});
// Busca de pontos
document.getElementById("search").addEventListener("input", function(e) {
const query = e.target.value.toLowerCase();
stops.forEach(stop => {
if (stop.name.toLowerCase().includes(query)) {
map.setView([stop.lat, stop.lng], 17);
}
});
});
// Rota do ônibus interno
let busMarker;
async function fetchBusLocation() {
const response = await fetch('https://script.google.com/macros/s/AKfycbzya2qE3JkSS-LFYE4zOqAvjKwzaudFnRSH2QeFNNviG7NSFx-ZqG1EvOGH7ChMndO1UA/exec');
const data = await response.json();
const [latitude, longitude] = data[0].map(Number);
if (!isNaN(latitude) && !isNaN(longitude)) {
if (busMarker) {
busMarker.setLatLng([latitude, longitude]);
} else {
busMarker = L.marker([latitude, longitude], { icon: L.icon({
iconUrl: 'bus.png',
iconSize: [36, 36],
iconAnchor: [18, 30],
popupAnchor: [0, -30]
}) }).addTo(map).bindPopup("Ônibus Interno");
}
}
}
setInterval(fetchBusLocation, 2000);
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</body>
</html>