update to yivi style

privacybydesign · Dec 4, 2024 · 04be347 · 04be347
1 parent 1657d96
commit 04be347
Show file tree

Hide file tree

Showing 27 changed files with 255 additions and 172 deletions.
diff --git a/build_artifacts.sh b/build_artifacts.sh
@@ -17,14 +17,14 @@ for lang in 'nl' 'en'; do
   # Copy demos in the right language directory
   mkdir -p "$DIR/build/$lang"
 
-  for f in "$DIR"/*/; do
+  for f in "$DIR"/demos/*/; do
     if echo "$f" | grep -q '/build/\|/vendor/\|/assets/\|node_modules/\|/data'; then
       continue
     fi
 
-    demoname=$(echo "$f" | cut -d'/' -f 2)
+    demoname=$(echo "$f" | cut -d'/' -f 3)
     # Retrieve demo name in the particular language
-    source ./"$demoname"/name.sh
+    source ./demos/"$demoname"/name.sh
     eval translateddemoname=\$$lang
     demodir="$DIR/build/$lang/$translateddemoname"
     cp -r "$f" "$demodir"

diff --git a/demos/18plus/18plusdemo.js b/demos/18plus/18plusdemo.js
@@ -1,4 +1,4 @@
-$.getScript('../start_session.js', function() {
+$.getScript('/start_session.js', function() {
     let success_fun = function(data) {
         let attr = data.disclosed[0][0].rawvalue.toLowerCase();
         if(attr === 'yes' || attr === 'ja') {

diff --git a/demos/18plus/index.en.html b/demos/18plus/index.en.html
@@ -5,17 +5,21 @@
         <meta charset="utf-8"/>
         <title>18+ Yivi demo</title>
 
-        <link rel="stylesheet" href="../assets/bootstrap.min.css"/>
+        <link rel="stylesheet" href="../../assets/bootstrap.min.css"/>
+        <link href="../../resources/style.css" rel="stylesheet"/>
 
-        <script src="../assets/jquery.min.js" defer></script>
-        <script src="../assets/yivi.js" defer></script>
+        <script src="../../assets/jquery.min.js" defer></script>
+        <script src="../../assets/yivi.js" defer></script>
         <script src="messages.en.js" defer></script>
         <script src="18plusdemo.js" defer></script>
     </head>
     <body>
+        <header>
+            <h1>Age verification with Yivi</h1>
+        </header>
 
-<div style="margin:auto" class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3" id="main">
-<h1>Age verification with Yivi</h1>
+<div class="container mt-5" id="main">
+            
 
 <div id="result_status"></div>
 
@@ -38,7 +42,7 @@ <h1>Age verification with Yivi</h1>
 </p>
 
 <div style="text-align: center">
-    <button class="btn btn-primary" id="try_irma_18btn">Older than 18 check</button>
+    <button class="custom-button" id="try_irma_18btn">Older than 18 check</button>
 </div>
 
 <p>
@@ -71,7 +75,7 @@ <h1>Age verification with Yivi</h1>
 </p>
 
 <p>
-<a href="../index.html">Back</a> to
+<a href="../../">Back</a> to
 the Yivi demo overview.
 </p>
 

diff --git a/demos/18plus/index.nl.html b/demos/18plus/index.nl.html
@@ -5,16 +5,20 @@
     <meta charset="utf-8"/>
     <title>18+ check met Yivi</title>
 
-    <link rel="stylesheet" href="../assets/bootstrap.min.css"/>
+    <link rel="stylesheet" href="../../assets/bootstrap.min.css"/>
+    <link href="../../resources/style.css" rel="stylesheet"/>
 
-    <script src="../assets/jquery.min.js" defer></script>
-    <script src="../assets/yivi.js" defer></script>
+    <script src="../../assets/jquery.min.js" defer></script>
+    <script src="../../assets/yivi.js" defer></script>
     <script src="messages.nl.js" defer></script>
     <script src="18plusdemo.js" defer></script>
 </head>
 <body>
+    <header>
+        <h1>Leeftijdscontrole met Yivi</h1>
+    </header>
 
-<div style="margin:auto" class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3" id="main">
+<div class="container mt-5" id="main">
 <h1>Leeftijdscontrole met Yivi</h1>
 
 <div id="result_status"></div>
@@ -39,7 +43,7 @@ <h1>Leeftijdscontrole met Yivi</h1>
 </p>
 
 <div style="text-align: center">
-    <button class="btn btn-primary" id="try_irma_18btn">Ouder dan 18 check</button>
+    <button class="custom-button" id="try_irma_18btn">Ouder dan 18 check</button>
 </div>
 
 <p>
@@ -80,7 +84,7 @@ <h1>Leeftijdscontrole met Yivi</h1>
 </p>
 
 <p>
-<a href="https://privacybydesign.foundation/demo/">Terug</a> naar
+<a href="../../">Terug</a> naar
 het Yivi demo overzicht.
 </p>
 

diff --git a/demos/address/adresdemo.js b/demos/address/adresdemo.js
@@ -1,4 +1,4 @@
-$.getScript('../start_session.js', function() {
+$.getScript('/start_session.js', function() {
     let success_fun = function(data) {
         let i = 0;
         let adres = data.disclosed[0][i++].rawvalue;

diff --git a/demos/address/index.en.html b/demos/address/index.en.html
@@ -5,10 +5,12 @@
         <meta charset="utf-8"/>
         <title>Address verification demo</title>
 
-        <link rel="stylesheet" href="../assets/bootstrap.min.css"/>
+        <link rel="stylesheet" href="../../assets/bootstrap.min.css"/>
+        <link href="../../resources/style.css" rel="stylesheet"/>
 
-        <script src="../assets/jquery.min.js" defer></script>
-        <script src="../assets/yivi.js" defer></script>
+
+        <script src="../../assets/jquery.min.js" defer></script>
+        <script src="../../assets/yivi.js" defer></script>
         <script src="messages.en.js" defer></script>
         <script src="adresdemo.js" defer></script>
 
@@ -23,10 +25,10 @@
 </style>
 
     </head>
-    <body>
+<body>
+  <header> <h1>Address form-filling with Yivi</h1> </header>
 
-<div style="margin:auto" class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3" id="main">
-<h1>Address form-filling with Yivi</h1>
+<div class="container mt-5" id="main">
 
 <div id="result_status"></div>
 
@@ -54,7 +56,7 @@ <h1>Address form-filling with Yivi</h1>
   <tr>
     <td> <b>Zip code</b> </td>
     <td> <input id = "postcode_regel" disabled> </td>
-    <td><button class="btn btn-primary" id="try_irma_adresbtn">Fill in with Yivi</button></td>
+    <td><button class="custom-button" id="try_irma_adresbtn">Fill in with Yivi</button></td>
   </tr>
   <tr>
     <td> <b>City</b> </td>
@@ -82,7 +84,7 @@ <h1>Address form-filling with Yivi</h1>
 
 
 <p>
-<a href="../index.html">Back</a> to
+<a href="../../">Back</a> to
 the Yivi demo overview.
 </p>
 

diff --git a/demos/address/index.nl.html b/demos/address/index.nl.html
@@ -5,10 +5,12 @@
         <meta charset="utf-8"/>
         <title>Adres verificatie demo</title>
 
-        <link rel="stylesheet" href="../assets/bootstrap.min.css"/>
+        <link rel="stylesheet" href="../../assets/bootstrap.min.css"/>
+        <link href="../../resources/style.css" rel="stylesheet"/>
 
-        <script src="../assets/jquery.min.js" defer></script>
-        <script src="../assets/yivi.js" defer></script>
+
+        <script src="../../assets/jquery.min.js" defer></script>
+        <script src="../../assets/yivi.js" defer></script>
         <script src="messages.nl.js" defer></script>
         <script src="adresdemo.js" defer></script>
 
@@ -24,9 +26,11 @@
 
     </head>
     <body>
+      <header>
+        <h1>Adres formulier invullen met IRMA</h1>
+      </header>
 
-      <div style="margin:auto" class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3" id="main">
-	<h1>Adres formulier invullen met IRMA</h1>
+      <div class="container mt-5" id="main">
 
 	<div id="result_status"></div>
 
@@ -56,7 +60,7 @@ <h1>Adres formulier invullen met IRMA</h1>
   <tr>
     <td> <b>Postcode</b> </td>
     <td> <input id = "postcode_regel" disabled> </td>
-    <td><button class="btn btn-primary" id="try_irma_adresbtn">Vul in met IRMA</button></td>
+    <td><button class="custom-button" id="try_irma_adresbtn">Vul in met IRMA</button></td>
   </tr>
   <tr>
     <td> <b>Plaats</b> </td>
@@ -95,7 +99,7 @@ <h1>Adres formulier invullen met IRMA</h1>
 
 
 <p>
-<a href="../index.html">Terug</a> naar
+<a href="../../">Terug</a> naar
 het IRMA demo overzicht.
 </p>
 

diff --git a/demos/beingalive/beingalivedemo.js b/demos/beingalive/beingalivedemo.js
@@ -1,4 +1,4 @@
-$.getScript('../start_session.js', function() {
+$.getScript('/start_session.js', function() {
     function doVerificationSession() {
         const e = document.getElementById('result');
         e.classList.forEach((label) => {

diff --git a/demos/beingalive/index.en.html b/demos/beingalive/index.en.html
@@ -4,15 +4,19 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta charset="utf-8"/>
     <title>Yivi Attestatio de Vita demo</title>
-    <link rel="stylesheet" href="../assets/bootstrap.min.css"/>
-    <script src="../assets/jquery.min.js" defer></script>
-    <script src="../assets/yivi.js" defer></script>
+    <link rel="stylesheet" href="../../assets/bootstrap.min.css"/>
+    <link href="../../resources/style.css" rel="stylesheet"/>
+
+    <script src="../../assets/jquery.min.js" defer></script>
+    <script src="../../assets/yivi.js" defer></script>
     <script src="messages.en.js" defer></script>
     <script src="beingalivedemo.js" defer></script>
 </head>
 <body>
-<div style="margin:auto" class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3" id="container">
-    <h1>Prove that you are alive with Yivi</h1>
+    <header>
+        <h1>Prove that you are alive with Yivi</h1>
+    </header>
+    <div class="container mt-5">
 
     <p>
         Via this page you can, simply and without costs, produce
@@ -32,7 +36,7 @@ <h3>Reveal personal data</h3>
     </p>
 
     <div style="text-align: center; margin-bottom: 25px">
-        <button class="btn btn-primary" id="verification">Reveal data for Attestatio de Vita</button>
+        <button class="custom-button" id="verification">Reveal data for Attestatio de Vita</button>
     </div>
 
     <h3>Background</h3>
@@ -52,7 +56,7 @@ <h3>Background</h3>
     </ul>
 
 <p>
-<a href="../index.html">Back</a> to
+<a href="../../">Back</a> to
 the Yivi demo overview.
 </p>
 

diff --git a/demos/beingalive/index.nl.html b/demos/beingalive/index.nl.html
@@ -4,9 +4,9 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta charset="utf-8"/>
     <title>Yivi Attestatie de Vita demo</title>
-    <link rel="stylesheet" href="../assets/bootstrap.min.css"/>
-    <script src="../assets/jquery.min.js" defer></script>
-    <script src="../assets/yivi.js" defer></script>
+    <link rel="stylesheet" href="../../assets/bootstrap.min.css"/>
+    <script src="../../assets/jquery.min.js" defer></script>
+    <script src="../../assets/yivi.js" defer></script>
     <script src="messages.nl.js" defer></script>
     <script src="beingalivedemo.js" defer></script>
 </head>
@@ -52,7 +52,7 @@ <h3>Achtergrond</h3>
     </ul>
 
 <p>
-<a href="../index.html">Terug</a> naar
+<a href="../../">Terug</a> naar
 het Yivi demo overzicht.
 </p>
 

diff --git a/demos/irmaTubePremium/index.en.html b/demos/irmaTubePremium/index.en.html
@@ -5,17 +5,20 @@
         <meta charset="utf-8"/>
         <title>YiviTube Premium demo</title>
 
-        <link href="../assets/bootstrap.min.css" rel="stylesheet"/>
+        <link href="../../assets/bootstrap.min.css" rel="stylesheet"/>
+        <link href="../../resources/style.css" rel="stylesheet"/>
 
-        <script src="../assets/jquery.min.js" defer></script>
-        <script src="../assets/yivi.js" defer></script>
+        <script src="../../assets/jquery.min.js" defer></script>
+        <script src="../../assets/yivi.js" defer></script>
 
         <script src="messages.en.js" defer></script>
         <script src="premiumdemo.js" defer></script>
     </head>
     <body>
-        <div style="margin:auto" class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3" id="main">
-        <h1>Become an YiviTube Premium member</h1>
+        <header>
+            <h1>Become an YiviTube Premium member</h1>
+        </header>
+        <div class="container mt-5" id="main">
 
         <div id="result_status"></div>
 
@@ -44,13 +47,13 @@ <h1>Become an YiviTube Premium member</h1>
         <div style="margin-top: 1em; margin-bottom: 1em; text-align: center">
             <tr>
                 <td>
-                    <button style="margin: 1em" class="btn btn-primary" id="irmatube_premium">Become premium member</button>
+                    <button class="custom-button" id="irmatube_premium">Become premium member</button>
                 </td>
                 <td>
                     &nbsp;&nbsp;&nbsp;
                 </td>
                 <td>
-                    <button style="margin: 1em" class="btn btn-primary" id="watch_premium_contents">Show premium contents</button>
+                    <button class="custom-button" id="watch_premium_contents">Show premium contents</button>
                 </td>
             </tr>
         </div>
@@ -62,7 +65,7 @@ <h1>Become an YiviTube Premium member</h1>
 
 
             <p>
-                <a href="../index.html">Back</a> to
+                <a href="../../">Back</a> to
                 the Yivi demo overview.
             </p>
 

diff --git a/demos/irmaTubePremium/index.nl.html b/demos/irmaTubePremium/index.nl.html
@@ -5,17 +5,20 @@
         <meta charset="utf-8" />
         <title>YiviTube Premium demo</title>
 
-        <link href="../assets/bootstrap.min.css" rel="stylesheet" />
+        <link href="../../assets/bootstrap.min.css" rel="stylesheet" />
+        <link href="../../resources/style.css" rel="stylesheet"/>
 
-        <script src="../assets/jquery.min.js" defer></script>
-        <script src="../assets/yivi.js" defer></script>
+        <script src="../../assets/jquery.min.js" defer></script>
+        <script src="../../assets/yivi.js" defer></script>
 
         <script src="messages.nl.js" defer></script>
         <script src="premiumdemo.js" defer></script>
     </head>
     <body>
-        <div style="margin:auto" class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3" id="main">
+        <header>
             <h1>Word YiviTube Premium lid</h1>
+        </header>
+        <div class="container mt-5" id="main">
 
             <div id="result_status"></div>
 
@@ -46,13 +49,13 @@ <h1>Word YiviTube Premium lid</h1>
             <div style="margin-top: 1em; margin-bottom: 1em; text-align: center">
                 <tr>
                     <td>
-                        <button style="margin: 1em" class="btn btn-primary" id="irmatube_premium">Word YiviTube premium lid</button>
+                        <button class="custom-button" id="irmatube_premium">Word YiviTube premium lid</button>
                     </td>
                     <td>
                         &nbsp;&nbsp;&nbsp;
                     </td>
                     <td>
-                        <button style="margin: 1em" class="btn btn-primary" id="watch_premium_contents">Toon premium
+                        <button class="custom-button" id="watch_premium_contents">Toon premium
                             inhoud</button>
                     </td>
                 </tr>
@@ -67,7 +70,7 @@ <h1>Word YiviTube Premium lid</h1>
 
 
             <p>
-                <a href="https://privacybydesign.foundation/demo/">Terug</a> naar
+                <a href="../../">Terug</a> naar
                 het Yivi demo overzicht.
             </p>
 

diff --git a/demos/irmaTubePremium/premiumdemo.js b/demos/irmaTubePremium/premiumdemo.js
@@ -1,4 +1,4 @@
-$.getScript('../start_session.js', function() {
+$.getScript('/start_session.js', function() {
     let success_issuance_fun = function (data) {
         let name = data.disclosed[0][0].rawvalue;
         $("#main").html(MESSAGES['succeeded-issuance'](name) +