add EveryDoor as option to report

webapp/src/components/layout/Footer.vue

@@ -57,7 +57,7 @@
         <div>
           <p>&copy; {{ currentYear }} DeFlock. All Rights Reserved</p>
           <p>Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank" style="color: unset; font-weight: normal;">OpenStreetMap contributors</a></p>
-          <p class="mt-4">v1.0.4</p>
+          <p class="mt-4">v1.0.5</p>
         </div>
         </v-col>
       </v-row>

webapp/src/components/layout/Hero.vue

@@ -1,12 +1,25 @@
 <template>
   <v-container fluid>
-    <v-row justify="center" class="hero text-center mb-4" :style="`background: url('${imageUrl}') no-repeat center center / cover;`">
+    <v-row
+      justify="center"
+      class="hero text-center mb-4"
+      :style="`background: url('${imageUrl}') no-repeat center center / cover; --hero-opacity: ${opacity};`"
+    >
       <v-col cols="12" md="8">
-      <h1 class="mb-4">{{ title }}</h1>
-      <p class="mb-4">
-        {{ description }}
-      </p>
-      <v-btn v-if="buttonText" :href="buttonHref" :to="buttonTo" :target color="rgb(18, 151, 195)" class="mt-4">{{ buttonText }}</v-btn>
+        <h1 class="mb-4">{{ title }}</h1>
+        <p class="mb-4">
+          {{ description }}
+        </p>
+        <v-btn
+          v-if="buttonText"
+          :href="buttonHref"
+          :to="buttonTo"
+          :target
+          color="rgb(18, 151, 195)"
+          class="mt-4"
+        >
+          {{ buttonText }}
+        </v-btn>
       </v-col>
     </v-row>
   </v-container>
@@ -22,9 +35,13 @@ const props = defineProps({
   buttonText: String,
   buttonTo: String,
   buttonHref: String,
+  opacity: {
+    type: Number,
+    default: 0.6,
+  },
 });
 
-const target = computed(() => 
+const target = computed(() =>
   props.buttonHref && !props.buttonHref.startsWith('#') ? '_blank' : '_self'
 );
 </script>
@@ -34,21 +51,21 @@ const target = computed(() =>
   color: white;
   padding: 100px 0 !important;
   position: relative;
-  }
+}
 
- .hero::before {
-   content: '';
-   position: absolute;
-   top: 0;
-   left: 0;
-   width: 100%;
-   height: 100%;
-   background: rgba(0, 0, 0, 0.6);
-   z-index: 1;
- }
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, var(--hero-opacity));
+  z-index: 1;
+}
 
- .hero > * {
-   position: relative;
-   z-index: 2;
+.hero > * {
+  position: relative;
+  z-index: 2;
 }
 </style>