share photos component

src/components/CountdownComponent.vue

@@ -1,29 +1,23 @@
 <template>
     <vue-countdown tag="div" :time="time" :interval="1000" v-slot="{ days, hours, minutes, seconds }">
-    <div class="time-box">
-
-
-       <div class="time">
-        <div class="time-number">{{ days }}</div>
-        <div class="time-label">{{ t('Tage') }}</div>
-       </div>
-       <div class="time">
-        <div class="time-number">{{ hours }}</div>
-        <div class="time-label">{{ t('Stunden') }}</div>
-       </div>
-       <div class="time">
-        <div class="time-number">{{ minutes }}</div>
-        <div class="time-label">{{ t('Minuten') }}</div>
-       </div>
-       <div class="time">
-        <div class="time-number">{{ seconds }}</div>
-        <div class="time-label">{{ t('Sekunden') }}</div>
-       </div>
-
-     </div>
-
-
-
+      <div class="time-box">
+        <div class="time">
+          <div class="time-number">{{ days }}</div>
+          <div class="time-label">{{ t('Tage') }}</div>
+        </div>
+        <div class="time">
+          <div class="time-number">{{ hours }}</div>
+          <div class="time-label">{{ t('Stunden') }}</div>
+        </div>
+        <div class="time">
+          <div class="time-number">{{ minutes }}</div>
+          <div class="time-label">{{ t('Minuten') }}</div>
+        </div>
+        <div class="time">
+          <div class="time-number">{{ seconds }}</div>
+          <div class="time-label">{{ t('Sekunden') }}</div>
+        </div>
+      </div>
     </vue-countdown>
 </template>
 
