Skip to content
Snippets Groups Projects
Commit 050fdf1b authored by CXM's avatar CXM
Browse files

finish the around bristol page and connect it with the interface.php

parent 9568a10d
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Data/UWE_Bus_Service.jpg 0 → 100644
+ 0
− 0
View file @ 050fdf1b
Data/UWE_Bus_Service.jpg

232 KiB

Presentation/city.php 0 → 100644
+ 110
− 0
View file @ 050fdf1b
<?php
require_once '../Logic/config.php';
require_once '../Logic/session_start.php';
$stmt = DB->prepare("SELECT * FROM city_building");
$stmt->execute();
$buildings = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bristol Map Overlay</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="../css/city.css">
</head>
<body>
<div id="map" style="height: 500px; width: 100%;"></div>
<div id="place-search-bar">
<input id="place-search" type="text" placeholder="Search for places..."/>
</div>
<nav id="place-nav">
<?php foreach ($buildings as $building): ?>
<button class="place-btn" data-name="<?php echo htmlspecialchars($building['name']); ?>"
data-lat="<?php echo htmlspecialchars($building['data-lat']); ?>"
data-lng="<?php echo htmlspecialchars($building['data-lng']); ?>"
data-opentime="<?php echo htmlspecialchars($building['openTime']); ?>"
data-description="<?php echo htmlspecialchars($building['description']); ?>"
data-address="<?php echo htmlspecialchars($building['address']); ?>">
<?php echo htmlspecialchars($building['name']); ?>
</button>
<?php endforeach; ?>
</nav>
<div id="place-info"></div>
<div id="bus-route-info" style="padding: 20px;">
<h2>UWE Bus information:</h2>
<p id="bus-route-description">There are picture for First bus service through UWE:</p>
<div id="bus-route-image-container" style="width: 100%; text-align: center;">
<!-- 示例占位图像；请将 src 属性替换为您的图像路径 -->
<img id="bus-route-image" src="../Data/UWE_Bus_Service.jpg" alt="Bus Route Map"
style="max-width: 100%; height: auto;">
</div>
<h2>There are detail path for every bus throughing Frenchay campus:</h2>
<table class="bus-schedule">
<thead>
<tr>
<th>Service</th>
<th>Bus Path</th>
</tr>
</thead>
<tbody>
<tr>
<td>19</td>
<td>Bath - Bitton - Cherry Gardens - Cadbury Heath - Kingswood - Downend - Hambrook - Stoke Park - <span
class="highlighted">Frenchay</span> - Bristol Parkway Station
</td>
</tr>
<tr>
<td>48a</td>
<td>City Centre - Old Market - Easton - Eastville - Fishponds - Glenside - Stoke Park - <span
class="highlighted">Frenchay</span></td>
</tr>
<tr>
<td>70 (24/7 service between City Centre & UWE Frenchay)</td>
<td>Hengrove - Melvin Square - Bedminster - City Centre - Montpelier - Cromwell Road - Chesterfield Road -
Ashley Down Road - Muller Road - Filton Avenue - <span class="highlighted">Frenchay</span></td>
</tr>
<tr>
<td>72</td>
<td>Temple Meads Station - City Centre - Clifton Triangle - University of Bristol - Cotham - Redland -
Gloucester Road - Filton Avenue - Lockleaze - Cheswick Village - <span
class="highlighted">Frenchay</span></td>
</tr>
<tr>
<td>74</td>
<td>Temple Meads Station - City Centre - Montpelier - Gloucester Road - Horfield - Filton - <span
class="highlighted">Frenchay</span></td>
</tr>
<tr>
<td>m1 metrobus (U3 overnight between UWE Frenchay & City Centre)</td>
<td>Cribbs Causeway - Aztec West - Bradley Stoke - <span class="highlighted">Frenchay</span> - Stoke Park -
Begbrook - City Centre - Bedminster - Inns Court - Hengrove Park
</td>
</tr>
<tr>
<td>m3 metrobus</td>
<td>City Centre - Begbrook - Stoke Park - <span class="highlighted">Frenchay</span> - Hambrook - Willy
Wicket - Emerald Park - Science Park - Lyde Green P&R - Emersons Green
</td>
</tr>
<tr>
<td>m4 metrobus</td>
<td>City Centre - Begbrook - Stoke Park - <span class="highlighted">Frenchay</span> - Bristol Parkway
Station - Cribbs Causeway
</td>
</tr>
</tbody>
</table>
</div>
<a href="interface.php" id="return-home-btn"><i class="fas fa-arrow-left"></i></a>
<script src="../Logic/city.js"></script>
</body>
</html>
Presentation/interface.php
+ 1
− 1
View file @ 050fdf1b
......@@ -32,7 +32,7 @@
<div id="sidebar">
<a href="map.php" class="sidebar-item" target="contentFrame">Around Frenchay Campus</a>
<a href="your-link-2.html" class="sidebar-item" target="contentFrame">Around Bristol</a>
<a href="city.php" class="sidebar-item" target="contentFrame">Around Bristol</a>
<a href="chatPage.php" class="sidebar-item" target="contentFrame">Campus Voices</a>
<a href="settings.php" class="sidebar-item" target="contentFrame"><i class="fas fa-home"></i> User Profile</a>
</div>
......
css/city.css 0 → 100644
+ 173
− 0
View file @ 050fdf1b
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
padding-top: 50px;
background-color: #1E1E2E; /* 调整背景颜色与interface.html一致 */
color: #EAEAEA; /* 调整文本颜色与interface.html一致 */
}
#place-search-bar, #place-nav {
background-color: #232533; /* 调整搜索栏和导航栏背景色 */
padding: 10px 0;
text-align: center;
}
#map {
/*height: 500px;*/
/*width: 100%;*/
height: 500px;
width: calc(100% - 40px); /* 减去边距的宽度 */
margin-bottom: 20px;
border: 2px solid #292A36; /* 边框颜色和宽度 */
border-radius: 15px; /* 圆角大小 */
}
#place-search-bar {
margin-bottom: 20px;
text-align: center;
background-color: #232533; /* 背景色 */
padding: 10px 20px; /* 内边距 */
margin: 0 20px 20px 20px; /* 外边距 */
border-radius: 15px; /* 圆角大小 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}
#place-search {
width: 300px;
height: 40px;
padding: 5px 10px;
margin: 10px;
font-size: 16px;
border: 1px solid #292A36; /* 输入框边框 */
border-radius: 20px; /* 更圆的边框 */
outline: none; /* 去掉焦点边框 */
background-color: #292A36; /* 输入框背景色 */
color: #EAEAEA; /* 输入框文本色 */
}
#place-nav {
text-align: center;
background-color: #232533; /* 背景色 */
padding: 10px 20px; /* 内边距 */
margin: 0 20px 20px 20px; /* 外边距 */
border-radius: 15px; /* 圆角大小 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
display: flex;
flex-wrap: wrap;
justify-content: center; /* 按钮居中显示 */
gap: 10px; /* 按钮之间的间隙 */
}
#place-nav button {
background-color: #292A36; /* 按钮背景色 */
color: #EAEAEA; /* 按钮文本色 */
border: none;
border-radius: 15px;
padding: 10px 15px;
font-size: 14px;
transition: background-color 0.3s, transform 0.2s;
}
#place-nav button:hover {
background-color: #3A3B45; /* 鼠标悬浮背景色 */
transform: translateY(-2px); /* 点击效果 */
}
#place-info {
background-color: #232533; /* 信息区背景色 */
border-radius: 15px;
padding: 20px;
margin: 0 20px; /* 外边距 */
max-width: calc(100% - 40px); /* 控制最大宽度 */
color: #EAEAEA; /* 信息区文本颜色 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}
#bus-route-info {
background-color: #232533; /* 统一背景色 */
border-radius: 15px; /* 统一边框圆角 */
padding: 20px;
margin: 20px 20px; /* 统一外边距 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 统一阴影效果 */
color: #EAEAEA; /* 统一文本颜色 */
max-width: calc(100% - 40px); /* 控制最大宽度 */
}
.bus-schedule {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background-color: #232533; /* 表格背景色 */
color: #EAEAEA; /* 表格文本颜色 */
border-radius: 15px; /* 表格边框圆角 */
overflow: hidden; /* 确保边框圆角可见 */
}
.bus-schedule th,
.bus-schedule td {
padding: 10px;
border-bottom: 1px solid #EAEAEA; /* 表格行分割线 */
}
.bus-schedule th {
background-color: #292A36; /* 表头背景色 */
font-weight: bold;
}
.highlighted {
font-weight: bold;
color: #D2232A; /* 突出显示的颜色 */
}
#bus-route-info h2 {
color: #EAEAEA; /* 标题文本颜色 */
font-size: 24px; /* 标题字体大小 */
margin-top: 0;
}
#bus-route-description {
color: #EAEAEA; /* 描述文本颜色 */
font-size: 18px; /* 描述字体大小 */
}
#bus-route-image-container {
background-color: #292A36; /* 图片容器背景色 */
padding: 10px; /* 图片容器内边距 */
border-radius: 15px; /* 图片容器边框圆角 */
margin-top: 20px; /* 图片容器外边距 */
}
#bus-route-image {
border: 3px solid #292A36; /* 图片边框 */
border-radius: 10px; /* 图片边框圆角 */
}
/* 其他样式 */
#return-home-btn {
position: fixed;
right: 20px; /* 放置在右下角 */
bottom: 20px;
width: 50px; /* 宽度，使其更接近正方形 */
height: 50px; /* 高度 */
background-color: #333; /* 按钮背景色 */
color: white; /* 图标颜色 */
border-radius: 10px; /* 轻微的圆角 */
text-align: center;
line-height: 50px; /* 与按钮高度相同，使图标垂直居中 */
text-decoration: none;
border: none;
cursor: pointer;
transition: background-color 0.3s; /* 平滑的背景色变化效果 */
}
#return-home-btn:hover {
background-color: #555; /* 鼠标悬停时的背景色 */
}
#return-home-btn i {
font-size: 20px; /* 图标大小 */
vertical-align: middle;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment