From 3ac5ae6a6638a85907a91bfbdd8d774ae963664f Mon Sep 17 00:00:00 2001
From: Brett Spaulding <brett.spaulding@stonesoft.io>
Date: Sun, 4 Aug 2024 19:19:04 -0400
Subject: [PATCH] [WIP] Translating the Flask HTML to Blade

---
 .../resources/views/assets/icons.blade.php    |   0
 .../views/assets/scripts-footer.blade.php     |   9 +
 .../views/assets/scripts-header.blade.php     |   5 +
 .../resources/views/assets/styles.blade.php   |   0
 php/src/resources/views/assets/zapp.blade.php |  17 ++
 .../views/components/action-menu.blade.php    |  10 +
 .../views/components/loader.blade.php         |   6 +
 php/src/resources/views/index.blade.php       | 173 ------------------
 .../resources/views/layouts/public.blade.php  |  54 ++++++
 .../modals/modal-download-queue.blade.php     |  20 ++
 .../views/modals/modal-settings.blade.php     |  21 +++
 .../resources/views/pages/download.blade.php  |  37 ++++
 .../views/utils/outdated-browser.blade.php    |   8 +
 13 files changed, 187 insertions(+), 173 deletions(-)
 create mode 100644 php/src/resources/views/assets/icons.blade.php
 create mode 100644 php/src/resources/views/assets/scripts-footer.blade.php
 create mode 100644 php/src/resources/views/assets/scripts-header.blade.php
 create mode 100644 php/src/resources/views/assets/styles.blade.php
 create mode 100644 php/src/resources/views/assets/zapp.blade.php
 create mode 100644 php/src/resources/views/components/action-menu.blade.php
 create mode 100644 php/src/resources/views/components/loader.blade.php
 create mode 100644 php/src/resources/views/layouts/public.blade.php
 create mode 100644 php/src/resources/views/modals/modal-download-queue.blade.php
 create mode 100644 php/src/resources/views/modals/modal-settings.blade.php
 create mode 100644 php/src/resources/views/pages/download.blade.php
 create mode 100644 php/src/resources/views/utils/outdated-browser.blade.php

