davidsharp/index.html

## index.html
<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <!--<script>window.$ = window.Bootstrap = require("./node_modules/bootstrap/js/dist/dropdown.js")</script>
      <link rel="stylesheet" href=".\node_modules\bootstrap\dist\css\bootstrap.min.css">
      <script>window.$ = window.jQuery = require("./node_modules/jquery/dist/jquery.js")</script>-->
    </head>

    <style>
    body {background-color: #212529}
    </style>

    <style type='text/css'>


  /* This style should explicitly set your navbar to a certain height */
  .navbar, .navbar div, .navbar-brand, .navbar-header {
     min-height: 0px;
     max-height: 20px;
     height: 20px;
  }
  /* Additional styles to style some of your child elements */
  .navbar .navbar-brand { padding: 0px;  }
  .navbar .navbar-toggle { padding: 0px; }

  .imgContainer {position:absolute; right:0px; top:0px;}


</style>

    <!--Nav Bar>-->

    <body>
      <nav class="navbar navbar-dark py-0 bg-dark navbar-expand-lg py-md-0">
      <a class="navbar-brand" href="#" style="font-size: 16px"></a>
      <button class="navbar-toggler mt-1" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fa fa-bars"></i>
      </button>
      <div class="navbar-collapse collapse" id="navbarNav">
          <ul class="navbar-nav">
              <li class="nav-item py-0"><a href="#" class="nav-link">Dashboard</a></li>
              <li class="nav-item py-0"><a href="#" class="nav-link">Positions</a></li>
              <li class="nav-item py-0"><a href="#" class="nav-link" id = "screener">Screener</a></li>
              <li class="nav-item py-0"><a href="#" class="nav-link">Message</a></li>
              <li class="nav-item py-0"><a href="#" class="nav-link">Options</a></li>
         </ul>
      </div>
  </nav>
  <div class="container-fluid">
      <div class="row">
          <div class="col"></div>
      </div>
  </div>
  <img src="img/minimize.svg" width="20" height="20" style="position:absolute; top:0; right:21px;" id ="minimize">
  <img src="img/exit.svg" width="20" height="20" style="position:absolute; top:0; right:0;" id ="exit">


    <script type="text/javascript" src="renderer.js"></script>

    </body>
  </html>

## main.js
const { app, BrowserWindow } = require('electron')

  // Keep a global reference of the window object, if you don't, the window will
  // be closed automatically when the JavaScript object is garbage collected.
  let win


  function createWindow () {
    // Create the browser window.
    win = new BrowserWindow({frame: false})
    win.maximize()

    // and load the index.html of the app.
    win.loadURL(`file://${__dirname}/index.html`)

    // Open the DevTools.
    //win.webContents.openDevTools()

    // Emitted when the window is closed.
    win.on('closed', () => {
      // Dereference the window object, usually you would store windows
      // in an array if your app supports multi windows, this is the time
      // when you should delete the corresponding element.
      win = null
    })
  }

  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
  app.on('ready', createWindow)

  // Quit when all windows are closed.
  app.on('window-all-closed', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })

  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
      createWindow()
    }
  })

## package.json
{
  "name": "for-msd90",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT"
}

## renderer.js
'use strict'

//window.jQuery = require('jquery');
//window.Bootstrap = require('bootstrap');

var {ipcRenderer, remote, screen, webContents} = require('electron');
const path = require('path')
const BrowserWindow = remote.BrowserWindow


var main = remote.require("./main.js");
var allScreens = screen.getAllDisplays();


exit.addEventListener( "click", e => {
  var window = remote.getCurrentWindow();
  window.close();
 } );


 minimize.addEventListener( "click", e => {
   var window = remote.getCurrentWindow();
   window.minimize();
  } );

  screener.addEventListener('click', function (event) {
    var window = remote.getCurrentWindow();
    let win = new BrowserWindow({
          frame: false,
          width: 400,
          height: 700,
          skipTaskbar:true,
          parent: window,
          movable:true,
          resizable:true
      })
    win.setPosition(966, 20);
    win.loadURL(`file://${__dirname}/screener.html`);
    win.on('close', () => {
    console.log('window closed')

  })


})

