diff --git a/css/style.css b/css/style.css index 7dae1a3..5561429 100644 --- a/css/style.css +++ b/css/style.css @@ -4,18 +4,82 @@ html, body{ margin:0px; padding: 0; overflow: hidden; + font-family: 'Roboto', sans-serif; } div { width:100%; - height:100%; + height:97%; } webview { height:100%; - width:100%; + height:97%; } ::-webkit-scrollbar { display: none; +} + + +.title-bar { + -webkit-app-region: drag; + margin: 0; + display: flex; + background-color: #23272A; + width: 100%; + height: 3%; + } + +.menu-button-container { + background-color: #23272A; + display: flex; + align-items: center; + flex-grow: 1; +} + +.status { + background-color: #23272A; + color: #FFFFFF; + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; +} + +.window-controls-container { + background-color: #23272A; + display: flex; + justify-content: flex-end; + align-items: center; + flex-grow: 1; +} + +.minimize-button { + border:none; + color: #FFFFFF; + -webkit-app-region: no-drag; + background-color: transparent; + margin: 1px; + width: 20px; + height: 20px; +} + +.minimize-button:hover { + background-color: #99AAB5; +} + +.close-button { + border:none; + color: #FFFFFF; + -webkit-app-region: no-drag; + background-color: transparent; + margin: 1px; + margin-right: 3px; + width: 20px; + height: 20px; +} + +.close-button:hover { + background-color: #B22222; } \ No newline at end of file diff --git a/index.html b/index.html index 7f0fba4..5eadde3 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,16 @@ +
+
+
+
+ + +
+
+ + diff --git a/main.js b/main.js index f13e1bd..23af21e 100644 --- a/main.js +++ b/main.js @@ -12,9 +12,10 @@ let devMode = false function createWindow () { // Create the browser window. mainWindow = new BrowserWindow({ - width: 1200, - height: 840, + width: 1000, + height: 750, icon: './assets/icon.ico', + frame: false, webPreferences: { preload: path.join(__dirname, 'preload.js'), nodeIntegration: true, diff --git a/renderer.js b/renderer.js index beb76f4..66a5b96 100644 --- a/renderer.js +++ b/renderer.js @@ -1,4 +1,4 @@ -const { ipcRenderer } = require('electron') +const { remote, ipcRenderer } = require('electron') onload = () => { const webview = document.querySelector('webview') @@ -22,11 +22,19 @@ onload = () => { console.log("talking") webview.sendInputEvent({keyCode: 'Backspace', type: 'keyDown'}); webview.sendInputEvent({keyCode: 'Backspace', type: 'char'}); + document.getElementById("title-bar-status").style.backgroundColor = "green" + document.getElementById("title-bar-controls").style.backgroundColor = "green" + document.getElementById("title-bar").style.backgroundColor = "green" + } if (msg === 'mic-closed'){ console.log("not talking") webview.sendInputEvent({keyCode: 'Backspace', type: 'keyUp'}); webview.sendInputEvent({keyCode: 'Backspace', type: 'char'}); + document.getElementById("title-bar-status").style.backgroundColor = "#23272A" + document.getElementById("title-bar-controls").style.backgroundColor = "#23272A" + document.getElementById("title-bar").style.backgroundColor = "#23272A" + } }) @@ -36,4 +44,12 @@ onload = () => { webview.openDevTools() } }) -} \ No newline at end of file +} + +document.getElementById('minimize-button').addEventListener('click', () => { + remote.getCurrentWindow().minimize() + }) + +document.getElementById('close-button').addEventListener('click', () => { + remote.app.quit() +}) \ No newline at end of file