-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (136 loc) · 8.6 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 lang="de">
<head>
<meta charset="utf-8">
<title>WME Course Exercise HTML</title>
<meta name="description" content="WME Übung 1 Gruppe#21">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Jan Bickel, Radzhiv Khayretdinov">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="js/script.js"></script>
</head>
<body>
<header>
<nav id="big-nav">
<div class="logo">
<a href="#"><img alt="logo" src="images/logo.png"></a>
</div>
<ul>
<li><a href="index.html"><i class="fa fa-list"></i> A1 - Table</a></li>
<<li><div class="container"><i class="fa fa-list-ul" title=" A1 - Table"><a href="parse.php"> A2 - Parse</a></i></div></li>
<li><div class="container"><i class="fa fa-list-ul" title=" A1 - Table"><a href="save.php"> A2 - Save</a></i></div></li>
<li><div class="container"><i class="fa fa-list-ul" title=" A1 - Table"><a href="print.php"> A2 - Print</a></i></div></li>
<li><a href="#"><i class="fa fa-list"></i> A3 - Reset</a></li>
<li><a href="#"><i class="fa fa-list"></i> A4 - Vis</a></li>
</ul>
</nav>
<nav id="small-nav">
<div class="logo">
<a href="#openNav"><img alt="logo" src="images/logo.png"></a>
</div>
<a href="#openNav" ><i class="fa fa-list"></i></a>
<div id="openNav" class="modalDialog">
<div>
<ul>
<li><a href="#"><i class="fa fa-list"></i> A1 - Table</a></li>
<li><a href="#"><i class="fa fa-list"></i> A2 - Parse</a></li>
<li><a href="#"><i class="fa fa-list"></i> A2 - Save</a></li>
<li><a href="#"><i class="fa fa-list"></i> A2 - Print</a></li>
<li><a href="#"><i class="fa fa-list"></i> A3 - Reset</a></li>
<li><a href="#"><i class="fa fa-list"></i> A4 - Vis</a></li>
</ul>
<a href="#close" title="Close" class="close">close menu</a>
</div>
</div>
</nav>
</header>
<article id="first-container" class="a-container">
<h1>World Data Overview...</h1>
<div class="text-container">
<p>Mavericks reality distortion gradients attenuation. Thought through and through notifications transparency game center multitasking aluminum advanced desktop operating system genius bar. This changes everything designed by Apple in California passbook. Control center photos all-new design SDK technology clock. Simplicity is actually quite complicated. Functional layers 9:41am partly cloudy minimalism. Dock airdrop slide to answer music. Video multitouch iTunes compass. Harmonious finder grid system retina animation compressor experience keynote. Redesign services API notes system preferences. Features siri flat buttons airplane mode calculator. Missed call cover flow compare models. Wi-Fi apple care volume reminder controls. My stations folders mac power ultimate upgrade. Shop online quicktime trackpad server aperture rumors education safari one to one. Remote desktop motion business. Backlit keyboard chess phone airport extreme support iPad. Accessories magsafe terminal final cut pro. Featured TV shows downloads digital color meter. Glossy tech specs bluetooth manuals. OpenGL products FaceTime free shipping recycling mission control applications. From: <a href="#">John Doe</a></p>
</div>
</article>
<article id="last-container" class="a-container">
<div class="filter">
<p>Show/Hide:</p>
<ul>
<li><a onclick="show_hide_col(2)">birth rate </a></li>
<li><a onclick="show_hide_col(3)">cellphones </a></li>
<li><a onclick="show_hide_col(4)">children / woman </a></li>
<li><a onclick="show_hide_col(5)">electric usage </a></li>
<li><a onclick="show_hide_col(6)">internet usage </a></li>
</ul>
<br>
</div>
<table id="world_data">
<thead>
<tr>
<th>ID</th>
<th>Country
<a id="sort-up" class="fa fa-angle-up" onclick="sort_table(asc)"></a>
<a id="sort-down" class="fa fa-angle-down" onclick="sort_table(desc)"></a>
</th>
<th>birth rate / 1000</th>
<th>cellphones / 100</th>
<th>children / woman</th>
<th>electric usage</th>
<th>internet usage</th>
</tr>
</thead>
<tbody>
<tr><td>001</td><td>Brazil</td><td>16.405</td><td>90.01936334</td><td>1.862</td><td>2201.808724</td><td>39.22</td></tr>
<tr><td>002</td><td>Canada</td><td>10.625</td><td>70.70997244</td><td>1.668</td><td>15119.76414</td><td>80.17086651</td></tr>
<tr><td>003</td><td>Chile</td><td>15.04</td><td>97.01862561</td><td>1.873</td><td>3276.06449</td><td>38.8</td></tr>
<tr><td>004</td><td>China</td><td>13.536</td><td>55.97490921</td><td>1.642</td><td>2632.724637</td><td>28.97659939</td></tr>
<tr><td>005</td><td>Colombia</td><td>20.605</td><td>92.34584564</td><td>2.405</td><td>1041.994137</td><td>30</td></tr>
<tr><td>006</td><td>Ecuador</td><td>20.989</td><td>92.84925653</td><td>2.69</td><td>1078.038961</td><td>24.6</td></tr>
<tr><td>007</td><td>Egypt</td><td>24.83</td><td>69.43661504</td><td>2.919</td><td>1607.918763</td><td>24.28</td></tr>
<tr><td>008</td><td>Finland</td><td>11.127</td><td>144.1530224</td><td>1.86</td><td>15241.61194</td><td>82.53133098</td></tr>
<tr><td>009</td><td>France</td><td>12.21</td><td>95.44434226</td><td>1.978</td><td>7339.946832</td><td>69.0633593</td></tr>
<tr><td>010</td><td>Germany</td><td>8.136</td><td>127.4188883</td><td>1.376</td><td>6753.05764</td><td>79.48523153</td></tr>
<tr><td>011</td><td>Iceland</td><td>14.738</td><td>107.6604456</td><td>2.123</td><td>51259.18763</td><td>92.13686385</td></tr>
<tr><td>012</td><td>Iraq</td><td>31.585</td><td>65.47478839</td><td>4.276</td><td>1086.323768</td><td>1.047516616</td></tr>
<tr><td>013</td><td>Japan</td><td>8.201</td><td>91.8955442</td><td>1.359</td><td>7838.005685</td><td>77.38468963</td></tr>
<tr><td>014</td><td>Kazakhstan</td><td>19.775</td><td>107.7147692</td><td>2.537</td><td>4447.142293</td><td>17.91457965</td></tr>
<tr><td>015</td><td>Mexico</td><td>19.091</td><td>74.25785259</td><td>2.313</td><td>1869.82352</td><td>26.34</td></tr>
<tr><td>016</td><td>New Zealand</td><td>13.831</td><td>108.7301521</td><td>2.125</td><td>9375.550304</td><td>79.82609287</td></tr>
<tr><td>017</td><td>Nigeria</td><td>40.134</td><td>48.23561006</td><td>6.021</td><td>119.8151486</td><td>20</td></tr>
<tr><td>018</td><td>Peru</td><td>21.342</td><td>85.86901405</td><td>2.545</td><td>1043.052601</td><td>31.4</td></tr>
<tr><td>019</td><td>Russia</td><td>10.828</td><td>161.1162887</td><td>1.537</td><td>6132.978648</td><td>29.23584146</td></tr>
<tr><td>020</td><td>Saudi Arabia</td><td>23.569</td><td>167.3474553</td><td>2.898</td><td>7430.743897</td><td>38</td></tr>
<tr><td>021</td><td>South Africa</td><td>22.113</td><td>93.33587369</td><td>2.5</td><td>4532.021902</td><td>10.08745979</td></tr>
<tr><td>022</td><td>Sweden</td><td>11.72</td><td>112.1241184</td><td>1.937</td><td>14143.01101</td><td>91.12326108</td></tr>
<tr><td>023</td><td>United Arab Emirates</td><td>14.027</td><td>153.7997194</td><td>1.903</td><td>9998.291079</td><td>64</td></tr>
<tr><td>024</td><td>United Kingdom</td><td>12.195</td><td>130.1742603</td><td>1.89</td><td>5685.635995</td><td>77.79971962</td></tr>
<tr><td>025</td><td>United States</td><td>14.191</td><td>89.14911634</td><td>2.002</td><td>12913.71143</td><td>71.21181627</td></tr>
</tbody>
</table>
<div class="filter">
<p>Show/Hide:</p>
<ul>
<li><a onclick="show_hide_col(2)">birth rate </a></li>
<li><a onclick="show_hide_col(3)">cellphones </a></li>
<li><a onclick="show_hide_col(4)">children / woman </a></li>
<li><a onclick="show_hide_col(5)">electric usage </a></li>
<li><a onclick="show_hide_col(6)">internet usage </a></li>
</ul>
<br>
</div>
</article>
<footer>
<div class="footer-container">
<div id="left-footer">
<div>Copyright © 2015 world_data</div>
<div>First course exercise <b>HTML, CSS and JS</b> of lecture Web and Multimedia Engeneering. </div>
</div>
<div id="right-footer">
<div>This Solution has been created by: </div>
<div>Jan Bickel (s5104134), Radzhiv Khayretdinov (s7400249)- Team 21</div>
</div>
</div>
</footer>
</body>
</html>