## screener.html
<!DOCTYPE html>
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-user-select: none;
  -webkit-app-region: drag;
  background-image: linear-gradient(180deg, #171717 25%, #0f0f0f 25%, #0f0f0f 50%, #171717 50%, #171717 75%, #0f0f0f 75%, #0f0f0f 100%);
  background-size: 80.00px 80.00px;
}

.topnav {
  overflow: hidden;
  background-color: black;
  height:20px;

}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 5px 16px;
  text-decoration: none;
  font-size: 10px;
}

.topnav a.active {
  background-color: black;
  color: white;
}
#search{
  width: 150px;
  height: 20px;
}
</style>
</head>
<!--<script>window.$ = window.Bootstrap = require("./node_modules/bootstrap/js/dist/dropdown.js")</script>
<link rel="stylesheet" href=".\node_modules\bootstrap\dist\css\bootstrap.min.css">
<script>window.$ = window.jQuery = require("./node_modules/jquery/dist/jquery.js")</script>-->
<body>

<div class="topnav">
  <a class="active" href="#home">Screener</a>
  <img src="img/screenerExit.png" width="20" height="20" style="float: right;" id="screenerExit">
</div>
<script type="text/javascript" src="screenerRenderer.js"></script>

</body>


</html>

## screenerrenderer.js
'use strict'

//window.jQuery = require('jquery');
//window.Bootstrap = require('bootstrap');

var {ipcRenderer, remote, screen, webContents} = require('electron');

