Merge branch 'dev-v2-home-page-update' into 'master'

Add updates for Home page V2

See merge request platform-one/private/bullhorn/platform1-site!165

package-lock.json

@@ -1010,12 +1010,13 @@
       }
     },
     "@beyonk/google-fonts-webpack-plugin": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@beyonk/google-fonts-webpack-plugin/-/google-fonts-webpack-plugin-1.2.3.tgz",
-      "integrity": "sha512-QtWDQJmfqJrIuC6tZNNKYV9/+upRlGnu+11ycrSS22MutpSYeeqDzsSHUc0qKxfaiOAn4ASg13tj7EED5Wy68A==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@beyonk/google-fonts-webpack-plugin/-/google-fonts-webpack-plugin-1.5.0.tgz",
+      "integrity": "sha512-jl4n6z+qgwjB+qJbEwznPdYMBAUQMJeuD+m7TRQA3brMRT/Z/Z2v1KYn0i4qwvjpLUh7mb3xQKa2QKpiRWqciA==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.4",
+        "md5": "^2.2.1",
         "node-fetch": "^2.1.2",
         "webpack-sources": "^1.1.0",
         "yauzl": "^2.8.0"
@@ -3934,6 +3935,12 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
+      "dev": true
+    },
     "check-more-types": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz",
@@ -4911,6 +4918,12 @@
         "which": "^1.2.9"
       }
     },
+    "crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
+      "dev": true
+    },
     "crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -10125,6 +10138,17 @@
         "object-visit": "^1.0.0"
       }
     },
+    "md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "dev": true,
+      "requires": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -14974,6 +14998,15 @@
       "resolved": "https://registry.npmjs.org/vue-body-class/-/vue-body-class-3.0.2.tgz",
       "integrity": "sha512-IeoB46l+lNG2u3sS61TBGh6OBsG//ucmkj5YOqKnOQUMpD1yBHqlNZ8Rkhzr0jck2xSuRAdm5imSt9ZIe8i0Mg=="
     },
+    "vue-carousel-3d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-carousel-3d/-/vue-carousel-3d-1.0.1.tgz",
+      "integrity": "sha512-Q50gIEB6plLdqYd3jLxte8RJsXNPQBcrRsgUey7nnaQ7TvtFoRu/4rpPP1FiihahE0v+IzVv8LLSSJxD+XrQVQ==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "vue": "^2.6.11"
+      }
+    },
     "vue-cli-plugin-style-resources-loader": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/vue-cli-plugin-style-resources-loader/-/vue-cli-plugin-style-resources-loader-0.1.4.tgz",

package.json

@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-strict-mode": "^7.8.3",
-    "@beyonk/google-fonts-webpack-plugin": "^1.2.3",
+    "@beyonk/google-fonts-webpack-plugin": "^1.5.0",
     "@mdi/font": "^5.3.45",
     "@vue/cli-plugin-babel": "~4.3.0",
     "@vue/cli-plugin-e2e-cypress": "~4.3.0",

src/components/Base/LogoCard.vue

