Bootstrap setup

Mattk70 · Dec 30, 2019 · 93fe13b · 93fe13b
1 parent 01c5990
commit 93fe13b
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -61,10 +61,18 @@ BirdNET requires Tensorflow.js which we install with:
 npm install @tensorflow/tfjs
 ```
 
+Install Bootstrap and its dependencies:
+
+```
+npm install bootstrap
+npm install jquery
+npm install popper.js
+```
+
 This app also needs some additional packages that we have to install.
 
 ```
-npm i audio-loader
-npm i audio-resampler
-npm i array-normalize
+npm install audio-loader
+npm install audio-resampler
+npm install array-normalize
 ```
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/bootstrap.min.css.map b/css/bootstrap.min.css.map
diff --git a/index.html b/index.html
@@ -1,19 +1,50 @@
 <!doctype html>
 <html lang="en">
 <head>
+  <!-- Required meta tags -->
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> 
 
-    <!-- Required meta tags -->
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> 
+  <!-- Bootstrap & CSS-->
+  <link rel="stylesheet" href="css/bootstrap.min.css" />
+  <script>let $ = require('jquery');</script>
+  <script>require('popper.js');</script>
+  <script>require('bootstrap');</script>
+
+  <!-- Additional JavaScript -->
+  <script src="js/birdnet.js"></script>  
 
-    <!-- Bootstrap & CSS-->
-    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
-    <link rel="stylesheet" type="text/css" href="css/style.css">
+  <!-- App title -->
+  <title>BirdNET Sound Analysis</title>
 
-    <!-- Additional JavaScript -->
-    <script src="js/jquery-3.4.1.min.js"></script>
-    <script src="js/birdnet.js"></script>
+</head>
+<body>
 
-    <title>BirdNET Sound Analysis</title>
-</head>
+  <!-- Navigation bar -->
+  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
+    <a class="navbar-brand" href="#">BirdNET</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto">        
+        <li class="nav-item dropdown active">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            File
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <a class="dropdown-item" href="#">Open audio file</a>
+            <a class="dropdown-item" href="#">Save analysis results</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="#">Exit application</a>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </nav>
+
+
+
+</body>
diff --git a/js/bootstrap.bundle.min.js b/js/bootstrap.bundle.min.js
diff --git a/js/bootstrap.bundle.min.js.map b/js/bootstrap.bundle.min.js.map
diff --git a/js/jquery-3.4.1.min.js b/js/jquery-3.4.1.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,9 @@
     "@tensorflow/tfjs": "^1.5.1",
     "array-normalize": "^1.1.4",
     "audio-loader": "^1.0.3",
-    "audio-resampler": "^1.0.1"
+    "audio-resampler": "^1.0.1",
+    "bootstrap": "^4.4.1",
+    "jquery": "^3.4.1",
+    "popper.js": "^1.16.0"
   }
 }