Add more background img/vid examples, and prices

jameel-institute · May 7, 2024 · 3545f62 · 3545f62
1 parent 0e5f641
commit 3545f62
Show file tree

Hide file tree

Showing 19 changed files with 2,711 additions and 17 deletions.
diff --git a/assets/istockphoto-1153207710-640_adpp_is.mp4 b/assets/istockphoto-1153207710-640_adpp_is.mp4
diff --git a/assets/istockphoto-1209805493-1024x1024.jpg b/assets/istockphoto-1209805493-1024x1024.jpg
diff --git a/assets/istockphoto-1224538361-1024x1024.jpg b/assets/istockphoto-1224538361-1024x1024.jpg
diff --git a/assets/istockphoto-1308355965-640_adpp_is.mp4 b/assets/istockphoto-1308355965-640_adpp_is.mp4
diff --git a/assets/istockphoto-1308355965-640x640.jpg b/assets/istockphoto-1308355965-640x640.jpg
diff --git a/assets/istockphoto-1340312559-640_adpp_is.mp4 b/assets/istockphoto-1340312559-640_adpp_is.mp4
diff --git a/assets/istockphoto-1488383063-640_adpp_is.mp4 b/assets/istockphoto-1488383063-640_adpp_is.mp4
diff --git a/input_page/earths/idea1.html b/input_page/earths/idea1.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="../fonts/style.scss">
+  <link rel="stylesheet" href="../../fonts/style.scss">
   <link rel="stylesheet" href="https://unpkg.com/mvp.css"> 
 
   <title>Inputs Idea 1</title>
@@ -491,6 +491,7 @@
       <button id="runAnalysisButton">Run analysis</button>
     </div>
     <h1 class="vertically-bottom">DAEDALUS Explore</h1>
+    <p class="vertically-bottom">Price: AMCharts maps costs £66 'per seat' annually, or £225 where user logins are required to access the site.</p>
   </div>
   <div id="chartdiv"></div>
 </body>

diff --git a/input_page/earths/idea2-natural-earth.html b/input_page/earths/idea2-natural-earth.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="../fonts/style.scss">
+  <link rel="stylesheet" href="../../fonts/style.scss">
   <link rel="stylesheet" href="https://unpkg.com/mvp.css"> 
 
   <title>Inputs Idea 2</title>

diff --git a/input_page/with_background_assets/idea10.html b/input_page/with_background_assets/idea10.html
diff --git a/input_page/with_background_assets/idea11.html b/input_page/with_background_assets/idea11.html
diff --git a/input_page/with_background_assets/idea3.html b/input_page/with_background_assets/idea3.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="../fonts/style.scss">
+  <link rel="stylesheet" href="../../fonts/style.scss">
   <link rel="stylesheet" href="https://unpkg.com/mvp.css"> 
 
   <title>Inputs Idea 3</title>
