add strava branding

carderne · Apr 15, 2024 · 03060d6 · 03060d6
1 parent d132d97
commit 03060d6
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 6 deletions.
diff --git a/static/main.js b/static/main.js
@@ -27,6 +27,7 @@ map.addControl(
   new maplibregl.NavigationControl({
     showCompass: false,
   }),
+  "bottom-right",
 );
 
 map.on("load", () => {

diff --git a/static/strava-button.png b/static/strava-button.png
diff --git a/static/strava-logo.png b/static/strava-logo.png
diff --git a/static/style.css b/static/style.css
diff --git a/templates/index.html.hbs b/templates/index.html.hbs
@@ -13,6 +13,10 @@
 <body>
 <div id="map" class="w-screen h-screen"></div>
 
+<div class="fixed top-2 right-2 w-1/3 md:w-1/6">
+    <img src="/static/strava-logo.png" alt="Powered by Strava">
+</div>
+
 {{#if logged_in}}
   <div id="legend" class="text-center fixed top-2 left-2 w-2/5 md:w-1/6 text-3xl bg-white/90 p-4 rounded-md shadow-md grid grid-cols-2 grid-rows-3 gap-2">
     <div id="btnRide"  class="cursor-pointer aspect-square bg-[#d5b8da] rounded flex justify-center items-center">🚲</div>
@@ -38,8 +42,8 @@
       </div>
       <p class="text-center">Login to see your Strava stuff on the map (with hexagons!)</p>
       <div class="flex justify-center mt-4">
-        <a href="/auth" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-2 px-6 rounded-md shadow-md transition-colors duration-300 inline-block cursor-pointer">
-          Login
+        <a href="/auth" class="inline-block cursor-pointer">
+          <img src="/static/strava-button.png" alt="Connect with Strava">
         </a>
       </div>
     </div>
@@ -50,8 +54,8 @@
   <div class="bg-white/90 p-8 rounded-lg shadow-lg">
     <p>Authentication error, try logging in again.</p>
     <div class="flex justify-center mt-4">
-      <a href="/auth" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-2 px-6 rounded-md shadow-md transition-colors duration-300 inline-block cursor-pointer">
-        Login
+      <a href="/auth" class="inline-block cursor-pointer">
+        <img src="/static/strava-button.png" alt="Connect with Strava">
       </a>
     </div>
   </div>
@@ -80,11 +84,12 @@
 </div>
 
 <div id="props" class="text-center fixed bottom-2 left-2 w-3/5 md:w-1/6 bg-white/90 p-4 rounded-md shadow-md flex flex-col" style="display:none">
-  <div><a id="p-id" target="_blank" href=""><strong class="text-blue-800" id="p-name"></strong></a></div>
+  <div><strong id="p-name"></strong></div>
   <div class="text-3xl"><span id="p-type"></span></div>
   <div><span id="p-date"></span></div>
   <div><span id="p-distance"></span></div>
   <div><span id="p-moving"></span></div>
+  <div><a id="p-id" target="_blank" href="" style="color:#FC4C02">View on Strava</a></div>
 </div>
 
 <script>