accessibility

assets/variables.scss

@@ -24,6 +24,6 @@ $gray500: #6B7280;
 $gray600: #333333;
 $gray700: #374151;
 $gray800: #1F2937;
-$gray900: #111827;
+$gray900: #000;
 
 $red600: #DC2626;

components/articles/ArticleCard.vue

@@ -9,7 +9,7 @@
       <div v-else class="article-image" />
     </div>
 
-    <v-card-title class="pa-0 px-6 mb-4" data-listen-text>
+    <v-card-title class="pa-0 px-6 mb-4 text-uppercase" data-listen-text>
       {{ article.name }}
     </v-card-title>
 

components/complaint/ComplaintPreview.vue

@@ -24,7 +24,7 @@
           <span v-if="victim === 'other'" data-listen-text>&nbsp;și declar că în <span class="font-weight-bold">{{ location.name }}</span>&nbsp;s-au întâmplat următoarele</span>
           <span v-else data-listen-text>
             , mă aflu
-            <span v-if="location.city_label">&nbsp;în <span class="font-weight-bold">{{ location.city_label }}</span>&nbsp; în <span class="font-weight-bold">{{ location.name }}</span>&nbsp;și declar că:</span>
+            <span v-if="location?.city_label">&nbsp;în <span class="font-weight-bold">{{ location.city_label }}</span>&nbsp; în <span class="font-weight-bold">{{ location.name }}</span>&nbsp;și declar că:</span>
           </span>
         </div>
 

components/contact/ContactForm.vue

@@ -65,7 +65,7 @@
                 :error-messages="errors"
               >
                 <template v-slot:label>
-                  <span class="terms-label" data-listen-text>Prin selectarea acestei opțiuni, sunteți de acord cu <span class="font-weight-bold link" @click="openLink1">Politica de confidențialitate</span> și <span class="font-weight-bold link" @click="openLink2">Politica de utilizare cookies.</span></span>
+                  <span class="terms-label" data-listen-text>Prin selectarea acestei opțiuni, sunteți de acord cu <span class="font-weight-bold link" @click="openLink1">Termenii și condițiile</span> și <span class="font-weight-bold link" @click="openLink2">Politica de utilizare cookies.</span></span>
                   <span v-if="errors.length" style="display: none;" data-listen-text>{{ errors[0] }}</span>
                 </template>
               </v-switch>
@@ -148,10 +148,10 @@ export default {
   },
   methods: {
     openLink1() {
-      window.open('https://www.google.com', '_blank')
+      window.open('/termeni-si-conditii', '_blank')
     },
     openLink2() {
-      window.open('https://www.google.com', '_blank')
+      window.open('/politica-cookie', '_blank')
     },
     onError(err) {
       console.log(err)

components/landing/HeroSection.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="hero-section">
-    <div class="shape1" />
-    <div class="shape2" />
-    <div class="shape3" />
-    <div v-if="$vuetify.breakpoint.smAndUp" class="shape4" />
-    <div v-if="$vuetify.breakpoint.smAndUp" class="shape5" />
+<!--    <div class="shape1" />-->
+<!--    <div class="shape2" />-->
+<!--    <div class="shape3" />-->
+<!--    <div v-if="$vuetify.breakpoint.mdAndUp" class="shape4" />-->
+<!--    <div v-if="$vuetify.breakpoint.mdAndUp" class="shape5" />-->
 
     <v-row no-gutters style="height: 100%; z-index: 1;">
       <v-col
@@ -99,13 +99,13 @@ export default {}
     height: 228.62px;
     position: absolute;
     filter: blur(75px);
-    transform: rotate(123.699deg);
+    //transform: rotate(123.699deg);
     fill: rgba(252, 211, 77, 0.30);
   }
 
   .shape2 {
     position: absolute;
-    left: -20px;
+    left: 0px;
     bottom: 69px;
     width: 402px;
     height: 398px;
@@ -137,7 +137,7 @@ export default {}
     height: 299.351px;
     filter: blur(75px);
     position: absolute;
-    transform: rotate(40.1deg);
+    //transform: rotate(40.1deg);
     fill: rgba(245, 158, 11, 0.10);
   }
 
@@ -149,7 +149,7 @@ export default {}
     height: 165.453px;
     filter: blur(75px);
     position: absolute;
-    transform: rotate(40.1deg);
+    //transform: rotate(40.1deg);
     fill: rgba(245, 158, 11, 0.10);
   }
 

