forked from Kikuflare/FFXIV-Weather-Forecast
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (122 loc) · 5.93 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
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<head>
<title>FFXIV Weather Forecast</title>
<meta charset="UTF-8">
<meta name="description" content="Finds and displays weather in the MMORPG Final Fantasy XIV.">
<meta name="keywords" content="FFXIV, FF14, Weather, Forecast, Forecaster, 天気, 天気予報">
<meta name="author" content="Kiku">
<link rel="stylesheet" href="./styles/main.css">
<script type="text/javascript" src="./scripts/data.js" ></script>
<script type="text/javascript" src="./scripts/lang.js" ></script>
<script type="text/javascript" src="./scripts/weather.js" ></script>
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<link rel="icon" type="image/png" href="./images/rain.png">
</head>
<body id="main">
<h1 class="center-text no-margin-bottom"><label id="ffxivWeatherForecastLabel"></label></h1>
<div class="center-text default-margin-bottom faded-text">Up-to-date as of patch 6.2</div>
<div class="center-text default-margin-bottom">
<button class="btn" onclick="langChangeHandler('en')">English</button>
<button class="btn" onclick="langChangeHandler('ja')">日本語</button>
</div>
<div class="center-text default-margin-bottom">
<div><strong class="default-margin-right"><label id="areaLabel"></label></strong></div>
<select class="form-select" id="areaSelect" onchange="onAreaChangeHandler(this)"></select>
</div>
<div class="center-text default-margin-bottom">
<strong><label id="targetWeatherLabel"></label></strong>
<div id="targetWeatherOptions" class="flexbox flexbox-horizontal-center"></div>
</div>
<div class="center-text default-margin-bottom">
<strong><label id="precedingWeatherLabel"></label></strong>
<div id="precedingWeatherOptions" class="flexbox flexbox-horizontal-center"></div>
</div>
<div class="center-text default-margin-bottom">
<div><strong><label id="timeLabel"></label></strong></div>
<div class="flexbox flexbox-horizontal-center">
<label for="start00" class="form-checkbox default-margin-right">
<input type="checkbox" id="start00" name="start00" class="small-margin-right">
<i class="form-icon"></i>
00:00 - 07:59
</label>
<label for="start08" class="form-checkbox default-margin-right">
<input type="checkbox" id="start08" name="start08" class="small-margin-right">
<i class="form-icon"></i>
08:00 - 15:59
</label>
<label for="start16" class="form-checkbox">
<input type="checkbox" id="start16" name="start16" class="small-margin-right">
<i class="form-icon"></i>
16:00 - 23:59
</label>
</div>
</div>
<div class="center-text">
<button class="btn btn-primary" id="addWeatherConditionsButton" onclick="addWeatherConditions()"></button>
</div>
<hr class="horizontalHalfWidth">
<table class="center-table table table-striped table-hover resultTable default-margin-bottom">
<thead>
<tr>
<th><label id="areaConditionsHeader"></label></th>
<th><label id="previousWeatherConditionsHeader"></label></th>
<th><label id="targetWeatherConditionsHeader"></label></th>
<th><label id="eorzeaTimeConditionsHeader"></label></th>
<th><label id="deleteConditionsHeader"></label></th>
</tr>
</thead>
<tbody id="conditionsListBody"></tbody>
</table>
<hr class="horizontalHalfWidth">
<div class="flexbox flexbox-horizontal-center">
<div class="center-text accordion">
<input type="checkbox" id="accordion-advanced" name="accordion-checkbox" hidden>
<label class="accordion-header" for="accordion-advanced">
<i class="icon icon-arrow-right mr-1"></i>
<strong id="advancedOptionsLabel"></strong>
</label>
<div class="accordion-body">
<div class="default-margin-bottom">
<label id="maximumNumberLabel"></label>
<input id="maximumNumber" type="number" value="10">
</div>
<div class="default-margin-bottom">
<label id="maximumCyclesLabel"></label>
<input id="maximumCycles" type="number" value="100000">
</div>
<div class="flexbox flexbox-horizontal-center">
<label for="customStartDateCheckbox" class="form-checkbox default-margin-right">
<input type="checkbox" id="customStartDateCheckbox" name="customStartDateCheckbox">
<i class="form-icon"></i>
<span id="customStartDateLabel">Custom Start Date</span>
</label>
<input id="customStartDate" type="date">
</div>
</div>
</div>
</div>
<div class="center-text">
<button class="btn btn-primary" id="findWeatherButton" onclick="findWeatherOnClickHandler()"></button>
</div>
<table class="center-table table table-striped table-hover resultTable default-margin-bottom">
<thead>
<tr>
<th><label id="areaHeader"></label></th>
<th><label id="previousWeatherHeader"></label></th>
<th><label id="currentWeatherHeader"></label></th>
<th><label id="eorzeaTimeHeader"></label></th>
<th><label id="localTimeHeader"></label></th>
</tr>
</thead>
<tbody id="resultBody"></tbody>
</table>
<script type="text/javascript" src="./scripts/main.js" ></script>
<footer class="center-text default-margin-bottom">
<div>Created by <a href="https://na.finalfantasyxiv.com/lodestone/character/11519702/">Kiku Ichimonji</a> @ Kujata</div>
<div>Suggestions or feedback: <a href="https://github.com/Kikugumo/FFXIV-Weather-Forecast/issues">Github</a></div>
</footer>
</body>
</html>