npm - @genesislcap/foundation-ui - Versions diffs - 14.441.0 → 14.442.0 - Mend

@genesislcap/foundation-ui 14.441.0 → 14.442.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (124) hide show

package/public/ag-grid/preview.html CHANGED Viewed

@@ -1,444 +1,480 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8"/>
-  <title>Foundation Theme Preview</title>
-  <script defer src="../../dist/foundation-ui.js" type="module"></script>
-  <style>
-    html,
-    body {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-    }
+  <head>
+    <meta charset="utf-8" />
+    <title>Foundation Theme Preview</title>
+    <script defer src="../../dist/foundation-ui.js" type="module"></script>
+    <style>
+      html,
+      body {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
-    header {
-      padding: 10px 0 10px 10px;
-      color: white;
-    }
+      header {
+        padding: 10px 0 10px 10px;
+        color: white;
+      }
-    foundation-design-system-provider {
-      display: none;
-      flex-direction: column;
-    }
+      foundation-design-system-provider {
+        display: none;
+        flex-direction: column;
+      }
-    grid-pro {
-      flex: auto;
-      margin: 10px;
-    }
-  </style>
-</head>
-<body>
-<foundation-design-system-provider>
-  <header>
-    <h1>Foundation Theme Preview</h1>
-    <p>Preview grid-pro included as a script tag. Since there's no app level bundler here, this ensures
-      external css etc is present at a library / package level. Run <code>build:rollup</code> first.</p>
-  </header>
-  <foundation-grid-pro></foundation-grid-pro>
-  <foundation-button appearance="accent" id="js-load-ag-row-data">Load AG Grid</foundation-button>
-  <foundation-button id="js-toggle-theme">Toggle Theme (On / Off)</foundation-button>
-</foundation-design-system-provider>
+      grid-pro {
+        flex: auto;
+        margin: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <foundation-design-system-provider>
+      <header>
+        <h1>Foundation Theme Preview</h1>
+        <p>
+          Preview grid-pro included as a script tag. Since there's no app level bundler here, this
+          ensures external css etc is present at a library / package level. Run
+          <code>build:rollup</code>
+          first.
+        </p>
+      </header>
+      <foundation-grid-pro></foundation-grid-pro>
+      <foundation-button appearance="accent" id="js-load-ag-row-data">
+        Load AG Grid
+      </foundation-button>
+      <foundation-button id="js-toggle-theme">Toggle Theme (On / Off)</foundation-button>
+    </foundation-design-system-provider>
-<script>
-  const rowData = [
-    {
-      'athlete': 'Michael Phelps',
-      'age': 23,
-      'country': 'United States',
-      'year': 2008,
-      'date': '24/08/2008',
-      'sport': 'Swimming',
-      'gold': 8,
-      'silver': 0,
-      'bronze': 0,
-      'total': 8,
-    }, {
-      'athlete': 'Michael Phelps',
-      'age': 19,
-      'country': 'United States',
-      'year': 2004,
-      'date': '29/08/2004',
-      'sport': 'Swimming',
-      'gold': 6,
-      'silver': 0,
-      'bronze': 2,
-      'total': 8,
-    }, {
-      'athlete': 'Michael Phelps',
-      'age': 27,
-      'country': 'United States',
-      'year': 2012,
-      'date': '12/08/2012',
-      'sport': 'Swimming',
-      'gold': 4,
-      'silver': 2,
-      'bronze': 0,
-      'total': 6,
-    }, {
-      'athlete': 'Natalie Coughlin',
-      'age': 25,
-      'country': 'United States',
-      'year': 2008,
-      'date': '24/08/2008',
-      'sport': 'Swimming',
-      'gold': 1,
-      'silver': 2,
-      'bronze': 3,
-      'total': 6,
-    }, {
-      'athlete': 'Aleksey Nemov',
-      'age': 24,
-      'country': 'Russia',
-      'year': 2000,
-      'date': '01/10/2000',
-      'sport': 'Gymnastics',
-      'gold': 2,
-      'silver': 1,
-      'bronze': 3,
-      'total': 6,
-    }, {
-      'athlete': 'Alicia Coutts',
-      'age': 24,
-      'country': 'Australia',
-      'year': 2012,
-      'date': '12/08/2012',
-      'sport': 'Swimming',
-      'gold': 1,
-      'silver': 3,
-      'bronze': 1,
-      'total': 5,
-    }, {
-      'athlete': 'Missy Franklin',
-      'age': 17,
-      'country': 'United States',
-      'year': 2012,
-      'date': '12/08/2012',
-      'sport': 'Swimming',
-      'gold': 4,
-      'silver': 0,
-      'bronze': 1,
-      'total': 5,
-    }, {
-      'athlete': 'Ryan Lochte',
-      'age': 27,
-      'country': 'United States',
-      'year': 2012,
-      'date': '12/08/2012',
-      'sport': 'Swimming',
-      'gold': 2,
-      'silver': 2,
-      'bronze': 1,
-      'total': 5,
-    }, {
-      'athlete': 'Allison Schmitt',
-      'age': 22,
-      'country': 'United States',
-      'year': 2012,
-      'date': '12/08/2012',
-      'sport': 'Swimming',
-      'gold': 3,
-      'silver': 1,
-      'bronze': 1,
-      'total': 5,
-    }, {
-      'athlete': 'Natalie Coughlin',
-      'age': 21,
-      'country': 'United States',
-      'year': 2004,
-      'date': '29/08/2004',
-      'sport': 'Swimming',
-      'gold': 2,
-      'silver': 2,
-      'bronze': 1,
-      'total': 5,
-    }, {
-      'athlete': 'Ian Thorpe',
-      'age': 17,
-      'country': 'Australia',
-      'year': 2000,
-      'date': '01/10/2000',
-      'sport': 'Swimming',
-      'gold': 3,
-      'silver': 2,
-      'bronze': 0,
-      'total': 5,
-    }, {
-      'athlete': 'Dara Torres',
-      'age': 33,
-      'country': 'United States',
-      'year': 2000,
-      'date': '01/10/2000',
-      'sport': 'Swimming',
-      'gold': 2,
-      'silver': 0,
-      'bronze': 3,
-      'total': 5,
-    }, {
-      'athlete': 'Cindy Klassen',
-      'age': 26,
-      'country': 'Canada',
-      'year': 2006,
-      'date': '26/02/2006',
-      'sport': 'Speed Skating',
-      'gold': 1,
-      'silver': 2,
-      'bronze': 2,
-      'total': 5,
-    }, {
-      'athlete': 'Nastia Liukin',
-      'age': 18,
-      'country': 'United States',
-      'year': 2008,
-      'date': '24/08/2008',
-      'sport': 'Gymnastics',
-      'gold': 1,
-      'silver': 3,
-      'bronze': 1,
-      'total': 5,
-    }, {
-      'athlete': 'Marit Bjørgen',
-      'age': 29,
-      'country': 'Norway',
-      'year': 2010,
-      'date': '28/02/2010',
-      'sport': 'Cross Country Skiing',
-      'gold': 3,
-      'silver': 1,
-      'bronze': 1,
-      'total': 5,
-    }, {
-      'athlete': 'Sun Yang',
-      'age': 20,
-      'country': 'China',
-      'year': 2012,
-      'date': '12/08/2012',
-      'sport': 'Swimming',
-      'gold': 2,
-      'silver': 1,
-      'bronze': 1,
-      'total': 4,
-    }, {
-      'athlete': 'Kirsty Coventry',
-      'age': 24,
-      'country': 'Zimbabwe',
-      'year': 2008,
-      'date': '24/08/2008',
-      'sport': 'Swimming',
-      'gold': 1,
-      'silver': 3,
-      'bronze': 0,
-      'total': 4,
-    }, {
-      'athlete': 'Libby Lenton-Trickett',
-      'age': 23,
-      'country': 'Australia',
-      'year': 2008,
-      'date': '24/08/2008',
-      'sport': 'Swimming',
-      'gold': 2,
-      'silver': 1,
-      'bronze': 1,
-      'total': 4,
-    }, {
-      'athlete': 'Ryan Lochte',
-      'age': 24,
-      'country': 'United States',
-      'year': 2008,
-      'date': '24/08/2008',
-      'sport': 'Swimming',
-      'gold': 2,
-      'silver': 0,
-      'bronze': 2,
-      'total': 4,
-    }, {
-      'athlete': 'Inge de Bruijn',
-      'age': 30,
-      'country': 'Netherlands',
-      'year': 2004,
-      'date': '29/08/2004',
-      'sport': 'Swimming',
-      'gold': 1,
-      'silver': 1,
-      'bronze': 2,
-      'total': 4,
-    }, {
-      'athlete': 'Petria Thomas',
-      'age': 28,
-      'country': 'Australia',
-      'year': 2004,
-      'date': '29/08/2004',
-      'sport': 'Swimming',
-      'gold': 3,
-      'silver': 1,
-      'bronze': 0,
-      'total': 4,
-    }, {
-      'athlete': 'Ian Thorpe',
-      'age': 21,
-      'country': 'Australia',
-      'year': 2004,
-      'date': '29/08/2004',
-      'sport': 'Swimming',
-      'gold': 2,
-      'silver': 1,
-      'bronze': 1,
-      'total': 4,
-    }, {
-      'athlete': 'Inge de Bruijn',
-      'age': 27,
-      'country': 'Netherlands',
-      'year': 2000,
-      'date': '01/10/2000',
-      'sport': 'Swimming',
-      'gold': 3,
-      'silver': 1,
-      'bronze': 0,
-      'total': 4,
-    }, {
-      'athlete': 'Gary Hall Jr.',
-      'age': 25,
-      'country': 'United States',
-      'year': 2000,
-      'date': '01/10/2000',
-      'sport': 'Swimming',
-      'gold': 2,
-      'silver': 1,
-      'bronze': 1,
-      'total': 4,
-    }, {
-      'athlete': 'Michael Klim',
-      'age': 23,
-      'country': 'Australia',
-      'year': 2000,
-      'date': '01/10/2000',
-      'sport': 'Swimming',
-      'gold': 2,
-      'silver': 2,
-      'bronze': 0,
-      'total': 4,
-    }, {
-      'athlete': 'Susie O\'Neill',
-      'age': 27,
-      'country': 'Australia',
-      'year': 2000,
-      'date': '01/10/2000',
-      'sport': 'Swimming',
-      'gold': 1,
-      'silver': 3,
-      'bronze': 0,
-      'total': 4,
-    }, {
-      'athlete': 'Jenny Thompson',
-      'age': 27,
-      'country': 'United States',
-      'year': 2000,
-      'date': '01/10/2000',
-      'sport': 'Swimming',
-      'gold': 3,
-      'silver': 0,
-      'bronze': 1,
-      'total': 4,
-    }, {
-      'athlete': 'Pieter van den Hoogenband',
-      'age': 22,
-      'country': 'Netherlands',
-      'year': 2000,
-      'date': '01/10/2000',
-      'sport': 'Swimming',
-      'gold': 2,
-      'silver': 0,
-      'bronze': 2,
-      'total': 4,
-    }, {
-      'athlete': 'An Hyeon-Su',
-      'age': 20,
-      'country': 'South Korea',
-      'year': 2006,
-      'date': '26/02/2006',
-      'sport': 'Short-Track Speed Skating',
-      'gold': 3,
-      'silver': 0,
-      'bronze': 1,
-      'total': 4,
-    }, {
-      'athlete': 'Aliya Mustafina',
-      'age': 17,
-      'country': 'Russia',
-      'year': 2012,
-      'date': '12/08/2012',
-      'sport': 'Gymnastics',
-      'gold': 1,
-      'silver': 1,
-      'bronze': 2,
-      'total': 4,
-    }, {
-      'athlete': 'Shawn Johnson',
-      'age': 16,
-      'country': 'United States',
-      'year': 2008,
-      'date': '24/08/2008',
-      'sport': 'Gymnastics',
-      'gold': 1,
-      'silver': 3,
-      'bronze': 0,
-      'total': 4,
-    },
-  ];
+    <script>
+      const rowData = [
+        {
+          athlete: 'Michael Phelps',
+          age: 23,
+          country: 'United States',
+          year: 2008,
+          date: '24/08/2008',
+          sport: 'Swimming',
+          gold: 8,
+          silver: 0,
+          bronze: 0,
+          total: 8,
+        },
+        {
+          athlete: 'Michael Phelps',
+          age: 19,
+          country: 'United States',
+          year: 2004,
+          date: '29/08/2004',
+          sport: 'Swimming',
+          gold: 6,
+          silver: 0,
+          bronze: 2,
+          total: 8,
+        },
+        {
+          athlete: 'Michael Phelps',
+          age: 27,
+          country: 'United States',
+          year: 2012,
+          date: '12/08/2012',
+          sport: 'Swimming',
+          gold: 4,
+          silver: 2,
+          bronze: 0,
+          total: 6,
+        },
+        {
+          athlete: 'Natalie Coughlin',
+          age: 25,
+          country: 'United States',
+          year: 2008,
+          date: '24/08/2008',
+          sport: 'Swimming',
+          gold: 1,
+          silver: 2,
+          bronze: 3,
+          total: 6,
+        },
+        {
+          athlete: 'Aleksey Nemov',
+          age: 24,
+          country: 'Russia',
+          year: 2000,
+          date: '01/10/2000',
+          sport: 'Gymnastics',
+          gold: 2,
+          silver: 1,
+          bronze: 3,
+          total: 6,
+        },
+        {
+          athlete: 'Alicia Coutts',
+          age: 24,
+          country: 'Australia',
+          year: 2012,
+          date: '12/08/2012',
+          sport: 'Swimming',
+          gold: 1,
+          silver: 3,
+          bronze: 1,
+          total: 5,
+        },
+        {
+          athlete: 'Missy Franklin',
+          age: 17,
+          country: 'United States',
+          year: 2012,
+          date: '12/08/2012',
+          sport: 'Swimming',
+          gold: 4,
+          silver: 0,
+          bronze: 1,
+          total: 5,
+        },
+        {
+          athlete: 'Ryan Lochte',
+          age: 27,
+          country: 'United States',
+          year: 2012,
+          date: '12/08/2012',
+          sport: 'Swimming',
+          gold: 2,
+          silver: 2,
+          bronze: 1,
+          total: 5,
+        },
+        {
+          athlete: 'Allison Schmitt',
+          age: 22,
+          country: 'United States',
+          year: 2012,
+          date: '12/08/2012',
+          sport: 'Swimming',
+          gold: 3,
+          silver: 1,
+          bronze: 1,
+          total: 5,
+        },
+        {
+          athlete: 'Natalie Coughlin',
+          age: 21,
+          country: 'United States',
+          year: 2004,
+          date: '29/08/2004',
+          sport: 'Swimming',
+          gold: 2,
+          silver: 2,
+          bronze: 1,
+          total: 5,
+        },
+        {
+          athlete: 'Ian Thorpe',
+          age: 17,
+          country: 'Australia',
+          year: 2000,
+          date: '01/10/2000',
+          sport: 'Swimming',
+          gold: 3,
+          silver: 2,
+          bronze: 0,
+          total: 5,
+        },
+        {
+          athlete: 'Dara Torres',
+          age: 33,
+          country: 'United States',
+          year: 2000,
+          date: '01/10/2000',
+          sport: 'Swimming',
+          gold: 2,
+          silver: 0,
+          bronze: 3,
+          total: 5,
+        },
+        {
+          athlete: 'Cindy Klassen',
+          age: 26,
+          country: 'Canada',
+          year: 2006,
+          date: '26/02/2006',
+          sport: 'Speed Skating',
+          gold: 1,
+          silver: 2,
+          bronze: 2,
+          total: 5,
+        },
+        {
+          athlete: 'Nastia Liukin',
+          age: 18,
+          country: 'United States',
+          year: 2008,
+          date: '24/08/2008',
+          sport: 'Gymnastics',
+          gold: 1,
+          silver: 3,
+          bronze: 1,
+          total: 5,
+        },
+        {
+          athlete: 'Marit Bjørgen',
+          age: 29,
+          country: 'Norway',
+          year: 2010,
+          date: '28/02/2010',
+          sport: 'Cross Country Skiing',
+          gold: 3,
+          silver: 1,
+          bronze: 1,
+          total: 5,
+        },
+        {
+          athlete: 'Sun Yang',
+          age: 20,
+          country: 'China',
+          year: 2012,
+          date: '12/08/2012',
+          sport: 'Swimming',
+          gold: 2,
+          silver: 1,
+          bronze: 1,
+          total: 4,
+        },
+        {
+          athlete: 'Kirsty Coventry',
+          age: 24,
+          country: 'Zimbabwe',
+          year: 2008,
+          date: '24/08/2008',
+          sport: 'Swimming',
+          gold: 1,
+          silver: 3,
+          bronze: 0,
+          total: 4,
+        },
+        {
+          athlete: 'Libby Lenton-Trickett',
+          age: 23,
+          country: 'Australia',
+          year: 2008,
+          date: '24/08/2008',
+          sport: 'Swimming',
+          gold: 2,
+          silver: 1,
+          bronze: 1,
+          total: 4,
+        },
+        {
+          athlete: 'Ryan Lochte',
+          age: 24,
+          country: 'United States',
+          year: 2008,
+          date: '24/08/2008',
+          sport: 'Swimming',
+          gold: 2,
+          silver: 0,
+          bronze: 2,
+          total: 4,
+        },
+        {
+          athlete: 'Inge de Bruijn',
+          age: 30,
+          country: 'Netherlands',
+          year: 2004,
+          date: '29/08/2004',
+          sport: 'Swimming',
+          gold: 1,
+          silver: 1,
+          bronze: 2,
+          total: 4,
+        },
+        {
+          athlete: 'Petria Thomas',
+          age: 28,
+          country: 'Australia',
+          year: 2004,
+          date: '29/08/2004',
+          sport: 'Swimming',
+          gold: 3,
+          silver: 1,
+          bronze: 0,
+          total: 4,
+        },
+        {
+          athlete: 'Ian Thorpe',
+          age: 21,
+          country: 'Australia',
+          year: 2004,
+          date: '29/08/2004',
+          sport: 'Swimming',
+          gold: 2,
+          silver: 1,
+          bronze: 1,
+          total: 4,
+        },
+        {
+          athlete: 'Inge de Bruijn',
+          age: 27,
+          country: 'Netherlands',
+          year: 2000,
+          date: '01/10/2000',
+          sport: 'Swimming',
+          gold: 3,
+          silver: 1,
+          bronze: 0,
+          total: 4,
+        },
+        {
+          athlete: 'Gary Hall Jr.',
+          age: 25,
+          country: 'United States',
+          year: 2000,
+          date: '01/10/2000',
+          sport: 'Swimming',
+          gold: 2,
+          silver: 1,
+          bronze: 1,
+          total: 4,
+        },
+        {
+          athlete: 'Michael Klim',
+          age: 23,
+          country: 'Australia',
+          year: 2000,
+          date: '01/10/2000',
+          sport: 'Swimming',
+          gold: 2,
+          silver: 2,
+          bronze: 0,
+          total: 4,
+        },
+        {
+          athlete: "Susie O'Neill",
+          age: 27,
+          country: 'Australia',
+          year: 2000,
+          date: '01/10/2000',
+          sport: 'Swimming',
+          gold: 1,
+          silver: 3,
+          bronze: 0,
+          total: 4,
+        },
+        {
+          athlete: 'Jenny Thompson',
+          age: 27,
+          country: 'United States',
+          year: 2000,
+          date: '01/10/2000',
+          sport: 'Swimming',
+          gold: 3,
+          silver: 0,
+          bronze: 1,
+          total: 4,
+        },
+        {
+          athlete: 'Pieter van den Hoogenband',
+          age: 22,
+          country: 'Netherlands',
+          year: 2000,
+          date: '01/10/2000',
+          sport: 'Swimming',
+          gold: 2,
+          silver: 0,
+          bronze: 2,
+          total: 4,
+        },
+        {
+          athlete: 'An Hyeon-Su',
+          age: 20,
+          country: 'South Korea',
+          year: 2006,
+          date: '26/02/2006',
+          sport: 'Short-Track Speed Skating',
+          gold: 3,
+          silver: 0,
+          bronze: 1,
+          total: 4,
+        },
+        {
+          athlete: 'Aliya Mustafina',
+          age: 17,
+          country: 'Russia',
+          year: 2012,
+          date: '12/08/2012',
+          sport: 'Gymnastics',
+          gold: 1,
+          silver: 1,
+          bronze: 2,
+          total: 4,
+        },
+        {
+          athlete: 'Shawn Johnson',
+          age: 16,
+          country: 'United States',
+          year: 2008,
+          date: '24/08/2008',
+          sport: 'Gymnastics',
+          gold: 1,
+          silver: 3,
+          bronze: 0,
+          total: 4,
+        },
+      ];
-  const columnDefs = [
-    {
-      headerName: '#',
-      colId: 'rowNum',
-      valueGetter: 'node.id',
-      width: 80,
-      pinned: 'left',
-    },
-    {headerName: 'Athlete', field: 'athlete', width: 150, pinned: 'left'},
-    {headerName: 'Age', field: 'age', width: 90, pinned: 'left'},
-    {headerName: 'Country', field: 'country', width: 150},
-    {headerName: 'Year', field: 'year', width: 90},
-    {headerName: 'Date', field: 'date', width: 110},
-    {headerName: 'Sport', field: 'sport', width: 150},
-    {headerName: 'Gold', field: 'gold', width: 100},
-    {headerName: 'Silver', field: 'silver', width: 100},
-    {headerName: 'Bronze', field: 'bronze', width: 100},
-    {headerName: 'Total', field: 'total', width: 100, pinned: 'right'},
-  ];
+      const columnDefs = [
+        {
+          headerName: '#',
+          colId: 'rowNum',
+          valueGetter: 'node.id',
+          width: 80,
+          pinned: 'left',
+        },
+        { headerName: 'Athlete', field: 'athlete', width: 150, pinned: 'left' },
+        { headerName: 'Age', field: 'age', width: 90, pinned: 'left' },
+        { headerName: 'Country', field: 'country', width: 150 },
+        { headerName: 'Year', field: 'year', width: 90 },
+        { headerName: 'Date', field: 'date', width: 110 },
+        { headerName: 'Sport', field: 'sport', width: 150 },
+        { headerName: 'Gold', field: 'gold', width: 100 },
+        { headerName: 'Silver', field: 'silver', width: 100 },
+        { headerName: 'Bronze', field: 'bronze', width: 100 },
+        { headerName: 'Total', field: 'total', width: 100, pinned: 'right' },
+      ];
-  const gridOptions = {
-    defaultColDef: {
-      resizable: true,
-      filter: true,
-    },
-    columnDefs,
-    debug: true,
-    rowData,
-  };
+      const gridOptions = {
+        defaultColDef: {
+          resizable: true,
+          filter: true,
+        },
+        columnDefs,
+        debug: true,
+        rowData,
+      };
-  const loadButton = document.querySelector('#js-load-ag-row-data');
-  const toggleButton = document.querySelector('#js-toggle-theme');
-  const dsProviderElement = document.querySelector('foundation-design-system-provider');
-  const gridElement = document.querySelector('grid-pro');
-  let themeOn = true;
+      const loadButton = document.querySelector('#js-load-ag-row-data');
+      const toggleButton = document.querySelector('#js-toggle-theme');
+      const dsProviderElement = document.querySelector('foundation-design-system-provider');
+      const gridElement = document.querySelector('grid-pro');
+      let themeOn = true;
-  loadButton.addEventListener('click', () => {
-    gridElement['gridOptions'] = gridOptions;
-  });
+      loadButton.addEventListener('click', () => {
+        gridElement['gridOptions'] = gridOptions;
+      });
-  toggleButton.addEventListener('click', () => {
-    themeOn = !themeOn;
-    if (themeOn) {
-      gridElement.setAttribute('theme', 'ag-theme-alpine');
-      return;
-    }
-    gridElement.removeAttribute('theme');
-  });
+      toggleButton.addEventListener('click', () => {
+        themeOn = !themeOn;
+        if (themeOn) {
+          gridElement.setAttribute('theme', 'ag-theme-alpine');
+          return;
+        }
+        gridElement.removeAttribute('theme');
+      });
-  window.addEventListener('DOMContentLoaded', () => {
-    dsProviderElement.style.display = 'flex';
-  });
-</script>
-</body>
+      window.addEventListener('DOMContentLoaded', () => {
+        dsProviderElement.style.display = 'flex';
+      });
+    </script>
+  </body>
 </html>