Improve landing

- Not pixel perfect, but MVP of MVPs
sos-lapsikyla · Nov 18, 2024 · ca73617 · ca73617
1 parent b759e6b
commit ca73617
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 33 deletions.
diff --git a/src/landing/index.html b/src/landing/index.html
@@ -16,44 +16,46 @@
          <div class="top-container">
             <div class="card" >
                <div class="ylitse-logo"></div>
-               <p>Kohtaa ihmisiä, jotka ovat olleet samassa tilanteessa. He tietävät, mistä puhut.</p>
+               <p localization-key="cardText"></p>
                <div class="card-buttons">
-                  <a class="button" href="../login/">Kirjaudu</a>
-                  <a class="button" href="../register/">Rekisteroidy</a>
+                  <a class="button" href="../login/" localization-key="loginButton"></a>
+                  <a class="button" href="../register/" localization-key="registerButton"></a>
                </div>
             </div>
             <div class="art-jumbo-container"></div>
          </div>
          <div class="middle-container">
             <div class="middle-card">
                <div class="middle-left-content">
+                  <div class="info-ring">
+                     <p class="white" dynamic-localization-key="infoRing1"></p>
+                  </div>
+                  <div class="info-ring">
+                     <p class="white" dynamic-localization-key="infoRing2"></p>
+                  </div>
                   <div class="middle-illustration"></div>
                </div>
                <div class="middle-right-content">
-                  <h2>Mika Ylitse?</h2>
-                  <p class="white">Maksuttomassa Ylitse-palvelussa SOS-Lapsikylän valmentamat mentorit auttavat sinua henkilökohtaisessa tilanteessasi luottamuksellisesti — saat apua ajasta ja paikasta riippumatta. Vertaismentori voi olla sinulle juttukaveri, opastaja, ymmärtävä kuuntelija tai sparraaja elämän erilaisissa tilanteissa.</p>
-                  <h2>Mista voin jutella mentorin kanssa?</h2>
-                  <p class="white">
-                     Voit jutella vertaismentoreiden kanssa mistä tahansa mieltäsi painavasta asiasta.
-                  </p>
-                  <h2>Mita jos haluan kayttaa palvelua anonyymisti?</h2>
-                  <p class="white">
-                     Voit käyttää sovellusta nimettömästi. Valitse vain nimimerkki, josta sinua ei voi tunnistaa. Keskustelut mentoreiden kanssa ovat luottamuksellisia.
-                  </p>
+                  <h2 localization-key="middleInfo1Heading"></h2>
+                  <p class="white" localization-key="middleInfo1Text"></p>
+                  <h2 localization-key="middleInfo2Heading"></h2>
+                  <p class="white" localization-key="middleInfo2Text"></p>
+                  <h2 localization-key="middleInfo3Heading"></h2>
+                  <p class="white" localization-key="middleInfo3Text"></p>
                </div>
             </div>
             <div class="middle-bottom-footer">
-               <p>Aloita palvelun kaytto rekisteroitymalla</p>
-               <a class="button" href="../register/">Rekisteroidy</a>
+               <p localization-key="middleInfoFooter"></p>
+               <a class="button" href="../register/" localization-key="registerButton"></a>
             </div>
          </div>
       </main>
-       <footer>
+      <footer>
          <p localization-key="footer">
          </p>
          <div class="footer-logo">
          </div>
-       </footer>
+      </footer>
       <script src="index.js"></script>
       <script src="../static/localization.js"></script>
    </body>

