add developer links

roma8ok · Apr 6, 2024 · 5a507db · 5a507db
1 parent 575f01e
commit 5a507db
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 51 deletions.
diff --git a/bundle.js b/bundle.js
@@ -11036,7 +11036,7 @@ window.onload = function() {
 
 let map = L.map('map').setView([35.1264, 33.4299], 8);
 L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    maxZoom: 18,
+    maxZoom: 19,
     attribution: '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 }).addTo(map);
 map.attributionControl.setPrefix('');

diff --git a/icons/github.png b/icons/github.png
diff --git a/icons/linkedin.png b/icons/linkedin.png
diff --git a/icons/telegram.png b/icons/telegram.png
diff --git a/index.html b/index.html
@@ -2,64 +2,44 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+          rel="stylesheet">
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
           integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
           crossorigin=""/>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-          rel="stylesheet">
-    <style>
-        html, body {
-            height: 100%;
-            margin: 0;
-            padding: 0;
-        }
-
-        #map {
-            min-height: 100%;
-        }
-
-        #bus-count {
-            position: absolute;
-            bottom: 10px;
-            left: 10px;
-            background-color: white;
-            padding: 10px;
-            border-radius: 5px;
-            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-            z-index: 1000;
-        }
-
-        .roboto-regular {
-            font-family: "Roboto", sans-serif;
-            font-weight: 400;
-            font-style: normal;
-        }
-
-        #warning {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            padding: 50px 30px;
-            background-color: rgba(255, 255, 255, 0.85);
-            text-align: center;
-            z-index: 2000;
-            width: 70%;
-            border-radius: 5px;
-            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-            display: none;
-            justify-content: center;
-            align-items: center;
-            font-size: 30px;
-        }
-    </style>
     <title>Cyprus bus</title>
 </head>
 <body>
 <div id="map"></div>
-<div id="bus-count" class="roboto-regular">Buses transmit location:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+<div class="info">
+    <div id="bus-count">
+        Buses transmit location:
+    </div>
+    <div class="developer">
+        <div>
+            Roman Iakimenok
+        </div>
+        <div class="developer-icons">
+            <div class="developer-icon">
+                <a href="https://www.linkedin.com/in/roma8ok" target="_blank">
+                    <img src="icons/linkedin.png" width="24" height="24">
+                </a>
+            </div>
+            <div class="developer-icon">
+                <a href="https://t.me/roma8ok" target="_blank">
+                    <img src="icons/telegram.png" width="24" height="24">
+                </a>
+            </div>
+            <div class="developer-icon">
+                <a href="https://github.com/roma8ok/cyprus-bus" target="_blank">
+                    <img src="icons/github.png" width="24" height="24">
+                </a>
+            </div>
+        </div>
+    </div>
 </div>
-<div id="warning" class="roboto-regular">
+<div id="warning">
     <div>
         The data for this service is sourced from the <a href="https://www.data.gov.cy" target="_blank">National
         Opendata Portal</a>.<br><br>

diff --git a/style.css b/style.css
@@ -0,0 +1,60 @@
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: "Roboto", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
+#map {
+    min-height: 100%;
+}
+
+#bus-count {
+    font-size: 18px;
+}
+
+#warning {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 50px 30px;
+    background-color: rgba(255, 255, 255, 0.85);
+    text-align: center;
+    z-index: 2000;
+    width: 70%;
+    border-radius: 5px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+}
+
+.info {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    background-color: white;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+}
+
+.developer {
+    padding-top: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.developer-icons {
+    display: flex;
+}
+
+.developer-icon {
+    padding-left: 12px;
+}