abacaj/index.html

## index.html
<!DOCTYPE html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta property="og:title" content="" />
    <meta property="og:type" content="" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="" />
    <style>
      body {
        width: 100%;
        height: 100%;
        position: absolute;
        padding: 0;
      }

      .wrapper {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
    <!-- Add your site or application content here -->
    <p>Hello world! This is HTML5 Boilerplate.</p>

    <button>Click me</button>
    </div>
  </body>

  <script>
    var btn = document.querySelector('button');

    btn.addEventListener('click', () => {
      console.log("clicked")
    })
  </script>
</html>

## transparent.js
const { app, BrowserWindow} = require('electron');
const path = require('path');

let mainWindow = null;

function createWindow() {
  mainWindow = new BrowserWindow({
    transparent: true,
    frame: false,
    alwaysOnTop: true,
    resizable: false,
    maximizable: false,
    hasShadow: false,
    fullscreen: true,
    show: true,
  });

  mainWindow.setIgnoreMouseEvents(false);
  mainWindow.setAlwaysOnTop(true, 'screen-saver', 1);
  mainWindow.loadFile(path.join(__dirname, 'public', 'index.html'));

  mainWindow.on('closed', () => {
    mainWindow = null;
  });

  mainWindow.once('ready-to-show', () => {
    mainWindow.focus();
    mainWindow.webContents.openDevTools({
      mode: 'undocked'
    });
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  // close windows
  app.quit();
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});
	<!DOCTYPE html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8" />
	<title></title>
	<meta name="description" content="" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<meta property="og:title" content="" />
	<meta property="og:type" content="" />
	<meta property="og:url" content="" />
	<meta property="og:image" content="" />
	<style>
	body {
	width: 100%;
	height: 100%;
	position: absolute;
	padding: 0;
	}

	.wrapper {
	height: 100%;
	width: 100%;
	}
	</style>
	</head>

	<body>
	<div class="wrapper">
	<!-- Add your site or application content here -->
	<p>Hello world! This is HTML5 Boilerplate.</p>

	<button>Click me</button>
	</div>
	</body>

	<script>
	var btn = document.querySelector('button');

	btn.addEventListener('click', () => {
	console.log("clicked")
	})
	</script>
	</html>
	const { app, BrowserWindow} = require('electron');
	const path = require('path');

	let mainWindow = null;

	function createWindow() {
	mainWindow = new BrowserWindow({
	transparent: true,
	frame: false,
	alwaysOnTop: true,
	resizable: false,
	maximizable: false,
	hasShadow: false,
	fullscreen: true,
	show: true,
	});

	mainWindow.setIgnoreMouseEvents(false);
	mainWindow.setAlwaysOnTop(true, 'screen-saver', 1);
	mainWindow.loadFile(path.join(__dirname, 'public', 'index.html'));

	mainWindow.on('closed', () => {
	mainWindow = null;
	});

	mainWindow.once('ready-to-show', () => {
	mainWindow.focus();
	mainWindow.webContents.openDevTools({
	mode: 'undocked'
	});
	});
	}

	app.on('ready', createWindow);

	app.on('window-all-closed', () => {
	// close windows
	app.quit();
	});

	app.on('activate', () => {
	if (mainWindow === null) {
	createWindow();
	}
	});