components/shared/layout/AppActions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-actions">
+  <div class="app-actions no-accessibility">
     <div class="d-flex flex">
       <v-btn
         text
@@ -38,6 +38,91 @@
         </div>
       </v-btn>
     </div>
+
+    <div class="d-flex flex">
+      <v-menu
+        offset-y
+        offset-x
+        :close-on-content-click="false"
+        content-class="no-accessibility "
+      >
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn
+              text
+              class="accessibility-button"
+              v-on="on"
+          >
+            <div>
+              <v-img
+                  src="/images/website/icons/accessibility-icon.svg"
+                  height="24px"
+                  width="24px"
+              />
+            </div>
+          </v-btn>
+        </template>
+        <v-list
+          class="accessibility-button-list"
+        >
+          <v-list-item
+            @click="accessibilityEvent('increaseFont')"
+            :class="{'active' : accessibility?.fontSize > 0}"
+          >
+            <v-list-item-icon>
+              <v-icon >mdi-plus-thick</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>Mareste fontul</v-list-item-title>
+          </v-list-item>
+          <v-list-item
+            @click="accessibilityEvent('decreaseFont')"
+            :class="{'active' : accessibility?.fontSize < 0}"
+          >
+            <v-list-item-icon>
+              <v-icon >mdi-minus-thick</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>Micsoreaza fontul</v-list-item-title>
+          </v-list-item>
+          <v-list-item
+              @click="accessibilityEvent('blackAndWhite')"
+              :class="{'active' : accessibility?.blackAndWhite}"
+          >
+            <v-list-item-icon>
+              <v-icon >mdi-brightness-6</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>Alb si negru</v-list-item-title>
+          </v-list-item>
+          <v-list-item
+              @click="accessibilityEvent('invert')"
+              :class="{'active' : accessibility?.invert}"
+          >
+            <v-list-item-icon>
+              <v-icon >mdi-invert-colors</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>Inverseaza culorile</v-list-item-title>
+          </v-list-item>
+          <v-list-item
+              @click="accessibilityEvent('linkHighLight')"
+              :class="{'active' : accessibility?.linkHighLight}"
+          >
+            <v-list-item-icon>
+              <v-icon>mdi-format-underline</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>Evidentiza legaturile</v-list-item-title>
+          </v-list-item>
+          <v-list-item
+            @click="accessibilityEvent('resetAll')"
+          >
+            <v-list-item-icon>
+              <v-icon>mdi-replay</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>Reseteaza</v-list-item-title>
+          </v-list-item>
+
+        </v-list>
+      </v-menu>
+
+    </div>
+
   </div>
 </template>
 
@@ -47,15 +132,18 @@ export default {
   data() {
     return {
       isListen: false,
+      accessibility: null
     }
   },
+  mounted() {
+    this.syncAccessibility()
+  },
   methods: {
     handleHide() {
       if (this.isListen) {
         speechSynthesis.cancel()
         this.isListen = false
       }
-
       this.$emit('hide')
     },
     handleListen() {
@@ -90,7 +178,7 @@ export default {
           const spacedNumbers = numbers.map((number) => ` ${number}`)
           text = spacedNumbers.join('')
         }
-        
+
         texts.push(text)
       })
 
@@ -101,6 +189,16 @@ export default {
       utterance.onend = () => {
         this.isListen = false
       }
+    },
+    accessibilityEvent(ev) {
+      this.$emit(ev)
+      this.syncAccessibility()
+    },
+    syncAccessibility() {
+        this.accessibility = localStorage.getItem('accessibility');
+        if (this.accessibility) {
+          this.accessibility = JSON.parse(this.accessibility)
+        }
     }
   }
 }