diff --git a/php/src/resources/views/assets/icons.blade.php b/php/src/resources/views/assets/icons.blade.php
new file mode 100644
index 0000000..e69de29
diff --git a/php/src/resources/views/assets/scripts-footer.blade.php b/php/src/resources/views/assets/scripts-footer.blade.php
new file mode 100644
index 0000000..f2fae7e
--- /dev/null
+++ b/php/src/resources/views/assets/scripts-footer.blade.php
@@ -0,0 +1,9 @@
+<script src="https://code.jquery.com/jquery-3.7.0.min.js" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
+        crossorigin="anonymous"></script>
+<script type="text/javascript">
+    $(window).on('load', function () {
+        $("#loader-wrapper").fadeOut(900);
+    });
+</script>
+<script src="{{ asset('js/app.js') }}"></script>
diff --git a/php/src/resources/views/assets/scripts-header.blade.php b/php/src/resources/views/assets/scripts-header.blade.php
new file mode 100644
index 0000000..0f1b9a5
--- /dev/null
+++ b/php/src/resources/views/assets/scripts-header.blade.php
@@ -0,0 +1,5 @@
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+<script src="https://unpkg.com/htmx.org@2.0.1"
+        integrity="sha384-QWGpdj554B4ETpJJC9z+ZHJcA/i59TyjxEPXiiUgN2WmTyV5OEZWCD6gQhgkdpB/"
+        crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
diff --git a/php/src/resources/views/assets/styles.blade.php b/php/src/resources/views/assets/styles.blade.php
new file mode 100644
index 0000000..e69de29
diff --git a/php/src/resources/views/assets/zapp.blade.php b/php/src/resources/views/assets/zapp.blade.php
new file mode 100644
index 0000000..bbb1ca7
--- /dev/null
+++ b/php/src/resources/views/assets/zapp.blade.php
@@ -0,0 +1,17 @@
+<!--    #         ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣤⣴⣶⣶⣦⡀            -->
+<!--    #         ⠀⣤⡀⢀⣤⣶⣶⣶⣶⣶⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿            -->
+<!--    #         ⢀⣈⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿            -->
+<!--    #         ⠈⢩⣿⣿⣿⣿⣿⠋⠉⠉⠉⠁⠀⠀⠀⠀⠀⠀⠉⠙⣿⡋⠀            -->
+<!--    #         ⠀⣿⣿⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣧⠀            -->
+<!--    #         ⠀⣿⣿⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⢀⣤⠀⣤⡄⠀⠈⠻⣷            -->
+<!--    #         ⠀⢿⣿⣿⣿⣿⣿⠀⢴⣾⠿⢿⠿⠿⣿⠏⠀⠸⣿⡿⠿⢿⡟            -->
+<!--    #         ⠀⠘⣿⡿⠿⢿⣏⠀⠀⠻⢷⣤⣤⡾⠟⠀⠀⠀⢻⣷⠶⢿⡇            -->
+<!--    #         ⠀⢰⣿⠀⣤⠀⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣿⠄⢸⡇            -->
+<!--    #         ⠀⠀⢿⣦⣤⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⢶⣶⠾⠛⠀⠘⣿            -->
+<!--    #         ⠀⠀⠀⢸⣯⠀⠀⠀⠀⣾⠛⢿⡷⣶⣤⣤⣤⣤⣤⣤⣶⠾⠋            -->
+<!--    #         ⠀⠀⠀⠘⣿⠀⠀⠀⠀⠻⢷⣾⣇⣀⣿⡇⠈⣿⣇⣸⣇⠀⠀            -->
+<!--    #         ⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⠀⠉⠙⠛⠛⠛⠛⠛⠛⢛⣿⠇⠀            -->
+<!--    #         ⠀⠀⠀⠀⣿⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⡏⠀⠀            -->
+<!--    #         ⠀⠀⠀⠀⠻⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⠃⠀⠀            -->
+
+<!-- "She’s built like a steakhouse but handles like a bistro." -->
diff --git a/php/src/resources/views/components/action-menu.blade.php b/php/src/resources/views/components/action-menu.blade.php
new file mode 100644
index 0000000..5cfe79a
--- /dev/null
+++ b/php/src/resources/views/components/action-menu.blade.php
@@ -0,0 +1,10 @@
+<div id="action_list">
+    <span>
+        <a href="#download-queue" class="pl-2">
+            <i class="las la-2x la-list queue_btn"></i>
+        </a>
+        <a href="#settings" class="pl-2">
+            <i class="las la-2x la-cog settings_btn"></i>
+        </a>
+    </span>
+</div>
diff --git a/php/src/resources/views/components/loader.blade.php b/php/src/resources/views/components/loader.blade.php
new file mode 100644
index 0000000..f2d964b
--- /dev/null
+++ b/php/src/resources/views/components/loader.blade.php
@@ -0,0 +1,6 @@
+<div id="loader-wrapper" class="bg-white position-fixed z-3 w-100 h-100 text-center">
+    <div class="centered text-center" role="status" style="position: fixed; top: 50%;">
+        <i class="la la-4x la-compact-disc icn-spinner"></i>
+        <h3>Loading..</h3>
+    </div>
+</div>
diff --git a/php/src/resources/views/index.blade.php b/php/src/resources/views/index.blade.php
index 6299132..e69de29 100644
--- a/php/src/resources/views/index.blade.php
+++ b/php/src/resources/views/index.blade.php
@@ -1,173 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8"/>
-    <title>getDiscography</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1"/>
-    <meta name="description" content=""/>
-    <link href="https://cdn.jsdelivr.net/npm/modern-normalize@v2.0.0/modern-normalize.min.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
-          crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href=" {{ asset('/css/line-awesome.min.css') }}"/>
-    <link rel="stylesheet" type="text/css" href="{{ asset('/css/style.css') }}"/>
-
-    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('favicon.svg') }}">
-    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('favicon.svg') }}">
-    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{{ asset('favicon.svg') }}">
-    <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
-    <meta name="theme-color" content="#1db8d7">
-
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-    <script src="https://unpkg.com/htmx.org@2.0.1" integrity="sha384-QWGpdj554B4ETpJJC9z+ZHJcA/i59TyjxEPXiiUgN2WmTyV5OEZWCD6gQhgkdpB/" crossorigin="anonymous"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-</head>
-<body>
-
-<div id="loader-wrapper" class="bg-white position-fixed z-3 w-100 h-100 text-center">
-    <div class="centered text-center" role="status" style="position: fixed; top: 50%;">
-        <i class="la la-4x la-compact-disc icn-spinner"></i>
-        <h3>Loading..</h3>
-    </div>
-</div>
-
-<div id="content">
-    <div class="wrapper">
-        <div class="page-wrapper">
-            <div class="page-content">
-
-                <div id="action_list">
-                    <span>
-                        <a href="#download-queue" class="pl-2">
-                            <i class="las la-2x la-list queue_btn"></i>
-                        </a>
-                        <a href="#settings" class="pl-2">
-                            <i class="las la-2x la-cog settings_btn"></i>
-                        </a>
-                    </span>
-                </div>
-
-                <div class="container">
-                    <div class="row">
-                        <div id="disk" class="card centered spin">
-
-                            <div class="disk-content centered">
-                                <!-- LOGO -->
-                                <div class="logo-home mx-auto">
-                                    <a id="logo" class="text-black btn-modal" href="#" data-action="main_menu">
-                                        <h1 class="logo-text" style="margin-left: 6px;">
-                                            getDiscography
-                                        </h1>
-                                    </a>
-                                </div>
-
-                                <div class="text-center mb-2">
-                                    <p>Enter an Artist</p>
-                                </div>
-
-                                <!-- Search bar -->
-                                <div id="search-container">
-                                    <div class="input-group mb-3">
-                                        <input id="search_bar" type="text" class="form-control" placeholder=""
-                                               aria-label="Search" aria-describedby="Search"/>
-                                    </div>
-                                </div>
-
-                                <a id="download_btn" class="btn btn-outline-secondary action-item-home btn-modal"
-                                   href="#download"
-                                   data-action="download">
-                                    <i class="las la-download"></i>
-                                    Download
-                                </a>
-                            </div>
-
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Download Queue Modal -->
-                <div class="modal fade"
-                     id="modalDownloadQueue" tabindex="-1" aria-labelledby="modalDownloadQueue" aria-hidden="true">
-                    <div class="modal-dialog  modal-dialog-centered modal-lg modal-dialog-scrollable modal-fullscreen-md-down modal-fullscreen-sm-down">
-                        <div class="modal-content">
-                            <div class="modal-header">
-                                <h5 class="modal-title" id="exampleModalLabel">Download Queue</h5>
-                                <button type="button" class="btn-close" data-bs-dismiss="modal"
-                                        aria-label="Close"></button>
-                            </div>
-                            <div class="modal-body">
-                                <div id="modal_content"></div>
-                            </div>
-                            <div class="modal-footer">
-                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Settings Modal -->
-                <div class="modal fade"
-                     id="modalSettings" tabindex="-1" aria-labelledby="modalSettings" aria-hidden="true">
-                    <div class="modal-dialog  modal-dialog-centered modal-lg modal-dialog-scrollable modal-fullscreen-md-down modal-fullscreen-sm-down">
-                        <div class="modal-content">
-                            <div class="modal-header">
-                                <h5 class="modal-title" id="exampleModalLabel">Settings</h5>
-                                <button type="button" class="btn-close" data-bs-dismiss="modal"
-                                        aria-label="Close"></button>
-                            </div>
-                            <div class="modal-body">
-                                <p>No settings yet, check back later. A configurable output path is on the todo list!</p>
-                            </div>
-                            <div class="modal-footer">
-                                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save</button>
-                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!--[if IE]>
-                <div class="position-fixed bottom-0 w-100 p-2 text-bg-dark d-flex justify-content-between"><p>
-                    Outdated
-                    browser
-                    dectected. Please use a modern browser for a better browsing experience.</p>
-                    <button type="button" class="btn-close btn-close-white" onClick="parentNode.remove()"
-                            aria-label="Close"></button>
-                </div><![endif]-->
-
-
-<!--    #         ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣤⣴⣶⣶⣦⡀            -->
-<!--    #         ⠀⣤⡀⢀⣤⣶⣶⣶⣶⣶⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿            -->
-<!--    #         ⢀⣈⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿            -->
-<!--    #         ⠈⢩⣿⣿⣿⣿⣿⠋⠉⠉⠉⠁⠀⠀⠀⠀⠀⠀⠉⠙⣿⡋⠀            -->
-<!--    #         ⠀⣿⣿⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣧⠀            -->
-<!--    #         ⠀⣿⣿⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⢀⣤⠀⣤⡄⠀⠈⠻⣷            -->
-<!--    #         ⠀⢿⣿⣿⣿⣿⣿⠀⢴⣾⠿⢿⠿⠿⣿⠏⠀⠸⣿⡿⠿⢿⡟            -->
-<!--    #         ⠀⠘⣿⡿⠿⢿⣏⠀⠀⠻⢷⣤⣤⡾⠟⠀⠀⠀⢻⣷⠶⢿⡇            -->
-<!--    #         ⠀⢰⣿⠀⣤⠀⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣿⠄⢸⡇            -->
-<!--    #         ⠀⠀⢿⣦⣤⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⢶⣶⠾⠛⠀⠘⣿            -->
-<!--    #         ⠀⠀⠀⢸⣯⠀⠀⠀⠀⣾⠛⢿⡷⣶⣤⣤⣤⣤⣤⣤⣶⠾⠋            -->
-<!--    #         ⠀⠀⠀⠘⣿⠀⠀⠀⠀⠻⢷⣾⣇⣀⣿⡇⠈⣿⣇⣸⣇⠀⠀            -->
-<!--    #         ⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⠀⠉⠙⠛⠛⠛⠛⠛⠛⢛⣿⠇⠀            -->
-<!--    #         ⠀⠀⠀⠀⣿⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⡏⠀⠀            -->
-<!--    #         ⠀⠀⠀⠀⠻⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⠃⠀⠀            -->
-
-<!-- "She’s built like a steakhouse but handles like a bistro." -->
-
-
-
-                <script src="https://code.jquery.com/jquery-3.7.0.min.js" crossorigin="anonymous"></script>
-                <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
-                        crossorigin="anonymous"></script>
-                <script type="text/javascript">
-                    $(window).on('load', function () {
-                        $("#loader-wrapper").fadeOut(900);
-                    });
-                </script>
-                <script src="{{ asset('js/app.js') }}"></script>
-            </div>
-        </div>
-    </div>
-</div>
-
-</body>
-</html>
diff --git a/php/src/resources/views/layouts/public.blade.php b/php/src/resources/views/layouts/public.blade.php
new file mode 100644
index 0000000..3dc7083
--- /dev/null
+++ b/php/src/resources/views/layouts/public.blade.php
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <title>getDiscography</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1"/>
+    <meta name="description" content=""/>
+    <link href="https://cdn.jsdelivr.net/npm/modern-normalize@v2.0.0/modern-normalize.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
+          crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href=" {{ asset('/css/line-awesome.min.css') }}"/>
+    <link rel="stylesheet" type="text/css" href="{{ asset('/css/style.css') }}"/>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('favicon.svg') }}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('favicon.svg') }}">
+    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{{ asset('favicon.svg') }}">
+    <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
+    <meta name="theme-color" content="#1db8d7">
+    @include('assets.scripts-header');
+
+</head>
+<body>
+
+@include('components.loader');
+
+<div id="content">
+    <div class="wrapper">
+        <div class="page-wrapper">
+            <div class="page-content">
+
+                <!-- Navigation -->
+                @include('components.action-menu');
+
+                <main class="container">
+                    {{ $slot }}
+                </main>
+
+                <!-- Modals -->
+                @include('modals.modal-download-queue');
+                @include('modals.modal-settings');
+
+                <!-- Utilities -->
+                @include('utils.outdated-browser');
+
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Assets -->
+@include('assets.zapp');
+@include('assets.scripts-footer');
+</body>
+</html>
diff --git a/php/src/resources/views/modals/modal-download-queue.blade.php b/php/src/resources/views/modals/modal-download-queue.blade.php
new file mode 100644
index 0000000..8c18dd6
--- /dev/null
+++ b/php/src/resources/views/modals/modal-download-queue.blade.php
@@ -0,0 +1,20 @@
+<!-- Download Queue Modal -->
+<div class="modal fade"
+     id="modalDownloadQueue" tabindex="-1" aria-labelledby="modalDownloadQueue" aria-hidden="true">
+    <div
+        class="modal-dialog  modal-dialog-centered modal-lg modal-dialog-scrollable modal-fullscreen-md-down modal-fullscreen-sm-down">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Download Queue</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"
+                        aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div id="modal_content"></div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/php/src/resources/views/modals/modal-settings.blade.php b/php/src/resources/views/modals/modal-settings.blade.php
new file mode 100644
index 0000000..4440100
--- /dev/null
+++ b/php/src/resources/views/modals/modal-settings.blade.php
@@ -0,0 +1,21 @@
+<!-- Settings Modal -->
+<div class="modal fade"
+     id="modalSettings" tabindex="-1" aria-labelledby="modalSettings" aria-hidden="true">
+    <div
+        class="modal-dialog  modal-dialog-centered modal-lg modal-dialog-scrollable modal-fullscreen-md-down modal-fullscreen-sm-down">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Settings</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"
+                        aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>No settings yet, check back later. A configurable output path is on the todo list!</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save</button>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/php/src/resources/views/pages/download.blade.php b/php/src/resources/views/pages/download.blade.php
new file mode 100644
index 0000000..427181b
--- /dev/null
+++ b/php/src/resources/views/pages/download.blade.php
@@ -0,0 +1,37 @@
+<div class="container">
+    <div class="row">
+        <div id="disk" class="card centered spin">
+
+            <div class="disk-content centered">
+                <!-- LOGO -->
+                <div class="logo-home mx-auto">
+                    <a id="logo" class="text-black btn-modal" href="#" data-action="main_menu">
+                        <h1 class="logo-text" style="margin-left: 6px;">
+                            getDiscography
+                        </h1>
+                    </a>
+                </div>
+
+                <div class="text-center mb-2">
+                    <p>Enter an Artist</p>
+                </div>
+
+                <!-- Search bar -->
+                <div id="search-container">
+                    <div class="input-group mb-3">
+                        <input id="search_bar" type="text" class="form-control" placeholder=""
+                               aria-label="Search" aria-describedby="Search"/>
+                    </div>
+                </div>
+
+                <a id="download_btn" class="btn btn-outline-secondary action-item-home btn-modal"
+                   href="#download"
+                   data-action="download">
+                    <i class="las la-download"></i>
+                    Download
+                </a>
+            </div>
+
+        </div>
+    </div>
+</div>
diff --git a/php/src/resources/views/utils/outdated-browser.blade.php b/php/src/resources/views/utils/outdated-browser.blade.php
new file mode 100644
index 0000000..185eb74
--- /dev/null
+++ b/php/src/resources/views/utils/outdated-browser.blade.php
@@ -0,0 +1,8 @@
+<!--[if IE]>
+<div class="position-fixed bottom-0 w-100 p-2 text-bg-dark d-flex justify-content-between"><p>
+    Outdated
+    browser
+    dectected. Please use a modern browser for a better browsing experience.</p>
+    <button type="button" class="btn-close btn-close-white" onClick="parentNode.remove()"
+            aria-label="Close"></button>
+</div><![endif]-->