index.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589
  1. <!DOCTYPE html>
  2. <html lang='en'>
  3. <head>
  4. <title>staty | OSM Station Relationships</title>
  5. <meta charset='utf-8' />
  6. <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  7. <meta name='description' content='Analyze public transport station in OpenStreetMap for correctness'>
  8. <link rel='preconnect' href='http://a.tile.stamen.com/toner-lite'>
  9. <link rel='preconnect' href='http://b.tile.stamen.com/toner-lite'>
  10. <link rel='preconnect' href='http://c.tile.stamen.com/toner-lite'>
  11. <style>
  12. @font-face {
  13. font-family: 'Nunito';
  14. font-style: normal;
  15. font-weight: 600;
  16. font-display: swap;
  17. src: local('Nunito SemiBold'), local('Nunito-SemiBold'), url(data:application/font-woff2;charset=utf-8;base64,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) format('woff2');
  18. }
  19. .leaflet-pane,
  20. .leaflet-tile,
  21. .leaflet-tile-container,
  22. .leaflet-pane > svg,
  23. .leaflet-pane > canvas,
  24. .leaflet-zoom-box,
  25. .leaflet-image-layer,
  26. .leaflet-layer {
  27. position: absolute;
  28. left: 0;
  29. top: 0;
  30. }
  31. .leaflet-container {
  32. overflow: hidden;
  33. }
  34. .leaflet-tile {
  35. -webkit-user-select: none;
  36. -moz-user-select: none;
  37. user-select: none;
  38. -webkit-user-drag: none;
  39. }
  40. .leaflet-tile::selection {
  41. background: transparent;
  42. }
  43. .leaflet-safari .leaflet-tile {
  44. image-rendering: -webkit-optimize-contrast;
  45. }
  46. .leaflet-safari .leaflet-tile-container {
  47. width: 1600px;
  48. height: 1600px;
  49. -webkit-transform-origin: 0 0;
  50. }
  51. .leaflet-container .leaflet-overlay-pane svg,
  52. .leaflet-container .leaflet-shadow-pane img,
  53. .leaflet-container .leaflet-tile-pane img,
  54. .leaflet-container img.leaflet-image-layer,
  55. .leaflet-container .leaflet-tile {
  56. max-width: none !important;
  57. max-height: none !important;
  58. }
  59. .leaflet-container.leaflet-touch-zoom {
  60. -ms-touch-action: pan-x pan-y;
  61. touch-action: pan-x pan-y;
  62. }
  63. .leaflet-container.leaflet-touch-drag {
  64. -ms-touch-action: pinch-zoom;
  65. touch-action: none;
  66. touch-action: pinch-zoom;
  67. }
  68. .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
  69. -ms-touch-action: none;
  70. touch-action: none;
  71. }
  72. .leaflet-container {
  73. -webkit-tap-highlight-color: transparent;
  74. }
  75. .leaflet-container a {
  76. -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
  77. }
  78. .leaflet-tile {
  79. filter: inherit;
  80. visibility: hidden;
  81. }
  82. .leaflet-tile-loaded {
  83. visibility: inherit;
  84. }
  85. .leaflet-zoom-box {
  86. width: 0;
  87. height: 0;
  88. -moz-box-sizing: border-box;
  89. box-sizing: border-box;
  90. z-index: 800;
  91. }
  92. .leaflet-overlay-pane svg {
  93. -moz-user-select: none;
  94. }
  95. .leaflet-pane { z-index: 400; }
  96. .leaflet-tile-pane { z-index: 200; }
  97. .leaflet-overlay-pane { z-index: 400; }
  98. .leaflet-shadow-pane { z-index: 500; }
  99. .leaflet-marker-pane { z-index: 600; }
  100. .leaflet-tooltip-pane { z-index: 650; }
  101. .leaflet-popup-pane { z-index: 700; }
  102. .leaflet-map-pane canvas { z-index: 100; }
  103. .leaflet-map-pane svg { z-index: 200; }
  104. .leaflet-vml-shape {
  105. width: 1px;
  106. height: 1px;
  107. }
  108. .lvml {
  109. behavior: url(#default#VML);
  110. display: inline-block;
  111. position: absolute;
  112. }
  113. .leaflet-control {
  114. position: relative;
  115. z-index: 800;
  116. pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
  117. pointer-events: auto;
  118. }
  119. .leaflet-top,
  120. .leaflet-bottom {
  121. position: absolute;
  122. z-index: 1000;
  123. pointer-events: none;
  124. }
  125. .leaflet-top {
  126. top: 0;
  127. }
  128. .leaflet-right {
  129. right: 0;
  130. }
  131. .leaflet-bottom {
  132. bottom: 0;
  133. }
  134. .leaflet-left {
  135. left: 0;
  136. }
  137. .leaflet-control {
  138. float: left;
  139. clear: both;
  140. }
  141. .leaflet-right .leaflet-control {
  142. float: right;
  143. }
  144. .leaflet-top .leaflet-control {
  145. margin-top: 10px;
  146. }
  147. .leaflet-bottom .leaflet-control {
  148. margin-bottom: 10px;
  149. }
  150. .leaflet-left .leaflet-control {
  151. margin-left: 10px;
  152. }
  153. .leaflet-right .leaflet-control {
  154. margin-right: 10px;
  155. }
  156. .leaflet-fade-anim .leaflet-tile {
  157. will-change: opacity;
  158. }
  159. .leaflet-fade-anim .leaflet-popup {
  160. opacity: 0;
  161. -webkit-transition: opacity 0.2s linear;
  162. -moz-transition: opacity 0.2s linear;
  163. transition: opacity 0.2s linear;
  164. }
  165. .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  166. opacity: 1;
  167. }
  168. .leaflet-zoom-animated {
  169. -webkit-transform-origin: 0 0;
  170. -ms-transform-origin: 0 0;
  171. transform-origin: 0 0;
  172. }
  173. .leaflet-zoom-anim .leaflet-zoom-animated {
  174. will-change: transform;
  175. }
  176. .leaflet-zoom-anim .leaflet-zoom-animated {
  177. -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
  178. -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
  179. transition: transform 0.25s cubic-bezier(0,0,0.25,1);
  180. }
  181. .leaflet-zoom-anim .leaflet-tile,
  182. .leaflet-pan-anim .leaflet-tile {
  183. -webkit-transition: none;
  184. -moz-transition: none;
  185. transition: none;
  186. }
  187. .leaflet-zoom-anim .leaflet-zoom-hide {
  188. visibility: hidden;
  189. }
  190. .leaflet-interactive {
  191. cursor: pointer;
  192. }
  193. .leaflet-grab {
  194. cursor: -webkit-grab;
  195. cursor: -moz-grab;
  196. cursor: grab;
  197. }
  198. .leaflet-popup-pane,
  199. .leaflet-control {
  200. cursor: auto;
  201. }
  202. .leaflet-dragging .leaflet-grab,
  203. .leaflet-dragging .leaflet-grab .leaflet-interactive {
  204. cursor: move;
  205. cursor: -webkit-grabbing;
  206. cursor: -moz-grabbing;
  207. cursor: grabbing;
  208. }
  209. .leaflet-image-layer,
  210. .leaflet-pane > svg path,
  211. .leaflet-tile-container {
  212. pointer-events: none;
  213. }
  214. .leaflet-image-layer.leaflet-interactive,
  215. .leaflet-pane > svg path.leaflet-interactive,
  216. svg.leaflet-image-layer.leaflet-interactive path {
  217. pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
  218. pointer-events: auto;
  219. }
  220. .leaflet-container {
  221. background: #ddd;
  222. outline: 0;
  223. }
  224. .leaflet-container a {
  225. color: #0078A8;
  226. }
  227. .leaflet-container a.leaflet-active {
  228. outline: 2px solid orange;
  229. }
  230. .leaflet-zoom-box {
  231. border: 2px dotted #38f;
  232. background: rgba(255,255,255,0.5);
  233. }
  234. .leaflet-bar {
  235. box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  236. border-radius: 4px;
  237. }
  238. .leaflet-bar a,
  239. .leaflet-bar a:hover {
  240. background-color: #fff;
  241. border-bottom: 1px solid #ccc;
  242. width: 26px;
  243. height: 26px;
  244. line-height: 26px;
  245. display: block;
  246. text-align: center;
  247. text-decoration: none;
  248. color: black;
  249. }
  250. .leaflet-bar a,
  251. .leaflet-control-layers-toggle {
  252. background-position: 50% 50%;
  253. background-repeat: no-repeat;
  254. display: block;
  255. }
  256. .leaflet-bar a:hover {
  257. background-color: #f4f4f4;
  258. }
  259. .leaflet-bar a:first-child {
  260. border-top-left-radius: 4px;
  261. border-top-right-radius: 4px;
  262. }
  263. .leaflet-bar a:last-child {
  264. border-bottom-left-radius: 4px;
  265. border-bottom-right-radius: 4px;
  266. border-bottom: none;
  267. }
  268. .leaflet-bar a.leaflet-disabled {
  269. cursor: default;
  270. background-color: #f4f4f4;
  271. color: #bbb;
  272. }
  273. .leaflet-touch .leaflet-bar a {
  274. width: 30px;
  275. height: 30px;
  276. line-height: 30px;
  277. }
  278. .leaflet-touch .leaflet-bar a:first-child {
  279. border-top-left-radius: 2px;
  280. border-top-right-radius: 2px;
  281. }
  282. .leaflet-touch .leaflet-bar a:last-child {
  283. border-bottom-left-radius: 2px;
  284. border-bottom-right-radius: 2px;
  285. }
  286. .leaflet-control-zoom-in,
  287. .leaflet-control-zoom-out {
  288. text-indent: 1px;
  289. }
  290. .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
  291. font-size: 22px;
  292. }
  293. .leaflet-container .leaflet-control-attribution {
  294. background: #fff;
  295. background: rgba(255, 255, 255, 0.7);
  296. margin: 0;
  297. }
  298. .leaflet-control-attribution {
  299. padding: 0 5px;
  300. color: #333;
  301. }
  302. .leaflet-control-attribution a {
  303. text-decoration: none;
  304. }
  305. .leaflet-control-attribution a:hover {
  306. text-decoration: underline;
  307. }
  308. .leaflet-container .leaflet-control-attribution {
  309. font-size: 11px;
  310. }
  311. .leaflet-touch .leaflet-control-attribution,
  312. .leaflet-touch .leaflet-control-layers,
  313. .leaflet-touch .leaflet-bar {
  314. box-shadow: none;
  315. }
  316. .leaflet-touch .leaflet-control-layers,
  317. .leaflet-touch .leaflet-bar {
  318. border: 2px solid rgba(0,0,0,0.2);
  319. background-clip: padding-box;
  320. }
  321. .leaflet-popup {
  322. position: absolute;
  323. text-align: center;
  324. margin-bottom: 20px;
  325. }
  326. .leaflet-popup-content-wrapper {
  327. padding: 1px;
  328. text-align: left;
  329. border-radius: 12px;
  330. }
  331. .leaflet-popup-content {
  332. margin: 13px 19px;
  333. line-height: 1.4;
  334. }
  335. .leaflet-popup-content p {
  336. margin: 18px 0;
  337. }
  338. .leaflet-popup-tip-container {
  339. width: 40px;
  340. height: 20px;
  341. position: absolute;
  342. left: 50%;
  343. margin-left: -20px;
  344. overflow: hidden;
  345. pointer-events: none;
  346. }
  347. .leaflet-popup-tip {
  348. width: 17px;
  349. height: 17px;
  350. padding: 1px;
  351. margin: -10px auto 0;
  352. -webkit-transform: rotate(45deg);
  353. -moz-transform: rotate(45deg);
  354. -ms-transform: rotate(45deg);
  355. transform: rotate(45deg);
  356. }
  357. .leaflet-popup-content-wrapper,
  358. .leaflet-popup-tip {
  359. background: white;
  360. color: #333;
  361. box-shadow: 0 3px 14px rgba(0,0,0,0.4);
  362. }
  363. .leaflet-container a.leaflet-popup-close-button {
  364. position: absolute;
  365. top: 0;
  366. right: 0;
  367. padding: 4px 4px 0 0;
  368. border: none;
  369. text-align: center;
  370. width: 18px;
  371. height: 14px;
  372. font: 16px/14px Tahoma, Verdana, sans-serif;
  373. color: #c3c3c3;
  374. text-decoration: none;
  375. font-weight: bold;
  376. background: transparent;
  377. }
  378. .leaflet-container a.leaflet-popup-close-button:hover {
  379. color: #999;
  380. }
  381. .leaflet-popup-scrolled {
  382. overflow: auto;
  383. border-bottom: 1px solid #ddd;
  384. border-top: 1px solid #ddd;
  385. }
  386. body{padding:0;margin:0;font-family:sans-serif}html,body{height:100%;width:100%}tt{letter-spacing: -0.5px;}#attr-tbl tr{background-color:#c0f7c0}.stat-label{white-space:nowrap;background:transparent}#attr-tbl .err-10{background-color:red}#attr-tbl .err-9{background-color:#ff1010}#attr-tbl .err-8{background-color:#f92424}#attr-tbl .err-7{background-color:#f93838}#attr-tbl .err-6{background-color:#f56262}#attr-tbl .err-5{background-color:#f38484}.attr-err-info{margin-top:5px;font-size:13px;font-style:italic}.leaflet-popup-content-wrapper{border-radius:5px}#attr-tbl .err-wrap {max-height: 100px;display: block;overflow-y: auto;}#attr-tbl{margin-top:10px;width:100%}.sugtit,.oldmemberstit,.newmemberstit{font-style:normal;font-weight:700}#group-stations-new,#group-stations-old{margin-top:8px;padding-top:4px;border-top:solid 1px #AAA}#group-stations-new div{background-color:rgb(182, 182, 228);border-left:solid 4px #00f;padding:2px;margin:2px;padding-left:5px}#group-stations-old div{border-left:solid 4px #78f378;padding:2px;margin:2px;padding-left:5px}#sugg{margin-top:8px;padding-top:4px;border-top:solid 1px #AAA;color:#0000c3}#sugg ul{padding:5px;margin:5px;padding-top:0}#l{text-decoration:none;font-weight:600;font-family:'Nunito',sans-serif;font-size:60px;position:absolute;z-index:1000;right:.3em;top:0.65rem;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;color:#fff;opacity:.7}.leaflet-control-zoom a{font-family:'Nunito',sans-serif!important;font-weight:700!important;font-size:38px!important}.leaflet-touch .leaflet-bar a{width:40px;height:40px;line-height:40px;overflow:hidden;display:block}.leaflet-control-zoom-out{margin-top:10px}.leaflet-container{font-family:sans-serif!important;font-size:14px}.leaflet-control-attribution a{font-family:sans-serif!important;color:#333!important;font-size:12px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{border-radius:25px!important;border:1px solid #000!important;opacity:.7;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;color:#fff!important}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:none;background:transparent}.leaflet-popup{left:-20px!important}.leaflet-popup-tip-container{left:20px}.leaflet-popup-tip{box-shadow:none!important}.leaflet-popup:before{content:'';position:absolute;border:13px solid transparent;border-bottom-color:#fff;bottom:0;margin-left:-13px}.attrval{font-weight:700}.grouplink{cursor:pointer;text-decoration:underline;z-index:1000}.ns{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#group-stations-old div.del-stat:before{content:'❌';position:relative;width:0;color:#800;margin-left:-1.15em;left:-.6em;padding-right:.5em}#group-stations-old div.del-stat{background-color:#F44336;border-left:solid 4px #800}#group-stations-old,#group-stations-new{max-height:200px;overflow-y:auto;}.ebut{display: block;float: right;margin-right: 10px;font-size: 18px;text-decoration: none;line-height: 18px;}
  387. #s {
  388. position: absolute;
  389. z-index: 9999;
  390. top: 1.3rem;
  391. width: 30%;
  392. margin: 0;
  393. min-width: 300px;
  394. right: 35%;
  395. font-size: 16px;
  396. opacity: 0.9;
  397. padding: 7px;
  398. border: solid black 1px;
  399. border-radius: 5px;
  400. background: white;
  401. }
  402. #s input {
  403. width: 100%;
  404. border: none;
  405. padding: 0;
  406. font-size: 20px;
  407. }
  408. #sres {
  409. max-height: 0;
  410. transition: max-height 0.15s ease-out;
  411. overflow: hidden;
  412. }
  413. #sres.res-open {
  414. max-height: 1000px;
  415. transition: max-height 0.3s ease-in;
  416. }
  417. #s .sres:first-child {
  418. margin-top: 10px;
  419. }
  420. input:focus {
  421. outline:none;
  422. }
  423. #s .sres {
  424. display: block;
  425. line-height: 2;
  426. padding-left: 0.5rem;
  427. padding-right: 25px;
  428. border-top-right-radius: 5px;
  429. border-bottom-right-radius: 5px;
  430. border-left: solid 5px #78f378;
  431. margin-top:2px;
  432. }
  433. #s .sres .via {
  434. display:block;
  435. margin-left: 0.7rem;
  436. font-size: 14px;
  437. color: #333;
  438. }
  439. #s .sres, #s .sres .via {
  440. white-space: nowrap;
  441. overflow: hidden;
  442. text-overflow: ellipsis;
  443. }
  444. #s .sres.res-sugg {
  445. border-left: solid 5px #0000c3;
  446. }
  447. #s .sres.res-err {
  448. border-left: solid 5px red;
  449. }
  450. #s .sres.selres {
  451. background-color: #ddd;
  452. cursor: pointer;
  453. }
  454. .res-group, .res-stat, .res-way {
  455. background-size: 20px;
  456. background-repeat: no-repeat;
  457. background-position: 100% center;
  458. }
  459. .res-group {
  460. background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20version%3D%221.0%22%20height%3D%22256%22%20width%3D%22256%22%3E%3Cg%3E%3Crect%20width%3D%22242%22%20height%3D%22242%22%20stroke%3D%22black%22%20fill%3D%22%23f0f0f0%22%20stroke-width%3D%2212%22%20ry%3D%2232%22%20x%3D%227%22%20y%3D%227%22%2F%3E%3Cg%3E%3Cpath%20d%3D%22M%20068%20068%20L%20196%20062%22%20stroke-width%3D%2216%22%20stroke%3D%22%23ccc%22%2F%3E%3Cpath%20d%3D%22M%20068%20068%20L%20196%20142%22%20stroke-width%3D%2216%22%20stroke%3D%22%23ccc%22%2F%3E%3Cpath%20d%3D%22M%20068%20068%20L%20062%20196%22%20stroke-width%3D%2216%22%20stroke%3D%22%23ccc%22%2F%3E%3Ccircle%20cx%3D%22196%22%20cy%3D%22062%22%20r%3D%22024%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%22196%22%20cy%3D%22142%22%20r%3D%22024%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%22062%22%20cy%3D%22196%22%20r%3D%22024%22%20fill%3D%22black%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M%20068%20068%20L%20142%20196%22%20stroke-width%3D%2216%22%20stroke%3D%22%23ccc%22%2F%3E%3Ccircle%20cx%3D%22142%22%20cy%3D%22196%22%20r%3D%22024%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%22072%22%20cy%3D%22072%22%20r%3D%22032%22%20fill%3D%22%23bee6be%22%20stroke%3D%22black%22%20stroke-width%3D%228%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  461. }
  462. .res-stat {
  463. background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20version%3D%221.0%22%20height%3D%22256%22%20width%3D%22256%22%3E%3Cg%3E%3Crect%20width%3D%22242%22%20height%3D%22242%22%20stroke%3D%22black%22%20fill%3D%22%23f0f0f0%22%20stroke-width%3D%2212%22%20ry%3D%2232%22%20x%3D%227%22%20y%3D%227%22%2F%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20r%3D%22024%22%20fill%3D%22%23bee6be%22%20stroke%3D%22black%22%20stroke-width%3D%2210%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A');
  464. }
  465. .res-way {
  466. background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20version%3D%221.0%22%20height%3D%22256%22%20width%3D%22256%22%3E%3Cg%3E%3Crect%20width%3D%22242%22%20height%3D%22242%22%20stroke%3D%22black%22%20fill%3D%22%23f0f0f0%22%20stroke-width%3D%2212%22%20ry%3D%2232%22%20x%3D%227%22%20y%3D%227%22%2F%3E%3Cpath%20stroke%3D%22%23ccc%22%20fill%3D%22none%22%20stroke-width%3D%2216%22%20d%3D%22M%20169%20058%20L%20057%20145%20L%20195%20199%22%2F%3E%3Cg%3E%3Ccircle%20cx%3D%22169%22%20cy%3D%22058%22%20r%3D%22024%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%22057%22%20cy%3D%22145%22%20r%3D%22024%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%22195%22%20cy%3D%22199%22%20r%3D%22024%22%20fill%3D%22black%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A');
  467. }
  468. #del {
  469. position: absolute;
  470. right: 0;
  471. top: 0;
  472. padding: 0;
  473. text-decoration: none;
  474. font-size: 20px;
  475. margin-top: 7px;
  476. margin-right: 7px;
  477. line-height: 24px;
  478. opacity: 0;
  479. transition: opacity .2s;
  480. color: #303030;
  481. }
  482. #s label {position:absolute;color: #999;
  483. transition: color 0.2s ease-out;
  484. font-weight:bold;
  485. font-size:20px;
  486. -webkit-transform: rotate(45deg);
  487. -moz-transform: rotate(45deg);
  488. -o-transform: rotate(45deg);
  489. transform: rotate(45deg);line-height:24px;}
  490. #s > span { display: block;
  491. padding-right: 20px;
  492. padding-left:20px;}
  493. #s ::-webkit-input-placeholder {
  494. color: #999;
  495. }
  496. #s :-ms-input-placeholder {
  497. color: #999;
  498. }
  499. #s :-ms-input-placeholder {
  500. color: #999;
  501. }
  502. #s:focus-within label {
  503. color:#000;
  504. transition: color 0.2s ease-out;
  505. }
  506. main, #m { width: 100%;height:100%; }
  507. #sres.res-open + #del { opacity: 1; }
  508. @media (max-width: 600px){#l{display: none;}.leaflet-control-container,.leaflet-top{height:100%;}.leaflet-control-zoom{position:absolute;top:3.5rem;}#s{font-size:16px;min-width:0;width:auto; right: 10px;left:10px;top:10px;}}
  509. .leaflet-popup-content-wrapper{opacity:0.9; border: solid 1px black;}.leaflet-popup-tip-container{margin-top:-1px;}.leaflet-popup-tip{opacity:1;background:#fcfcfc;border:solid 1px black;margin:-11px auto 0;}
  510. </style>
  511. </head>
  512. <body>
  513. <nav><a id='l' class='ns' href='/'>staty</a></nav>
  514. <main>
  515. <div id='m'></div>
  516. <div id='s'>
  517. <label for="si">⚲</label><span><input id='si' oninput='s(this.value)' onkeydown='kp(event)' autocorrect='off' autocomplete='off' autocapitalize='off' placeholder='Search for a station…' type='text'></span>
  518. <div id='sres'></div>
  519. <a href='#' id='del'>✖</a>
  520. </div>
  521. </main>
  522. <script src='build.js' defer>
  523. </script>
  524. </body>
  525. </html>