Loading a website and html file in electron

So I'm new to electron and for my first project I decided to do a simple client for a browser game. Essentially what I want to do is load the website, and then add some HTML above it to add certain functionalities like closing/minimizing/maximizing, and a nav bar that isn't the default windows one.

The issue I have is that I can't seem to load the website and then the HTML above it (if that's even possible). Could anyone help me out with this?

const { app, BrowserWindow /* ipcMain */ } = require('electron')
const path = require('path')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
mainWindow.loadURL('https://bapbap.gg')
}



/*win.loadFile('index.html')*/

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

/*
ipcMain.on('close', () => {
  app.quit()
})
*/

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

Solution

It's possible.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <button>Minimize</button>
        <button>Maximize</button>
        <button>Close</button>
    </div>
    <webview src="https://bapbap.gg"></webview>
</body>

</html>

index.js

const { app, BrowserWindow, /* ipcMain */ 
webContents} = require("electron");
const path = require("path");



function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        frame: false,

        webPreferences: {
            webviewTag: true,
        },
    });

    win.loadFile("index.html");
}

app.whenReady().then(() => {
    createWindow();

    app.on("activate", () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

/*
ipcMain.on('close', () => {
  app.quit()
})
*/

style.css

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    height: 100vh;
}

webview {
    flex: 1;
}