+<template>
+  <v-card
+    :max-width="maxWidth || 400"
+    :min-height="minHeight || 325"
+    :class="!logoCardUrl ? 'ma-4 hvr-no-grow' : 'hvr-grow ma-4'"
+    v-on:click="navigateTo"
+  >
+    <div v-if="logoSource" class="mx-auto mt-4 pb-2">
+      <v-img
+        :src="logoSource"
+        class="mx-auto ma-1"
+        :width="logoMaxWidth || 125"
+      />
+    </div>
+    <h4 class="subhead mt-2 px-2" style="width: 100%">{{ logoCardText }}</h4>
+    <v-card-actions v-if="!logoCardUrl">
+      <span class="mx-auto">Coming Soon</span>
+    </v-card-actions>
+  </v-card>
+</template>
+<script>
+export default {
+  name: "LogoCard",
+  props: {
+    maxWidth: String,
+    minHeight: String,
+    logoSource: String,
+    logoMaxWidth: String,
+    logoCardText: String,
+    logoCardLink: String,
+    logoCardUrl: String,
+    logoCardExternalUrl: String,
+    logoCardUrlExternalTarget: String,
+  },
+  methods: {
+    navigateTo() {
+      if (this.logoCardUrl) {
+        this.$router.push({ path: this.logoCardUrl });
+      } else if (this.logoCardExternalUrl) {
+        window.open(
+          this.logoCardExternalUrl,
+          this.logoCardExternalUrlTarget || ""
+        );
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.hvr-grow {
+  display: inline-block;
+  vertical-align: middle;
+  transform: translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  backface-visibility: hidden;
+  -moz-osx-font-smoothing: grayscale;
+  transition-duration: 0.3s;
+  transition-property: transform;
+  cursor: pointer;
+}
+
+.hvr-no-grow {
+  display: inline-block;
+  vertical-align: middle;
+  cursor: not-allowed;
+}
+
+.hvr-grow:hover,
+.hvr-grow:focus,
+.hvr-grow:active {
+  transform: scale(1.1);
+}
+</style>

src/components/IntroVideo.vue

@@ -2,15 +2,12 @@
   <div class="intro-video container pt-0">
     <div class="row mb-xl-3 justify-content-center">
       <h2 class="col-12 py-0">What can Platform One do for you?</h2>
-      <p class="col-xl-6 col-lg-8 text-center mb-0 px-12">
-        Watch our 90 second video to learn more about P1 capabilities
-      </p>
     </div>
 
     <div class="container pa-0">
       <div class="row justify-content-center">
         <div class="col-lg-6 col-md-8 order-lg-2">
-          <v-responsive :aspect-ratio="16 / 9" min-height="315">
+          <v-responsive :aspect-ratio="16 / 9" min-height="200">
             <video width="100%" poster="static/p1-logo.png" controls>
               <source
                 src="https://repo1.dsop.io/platform-one/bullhorn-delivery-static-assets/-/raw/master/p1/PlatformOne-90sec-Initial-V1-1.mp4"
@@ -21,31 +18,43 @@
           </v-responsive>
         </div>
 
-        <div class="col-lg-6 text-left px-8 d-flex">
-          <ul class="my-auto">
-            <li class="my-3">
-              P1 helps deploy your mission code to the warfighter quickly and
-              securely
-            </li>
-            <li class="my-3">
-              P1 accelerates your deployment capabilities by providing an 85%
-              solution to get you started faster
-            </li>
-            <li class="my-3">P1 provides a common code base for reusability</li>
-            <li class="my-3">
-              P1 creates a collaborative environment to break down silos and
-              enable government-wide cross-functionality
-            </li>
-          </ul>
+        <div class="col-lg-6 text-left px-12 d-flex">
+          <div class="row">
+            <span>
+              Platform One (P1) is a modern cloud-era platform that provides
+              valuable tooling, hosts
+              <Tooltip
+                text="CI/CD"
+                tooltip="Continuous Integration / Continuous Delivery"
+              />
+              <Tooltip
+                text="DevSecOps"
+                tooltip="Development, Security, and Operations"
+              />
+              pipelines, and offers a secure Kubernetes platform for hosting
+              microservices.
+              <br />
+              <br />
+
+              Authorization to go live with your application can be achieved
+              faster than ever by using Iron Bank hardened containers and P1
+              pipeline security tools. The resulting Certificate to Field (CtF)
+              and Continuous Authority to Operate (cATO) provides developers the
+              ability to push validated code into production on an ongoing
+              basis. This results in shorter development cycles, less debugging,
+              and more rapid feature development.
+            </span>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import Tooltip from "@/components/Base/Tooltip";
 export default {
   name: "IntroVideo",
-  components: {}
+  components: { Tooltip },
 };
 </script>
 <style lang="scss" scoped>

src/components/PageHeader.vue

@@ -4,35 +4,58 @@
       <Breadcrumb />
     </div>
     <div class="content">
-      <h1 class="px-4">
-        {{ title }}
-      </h1>
-      <h1 v-for="line in titleWithBreaks" class="px-4" :key="line">
-        {{ line }}
-      </h1>
-      <h2 v-if="subtext" class="subtext mx-lg-auto mx-5">
-        {{ subtext }}
-      </h2>
-      <h4 v-if="description" class="description mx-lg-auto mx-5 mt-2">
-        {{ description }}
-      </h4>
-
-      <div class="container">
-        <div class="row justify-content-center">
-          <div class="col-xs-10 col-md-8 col-lg-6 col-xl-4">
-            <v-text-field
-              v-if="displaySearch"
-              outlined
-              dense
-              append-icon="mdi-magnify"
-              backgroundColor="white"
-              class="mx-16 mx-5 mt-6"
-              v-on:input="onChangeSearchValue"
-            ></v-text-field>
+      <div class="row wrap text-md-left text-xs-center mx-xs-5 mx-md-10">
+        <div v-if="logoSource" class="col-md-5 py-0 order-md-2">
+          <v-img
+            :src="logoSource"
+            class="mx-auto mb-12 mb-md-0"
+            :max-width="logoMaxWidth || 250"
+          />
+        </div>
+        <div :class="logoSource ? 'col-md-7 py-0' : 'col-md-9 py-0'">
+          <div v-if="subtext">
+            <h2 class="subtext">
+              {{ subtext }}
+            </h2>
+          </div>
+          <div class="py-0">
+            <h1 class="my-0">
+              {{ title }}
+            </h1>
+            <h1 v-for="line in titleWithBreaks" :key="line">
+              {{ line }}
+            </h1>
+          </div>
+          <div v-if="description" class="mt-6 mt-md-0">
+            <h4 class="subhead">
+              {{ description }}
+            </h4>
+          </div>
+          <div v-if="buttonText && buttonUrl">
+            <v-btn
+              class="ml-md-8 mt-12"
+              color="primary"
+              :href="buttonUrl"
+              :target="buttonTarget || ''"
+            >
+              {{ buttonText }}
+            </v-btn>
           </div>
         </div>
       </div>
     </div>
+    <div v-if="displaySearch" class="row justify-content-center">
+      <div class="col-xs-10 col-md-8 col-lg-6 col-xl-4">
+        <v-text-field
+          outlined
+          dense
+          append-icon="mdi-magnify"
+          backgroundColor="white"
+          class="mx-16 mx-5 mb-6"
+          v-on:input="onChangeSearchValue"
+        ></v-text-field>
+      </div>
+    </div>
 
     <div class="wave-divider">
       <svg viewBox="0 70 500 60" preserveAspectRatio="none">
@@ -44,13 +67,18 @@
 </template>
 
 <script>
-import Breadcrumb from '@/components/Breadcrumb.vue';
+import Breadcrumb from "@/components/Breadcrumb.vue";
 export default {
   props: {
     title: String,
     titleWithBreaks: Array,
     subtext: String,
     description: String,
+    buttonText: String,
+    buttonUrl: String,
+    buttonTarget: String,
+    logoSource: String,
+    logoMaxWidth: String,
     displaySearch: Boolean,
     onChangeSearch: Function,
     hideBreadcrumbs: Boolean,
@@ -67,7 +95,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .page-header {
-  background-color: #000000 !important;
+  background-color: #010b14 !important;
   background-image: url(~@/assets/images/tech-bg.jpg);
   background-position-y: -210px;
   background-repeat: no-repeat;
@@ -79,7 +107,7 @@ export default {
 
   @include lg-up {
     .description {
-      max-width: 50%;
+      max-width: 80%;
     }
   }
   @include lg {
@@ -95,11 +123,9 @@ export default {
   }
 
   .content {
-    min-height: 400px;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin-bottom: 2rem;
+    min-height: 400px;
+    align-items: center;
   }
 
   .wave-divider {

src/components/ServicesSummary.vue

 <template>
-  <div class="services-summary">
-    <h2>
-      P1 services empower your workforce
-    </h2>
-    <div class="container">
-      <div class="row justify-center">
-        <div class="col-md-6 col-lg-4 service-container">
-          <Repo1Logo class="logo" />
-          <h4>REPO ONE</h4>
-          <div class="text">
-            The central repository for the source code to create hardened and
-            evaluated containers for the DoD
-          </div>
-          <ExternalLink class="mt-4" href="https://repo1.dsop.io">
-            Repo One
-          </ExternalLink>
-        </div>
-        <div class="col-md-6 col-lg-4 service-container">
-          <TrainingLogo class="logo" />
-          <h4>
-            DEVSECOPS TRAINING <br />
-            &amp; ON-BOARDING
-          </h4>
-          <div class="text">
-            The Platform One team recognizes that many teams require training
-            resources in order to fully leverage DevSecOps principles
-          </div>
-          <div class="d-flex flex-column mt-4">
-            <ExternalLink href="https://software.af.mil/training/">
-              DevSecOps Training Resources
-            </ExternalLink>
-            <ExternalLink class="mt-2" href="https://onboarding.il2.dsop.io/">
-              Cohort On-boarding
-            </ExternalLink>
-          </div>
-        </div>
-        <div class="col-md-6 col-lg-4 service-container">
-          <ChatLogo class="logo" />
-          <h4>DOD ENTERPRISE COLLABORATION</h4>
-          <div class="text">
-            Platform One provides a chat app for IL2 (Public) and IL4 (FOUO)
-            communication to DoD users around the world. No-hassle video
-            teleconferencing for the DoD
-          </div>
-          <ExternalLink class="mt-4" href="https://chat.collab.cdl.af.mil/">
-            Chat
-          </ExternalLink>
-          <ExternalLink
-            class="mt-2"
-            href="https://repo1.dsop.io/platform-one/bullhorn-delivery-static-assets/-/raw/master/p1/docs/Platform%20One%20Collaboration%20Tools%20(General)%20-%20v1.pdf"
-            icon="mdi-file-pdf"
-          >
-            Collaboration Tools Onboarding
-          </ExternalLink>
-        </div>
-        <div class="col-md-6 col-lg-4 service-container">
-          <DsawgLogo class="logo" />
-          <h4>DSAWG WORKGROUPS</h4>
-          <div class="text">
-            DoD Security Authorization Working Groups where all documents
-            created are available on Repo One
-          </div>
-          <ExternalLink
-            class="mt-4"
-            href="https://repo1.dsop.io/dsawg-devsecops/"
-          >
-            DSAWG on Repo One
-          </ExternalLink>
-        </div>
-        <div class="col-md-6 col-lg-4 service-container mb-3">
-          <router-link to="/services">
-            <LearnMoreLogo class="logo" />
-            <h4>
-              LEARN MORE <v-icon class="no-link">mdi-chevron-right</v-icon>
-            </h4>
-          </router-link>
-          <a href="/#/services" class="link">
-            Learn more about <br class="d-none d-lg-flex" />
-            Platform One Services
-          </a>
-        </div>
-      </div>
-    </div>
+  <div class="services-summary mt-8">
+    <v-container fluid>
+      <v-layout row wrap justify-center name="services-summary">
+        <v-flex lg2 md3 sm6 xs12>
+          <LogoCard
+            :logoSource="ibLogo"
+            logoCardText="Download DoD-wide approved containers or harden with Iron Bank"
+          />
+        </v-flex>
+        <v-flex lg2 md3 sm6 xs12>
+          <LogoCard
+            :logoSource="pbLogo"
+            logoCardText="Get hands-on experience onboarding with ABMS ADCE Party Bus"
+            logoCardUrl="/products/abms-adce/"
+          />
+        </v-flex>
+        <v-flex lg2 md3 sm6 xs12>
+          <LogoCard
+            :logoSource="bbLogo"
+            logoCardText="Deploy your own software factory with Big Bang"
+            logoCardUrl="/products/big-bang/"
+          />
+        </v-flex>
+        <!-- REMAINING FOR: Enterprise Collaboration and Cyber Security
+        <v-flex lg2 md3 sm6 xs12>
+          <LogoCard
+            :logoSource=""
+            logoCardText="Enterprise Collaboration tools and solutions for your team"
+          />
+        </v-flex>
+        <v-flex lg2 md3 sm6 xs12>
+          <LogoCard
+            :logoSource=""
+            logoCardText="Stay secured with our Cybersecurity team processes"
+          />
+        </v-flex> 
+        -->
+      </v-layout>
+    </v-container>
   </div>
 </template>
 <script>
-import Repo1Logo from "@/assets/images/icons/Icon_RepoOne.svg";
-import TrainingLogo from "@/assets/images/icons/Icon_Training.svg";
-import LearnMoreLogo from "@/assets/images/icons/Icon_LearnMore.svg";
-import DsawgLogo from "@/assets/images/icons/Icon_DSAWG.svg";
-import ChatLogo from "@/assets/images/icons/Icon_DoDenterpriseChat.svg";
-import ExternalLink from "@/components/ExternalLink";
+import LogoCard from "@/components/Base/LogoCard";
+import IBLogo from "@/assets/images/logos/Iron_Bank_Logo_LIGHT.png";
+import PBLogo from "@/assets/images/logos/Party_Bus_logo_low_res-01.png";
+import BBLogo from "@/assets/images/logos/Big_Bang_Color_Logo_Black_text.png"
 
 export default {
   name: "ServicesSummary",
   components: {
-    Repo1Logo,
-    TrainingLogo,
-    LearnMoreLogo,
-    DsawgLogo,
-    ChatLogo,
-    ExternalLink
-  }
+    LogoCard,
+  },
+  data() {
+    return {
+      ibLogo: IBLogo,
+      pbLogo: PBLogo,
+      bbLogo: BBLogo,
+    };
+  },
 };
 </script>
 <style lang="scss" scoped>

src/scss/custom.scss

@@ -67,7 +67,7 @@ body {
     letter-spacing: 3.2px;
   }
   h2 {
-    font-size: 2rem;
+    font-size: 1.625rem;
     line-height: 2.375rem;
     letter-spacing: 1.1px;
   }

src/scss/utilities.scss

@@ -41,3 +41,11 @@
 .position-absolute {
   position: absolute;
 }
+
+.subhead {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  letter-spacing: 1.1px;
+  font-weight: 600;
+  text-transform: none;
+}
\ No newline at end of file

src/views/Home.vue

@@ -2,30 +2,44 @@
   <div class="home">
     <PageHeader
       title="PLATFORM ONE"
-      description="An official DoD DevSecOps Enterprise Services team"
+      description="Platform One allows users to start solving software problems with an 85% solution, instead of starting from nothing."
+      buttonText="Learn More"
+      buttonUrl="/#/services"
+      logoSource="static/p1-logo.png"
     />
-    <div class="container px-0">
-      <div
-        class="d-flex flex-column align-items-center mt-4 mb-16 mx-4 mx-md-16"
-      >
-        <h2 class="mx-8 mx-sm-16 pb-4">
-          Platform One Awards
-        </h2>
-        <img
-          class="img-fluid mx-auto"
-          src="@/assets/images/P1_DefenseAcq_Web1_2.jpg"
-          alt="2020 Defense Acquisition Workforce Award Winners"
-        />
-      </div>
-    </div>
     <IntroVideo />
-    <ProductsSummary />
     <ServicesSummary />
-    <div class="d-flex flex-column align-items-center mt-8 mb-16 pb-10">
-      <h2 class="mx-8 mx-sm-16 pb-4">
-        Listen to Nic Chaillan talk about the DevSecOps Initiative and Platform
-        One
-      </h2>
+    <div class="container mt-6">
+      <div class="row">
+        <div class="col-md-6 text-md-left text-xs-center">
+          <div v-if="$vuetify.breakpoint.mdAndUp">
+            <h2 class="pl-8">Explore The</h2>
+            <h1 class="mt-0 pl-7">Products</h1>
+          </div>
+          <div v-if="$vuetify.breakpoint.smAndDown">
+            <h1>Explore The Products</h1>
+            </div>
+          <v-btn v-if="$vuetify.breakpoint.mdAndUp" class="ml-md-8 mt-6 mb-6" color="primary" href="/#/products">
+            See Packages
+          </v-btn>
+        </div>
+        <div class="col-md-6 text-left">
+          <h3 class="pl-6 pb-4">How Our Teams Help</h3>
+          <ul>
+            <li>Manages Software Factories for development teams so they can focus on building mission applications</li>
+            <li>Decouples development teams from factory teams with DevSecOps and Site Reliability Engineer (SRE) expertise</li>
+            <li>Helps instantiate DevSecOps CI/CD pipelines / software factories in days at various classification levels</li>
+            <li>Builds and leverages the DoD hardened containers while avoiding on-size-fits-all architectures</li>
+            <li>Fully complies with the DoD Enterprise DevSecOps Initiative (DSOP) with DoD-wide reciprocity</li>
+            <li>Centralizes the container hardening of 172 enterprise containers (databases, development tools, CI/CD tools, cybersecurity tools, etc.</li>
+          </ul>
+        </div>
+        <v-btn v-if="$vuetify.breakpoint.smAndDown" class="my-6 mx-auto" color="primary" href="/#/products">
+            See Packages
+          </v-btn>
+      </div>
+    </div>
+    <div class="d-flex flex-column align-items-center mt-8 mt-md-16 mb-md-6">
       <v-responsive
         class="px-6"
         :aspect-ratio="16 / 9"
@@ -41,6 +55,18 @@
         </video>
       </v-responsive>
     </div>
+    <div class="container px-0">
+      <div
+        class="d-flex flex-column align-items-center mt-md-4 mb-16 mx-4 mx-md-16 pb-6"
+      >
+        <h2 class="mx-8 mx-sm-16 pb-4">Platform One Awards</h2>
+        <img
+          class="img-fluid mx-auto"
+          src="@/assets/images/P1_DefenseAcq_Web1_2.jpg"
+          alt="2020 Defense Acquisition Workforce Award Winners"
+        />
+      </div>
+    </div>
     <Wave :bottom="false">
       <WhoWeServe />
     </Wave>
@@ -51,7 +77,6 @@
 import PageHeader from "@/components/PageHeader";
 import IntroVideo from "@/components/IntroVideo";
 import ServicesSummary from "@/components/ServicesSummary";
-import ProductsSummary from "@/components/ProductsSummary";
 import WhoWeServe from "@/components/WhoWeServe";
 import Wave from "@/components/Wave";
 
@@ -61,10 +86,9 @@ export default {
     PageHeader,
     IntroVideo,
     ServicesSummary,
-    ProductsSummary,
     Wave,
-    WhoWeServe
-  }
+    WhoWeServe,
+  },
 };
 </script>