Add some style to the home page

collinsnji · Feb 3, 2019 · 0630cf3 · 0630cf3
1 parent b4761b9
commit 0630cf3
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 19 deletions.
diff --git a/app.yaml b/app.yaml
@@ -1,8 +1,16 @@
-runtime: nodejs
-env: flex
-manual_scaling:
-  instances: 1
-resources:
-  cpu: 1
-  memory_gb: 0.5
-  disk_size_gb: 10
+# Copyright 2017, Google, Inc.
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#    http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# [START gae_quickstart_yaml]
+runtime: nodejs10
+# [END gae_quickstart_yaml]
diff --git a/public/assets/ReachTitle.png b/public/assets/ReachTitle.png
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -1,3 +1,8 @@
+body,
+html {
+  margin: 0;
+  padding: 0;
+}
 .map {
   position: relative;
   width: 100%;
@@ -8,3 +13,52 @@
   width: 100%;
   height: 90vh;
 }
+.container {
+  font-family: inherit;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.section {
+  display: block;
+  margin: 0;
+  width: 100%;
+}
+.left {
+  font-family: inherit;
+  display: flex;
+}
+.right {
+}
+.cover-photo {
+  font-family: inherit;
+  background: url("https://images.unsplash.com/photo-1543414993-6dbd67322ae3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-origin: content-box;
+  width: 100%;
+}
+.logo {
+  width: 100%;
+  height: 100%;
+}
+.logo-img {
+  width: 500px;
+}
+.overlay {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.legend {
+  width: 100%;
+}
+.tag-line {
+  color: #fff;
+  font-family: sans-serif;
+}
diff --git a/public/dist/src/map.js b/public/dist/src/map.js
diff --git a/public/index.html b/public/index.html
@@ -11,10 +11,24 @@
 </head>
 
 <body>
-    <div id="map-target"></div>
-    <div id="ia-map" class="ia-map"></div>
-    <img src="https://legends.aerisapi.com/img/legend-temps-51a5ff86b4991e03b2984effd2d0c47e.svg">
-    <p id="map-toggle-anim">Play</p>
+    <section class="container">
+        <figure class="section left">
+            <div class="cover-photo">
+                <div class="logo">
+                    <div class="overlay">
+                        <img class='logo-img' src="./assets/ReachTitle.png" alt="Project Reach Logo">
+                        <h2 class="tag-line">Save Lives in Times of Crisis</h2>
+                    </div>
+                </div>
+            </div>
+        </figure>
+        <figure class="section right">
+            <div id="map-target"></div>
+            <div id="ia-map" class="ia-map"></div>
+            <img class="legend" src="https://legends.aerisapi.com/img/legend-temps-51a5ff86b4991e03b2984effd2d0c47e.svg">
+            <p id="map-toggle-anim">Play</p>
+        </figure>
+    </section>
     <script defer src="./lib/aerisweather.min.js"></script>
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQ4eMp5ARyXcSPiQPWPN5VlRPwvhjDIrQ"></script>
     <script src="./dist/src/map.js"></script>

diff --git a/src/map.js b/src/map.js
@@ -1,9 +1,6 @@
-if ('geolocation' in navigator) {
-
-}
 window.onload = () => {
-    const AccessKey = `QrTSamfllAQyzsdB8kLrl`;
-    const SecretKey = `ZpJks6qFwgDL1DKJ3Znj5aOADS2iSKec4z4Xza74`;
+    const AccessKey = `WWnmMI7I2xfx3wBNw1ewQ`;
+    const SecretKey = `KYZ4TdqH35oSoSuLDGUXN1ol2KZKox0yC5VqNdt7`;
     const CharityAPIKey = `1426fc2d2e6b242fc2911ccbea6fce4b`;
 
     const Weather = new AerisWeather(AccessKey, SecretKey);
@@ -61,7 +58,16 @@ window.onload = () => {
             map.on('load', () => {
                 window.GoogleMap = map.strategy.map;
                 console.log(window.GoogleMap);
-                fetch(`http://data.orghunter.com/v1/charitysearch?user_key=${CharityAPIKey}`).then(results => results.json()).then(data => {
+                fetch(`https://data.orghunter.com/v1/charitysearch?user_key=${CharityAPIKey}`, {
+                    mode: "cors", // no-cors, cors, *same-origin
+                    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+                    credentials: "same-origin", // include, *same-origin, omit
+                    headers: {
+                        "Content-Type": "application/json",
+                        "Access-Control-Allow-Origin": "*"
+                        // "Content-Type": "application/x-www-form-urlencoded",
+                    }
+                }).then(results => results.json()).then(data => {
                     data.data.forEach(charity => {
                         let coords = {
                             lat: charity.latitude,