@@ -16,7 +16,7 @@
   max-height: 100vh;
 }
 .vertically-center {
-  top: 50%;
+  top: 40%;
   transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
@@ -39,8 +39,7 @@
   position: absolute;
   width: 100%;
   height: 100vh;
-  /* background-color: rgba(0, 0, 0, 0); */
-  background: linear-gradient(to top, transparent 70%, rgba(255, 255, 255, 0.4));
+  background-color: rgba(0, 0, 0, 0);
 
   * {
     z-index: 1;
@@ -63,7 +62,7 @@
     /* background-color: rgba(46, 104, 192); */
     padding: 1rem;
     margin-bottom: 0.5rem;
-    /* color: white; */
+    color: white;
 
     /* @media (min-width: 768px) {
       width: unset;
@@ -176,7 +175,7 @@
 }
 
 label {
-  color: black;
+  /* color: black; */
   font-weight: light !important;
 }
 
@@ -209,10 +208,6 @@
   // document.querySelector("#emptyInvestmentOption").selected = true;
 
   originalDisplayValueOfFields = document.getElementById("diseaseField").style.display;
-  document.getElementById("diseaseField").style.display = "none";
-  document.getElementById("responseField").style.display = "none";
-  document.getElementById("investmentField").style.display = "none";
-  runAnalysisButton.style.display = "none";
 
 
   const withButtonsDivs = document.querySelectorAll(".with-buttons");
@@ -273,10 +268,10 @@
 <!-- HTML -->
 <body>
   <div id="overlay">
-    <div id="inputs" class="horizontally-center">
+    <div id="inputs" class="horizontally-center vertically-center">
       <div class="field-row">
         <div class="field with-select">
-          <i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="black"><path d="M51.7 295.1l31.7 6.3c7.9 1.6 16-.9 21.7-6.6l15.4-15.4c11.6-11.6 31.1-8.4 38.4 6.2l9.3 18.5c4.8 9.6 14.6 15.7 25.4 15.7c15.2 0 26.1-14.6 21.7-29.2l-6-19.9c-4.6-15.4 6.9-30.9 23-30.9h2.3c13.4 0 25.9-6.7 33.3-17.8l10.7-16.1c5.6-8.5 5.3-19.6-.8-27.7l-16.1-21.5c-10.3-13.7-3.3-33.5 13.4-37.7l17-4.3c7.5-1.9 13.6-7.2 16.5-14.4l16.4-40.9C303.4 52.1 280.2 48 256 48C141.1 48 48 141.1 48 256c0 13.4 1.3 26.5 3.7 39.1zm407.7 4.6c-3-.3-6-.1-9 .8l-15.8 4.4c-6.7 1.9-13.8-.9-17.5-6.7l-2-3.1c-6-9.4-16.4-15.1-27.6-15.1s-21.6 5.7-27.6 15.1l-6.1 9.5c-1.4 2.2-3.4 4.1-5.7 5.3L312 330.1c-18.1 10.1-25.5 32.4-17 51.3l5.5 12.4c8.6 19.2 30.7 28.5 50.5 21.1l2.6-1c10-3.7 21.3-2.2 29.9 4.1l1.5 1.1c37.2-29.5 64.1-71.4 74.4-119.5zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm144.5 92.1c-2.1 8.6 3.1 17.3 11.6 19.4l32 8c8.6 2.1 17.3-3.1 19.4-11.6s-3.1-17.3-11.6-19.4l-32-8c-8.6-2.1-17.3 3.1-19.4 11.6zm92-20c-2.1 8.6 3.1 17.3 11.6 19.4s17.3-3.1 19.4-11.6l8-32c2.1-8.6-3.1-17.3-11.6-19.4s-17.3 3.1-19.4 11.6l-8 32zM343.2 113.7c-7.9-4-17.5-.7-21.5 7.2l-16 32c-4 7.9-.7 17.5 7.2 21.5s17.5 .7 21.5-7.2l16-32c4-7.9 .7-17.5-7.2-21.5z"/></svg></i>
+          <i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M51.7 295.1l31.7 6.3c7.9 1.6 16-.9 21.7-6.6l15.4-15.4c11.6-11.6 31.1-8.4 38.4 6.2l9.3 18.5c4.8 9.6 14.6 15.7 25.4 15.7c15.2 0 26.1-14.6 21.7-29.2l-6-19.9c-4.6-15.4 6.9-30.9 23-30.9h2.3c13.4 0 25.9-6.7 33.3-17.8l10.7-16.1c5.6-8.5 5.3-19.6-.8-27.7l-16.1-21.5c-10.3-13.7-3.3-33.5 13.4-37.7l17-4.3c7.5-1.9 13.6-7.2 16.5-14.4l16.4-40.9C303.4 52.1 280.2 48 256 48C141.1 48 48 141.1 48 256c0 13.4 1.3 26.5 3.7 39.1zm407.7 4.6c-3-.3-6-.1-9 .8l-15.8 4.4c-6.7 1.9-13.8-.9-17.5-6.7l-2-3.1c-6-9.4-16.4-15.1-27.6-15.1s-21.6 5.7-27.6 15.1l-6.1 9.5c-1.4 2.2-3.4 4.1-5.7 5.3L312 330.1c-18.1 10.1-25.5 32.4-17 51.3l5.5 12.4c8.6 19.2 30.7 28.5 50.5 21.1l2.6-1c10-3.7 21.3-2.2 29.9 4.1l1.5 1.1c37.2-29.5 64.1-71.4 74.4-119.5zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm144.5 92.1c-2.1 8.6 3.1 17.3 11.6 19.4l32 8c8.6 2.1 17.3-3.1 19.4-11.6s-3.1-17.3-11.6-19.4l-32-8c-8.6-2.1-17.3 3.1-19.4 11.6zm92-20c-2.1 8.6 3.1 17.3 11.6 19.4s17.3-3.1 19.4-11.6l8-32c2.1-8.6-3.1-17.3-11.6-19.4s-17.3 3.1-19.4 11.6l-8 32zM343.2 113.7c-7.9-4-17.5-.7-21.5 7.2l-16 32c-4 7.9-.7 17.5 7.2 21.5s17.5 .7 21.5-7.2l16-32c4-7.9 .7-17.5-7.2-21.5z"/></svg></i>
           <div class="select-and-label-container">
             <label>Country</label>
             <select onchange="handleSelectCountryFromDropDown()" id="countrySelect">
@@ -285,7 +280,7 @@
           </div>
         </div>
         <div class="field with-select" id="diseaseField">
-          <i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="black"><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V43.5c0 49.9-60.3 74.9-95.6 39.6L120.2 75C107.7 62.5 87.5 62.5 75 75s-12.5 32.8 0 45.3l8.2 8.2C118.4 163.7 93.4 224 43.5 224H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H43.5c49.9 0 74.9 60.3 39.6 95.6L75 391.8c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l8.2-8.2c35.3-35.3 95.6-10.3 95.6 39.6V480c0 17.7 14.3 32 32 32s32-14.3 32-32V468.5c0-49.9 60.3-74.9 95.6-39.6l8.2 8.2c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-8.2-8.2c-35.3-35.3-10.3-95.6 39.6-95.6H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H468.5c-49.9 0-74.9-60.3-39.6-95.6l8.2-8.2c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-8.2 8.2C348.3 118.4 288 93.4 288 43.5V32zM176 224a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm128 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg></i>
+          <i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V43.5c0 49.9-60.3 74.9-95.6 39.6L120.2 75C107.7 62.5 87.5 62.5 75 75s-12.5 32.8 0 45.3l8.2 8.2C118.4 163.7 93.4 224 43.5 224H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H43.5c49.9 0 74.9 60.3 39.6 95.6L75 391.8c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l8.2-8.2c35.3-35.3 95.6-10.3 95.6 39.6V480c0 17.7 14.3 32 32 32s32-14.3 32-32V468.5c0-49.9 60.3-74.9 95.6-39.6l8.2 8.2c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-8.2-8.2c-35.3-35.3-10.3-95.6 39.6-95.6H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H468.5c-49.9 0-74.9-60.3-39.6-95.6l8.2-8.2c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-8.2 8.2C348.3 118.4 288 93.4 288 43.5V32zM176 224a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm128 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg></i>
           <div class="select-and-label-container">
             <label>Disease</label>
             <select onchange="document.getElementById('responseField').style.display = 'flex';">
@@ -305,7 +300,7 @@
         <div class="field" id="responseField">
           <div class="with-buttons">
             <div class="label-container">
-              <i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="black"><path d="M320 64c-27.2 0-53.8 8-76.4 23.1l-37.1 24.8c-15.8 10.5-34.3 16.1-53.3 16.1H144 128 56c-30.9 0-56 25.1-56 56v85c0 55.1 37.5 103.1 90.9 116.4l108 27C233.8 435 275.4 448 320 448s86.2-13 121.1-35.5l108-27C602.5 372.1 640 324.1 640 269V184c0-30.9-25.1-56-56-56H512 496h-9.2c-19 0-37.5-5.6-53.3-16.1L396.4 87.1C373.8 72 347.2 64 320 64zM132.3 346.3l-29.8-7.4C70.5 330.9 48 302.1 48 269V184c0-4.4 3.6-8 8-8H96v48c0 45.1 13.4 87.2 36.3 122.3zm405.1-7.4l-29.8 7.4c23-35.2 36.3-77.2 36.3-122.3V176h40c4.4 0 8 3.6 8 8v85c0 33-22.5 61.8-54.5 69.9zM192 208c0-8.8 7.2-16 16-16H432c8.8 0 16 7.2 16 16s-7.2 16-16 16H208c-8.8 0-16-7.2-16-16zm16 48H432c8.8 0 16 7.2 16 16s-7.2 16-16 16H208c-8.8 0-16-7.2-16-16s7.2-16 16-16zm16 80c0-8.8 7.2-16 16-16H400c8.8 0 16 7.2 16 16s-7.2 16-16 16H240c-8.8 0-16-7.2-16-16z"/></svg></i>
+              <i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="white"><path d="M320 64c-27.2 0-53.8 8-76.4 23.1l-37.1 24.8c-15.8 10.5-34.3 16.1-53.3 16.1H144 128 56c-30.9 0-56 25.1-56 56v85c0 55.1 37.5 103.1 90.9 116.4l108 27C233.8 435 275.4 448 320 448s86.2-13 121.1-35.5l108-27C602.5 372.1 640 324.1 640 269V184c0-30.9-25.1-56-56-56H512 496h-9.2c-19 0-37.5-5.6-53.3-16.1L396.4 87.1C373.8 72 347.2 64 320 64zM132.3 346.3l-29.8-7.4C70.5 330.9 48 302.1 48 269V184c0-4.4 3.6-8 8-8H96v48c0 45.1 13.4 87.2 36.3 122.3zm405.1-7.4l-29.8 7.4c23-35.2 36.3-77.2 36.3-122.3V176h40c4.4 0 8 3.6 8 8v85c0 33-22.5 61.8-54.5 69.9zM192 208c0-8.8 7.2-16 16-16H432c8.8 0 16 7.2 16 16s-7.2 16-16 16H208c-8.8 0-16-7.2-16-16zm16 48H432c8.8 0 16 7.2 16 16s-7.2 16-16 16H208c-8.8 0-16-7.2-16-16s7.2-16 16-16zm16 80c0-8.8 7.2-16 16-16H400c8.8 0 16 7.2 16 16s-7.2 16-16 16H240c-8.8 0-16-7.2-16-16z"/></svg></i>
               <label>Response</label>
             </div>
             <button>No closures</button>
@@ -317,7 +312,7 @@
         <div class="field" id="investmentField">
           <div class="with-buttons">
             <div class="label-container">
-              <i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="black"><path d="M441 7l32 32 32 32c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-15-15L417.9 128l55 55c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-72-72L295 73c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l55 55L422.1 56 407 41c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0zM210.3 155.7l61.1-61.1c.3 .3 .6 .7 1 1l16 16 56 56 56 56 16 16c.3 .3 .6 .6 1 1l-191 191c-10.5 10.5-24.7 16.4-39.6 16.4H97.9L41 505c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l57-57V325.3c0-14.9 5.9-29.1 16.4-39.6l43.3-43.3 57 57c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-57-57 41.4-41.4 57 57c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-57-57z"/></svg></i>
+              <i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M441 7l32 32 32 32c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-15-15L417.9 128l55 55c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-72-72L295 73c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l55 55L422.1 56 407 41c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0zM210.3 155.7l61.1-61.1c.3 .3 .6 .7 1 1l16 16 56 56 56 56 16 16c.3 .3 .6 .6 1 1l-191 191c-10.5 10.5-24.7 16.4-39.6 16.4H97.9L41 505c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l57-57V325.3c0-14.9 5.9-29.1 16.4-39.6l43.3-43.3 57 57c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-57-57 41.4-41.4 57 57c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-57-57z"/></svg></i>
               <label>Advance vaccine investment</label>
             </div>
             <button>None</button>