sbatten/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>BrowserWindow</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="titlebar">
    <div class="button">Button</div>
  </div>
  <div class="content">
    <h1>Hello from your BrowserWindow!</h1>
    <button id="close-btn">Close this window</button>
  </div>
  <script>
    const button = document.querySelector('#close-btn')
    button.addEventListener('click', () => window.close())
  </script>
</body>
</html>

## main.js
// The "BrowserWindow" class is the primary way to create user interfaces
// in Electron. A BrowserWindow is, like the name suggests, a window.
//
// For more info, see:
// https://electronjs.org/docs/api/browser-window

const { app, BrowserWindow } = require('electron')

const windows = []

app.whenReady().then(() => {
  // BrowserWindows can be created in plenty of shapes, sizes, and forms.
  // Check out the editor's auto-completion for all the configuration
  // options available in the current version.
  //
  // Let's make a few windows!

  // A window that's only half visible
  windows.push(
    new BrowserWindow({
      frame: false,
      titleBarOverlay: true,
      titleBarStyle: "hidden",
      x: 800,
      y: 600
    })
  )


  windows.forEach((window) => {
    // Load our index.html
    window.loadFile('index.html')
  })
})

## package.json
{
  "name": "divergent-purpose-interest-627fk",
  "productName": "divergent-purpose-interest-627fk",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "author": "stbatt",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "13.6.7"
  }
}

## styles.css
body {
  display: flex;
  flex-direction: column;
  background-color: white;
  margin: 0px;
}
.titlebar {
  background-color: black;
  -webkit-app-region: drag;
  width: 100%;
  height: 28px;
}
.content {
  margin: 8px;
}

.titlebar .button {
  position: relative;
  height: 20px;
  width: 100px;
  right: 10px;
  top: 4px;
  margin-left: auto;
  background-color: white;
  -webkit-app-region: no-drag;
  cursor: pointer;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>BrowserWindow</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div class="titlebar">
	<div class="button">Button</div>
	</div>
	<div class="content">
	<h1>Hello from your BrowserWindow!</h1>
	<button id="close-btn">Close this window</button>
	</div>
	<script>
	const button = document.querySelector('#close-btn')
	button.addEventListener('click', () => window.close())
	</script>
	</body>
	</html>
	// The "BrowserWindow" class is the primary way to create user interfaces
	// in Electron. A BrowserWindow is, like the name suggests, a window.
	//
	// For more info, see:
	// https://electronjs.org/docs/api/browser-window

	const { app, BrowserWindow } = require('electron')

	const windows = []

	app.whenReady().then(() => {
	// BrowserWindows can be created in plenty of shapes, sizes, and forms.
	// Check out the editor's auto-completion for all the configuration
	// options available in the current version.
	//
	// Let's make a few windows!

	// A window that's only half visible
	windows.push(
	new BrowserWindow({
	frame: false,
	titleBarOverlay: true,
	titleBarStyle: "hidden",
	x: 800,
	y: 600
	})
	)


	windows.forEach((window) => {
	// Load our index.html
	window.loadFile('index.html')
	})
	})
	{
	"name": "divergent-purpose-interest-627fk",
	"productName": "divergent-purpose-interest-627fk",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"author": "stbatt",
	"scripts": {
	"start": "electron ."
	},
	"dependencies": {},
	"devDependencies": {
	"electron": "13.6.7"
	}
	}
	body {
	display: flex;
	flex-direction: column;
	background-color: white;
	margin: 0px;
	}
	.titlebar {
	background-color: black;
	-webkit-app-region: drag;
	width: 100%;
	height: 28px;
	}
	.content {
	margin: 8px;
	}

	.titlebar .button {
	position: relative;
	height: 20px;
	width: 100px;
	right: 10px;
	top: 4px;
	margin-left: auto;
	background-color: white;
	-webkit-app-region: no-drag;
	cursor: pointer;
	}