diff --git a/src/landing/index.js b/src/landing/index.js
@@ -0,0 +1,28 @@
+(async function (_window, document) {
+  const mentorsResponse = await fetch('/api/mentors').then(response =>
+    response.json(),
+  );
+  const mentorsAmount = mentorsResponse.resources.length;
+  const yearsOfService = new Date().getFullYear() - 2018;
+
+  const getInfoLocalizations = (mentorAmount, yearsOfService) => ({
+    en: {
+      infoRing1: `${mentorAmount} mentoria`,
+      infoRing2: `keskusteluja jo ${yearsOfService} vuotta`,
+    },
+    fi: {
+      infoRing1: `${mentorAmount} mentoria`,
+      infoRing2: `keskusteluja jo ${yearsOfService} vuotta`,
+    },
+  });
+
+  const infoLocalizations = getInfoLocalizations(mentorsAmount, yearsOfService);
+
+  for (const key of ['infoRing1', 'infoRing2']) {
+    const element = document.querySelector(
+      `[dynamic-localization-key="${key}"]`,
+    );
+    let translation = infoLocalizations['fi'][key];
+    element.innerText = translation;
+  }
+})(window, document);
diff --git a/src/landing/styles.css b/src/landing/styles.css
@@ -127,6 +127,21 @@ button:visited {
 .middle-left-content {
   flex: 1;
   position: relative;
+  display: flex;
+  justify-content: space-evenly;
+  padding-top: 2rem;
+}
+
+.info-ring {
+ border: 6px blue solid;
+ width: 160px;
+ height: 160px;
+ border-radius: 50%;
+ border-color: #ffffff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
 }
 
 .middle-illustration {
@@ -141,7 +156,7 @@ button:visited {
 
 .middle-right-content {
   flex: 1;
-  padding: 0 1rem 0 0;
+  padding: 0 2rem 0 0;
 }
 
 .middle-bottom-footer {

diff --git a/src/static/locales/en/landing.json b/src/static/locales/en/landing.json
@@ -0,0 +1,14 @@
+{
+  "cardText": "Kohtaa ihmisiä, jotka ovat olleet samassa tilanteessa. He tietävät, mistä puhut.",
+  "footer": "Provided by",
+  "loginButton": "Login",
+  "middleInfo1Heading": "Mika Ylitse?",
+  "middleInfo1Text": "Maksuttomassa Ylitse-palvelussa SOS-Lapsikylän valmentamat mentorit auttavat sinua henkilökohtaisessa tilanteessasi luottamuksellisesti — saat apua ajasta ja paikasta riippumatta. Vertaismentori voi olla sinulle juttukaveri, opastaja, ymmärtävä kuuntelija tai sparraaja elämän erilaisissa tilanteissa.",
+  "middleInfo2Heading": "Mista voin jutella mentorin kanssa?",
+  "middleInfo2Text": "Voit jutella vertaismentoreiden kanssa mistä tahansa mieltäsi painavasta asiasta.",
+  "middleInfo3Heading": "Mita jos haluan kayttaa palvelua anonyymisti",
+  "middleInfo3Text": "Voit käyttää sovellusta nimettömästi. Valitse vain nimimerkki, josta sinua ei voi tunnistaa. Keskustelut mentoreiden kanssa ovat luottamuksellisia.",
+  "middleInfoFooter": "Aloita palvelun kaytto rekisteroitymalla",
+  "pageTitle": "Ylitse MentorApp",
+  "registerButton": "Register"
+}
diff --git a/src/static/locales/fi/landing.json b/src/static/locales/fi/landing.json
@@ -0,0 +1,14 @@
+{
+  "cardText": "Kohtaa ihmisiä, jotka ovat olleet samassa tilanteessa. He tietävät, mistä puhut.",
+  "footer": "Palvelun tarjoaa",
+  "loginButton": "Kirjaudu",
+  "middleInfo1Heading": "Mika Ylitse?",
+  "middleInfo1Text": "Maksuttomassa Ylitse-palvelussa SOS-Lapsikylän valmentamat mentorit auttavat sinua henkilökohtaisessa tilanteessasi luottamuksellisesti — saat apua ajasta ja paikasta riippumatta. Vertaismentori voi olla sinulle juttukaveri, opastaja, ymmärtävä kuuntelija tai sparraaja elämän erilaisissa tilanteissa.",
+  "middleInfo2Heading": "Mista voin jutella mentorin kanssa?",
+  "middleInfo2Text": "Voit jutella vertaismentoreiden kanssa mistä tahansa mieltäsi painavasta asiasta.",
+  "middleInfo3Heading": "Mita jos haluan kayttaa palvelua anonyymisti",
+  "middleInfo3Text": "Voit käyttää sovellusta nimettömästi. Valitse vain nimimerkki, josta sinua ei voi tunnistaa. Keskustelut mentoreiden kanssa ovat luottamuksellisia.",
+  "middleInfoFooter": "Aloita palvelun kaytto rekisteroitymalla",
+  "pageTitle": "Ylitse MentorApp",
+  "registerButton": "Rekisteroidy"
+}
diff --git a/src/static/localization.js b/src/static/localization.js
@@ -1,8 +1,18 @@
 (function (document) {
-  const page = window.location.toString().includes('login')
-    ? 'login'
-    : 'register';
-
+  const getPage = path => {
+    switch (path) {
+      case '/login/': {
+        return 'login';
+      }
+      case '/register/': {
+        return 'register';
+      }
+      default: {
+        return 'landing';
+      }
+    }
+  };
+  const page = getPage(window.location.pathname);
   let translations = {};
 
   const enButton = document.getElementById('en-button');
@@ -25,9 +35,11 @@
   };
 
   const styleButton = (button, color, fontWeight, pointerEvents) => {
-    button.style.color = color;
-    button.style.fontWeight = fontWeight;
-    button.style.pointerEvents = pointerEvents;
+    if (button) {
+      button.style.color = color;
+      button.style.fontWeight = fontWeight;
+      button.style.pointerEvents = pointerEvents;
+    }
   };
 
   const showClass = className =>
@@ -71,13 +83,17 @@
     setLocale('fi');
   });
 
-  enButton.onclick = event => {
-    event.preventDefault();
-    setLocale('en');
-  };
+  if (enButton) {
+    enButton.onclick = event => {
+      event.preventDefault();
+      setLocale('en');
+    };
+  }
 
-  fiButton.onclick = event => {
-    event.preventDefault();
-    setLocale('fi');
-  };
+  if (fiButton) {
+    fiButton.onclick = event => {
+      event.preventDefault();
+      setLocale('fi');
+    };
+  }
 })(document);