@@ -113,6 +211,7 @@ export default {
   z-index: 2;
   position: fixed;
   margin-top: 2rem;
+  top: 150px;
 
   .hide-button {
     background: #FFF;
@@ -156,10 +255,40 @@ export default {
       font-family: Inter, sans-serif;
     }
   }
+  .accessibility-button {
+    margin-top: 14px;
+    background: #FFF;
+    height: auto !important;
+    border: 1px solid $gray200;
+    border-radius: 0px 8px 8px 0px;
+    padding: 0.75rem 1rem !important;
+
+    &.active {
+      background: $yellow400;
+      border: 1px solid $yellow600;
+    }
+
+    .v-btn__content {
+      color: $gray900;
+      font-weight: 600;
+      line-height: 20px;
+      text-align: center;
+      font-size: 1.25rem;
+      font-style: normal;
+      font-family: Inter, sans-serif;
+    }
+  }
+
+}
+.accessibility-button-list {
+  .v-list-item.active{
+    background-color: #D97706;
+  }
 }
 
 @media #{map-get($display-breakpoints, 'xs-only')} {
   .app-actions {
+    top: auto;
     bottom: 0;
     width: 100%;
     display: flex;
@@ -169,9 +298,21 @@ export default {
     .hide-button {
       width: 100%;
       border-radius: 0px 8px 0px 0px !important;
+      .v-btn__content {
+        font-size: 14px !important;
+      }
     }
 
     .listen-button {
+      width: 100%;
+      margin-top: 0;
+      border-radius: 0px 0px 0px 0px !important;
+      .v-btn__content{
+        font-size: 14px !important;
+      }
+
+    }
+    .accessibility-button {
       width: 100%;
       margin-top: 0;
       border-radius: 8px 0px 0px 0px !important;

components/shared/layout/AppFooter.vue

@@ -5,7 +5,7 @@
       <v-row>
         <v-col cols="12" lg="7" class="d-flex left-col">
           <div :class="{ 'd-flex flex-column align-center': $vuetify.breakpoint.xsOnly }">
-            <div class="footer-text" style="margin-bottom: 13px;">
+            <div class="footer-text" style="margin-bottom: 30px;">
               Un proiect realizat de
             </div>
             <v-img
@@ -22,7 +22,7 @@
             }"
             :class="{ 'd-flex flex-column align-center': $vuetify.breakpoint.xsOnly }"
           >
-            <div class="footer-text" style="margin-bottom: 35px;">
+            <div class="footer-text" style="margin-bottom: 30px;">
               Proiectat de
             </div>
             <v-img
@@ -39,13 +39,30 @@
             }"
             :class="{ 'd-flex flex-column align-center': $vuetify.breakpoint.xsOnly }"
           >
-            <div class="footer-text">
+            <div class="footer-text" style="margin-bottom: 30px;">
               Cu sprijinul
             </div>
             <v-img
+              contain
               src="/images/website/partners/ministerul-public.png"
               width="150px"
-              height="150px"
+              height="auto"
+            />
+          </div>
+          <div
+            :style="{
+              'margin-top': $vuetify.breakpoint.xsOnly ? '50px' : '0',
+              'margin-left': $vuetify.breakpoint.xsOnly ? '0' : '71px',
+            }"
+            :class="{ 'd-flex flex-column align-center': $vuetify.breakpoint.xsOnly }"
+          >
+            <div class="footer-text" style="margin-bottom: 30px;">
+              Partener media
+            </div>
+            <v-img
+              src="/images/website/partners/partener-media.svg"
+              width="60px"
+              height="auto"
             />
           </div>
         </v-col>
@@ -200,7 +217,7 @@
         text-align: center;
       }
     }
-    
+
     .footer-links {
       flex-direction: column;
     }

components/shared/layout/AppHeader.vue

@@ -54,7 +54,7 @@
           plain
           color="#264767"
           :ripple="false"
-          to="resurse-de-sprijin"
+          to="/resurse-de-sprijin"
           class="app-header-link mr-8"
         >
           Resurse de sprijin
@@ -116,7 +116,6 @@
         </div>
       </div>
     </v-app-bar>
-
     <v-navigation-drawer
       v-model="drawer"
       v-if="$vuetify.breakpoint.smAndDown"
@@ -239,7 +238,7 @@ export default {
 
 .app-drawer {
   z-index: 101;
-  
+
   .v-list-item {
     font-size: 16px;
     color: $gray700;