Advertisement
Guest User

Untitled

a guest
Mar 29th, 2020
236
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 38.12 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="utf-8" />
  6. <link rel="apple-touch-icon" sizes="76x76" href="img/apple-icon.png">
  7. <link rel="icon" type="image/png" href="img/favicon.png">
  8. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  9. <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
  10. <!-- Fonts and icons -->
  11. <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
  12. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  13. <link rel="stylesheet" href="/css/dashboard.css">
  14. <link rel="stylesheet" href="/css/NavBar/SystemChecks.css">
  15. <link rel="stylesheet" href="/css/NavBar/VolumeThemesOthers.css">
  16.  
  17. <link rel="stylesheet" href="/css/FirstRow/radio.css">
  18. <link rel="stylesheet" href="/css/FirstRow/time.css">
  19. <link rel="stylesheet" href="/css/FirstRow/city.css">
  20. <title>Test</title>
  21. <!-- Latest compiled and minified CSS -->
  22. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.10/dist/css/bootstrap-select.min.css">
  23. </head>
  24.  
  25. <body>
  26. <nav class="navbar-dark bg-dark" style="padding:0.5rem 1rem">
  27. <div class="row">
  28. <div class="col-10" style="margin: auto;">
  29. <div class="row">
  30. <div class="col-4">test</div>
  31. <div class="col-4">
  32. <div class="row">
  33. <div class="VolumeDiv" style="display: contents;">
  34. <div class="col-md-4" id="OpenVolumeDropDown" style="text-align: center;">
  35. <span style="border-bottom:1px solid gray;cursor: pointer;position: relative;bottom: 6px;">Volume <span class="material-icons" style="position: relative;height: 12px;top: 5px;">
  36. arrow_drop_down
  37. </span>
  38. </span>
  39. </div>
  40. <div id="VolumePopup" class="defa-context-panel" style="padding-top:15px;">
  41. <div class="col-12">
  42. <div class="row">
  43. <div class="col-6 text-center" id="VolumeFirstRow" style="border-right: 1px solid green;">
  44. <span class="material-icons">
  45. volume_off
  46. </span>
  47. </div>
  48. <div class="col-6 text-center" id="VolumeFirstRow" style="border-left: 1px solid green;">
  49. <span class="material-icons">
  50. volume_up
  51. </span>
  52. </div>
  53. </div>
  54. </div>
  55. <div style="border-bottom:2px solid gray; margin: 0px 5px"></div>
  56. <div class="col-12">
  57. <div class="row" id="VolumeSliderRow">
  58. <div class="col-3 text-center" id="VolumeSliderPadding">Radio</div>
  59. <div class="col-7" id="VolumeSliderPadding">
  60. <div id="PlayerRadioDiv">
  61. <div id="PlayerRadioDivVolume"></div>
  62. </div>
  63. </div>
  64. <div class="col-2 text-center" id="VolumeSliderPadding" style="margin-left: 10px;">
  65. <p id="RadioVolumePercent">0%</p>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="col-12">
  70. <div class="row" id="VolumeSliderRow">
  71. <div class="col-3 text-center" id="VolumeSliderPadding">Radio</div>
  72. <div class="col-7" id="VolumeSliderPadding">----------------</div>
  73. <div class="col-2 text-center" id="VolumeSliderPadding">100%</div>
  74. </div>
  75. </div>
  76. <div class="col-12">
  77. <div class="row" id="VolumeSliderRow">
  78. <div class="col-3 text-center" id="VolumeSliderPadding">Radio</div>
  79. <div class="col-7" id="VolumeSliderPadding">----------------</div>
  80. <div class="col-2 text-center" id="VolumeSliderPadding">100%</div>
  81. </div>
  82. </div>
  83. <div style="border-bottom:2px solid gray; margin: 0px 5px"></div>
  84. <div class="col-12">
  85. <div class="row" id="VolumeSliderRow">
  86. <div class="col-3 text-center" id="VolumeSliderPadding">Radio</div>
  87. <div class="col-7" id="VolumeSliderPadding">----------------</div>
  88. <div class="col-2 text-center" id="VolumeSliderPadding">100%</div>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. <div class="col-4" style="text-align: center;">test</div>
  94. <div class=" col-4" style="text-align: center;">test</div>
  95. </div>
  96. </div>
  97. <div class=" col-4">test</div>
  98. </div>
  99. </div>
  100. <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" style="border-left: 2px solid darkgray;">
  101. <div class="row">
  102. <div class="col-2"><span class="material-icons SystemChecks" id="InternetIconCheck">
  103. language
  104. </span></div>
  105. <div class="col-2"><span class="material-icons SystemChecks" id="StorageIconCheck">
  106. sd_storage
  107. </span></div>
  108. <div class="col-2"><span class="material-icons SystemChecks" id="SystemChecks">
  109. memory
  110. </span></div>
  111. <div class="col-2 "><span class="material-icons SystemChecks SecurityHover" id="OpenSecurityDropDown">
  112. security
  113. </span></div>
  114. <span style=" border-right: 1px solid darkgray;border-left: 1px solid darkgray;margin: 6px 10px;"></span>
  115. <div class="col-2" style="margin:10px 0px">STOP</div>
  116. <div class="defa-context-panel-security" id="SecurityPopup">test</div>
  117. </div>
  118. </div>
  119. </div>
  120. </nav>
  121. <div class="container-fluid">
  122. <div class="row">
  123. <div class="col-10">
  124. <div class="row px-2">
  125. <div class="col-md-12 col-xl-4 ">
  126. <div class="row ">
  127. <!-- Time Row Border -->
  128. <!-- DONNNNNNNNNNNNNNNNNNNNNNNNNNNNE -->
  129. <div class="col-12 col-sm-4 col-md-12 col-lg-6 col-xl-12 px-1 mt-md-1 h-50">
  130. <div class="container-fluid">
  131. <div class="row">
  132. <div class="col-12 col-sm-12 col-md-12 pb-1 pt-2" style="border-bottom:1px solid gray;">
  133. <div class="row">
  134. <div class="col-2 col-sm-2 col-md-2 px-0 text-center">
  135. <span id="time" class="text-sm-left text-xl-center">--:--:--</span>
  136. </div>
  137. <div class="col-1 col-sm-1 col-md-1 text-left" style="border-right:1px solid gray;">
  138. <span id="PmAm" style=" text-transform: capitalize">{{$Time_Info_Data["AmPm"]}}</span>
  139. <span id="GTM" style=" text-transform: capitalize">GMT+3</span>
  140. </div>
  141. <div class="col-5 col-sm-5 col-md-5 px-1" style="border-right:1px solid gray;">
  142. <span id="EventName">{{$Time_Info_Data["EventName"]}}</span>
  143. <span id="EventLocation" style=" text-transform: capitalize">Place: {{$Time_Info_Data["Location"]}}</span>
  144. <span id="StartEDay">{{$Time_Info_Data["StartEDay"]}}</span>
  145. <span id="TicketPrice">Price: {{$Time_Info_Data["TicketPrice"]}}</span>
  146. </div>
  147. <div class="col-2 col-sm-2 col-md-2 px-1 text-md-center" style="border-right:1px solid gray;">
  148. <p class="p-0 m-0" id="Sunrise" style=" text-transform: capitalize">Sunrise: {{$Time_Info_Data["Sunrise"]}}</p>
  149. <p class="p-0 m-0" id="Sunset" style=" text-transform: capitalize">Sunset:&nbsp; {{$Time_Info_Data["Sunset"]}}</p>
  150. </div>
  151. <div class="col-2 col-sm-2 col-md-2 px-1 text-center">
  152. <p class="p-0 m-0" id="Sunrise" style=" text-transform: capitalize">Day:&nbsp; {{$Time_Info_Data["DayLength"]}}</p>
  153. <p class="p-0 m-0" id="Sunset" style=" text-transform: capitalize">Night: {{$Time_Info_Data["NightLength"]}}</p>
  154.  
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. <div class="row">
  160. <div class="col-12 col-sm-12 col-md-12 pb-1 pt-1">
  161. <div class="row">
  162. <div class="col-4 col-sm-4 col-md-4 px-md-3" style="border-right:1px solid gray;">
  163. <div class="row">
  164. <div class="col-md-8 px-0">
  165. <span id="DateDay">{{$Time_Info_Data["Date"]}}</span>
  166. <span id="DateInfo" style=" text-transform: capitalize">&nbsp; Year&nbsp;/{{$Time_Info_Data["Month"]}}/&nbsp;{{$Time_Info_Data["Day"]}}</span>
  167. </div>
  168. <div class="col-md-4">
  169. <span id="DaysThisMonth">Days:{{$Time_Info_Data["DaysThisMonth"]}}</span>
  170. <span id="DaysUntilNext" style=" text-transform: capitalize">Remain:{{$Time_Info_Data["DaysUntilNext"]}}</span>
  171. <span id="NextMonth">Next: {{$Time_Info_Data["NextMonth"]}}</span>
  172. </div>
  173.  
  174. </div>
  175. </div>
  176. <div class="col-5 col-sm-5 col-md-5 px-1 text-center" style="border-right:1px solid gray;">
  177. <span id="SeasonsIcons" class="text-center">
  178. @if($Time_Info_Data["Today"] >= $Time_Info_Data["spring"] && $Time_Info_Data["Today"] < $Time_Info_Data["summer"]) <i class="material-icons" style="color:#f0f3de;">brightness_5</i>
  179. @else
  180. <i class="material-icons">brightness_5</i>
  181. @endif
  182.  
  183. @if($Time_Info_Data["Today"] >= $Time_Info_Data["summer"] && $Time_Info_Data["Today"] < $Time_Info_Data["fall"]) <i class="material-icons" style="color:#ffd280;">wb_sunny</i>
  184. @else
  185. <i class="material-icons">wb_sunny</i>
  186. @endif
  187.  
  188. @if($Time_Info_Data["Today"] >= $Time_Info_Data["fall"] && $Time_Info_Data["Today"] < $Time_Info_Data["winter"]) <i class="material-icons" style="width:15px; color:#e2b562;">graint</i>
  189. @else
  190. <i class="material-icons" style="width:15px;">graint</i>
  191. @endif
  192.  
  193. @if($Time_Info_Data["Today"] >= $Time_Info_Data["winter"] && $Time_Info_Data["Today"] < $Time_Info_Data["spring"]) <i class="material-icons" style="color:#bac1c9;">cloud_queue</i>
  194. @else
  195. <i class="material-icons">cloud_queue</i>
  196. @endif
  197. </span>
  198.  
  199. <span id="Seasons" data-toggle="tooltip" title="Spring: 20 March - 20 June&#13;Summer: 20 June - 20 September&#13;Autumn: 20 Semtember - 20 December&#13;Winter: 20 December - 20 March">
  200. @if($Time_Info_Data["Today"] >= $Time_Info_Data["spring"] && $Time_Info_Data["Today"] < $Time_Info_Data["summer"]) <span style="color:#f0f3de;">Spring </span> | Summer | Autumn | Winter
  201. @elseif ($Time_Info_Data["Today"] >= $Time_Info_Data["summer"] && $Time_Info_Data["Today"] < $Time_Info_Data["fall"]) Spring | <span style="color:#ffd280;">Summer</span> | Autumn | Winter
  202. @elseif ($Time_Info_Data["Today"] >= $Time_Info_Data["fall"] && $Time_Info_Data["Today"] < $Time_Info_Data["winter"]) Spring | Summer | <span style="color:#e2b562;">Autumn</span> | Winter
  203. @elseif ($Time_Info_Data["Today"] >= $Time_Info_Data["winter"] && $Time_Info_Data["Today"] < $Time_Info_Data["spring"]) Spring | Summer | Autumn | <span style="color:#bac1c9;">Winter </span>
  204. @endif
  205. </span>
  206. </div>
  207. <div class="col-2 col-sm-2 col-md-2 px-1 text-center" style="border-right:1px solid gray;">
  208. <a id="MoreInfoDateTime" href="https://www.timeanddate.com/worldclock/?query={{$Localization_Info_Data['CityName']}}" target="_blank">More Info</a>
  209. </div>
  210. <div class="col-1 col-sm-1 col-md-1 px-2 btn-sm material-icons">arrow_downward
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. <!-- Weather -->
  218. <div class="col-12 col-sm-4 col-md-12 col-lg-6 col-xl-12 px-1 mt-md-1 text-left">
  219. <div class="container-fluid">
  220. <div class="row">
  221. <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 px-0 mt-1 pl-1">
  222. <div class="text-left">
  223. <div id="FontSizeCity" class="text-sm-left text-nowrap">Humidity: {{$Weather_Info_Data["WeatherHumidity"]}} %</div>
  224. <div id="FontSizeCity" class="text-sm-left text-nowrap">Wind: {{$Weather_Info_Data["WeatherWind"]}} m</div>
  225. <div id="FontSizeCity" class="text-sm-left text-nowrap">&nbsp;&nbsp;┗&gt;Dir: {{$Weather_Info_Data["WeatherWindDeg"]}} ({{$Weather_Info_Data["WeatherWindDirection"]}}) </div>
  226. <div id="FontSizeCity" class="text-sm-left text-nowrap">Clouds: {{$Weather_Info_Data["WeatherClouds"]}} %</div>
  227. <div id="FontSizeCity" class="text-sm-left text-nowrap">Pressure: {{$Weather_Info_Data["WeatherPressure"]}} </div>
  228. </div>
  229. </div>
  230. <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 p-0 mt-0 pl-2 text-center" style="margin-left:8px">
  231. <img src="https://openweathermap.org/img/wn/{{$Weather_Info_Data['WeatherIcon']}}.png" style="transform: scale(0.9);margin: -9px 0px -13px -4px;">
  232. <div style="font-size: 13px;margin-right: 3px;">{{$Weather_Info_Data["WeatherTemperature"]}}°C</div>
  233. <div style="font-size: 10px;margin-right: 4px;line-height: 0.9;margin-top: 3px;">{{$Weather_Info_Data["WeatherDescription"]}}</div>
  234. </div>
  235. <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 p-0 my-0 mr-0" style="margin-left:7px">
  236. <div class="row p-0 mt-1 mx-0" style="border-bottom:1px solid gray;max-height: 35px;">
  237. <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0 m-0" style="max-height: 30px;">
  238. <img style="transform: scale(0.9);margin-left: -6px;margin-top: -11px;" src="https://openweathermap.org/img/wn/{{$Weather_Info_Data['WeatherIcon']}}.png" alt="">
  239. </div>
  240. <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 pl-1 pr-0 m-0">
  241. <p class="m-0" style="font-size:11px">Today</p>
  242. <p class="m-0" style="font-size:11px"> {{$Weather_Info_Data["MinTempToday"]}}°C / {{$Weather_Info_Data["MaxTempToday"]}}°C</p>
  243. </div>
  244. </div>
  245. <div class="row p-0 m-0">
  246. <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0 m-0">
  247. <img style="transform: scale(0.9);margin-left: -6px;margin-top: -11px;" src="https://openweathermap.org/img/wn/04d.png" alt="">
  248. </div>
  249. <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 pl-1 pr-0 m-0">
  250. <p class="m-0" style="font-size:11px">Tomorrow</p>
  251. <p class="m-0" style="font-size:11px"> {{$Weather_Info_Data["WeatherTempMin"]}}°C / {{$Weather_Info_Data["WeatherTempMin"]}}°C</p>
  252. </div>
  253. </div>
  254. </div>
  255. <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 p-0 m-0 text-center">
  256. <img src="https://openweathermap.org/img/wn/{{$Weather_Info_Data['WeatherIcon']}}.png" style="transform: scale(0.9);margin: -9px 0px -13px -4px;">
  257. <div style="font-size: 13px;margin-right: 3px;">{{$Weather_Info_Data["MoonPercent"]}}%</div>
  258. <div style="font-size: 10px;margin-right: 4px;line-height: 0.9;margin-top: 3px;">{{$Weather_Info_Data["MoonPhaseName"]}}</div>
  259. </div>
  260. <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 px-1 mt-1 text-right" style="margin-left: -15px;">
  261. <div id="FontSizeCity" class="text-sm-right">Earth Dist: {{$Weather_Info_Data["MoonDistanceEarth"]}}</div>
  262. <div id="FontSizeCity" class="text-sm-right">Sun Dist: {{$Weather_Info_Data["MoonDistanceSun"]}}*10<sup>6</sup> </div>
  263. <div id="FontSizeCity" class="text-sm-right">New Moon in: {{$Weather_Info_Data["MoonNextNew"]}}</div>
  264. <div id="FontSizeCity" class="text-sm-right">Full Moon in: {{$Weather_Info_Data["MoonFullNew"]}}</div>
  265. <div id="FontSizeCity" class="text-sm-right">Stage : {{$Weather_Info_Data["MoonStage"]}} @if($Weather_Info_Data["MoonStage"] == "Waning")↙@else↗@endif</div>
  266. </div>
  267.  
  268. </div>
  269. </div>
  270. </div>
  271. </div>
  272. </div>
  273. <div class="col-md-12 col-xl-4 mt-xl-1 px-2" style="border-left:1px solid gray;border-right:1px solid gray;">
  274. <!-- DONNNNNNNNNNNNNNNNNNNNNNNNNNNNE -->
  275. <!-- City Details -->
  276. <div class="row">
  277. <div class="col-12 col-sm-4 col-md-12 col-lg-6 col-xl-12 px-2 mt-md-0">
  278. <div class="container-fluid">
  279. <div class="row">
  280. <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 pl-1 mt-1 pr-0 text-left">
  281. <div id="FontSizeCity" class="text-sm-left">City: {{$Localization_Info_Data["CityName"]}}</div>
  282. <div id="FontSizeCity" class="text-sm-left">Pop.: {{$Localization_Info_Data["CityPopulation"]}}</div>
  283. <div id="FontSizeCity" class="text-sm-left">Area: {{$Localization_Info_Data["CityArea"]}}</div>
  284. @if($Localization_Info_Data["CityMoneyUsed"] != "EUR")
  285. <div id="FontSizeCity" class="text-sm-left">Money: <span style="font-size:9px"> {{$Localization_Info_Data["CityMoneyUsed"]}} / EURO </span></div>
  286. @else
  287. <div id="FontSizeCity" class="text-sm-left">Money: <span style="font-size:9px"> {{$Localization_Info_Data["CityMoneyUsed"]}} </span></div>
  288. @endif
  289. <div id="FontSizeCity" class="text-sm-left">County: {{$Localization_Info_Data["CityCounty"]}}({{$Localization_Info_Data["CityCountyCode"]}})</div>
  290. </div>
  291. <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 mt-0">
  292. <div class="row">
  293. <div class="col-md-12 pb-2 pt-1 px-0 text-center" style="border-bottom:1px solid gray;">
  294. <input type="button" class="btn-sm btn-dark" id="GoogleButton" onclick="GoogleButton()" />
  295. <input type="button" class="btn-sm btn-dark" id="MapsButton" onclick="MapsButton()" />
  296. <input type="button" class="btn-sm btn-dark" id="WikiButton" onclick="WikiButton()" />
  297. </div>
  298. <div class="col-md-12 pb-2 pt-1 px-0 text-center">
  299. <input type="button" class="btn-sm btn-dark" id="MoovitButton" onclick="BookingButton()" />
  300. <input type="button" class="btn-sm btn-dark" id="TripAdvisorButton" onclick="TripAdvisorButton()" />
  301. <input type="button" class="btn-sm btn-dark" id="AirBnbButton" onclick="AirBnbButton()" />
  302. </div>
  303. </div>
  304. </div>
  305. <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 ml-1 pr-1" style="margin-right:-0.75rem!important;">
  306. <div class="row">
  307. <div class="col-md-12 pb-1 pt-2 text-center" style="border-bottom:1px solid gray;">
  308. <div class="row">
  309. <div class=" col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 px-1 text-center " style="margin-top:5px" id="FontSizeCity"><a style="color: white;text-decoration: underline;margin-left: -2px;" href="https://whatismyipaddress.com/ip/{{$Localization_Info_Data['YourIp']}}">{{$Localization_Info_Data['YourIp']}}</a></div>
  310. <div class=" col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 px-1 text-center"><a href="https://www.google.com/search?q={{$Localization_Info_Data['CountryName']}}" target="_blank"><img style="margin-top:-5px;transform: scale(0.8)" src="https://ipdata.co/flags/{{$Localization_Info_Data['CityFlag']}}.png"></a></div>
  311. </div>
  312. </div>
  313. </div>
  314. <div class=" row">
  315. <div class="col-md-12 pb-2 pt-1 px-1 text-center">
  316. <div class="row">
  317. <div class="col-7 col-sm-7 col-md-7 col-lg-7 col-xl-7 ml-2 pr-0 pl-0 ml-0" style="border-left:1px solid gray;border-right:1px solid gray;margin-top: -1px;">
  318. <a id="MoreInfoDateTime" href="https://{{$Localization_Info_Data['CityNameISP']}}-city.map2web.eu/" target="_blank">More Info</a>
  319. </div>
  320. <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 ml-1 btn-sm material-icons">arrow_downward</div>
  321. </div>
  322. </div>
  323. </div>
  324. </div>
  325. <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 mt-1 ml-1 pr-0 text-right">
  326. <div id="FontSizeCity" class="text-sm-right salam">Latitude: {{$Localization_Info_Data["CityLat"]}} </div>
  327. <div id="FontSizeCity" class="text-sm-right">Longitude: {{$Localization_Info_Data["CityLong"]}}</div>
  328. <div id="FontSizeCity" class="text-sm-right">Altitude: {{$Localization_Info_Data["CityElev"]}} m
  329. </div>
  330. <div id="FontSizeCity" class="text-sm-right">Accuracy: {{$Localization_Info_Data["CityPrec"]}} m</div>
  331. <div id="FontSizeCity" class="text-sm-right">Status:
  332. @if($Localization_Info_Data["CityStatus"] == "OK")
  333. Good
  334. @else
  335. Error
  336. @endif
  337. </div>
  338. </div>
  339. </div>
  340. </div>
  341. </div>
  342. <div class="col-12 col-sm-4 col-md-12 col-lg-6 col-xl-12 px-4 mt-md-2">
  343. <div class="row text-center mt-md-1">
  344. <!-- Radio -->
  345. <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 px-0 mx-0">
  346. <div class="row justify-content-center mx-0 px-0 py-0">
  347. <div class="col-md-12 pb-1 px-1 px-md-2">
  348. <select class="dropdown-select pb-2" name="RadioStation" id="RadioStation" onchange="RadioValueGet()">
  349. <option value="Select...">Radio Station</option>
  350. <option value="RadioZu">Radio Zu</option>
  351. <option value="VirginRadio">Virgin Radio</option>
  352. <option value="KissFm">Kiss FM</option>
  353. <option value="MunteniaFm">Muntenia FM</option>
  354. <option value="RockFM">Rock FM</option>
  355. </select>
  356.  
  357. </div>
  358. <div class="col-md-12 px-0">
  359. <audio id="PlayerRadio" src="#"></audio>
  360. <button id="PlayPauseButton" class="material-icons btn-sm btn-dark" onclick="PlayPause()" data-toggle="tooltip" title="Play!">play_arrow</button>
  361. <button class="material-icons btn-sm btn-dark" onclick="Volume()" data-toggle="tooltip" title="Volume!">volume_up</button>
  362. <button class="material-icons btn-sm btn-dark" data-toggle="tooltip" title="Details!">arrow_downward</button>
  363. </div>
  364. </div>
  365. </div>
  366. <!-- Timers -->
  367. <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 px-2" style="border-left:1px solid gray;border-right:1px solid gray;">
  368. <col class="div-12">Current Seseion: 00:00:00</col>
  369. <col class="div-12">Radio: 00:00:00</col>
  370. <col class="div-12">Others: 00:00:00</col>
  371. </div>
  372. <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 px-2">
  373. <div class="border bg-dark pb-3">
  374. test
  375. </div>
  376. </div>
  377. </div>
  378. </div>
  379. </div>
  380.  
  381. </div>
  382. <div class="col-md-12 col-xl-3 mt-xl-1 px-2">test</div>
  383. <div class="col-md-12 col-xl-1 mt-xl-1 px-2">test</div>
  384. </div>
  385. <div class="row px-2">
  386. <div class="col-md-8 ">
  387. <div class="row">
  388. <div class="col-md-8 px-1 mt-2">
  389. <div class="border bg-dark" id="height450">
  390. <div id="map"></div>
  391. </div>
  392. </div>
  393. <div class="col-md-4 px-1 mt-2">
  394. <div class="border bg-dark" id="height450"></div>
  395. </div>
  396. </div>
  397. </div>
  398. <div class="col-md-4 ">
  399. <div class="row">
  400. <div class="col px-1 mt-2">
  401. <div class="col border bg-dark">Lorem . In iaculis nulla eget pellentesque auctor. Aenean lectus nibh, convallis in venenatis tincidunt, sagittis vel sem. Donec eleifend risus sed tristique facilisis. Vivamus laoreet lacus ipsum. Sed pharetra, nibh at maximus eleifend, magna elit ultricies purus, nec maximus massa tellus ac augue. Cras mattis mattis euismod. In laoreet lectus mauris, quis hendrerit felis tincidunt in. Morbi id nulla tortor. Cras vehicula scelerisque leo tincidunt aliquet.</div>
  402. </div>
  403. </div>
  404. <div class="row">
  405. <div class="col px-1 mt-2">
  406. <div class="col border bg-dark">Curabitur at quam vel est finibus iaculis a ac neque. Sed laoreet quis magna ac cursus. Sed ut maximus nisl, ac semper quam. In iaculis nulla eget pellentesque auctor. Aenean lectus nibh, convallis in venenatis tincidunt, sagittis vel sem. Donec eleifend risus sed tristique facilisis. Vivamus laoreet lacus ipsum. Sed pharetra, nibh at maximus eleifend, magna elit ultricies purus, nec maximus massa tellus ac augue. Cras mattis mattis euismod. In laoreet lectus mauris, quis hendrerit felis tincidunt in. Morbi id nulla tortor. Cras vehicula scelerisque leo tincidunt aliquet.</div>
  407. </div>
  408. </div>
  409. </div>
  410. </div>
  411. <div class="row px-2">
  412. <div class="col-md-12">
  413. <div class="row">
  414. <div class="col-md-2 px-1 mt-2">
  415. <div class="border bg-dark" id="height250">Custom column padding</div>
  416. </div>
  417. <div class="col-md-3 px-1 mt-2">
  418. <div class="border bg-dark" id="height250">Custom column padding</div>
  419. </div>
  420. <div class="col-md-1 px-1 mt-2">
  421. <div class="border bg-dark" id="height250">div</div>
  422. </div>
  423. <div class="col-md-5 px-1 mt-2">
  424. <div class="border bg-dark" id="height250">div</div>
  425. </div>
  426. <div class="col-md-1 px-1 mt-2">
  427. <div class="border bg-dark" id="height250">div</div>
  428. </div>
  429. </div>
  430. </div>
  431. </div>
  432. </div>
  433. <div class="col-2" style="border:1px solid red;">test</div>
  434. </div>
  435.  
  436. </body>
  437. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  438. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  439. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  440. <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.10/dist/js/bootstrap-select.min.js"></script>
  441. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  442. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  443. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  444. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  445. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  446. <script src="/js/FirstRow/clock.js"></script>
  447. <script src="/js/FirstRow/radio.js"></script>
  448. <script src="/js/FirstRow/city.js"></script>
  449. <script src="/js/NavBar/Volume.js"></script>
  450. <script src="/js/NavBar/SystemChecks.js"></script>
  451. </body>
  452.  
  453.  
  454. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement