Merge pull request #62 from bendsouza2/enhancement/home-title

make title separate block + add translations
bendsouza2 · Jan 24, 2025 · 3551ffb · 3551ffb
2 parents 6b24c69 + df77124
commit 3551ffb
Showing 1 changed file with 149 additions and 24 deletions.
diff --git a/frontend/src/components/LatestVideo.vue b/frontend/src/components/LatestVideo.vue
@@ -1,8 +1,16 @@
 <template>
   <div class="background-container">
     <div class="top-content">
-      <h1>Spanish Word of the Day</h1>
-      <h2 v-if="currentVideo.upload_time">{{ currentVideo.upload_time }}</h2>
+      <button 
+        @click="toggleLanguage" 
+        class="language-switch-btn"
+      >
+        {{ isSpanish ? translations.switchLanguage.es : translations.switchLanguage.en }}
+      </button>
+      <h1>{{ isSpanish ? translations.title.es : translations.title.en }}</h1>
+      <h2 v-if="currentVideo.upload_time">
+        {{ translateDate(currentVideo.upload_time) }}
+      </h2>
     </div>
 
     <div class="carousel-container">
@@ -44,31 +52,44 @@
               v-if="index === currentIndex" 
               class="interactive-elements"
             >
-              <div 
-                :class="['flip-button', { flipped: flippedStates[index] }]" 
-                @click="flipButton(index)"
-              >
-                <div class="front">Word of the Day!</div>
-                <div class="back">{{ video.word }}</div>
-              </div>
+            <div 
+            :class="['flip-button', { flipped: flippedStates[index] }]" 
+            @click="flipButton(index)"
+          >
+            <div class="front">
+              {{ isSpanish ? translations.flipButton.es : translations.flipButton.en }}
+            </div>
+            <div class="back">{{ video.word }}</div>
+          </div>
 
               <div class="sentence-container">
                 <div class="sentence-title">
-                  <strong>Example Usage</strong>
+                <strong>
+                  {{ isSpanish ? translations.exampleUsage.es : translations.exampleUsage.en }}
+                </strong>
                 </div>
                 <div 
-                  :class="['sentence spanish-sentence', { hovered: revealedStates[index]?.sentenceSpanish }]"
-                  @click="revealSentence(index, 'sentenceSpanish')"
-                >
-                  <div v-if="!revealedStates[index]?.sentenceSpanish" class="front">See an example in Spanish</div>
-                  <div v-if="revealedStates[index]?.sentenceSpanish" class="back">{{ video.sentence }}</div>
-                </div>
-                <div
-                  :class="['sentence english-sentence', { hovered: revealedStates[index]?.sentenceEnglish }]"
-                  @click="revealSentence(index, 'sentenceEnglish')"
-                >
-                  <div v-if="!revealedStates[index]?.sentenceEnglish" class="front">Reveal the English translation</div>
-                  <div v-if="revealedStates[index]?.sentenceEnglish" class="back">{{ video.translated_sentence }}</div>
+              :class="['sentence spanish-sentence', { hovered: revealedStates[index]?.sentenceSpanish }]"
+              @click="revealSentence(index, 'sentenceSpanish')"
+            >
+              <div v-if="!revealedStates[index]?.sentenceSpanish" class="front">
+                {{ isSpanish ? translations.seeSentence.es : translations.seeSentence.en }}
+              </div>
+              <div v-if="revealedStates[index]?.sentenceSpanish" class="back">
+                {{ video.sentence }}
+              </div>
+            </div>
+
+            <div
+              :class="['sentence english-sentence', { hovered: revealedStates[index]?.sentenceEnglish }]"
+              @click="revealSentence(index, 'sentenceEnglish')"
+            >
+              <div v-if="!revealedStates[index]?.sentenceEnglish" class="front">
+                {{ isSpanish ? translations.revealTranslation.es : translations.revealTranslation.en }}
+              </div>
+              <div v-if="revealedStates[index]?.sentenceEnglish" class="back">
+                {{ video.translated_sentence }}
+              </div>
                 </div>
               </div>
             </div>
@@ -98,6 +119,86 @@ const currentIndex = ref(0);
 const loading = ref(true);
 const flippedStates = ref({});
 const revealedStates = ref({});
+const isSpanish = ref(false);
+
+const translations = {
+  title: {
+    en: "Spanish Word of the Day",
+    es: "Palabra Del Día"
+  },
+  flipButton: {
+    en: "Word of the Day!",
+    es: "Palabra del Día!"
+  },
+  seeSentence: {
+    en: "See an example in Spanish",
+    es: "Ver un ejemplo en español"
+  },
+  revealTranslation: {
+    en: "Reveal the English translation",
+    es: "Ver la traducción al inglés"
+  },
+  switchLanguage: {
+    en: "Switch to Spanish",
+    es: "Cambiar al inglés"
+  },
+  exampleUsage: {
+    en: "Example Usage",
+    es: "Ejemplo de Uso"
+  }
+};
+
+const languageMap = {
+  days: {
+    en: {
+      "Monday": "lunes",
+      "Tuesday": "martes",
+      "Wednesday": "miércoles",
+      "Thursday": "jueves",
+      "Friday": "viernes",
+      "Saturday": "sábado",
+      "Sunday": "domingo",
+    }
+  },
+  months: {
+    en: {
+      "January": "enero",
+      "February": "febrero",
+      "March": "marzo",
+      "April": "abril",
+      "May": "mayo",
+      "June": "junio",
+      "July": "julio",
+      "August": "agosto",
+      "September": "septiembre",
+      "October": "octubre",
+      "November": "noviembre",
+      "December": "diciembre"
+    }
+  }
+};
+
+
+function toggleLanguage() {
+  isSpanish.value = !isSpanish.value;
+}
+
+function translateDate(date) {
+  if (!isSpanish.value) return date;
+
+  const parts = date.split(' ');
+  const day = parts[0];
+  const dayNumber = parts[1].replace(/\D/g, ''); 
+  const month = parts[parts.length - 2];
+  const year = parts[parts.length - 1];
+
+  const translatedDay = languageMap.days.en[day] || day;
+  const translatedMonth = languageMap.months.en[month] || month;
+
+  return `${translatedDay} ${dayNumber} ${translatedMonth} ${year}`;
+}
+
+
 
 const currentVideo = computed(() => {
   return videos.value[currentIndex.value] || {};
@@ -283,9 +384,15 @@ onMounted(fetchVideos);
   padding: 20px;              
   margin-bottom: 20px;        
   text-align: center;         
-  width: 100%;                
+  width: 100vw;                
   box-sizing: border-box;     
-  border-bottom: 1px solid #E5A00D;
+  border-bottom: 1px solid #6f6f6f;
+  background-color: rgba(45, 45, 45, 0.5); 
+  background-size: cover;
+  position: relative;
+  margin-left: -50vw;        
+  margin-right: -50vw;        
+  margin-top: -20px;
 }
 
 .top-content h1, .top-content h2 {
@@ -299,6 +406,24 @@ onMounted(fetchVideos);
   margin-bottom: 5px;
 }
 
+.top-content h2 {
+  color: #807f7c;
+  margin-bottom: 5px;
+}
+
+.language-switch-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: #ae852c;
+  color: #333;
+  border: none;
+  padding: 10px 15px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
 .video-container {
   display: flex;             
   flex-direction: column;