screenerExit.addEventListener( "click", e => {
  var window = remote.getCurrentWindow();
  window.close();
 } );
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<!--<script>window.$ = window.Bootstrap = require("./node_modules/bootstrap/js/dist/dropdown.js")</script>
	<link rel="stylesheet" href=".\node_modules\bootstrap\dist\css\bootstrap.min.css">
	<script>window.$ = window.jQuery = require("./node_modules/jquery/dist/jquery.js")</script>-->
	</head>

	<style>
	body {background-color: #212529}
	</style>

	<style type='text/css'>


	/* This style should explicitly set your navbar to a certain height */
	.navbar, .navbar div, .navbar-brand, .navbar-header {
	min-height: 0px;
	max-height: 20px;
	height: 20px;
	}
	/* Additional styles to style some of your child elements */
	.navbar .navbar-brand { padding: 0px; }
	.navbar .navbar-toggle { padding: 0px; }

	.imgContainer {position:absolute; right:0px; top:0px;}



	</style>

	<!--Nav Bar>-->

	<body>
	<nav class="navbar navbar-dark py-0 bg-dark navbar-expand-lg py-md-0">
	<a class="navbar-brand" href="#" style="font-size: 16px"></a>
	<button class="navbar-toggler mt-1" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-label="Toggle navigation">
	<i class="fa fa-bars"></i>
	</button>
	<div class="navbar-collapse collapse" id="navbarNav">
	<ul class="navbar-nav">
	<li class="nav-item py-0"><a href="#" class="nav-link">Dashboard</a></li>
	<li class="nav-item py-0"><a href="#" class="nav-link">Positions</a></li>
	<li class="nav-item py-0"><a href="#" class="nav-link" id = "screener">Screener</a></li>
	<li class="nav-item py-0"><a href="#" class="nav-link">Message</a></li>
	<li class="nav-item py-0"><a href="#" class="nav-link">Options</a></li>
	</ul>
	</div>
	</nav>
	<div class="container-fluid">
	<div class="row">
	<div class="col"></div>
	</div>
	</div>
	<img src="img/minimize.svg" width="20" height="20" style="position:absolute; top:0; right:21px;" id ="minimize">
	<img src="img/exit.svg" width="20" height="20" style="position:absolute; top:0; right:0;" id ="exit">




	<script type="text/javascript" src="renderer.js"></script>

	</body>
	</html>
	const { app, BrowserWindow } = require('electron')

	// Keep a global reference of the window object, if you don't, the window will
	// be closed automatically when the JavaScript object is garbage collected.
	let win



	function createWindow () {
	// Create the browser window.
	win = new BrowserWindow({frame: false})
	win.maximize()

	// and load the index.html of the app.
	win.loadURL(`file://${__dirname}/index.html`)

	// Open the DevTools.
	//win.webContents.openDevTools()

	// Emitted when the window is closed.
	win.on('closed', () => {
	// Dereference the window object, usually you would store windows
	// in an array if your app supports multi windows, this is the time
	// when you should delete the corresponding element.
	win = null
	})
	}

	// This method will be called when Electron has finished
	// initialization and is ready to create browser windows.
	// Some APIs can only be used after this event occurs.
	app.on('ready', createWindow)

	// Quit when all windows are closed.
	app.on('window-all-closed', () => {
	// On macOS it is common for applications and their menu bar
	// to stay active until the user quits explicitly with Cmd + Q
	if (process.platform !== 'darwin') {
	app.quit()
	}
	})

	app.on('activate', () => {
	// On macOS it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (win === null) {
	createWindow()
	}
	})
	{
	"name": "for-msd90",
	"version": "1.0.0",
	"main": "main.js",
	"license": "MIT"
	}
	'use strict'

	//window.jQuery = require('jquery');
	//window.Bootstrap = require('bootstrap');

	var {ipcRenderer, remote, screen, webContents} = require('electron');
	const path = require('path')
	const BrowserWindow = remote.BrowserWindow




	var main = remote.require("./main.js");
	var allScreens = screen.getAllDisplays();


	exit.addEventListener( "click", e => {
	var window = remote.getCurrentWindow();
	window.close();
	} );




	minimize.addEventListener( "click", e => {
	var window = remote.getCurrentWindow();
	window.minimize();
	} );

	screener.addEventListener('click', function (event) {
	var window = remote.getCurrentWindow();
	let win = new BrowserWindow({
	frame: false,
	width: 400,
	height: 700,
	skipTaskbar:true,
	parent: window,
	movable:true,
	resizable:true
	})
	win.setPosition(966, 20);
	win.loadURL(`file://${__dirname}/screener.html`);
	win.on('close', () => {
	console.log('window closed')

	})


	})
	<!DOCTYPE html>
	<style>
	body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	-webkit-user-select: none;
	-webkit-app-region: drag;
	background-image: linear-gradient(180deg, #171717 25%, #0f0f0f 25%, #0f0f0f 50%, #171717 50%, #171717 75%, #0f0f0f 75%, #0f0f0f 100%);
	background-size: 80.00px 80.00px;
	}

	.topnav {
	overflow: hidden;
	background-color: black;
	height:20px;

	}

	.topnav a {
	float: left;
	color: #f2f2f2;
	text-align: center;
	padding: 5px 16px;
	text-decoration: none;
	font-size: 10px;
	}

	.topnav a.active {
	background-color: black;
	color: white;
	}
	#search{
	width: 150px;
	height: 20px;
	}
	</style>
	</head>
	<!--<script>window.$ = window.Bootstrap = require("./node_modules/bootstrap/js/dist/dropdown.js")</script>
	<link rel="stylesheet" href=".\node_modules\bootstrap\dist\css\bootstrap.min.css">
	<script>window.$ = window.jQuery = require("./node_modules/jquery/dist/jquery.js")</script>-->
	<body>

	<div class="topnav">
	<a class="active" href="#home">Screener</a>
	<img src="img/screenerExit.png" width="20" height="20" style="float: right;" id="screenerExit">
	</div>
	<script type="text/javascript" src="screenerRenderer.js"></script>

	</body>




	</html>