trackmytube.github.io/planner.html at main · trackmytube/trackmytube.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TrackMyTube - Plan a Journey</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/planner.css">
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#3663e4"/>
    <meta name="description" content="Plan your trips with precision using the Journey Planner. Customize your routes by selecting the origin and destination stations, via certain stations, and exploring alternative options to ensure the most efficient travel experience.">

    <link rel="apple-touch-icon" sizes="180x180" href="img/icons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon-16x16.png">
    <link rel="manifest" href="img/icons/site.webmanifest">
    <link rel="mask-icon" href="img/icons/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="img/icons/favicon.ico">
    <meta name="apple-mobile-web-app-title" content="TrackMyTube">
    <meta name="application-name" content="TrackMyTube">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-TileImage" content="img/icons/mstile-144x144.png">
    <meta name="msapplication-config" content="img/icons/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
</head>
<body>
    <header>
        <nav class="navbar">
            <a href="index.html" class="logo">
                <img src="img/logo.png" alt="TrackMyTube Logo" />
            </a>
            <button class="menu-toggle" aria-label="Toggle menu">☰</button>
            <ul class="nav-menu">
                <li><a href="index.html"><strong>Home</strong></a></li>
                <li><a href="status.html"><strong>Line Status</strong></a></li>
                <li><a href="station.html"><strong>Station Finder</strong></a></li>
                <li><a href="planner.html"><strong>Journey Planner</strong></a></li>
                <li><a href="about.html"><strong>About</strong></a></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <h1>TfL Journey Planner</h1>
    </section>

    <section class="search-buttons-section">
        <div class="input-button-group">
            <div class="input-wrapper">
                <input type="text" class="search-box" id="station-search-1" placeholder="ORIGIN">
                <button class="clear-button" type="button">&times;</button>
            </div>
            <button id="switch-stations" class="switch-button">&uarr;&darr;</button>
        </div>
        <div class="input-button-group">
            <div class="input-wrapper">
                <input type="text" class="search-box" id="station-search-2" placeholder="DESTINATION">
                <button class="clear-button" type="button">&times;</button>
            </div>
            <button id="search-button" class="search-button">Search</button>
        </div>
    </section>

    <section class="journey-preferences-section hidden">
        <button id="journey-preferences-button" class="journey-preferences-button">Journey Preferences</button>
        <div id="journey-preferences" class="journey-preferences">
            <div class="input-wrapper">
                <input type="text" id="station-search-via" class="search-box" placeholder="VIA (optional)">
                <button class="clear-button" type="button">&times;</button>
            </div>
            <div class="date-time-container">
                <div>
                    <div class="date-time-label">Select Date</div>
                    <input type="date" class="date-input" id="date-picker">
                </div>
                <div>
                    <div class="date-time-label">Select Time</div>
                    <input type="time" class="time-input" id="time-picker">
                </div>
            </div>
            <div class="journey-options-label">Journey Options</div>
            <div class="journey-options-container">
                <select class="time-is-dropdown" id="time-is">
                    <option value="departing">Departing</option>
                    <option value="arriving">Arriving</option>
                </select>
                <select class="preferences-dropdown" id="journey-preference">
                    <option value="leasttime">Least Time</option>
                    <option value="leastinterchange">Least Interchange</option>
                    <option value="leastwalking">Least Walking</option>
                </select>
            </div>
            <button id="clear-journey-preferences" class="clear-preferences-button" type="button">Clear Journey Preferences</button>
        </div>
    </section>


    <div id="selectedStation"></div>
    <div id="selectedLines" class="line-colors"></div>

    <div class="journey-container">
        <div id="journey-results"></div>
    </div>

    <div id="search-results" class="search-results">
    </div>

    <script src="js/script.js"></script>
    <script src="js/planner.js"></script>
</body>
</html>