<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timetable</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="left-panel">
<div class="time-weather-section">
<div class="time-container">
<div id="dateInfo"></div>
<hr>
<div class="time-display">
<span id="currentTime"></span>
<br>
<span id="currentSecond"></span>
</div>
</div>
<div class="weather-container">
<div id="weather-info"></div>
<div id="weather-image"></div>
</div>
</div>
<div class="cafeteria-menu-section">
<h3 id="cafeteria-menu-title"></h3>
<ul id="cafeteria-menu-list">
<li>読み込み中...</li>
</ul>
</div>
</div>
<div class="main-panel">
<div class="station-box jr-suita-station">
<div class="station-title jr-title-color">J R 吹 田 駅</div>
<div class="timetable-area">
<table>
<thead>
<tr>
<th colspan="3" class="direction-header">高槻・京都 方面</th>
<th colspan="3" class="direction-header">神戸・宝塚 方面</th>
</tr>
<tr class="category-header">
<th>発車時刻</th>
<th>行先</th>
<th>発車まで</th>
<th>発車時刻</th>
<th>行先</th>
<th>発車まで</th>
</tr>
</thead>
<tbody id="jr-suita-tbody">
</tbody>
</table>
</div>
<div class="status-area" id="jr-status-area">
<p>運行情報を取得中...</p>
</div>
</div>
<div class="station-box hankyu-suita-station">
<div class="station-title hankyu-title-color">阪 急 吹 田 駅</div>
<div class="timetable-area">
<table>
<thead>
<tr>
<th colspan="3" class="direction-header">北千里 方面</th>
<th colspan="3" class="direction-header">天下茶屋・大阪梅田 方面</th>
</tr>
<tr class="category-header">
<th>発車時刻</th>
<th>行先</th>
<th>発車まで</th>
<th>発車時刻</th>
<th>行先</th>
<th>発車まで</th>
</tr>
</thead>
<tbody id="hankyu-suita-tbody">
</tbody>
</table>
</div>
<div class="status-area" id="hankyu-suita-status-area">
<p>運行情報を取得中...</p>
</div>
</div>
<div class="station-box hankyu-toyotsu-station">
<div class="station-title hankyu-title-color">阪 急 豊 津 駅</div>
<div class="timetable-area">
<table>
<thead>
<tr>
<th colspan="3" class="direction-header">北千里 方面</th>
<th colspan="3" class="direction-header">天下茶屋・大阪梅田 方面</th>
</tr>
<tr class="category-header">
<th>発車時刻</th>
<th>行先</th>
<th>発車まで</th>
<th>発車時刻</th>
<th>行先</th>
<th>発車まで</th>
</tr>
</thead>
<tbody id="hankyu-toyotsu-tbody">
</tbody>
</table>
</div>
<div class="status-area" id="hankyu-toyotsu-status-area">
<p>運行情報を取得中...</p>
</div>
</div>
<div class="station-box bus-stop">
<div class="station-title bus-title-color">片山小学校前（バス）</div>
<div class="timetable-area">
<table>
<thead>
<tr>
<th colspan="4" class="direction-header">朝日が丘町名神下 方面</th>
</tr>
<tr class="category-header">
<th>系統</th><th>発車時刻</th><th>行先</th><th>発車まで</th>
</tr>
</thead>
<tbody id="bus-tbody">
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="footer-scroll">
<marquee behavior="scroll" direction="left" scrollamount="15"><p id="scrollingText"></p></marquee>
</div>
<button id="fullscreen-button">全画面表示</button>
<script src="app.js"></script>
</body>
</html>
timetable2.0 html
投稿日時: 2025年6月25日 05:10