josephj/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="./styles.css">
    <style>html, body {background: black; color: #fff}
    button {padding: 10px; border-radius: 6px; border: none;}
    </style>
  </head>
  <body>
    <div id="wrapper">
      <button data-char="A">A</Button>
      <button data-char="B">B</Button>
      <button data-char="C">C</Button>
      <button data-char="D">D</Button>
      <button data-char="E">E</Button>
      <button data-char="F">F</Button>
      <button data-char="G">G</Button>
      <button data-char="H">H</Button>
    </div>
    <div id="output"></div>
    <script>
    const { ipcRenderer } = require('electron');
    const wrapperEl = document.getElementById('wrapper');
    const outputEl = document.getElementById('output');
    wrapperEl.addEventListener('click', e => {
      const target = e.target;
      if (!target.dataset.char) return;
      outputEl.innerHTML += ' ' + target.dataset.char;
      ipcRenderer.send('keyboard', target.dataset.char);
    });
    </script>
  </body>
</html>

## main.js
// Modules to control application life and create native browser window
const {app, BrowserView, BrowserWindow} = require('electron')
const { ipcMain } = require('electron');

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  // and load the index.html of the app.
  mainWindow.loadURL('https://www.google.com/')

  let bottomView = new BrowserView({
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.setBrowserView(bottomView)
  bottomView.setBounds({ x: 0, y: 500, width: 1000, height: 100 })
  bottomView.webContents.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
  ipcMain.on('keyboard', (event, char) => {
    mainWindow.webContents.sendInputEvent({type: 'char', keyCode: char});
  });
}

// 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', function () {
  // On OS X 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', function () {
  // On OS X 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 (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	<link rel="stylesheet" type="text/css" href="./styles.css">
	<style>html, body {background: black; color: #fff}
	button {padding: 10px; border-radius: 6px; border: none;}
	</style>
	</head>
	<body>
	<div id="wrapper">
	<button data-char="A">A</Button>
	<button data-char="B">B</Button>
	<button data-char="C">C</Button>
	<button data-char="D">D</Button>
	<button data-char="E">E</Button>
	<button data-char="F">F</Button>
	<button data-char="G">G</Button>
	<button data-char="H">H</Button>
	</div>
	<div id="output"></div>
	<script>
	const { ipcRenderer } = require('electron');
	const wrapperEl = document.getElementById('wrapper');
	const outputEl = document.getElementById('output');
	wrapperEl.addEventListener('click', e => {
	const target = e.target;
	if (!target.dataset.char) return;
	outputEl.innerHTML += ' ' + target.dataset.char;
	ipcRenderer.send('keyboard', target.dataset.char);
	});
	</script>
	</body>
	</html>
	// Modules to control application life and create native browser window
	const {app, BrowserView, BrowserWindow} = require('electron')
	const { ipcMain } = require('electron');

	function createWindow () {
	// Create the browser window.
	const mainWindow = new BrowserWindow({
	width: 1000,
	height: 600,
	webPreferences: {
	nodeIntegration: true
	}
	})
	// and load the index.html of the app.
	mainWindow.loadURL('https://www.google.com/')

	let bottomView = new BrowserView({
	webPreferences: {
	nodeIntegration: true
	}
	});
	mainWindow.setBrowserView(bottomView)
	bottomView.setBounds({ x: 0, y: 500, width: 1000, height: 100 })
	bottomView.webContents.loadFile('index.html')

	// Open the DevTools.
	// mainWindow.webContents.openDevTools()
	ipcMain.on('keyboard', (event, char) => {
	mainWindow.webContents.sendInputEvent({type: 'char', keyCode: char});
	});
	}

	// 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', function () {
	// On OS X 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', function () {
	// On OS X 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 (BrowserWindow.getAllWindows().length === 0) {
	createWindow()
	}
	})

	// In this file you can include the rest of your app's specific main process
	// code. You can also put them in separate files and require them here.