feat(dropdown): add dropdown menu to service links

Enhanced the UI by adding dropdown menus to service links. This includes new styles for dropdowns in CSS and corresponding changes in the HTML templates. Also, extended `services.json` to support alternative links with Tor options for better accessibility.

Adjusted the maximum width for service cards to improve layout on larger screens.

assets/css/base.css

@@ -208,4 +208,59 @@ h5 {
       display: none;
     }
   }
+}
+
+/* Dropdown Styles */
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 100%;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  text-align: left;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.dropdown-toggle-area {
+  display: inline-block;
+  cursor: pointer;
+  color: white;
+}
+
+.btn-primary:has(.dropdown-toggle-area) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.btn-primary .main-link {
+  flex-grow: 1;
+  padding: 10px;
+  text-align: center;
+  color: white;
+  text-decoration: none;
+}
+
+.btn-primary .main-link:hover {
+  text-decoration: none;
+  color: black;
 }

data/services.json

@@ -4,12 +4,18 @@
             "name": "Matrix",
             "url": "https://element.private.coffee",
             "short_description": "Matrix is an open network for secure, decentralized communication.",
-            "long_description": "Private.coffee runs a Matrix server. You can use it to chat with other people at Private.coffee or around the world. Use it with a client of your choice, with https://matrix.private.coffee as the homeserver, or use our web client.",
+            "long_description": "Private.coffee runs a Matrix server. You can use it to chat with other people at Private.coffee or around the world. Use it with a client of your choice, or use our Element web client.",
             "status": "OK",
             "links": [
                 {
-                    "name": "Go to Element (Web client)",
+                    "name": "Go to Element",
-                    "url": "https://element.private.coffee"
+                    "url": "https://element.private.coffee",
+                    "alternatives": [
+                        {
+                            "name": "Tor",
+                            "url": "http://element.coffee2m3bjsrrqqycx6ghkxrnejl2q6nl7pjw2j4clchjj6uk5zozad.onion"
+                        }
+                    ]
                 }
             ],
             "icon": "matrix-logo",

templates/index.html

@@ -26,7 +26,13 @@
           xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:svg="http://www.w3.org/2000/svg"
-          style="max-width: 400px;filter: brightness(1.5);-webkit-filter: drop-shadow( 4px 4px 3px rgba(0, 0, 0, .7));filter: drop-shadow( 4px 4px 3px rgba(0, 0, 0, .7)) brightness(1.5);max-height: 400px;"
+          style="
+            max-width: 400px;
+            filter: brightness(1.5);
+            -webkit-filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.7));
+            filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.7)) brightness(1.5);
+            max-height: 400px;
+          "
         >
           <defs id="defs6" />
           <sodipodi:namedview
@@ -95,31 +101,47 @@
     </div>
     <div class="py-5 p-lg-5">
       <div
-        class="row row-cols-1 row-cols-md-2 mx-auto"
+        class="row row-cols-1 row-cols-md-2 row-cols-lg-3 mx-auto"
-        style="max-width: 900px"
+        style="max-width: 1200px"
       >
         {% for service in services.services %} {% if not
         service.exclude_from_index %}
         <div class="col mb-5">
           <div class="card shadow-sm">
             <div class="card-body px-4 py-5 px-md-5">
+              {% if service.icon %}
               <div
                 class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
                 style="top: 1rem; right: 1rem; position: absolute"
               >
-                {% if service.icon %}{{ service.icon | icon | safe }}{% endif %}
+                {{ service.icon | icon | safe }}
               </div>
+              {% endif %}
               <h5 class="fw-bold card-title">{{ service.name }}</h5>
               <p class="text-muted card-text mb-4">
                 {{ service.long_description }}
               </p>
-              {% for link in service.links %}
+              {% for link in service.links %} {% if link.alternatives %}
+              <div class="dropdown">
+                <div class="btn btn-primary shadow">
+                  <a class="main-link" href="{{ link.url }}">
+                    {{ link.name }}
+                  </a>
+                  <div class="dropdown-toggle-area">&#9660;</div>
+                </div>
+                <div class="dropdown-content">
+                  {% for alternative in link.alternatives %}
+                  <a href="{{ alternative.url }}">{{ alternative.name }}</a>
+                  {% endfor %}
+                </div>
+              </div>
+              {% else %}
               <a
                 class="btn btn-primary shadow w-100 text-center"
                 href="{{ link.url }}"
                 >{{ link.name }}</a
               >
-              {% endfor %}
+              {% endif %} {% endfor %}
             </div>
           </div>
         </div>