Setup Frontend App

Current features *The frontend app is opened as disktop application *The navigation menu enables the user to choose between four other options *The app is responsive to the size of window Further improvements planned *Add further content to the Home page *Design the Manual Control page, Mission page layout, Help and setting page *connect the Frontend App with the SmartRover Fixes #2 Contributes to #2
DIT112-V21 · Apr 11, 2021 · 05143dc · 05143dc
1 parent 28a2bbc
commit 05143dc
Show file tree

Hide file tree

Showing 12 changed files with 180 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -30,3 +30,5 @@
 *.exe
 *.out
 *.app
+
+node_modules
diff --git a/frontendApp/.DS_Store b/frontendApp/.DS_Store
diff --git a/frontendApp/images/.DS_Store b/frontendApp/images/.DS_Store
diff --git a/frontendApp/images/Mars.jpg b/frontendApp/images/Mars.jpg
diff --git a/frontendApp/images/Rover.jpg b/frontendApp/images/Rover.jpg
diff --git a/frontendApp/images/cactus.jpg b/frontendApp/images/cactus.jpg
diff --git a/frontendApp/images/roundMars.jpg b/frontendApp/images/roundMars.jpg
diff --git a/frontendApp/images/smallRover.jpg b/frontendApp/images/smallRover.jpg
diff --git a/frontendApp/index.html b/frontendApp/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
+
+    <title>SmartRover</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+    <link rel="stylesheet" type = "text/css" href="style.css">
+</head>
+<body >
+    <div class = "wrapper">
+        <nav class="main-nav">
+            <input type="checkbox" id="check" >
+            <label for="check" class= "checkbtn">
+                <i class="fas fa-bars fa-2x"></i>
+
+
+            </label>
+
+
+            <label for="logo" class="logo">SmartRover</label>
+            <ul>
+
+                <li><a class= "active" href= "#">Home</a></li>
+                <li><a href= "#">Drive</a></li>
+                <li><a href= "#">Mission</a></li>
+                <li><a href= "#">Settings</a></li>
+            </ul>
+        </nav>
+        <section>
+
+        </section>
+
+    </div> <!--wrapper ends-->
+
+</body>
+</html>
diff --git a/frontendApp/main.js b/frontendApp/main.js
@@ -0,0 +1,30 @@
+const { app, BrowserWindow } = require('electron')
+const path = require('path')
+
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }
+  })
+
+  win.loadFile('index.html')
+}
+
+app.whenReady().then(() => {
+  createWindow()
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow()
+    }
+  })
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
diff --git a/frontendApp/style.css b/frontendApp/style.css
@@ -0,0 +1,110 @@
+*{
+    padding:0;
+    margin:0;
+    text-decoration: none;
+    list-style: none;
+    box-sizing: border-box;
+
+}
+body{
+    font-family:Georgia, 'Times New Roman', Times, serif;
+    background-image: url('images/Mars.jpg');
+}
+
+nav{
+    background-color: rgb(197, 145, 81);
+    background-image: url('images/kaktos.jpg') no-repeat;
+    background-size: cover;
+    height: 80px;
+    width: 100%;
+}
+ label.logo{
+
+     color:white;
+     font-size: 40px;
+     line-height:80px;
+     padding: 0 100px;
+     font-weight: bold;
+
+    }
+
+    nav ul{
+        float: right;
+        margin-right: 20px;
+    }
+    nav ul li{
+        display: inline-block;
+        line-height: 80px;
+        margin: 0 5px;
+    }
+
+    nav ul li a{
+        color:white;
+        font-size: 17px;
+        text-transform: uppercase;
+        padding: 7px 13px;
+        border-radius: 3px;
+    }
+
+    a.active, a:hover{
+        background: #ccab6c;
+        transition: .7s;
+
+    }
+
+    .checkbtn{
+        font-size: 30px;
+        color: white;
+        float: right;
+        line-height: 80px;
+        margin-right: 40px;
+        cursor: pointer;
+        display: none;
+    }
+
+    #check{
+        display: none;
+    }
+
+    @media (max-width: 952px){
+        label.logo{
+            font-size: 30px;
+            padding-left: 50px;
+        }
+        nav ul li a{
+            font-size: 16px;
+        }
+    }
+    @media (max-width: 858px){
+        .checkbtn{
+            display: block;
+        }
+        ul{
+            position:fixed;
+            width: 100%;
+            height: 100vh;
+            background-image: url('images/roundMars.jpg');
+            top: 80px;
+            left:-100%;
+            text-align: center;
+            transition: all .5s;
+
+        }
+        nav ul li{
+            display: block;
+            margin: 50px 0 ;
+            line-height: 30px; 
+        }
+        nav ul li a{
+            font-size: 20px;
+
+        }
+        a:hover, a.active{
+            background:none;
+            color:rgb(185, 122, 4);
+
+        }
+        #check:checked ~ ul{
+            left: 0;
+          }
+    }