@@ -82,12 +76,10 @@
   <script lang="ts">
   import { useI18n } from 'vue-i18n'
   export default {
-    data() {
-      const now = new Date();
-      const newYear = new Date(2025, 6, 11, 14, 30);
-
-      return {
-        time: newYear.getTime() - now.getTime(),
+    props: {
+      time: {
+        type: Number,
+        required: true
       }
     },
     setup() {

src/locales/de.json

@@ -5,5 +5,27 @@
     "Minuten": "Minuten",
     "Sekunden": "Sekunden",
     "heiraten.title": "WIR HEIRATEN",
-    "juli": "JULI"
+    "juli": "JULI",
+    "cookie.banner.link.label": "Cookie-Einstellungen",
+    "cookie.banner.title": "Ihre Privatsphäre ist uns wichtig",
+    "cookie.banner.description": "Wir verwenden Cookies, um Ihre Erfahrung zu verbessern. Indem Sie fortfahren, stimmen Sie unserer Verwendung von Cookies zu.",
+    "cookie.banner.acceptAll": "Alle akzeptieren",
+    "cookie.banner.rejectAll": "Nur essenzielle Cookies akzeptieren",
+    "cookie.banner.customizeSettings": "Einstellungen anpassen",
+    "cookie.banner.privacyPolicy": "Zur Datenschutzerklärung",
+    "cookie.banner.privacyPolicyLink": "https://www.example.com/datenschutz",
+    "cookie.banner.essentialCookies": "Essenzielle Cookies",
+    "cookie.banner.essentialCookiesDescription": "Diese Cookies sind für die grundlegende Funktionalität der Website erforderlich und können nicht deaktiviert werden.",
+    "cookie.banner.analyticsCookies": "Analyse-Cookies",
+    "cookie.banner.analyticsCookiesDescription": "Diese Cookies helfen uns, die Leistung der Website zu verstehen und zu verbessern.",
+    "cookie.settings.title": "Ihre Cookie-Einstellungen",
+    "cookie.settings.description": "Hier können Sie die Kategorien von Cookies auswählen, denen Sie zustimmen möchten. Bitte beachten Sie, dass einige Cookies essenziell für die Funktionalität unserer Webseite sind und nicht deaktiviert werden können.",
+    "cookie.settings.necessaryCookies": "Notwendige Cookies",
+    "cookie.settings.necessaryCookiesDescription": "Diese Cookies sind für den grundlegenden Betrieb der Webseite unerlässlich.",
+    "cookie.settings.analyticsCookies": "Statistik- / Analyse-Cookies",
+    "cookie.settings.analyticsCookiesDescription": "Sammeln anonymisierte Informationen zur Webseitennutzung, z.B. für Google Analytics.",
+    "cookie.settings.savePreferences": "Auswahl speichern",
+    "cookie.settings.back": "Zurück",
+    "heiraten.sharePhotos": "Teile deine Fotos",
+    "heiraten.sharePhotosDescription": "Lade deine schönsten Momente von unserer Hochzeit hoch und teile sie mit uns!"
 }

src/locales/en.json

@@ -5,5 +5,27 @@
     "Minuten": "Minutes",
     "Sekunden": "Seconds",
     "heiraten.title": "WE ARE GETTING MARRIED",
-    "juli": "JULY"
+    "juli": "JULY",
+    "cookie.banner.link.label": "Cookie Settings",
+    "cookie.banner.title": "Your privacy is important to us",
+    "cookie.banner.description": "We use cookies to enhance your experience. By continuing, you agree to our use of cookies.",
+    "cookie.banner.acceptAll": "Accept All",
+    "cookie.banner.rejectAll": "Reject All Non-Essential Cookies",
+    "cookie.banner.customizeSettings": "Customize Settings",
+    "cookie.banner.privacyPolicy": "View Privacy Policy",
+    "cookie.banner.privacyPolicyLink": "https://www.example.com/privacy-policy",
+    "cookie.banner.essentialCookies": "Essential Cookies",
+    "cookie.banner.essentialCookiesDescription": "These cookies are necessary for the basic functionality of the website and cannot be disabled.",
+    "cookie.banner.analyticsCookies": "Analytics Cookies",
+    "cookie.banner.analyticsCookiesDescription": "These cookies help us understand and improve the performance of the website.",
+    "cookie.settings.title": "Your Cookie Preferences",
+    "cookie.settings.description": "Manage your cookie preferences below.",
+    "cookie.settings.necessaryCookies": "Necessary Cookies",
+    "cookie.settings.necessaryCookiesDescription": "These cookies are essential for the website to function properly.",
+    "cookie.settings.analyticsCookies": "Analytics Cookies",
+    "cookie.settings.analyticsCookiesDescription": "These cookies help us analyze user behavior and improve our website.",
+    "cookie.settings.savePreferences": "Save Preferences",
+    "cookie.settings.back": "Back",
+    "heiraten.sharePhotos": "Share Your Photos",
+    "heiraten.sharePhotosDescription": "Upload your favorite moments from our wedding and share them with us!"
 }

src/views/HomeView.vue

@@ -7,11 +7,26 @@
   const { t } = useI18n({
             inheritLocale: true
           })
+  const now = new Date();
+  const newYear = new Date(2025, 6, 6, 11, 13);
+  const time = newYear.getTime() - now.getTime();
 </script>
 
 <template>
   <main>
     <div class="components">
+      <div v-if="time < 0" class="component component-dark">
+        <h2>{{t("heiraten.sharePhotos")}}</h2>
+        <h3>{{t("heiraten.sharePhotosDescription")}}</h3>
+        <div class="button-container">
+          <a class="button" href="https://nextcloud.kornblum.one/s/nbAKwEjnBN2sxsT" target="_blank">
+
+            <img src="@/assets/images/upload icon.png" alt="Share Icon" width="200" height="197"/>
+            {{t("heiraten.sharePhotos")}}
+          </a>
+
+        </div>
+      </div>
       <div class="component component-bg-top"> </div>
       <div class="component">
         <h3>{{t("heiraten.title")}}</h3>
@@ -21,9 +36,11 @@
       </div>
 
       <div class="component component-bg-bottom"> </div>
+
       <Components/>
-      <div class="component component-dark">
-          <Countdown/>
+
+      <div v-if="time > 0" class="component component-dark">
+          <Countdown :time="time"/>
       </div>
       <div class="component component-bg-top"> </div>
       <div class="component component-padding"><Timeline/></div>
@@ -43,4 +60,29 @@ h3{
   padding: 25px;
 }
 
+.button {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #6495ed;
+  color: white;
+  text-decoration: none;
+  border-radius: 5px;
+  text-align: center;
+  font-size: 25px;
+  width: 100%;
+  height: 100%;
+}
+.button img{
+  border-radius: 5px;
+}
+
+.button-container{
+  text-align: center;
+  vertical-align: middle;
+  margin-top: 20px;
+  width: 250px;
+  height: 250px;
+  margin: 0 auto;
+}
+
 </style>