index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>SwitchRPC</title>
    <style>
		/*Header*/
		.header-container {
			position: fixed;
            background-color: #23272A;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            height: 20px;
            -webkit-app-region: drag;
        }
        .right-window {
            -webkit-app-region: no-drag;
            display: flex;
            flex-direction: row;
        }

        .left-icon img {
            height: 20px;
            -webkit-app-region: no-drag;
        }

        #min, #max, #x {
            background-color: #23272A;
            transition: background-color 0.2s;
            height: 20px;
            width: 20px;
        }

        #min img, #max img, #x img {
            height: 20px;
        }
        #min:hover, #max:hover {
           	background-color: #3F3F3F;
            cursor: pointer;
        }

        #x:hover {
            background-color: red;
            cursor: pointer;
        }


		/*Body*/

        input[type=text], select {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
			background-color:#40444b;
			color: white;
        }

        input[type=submit] {
            width: 100%;
            background-color: #34363c;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            border-radius: 4px;
            font-size: 1.25em;
			transition: background-color 0.2s;
        }

        input[type=submit]:hover {
            background-color: #393c42;
        }
		
        body {
            font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
			justify-content: center;
			display: flex;
			flex-direction: column;
			margin: 0;
			padding: 0;
			background-color: #2f3136;
			color: white;
			height: 100%;
			width: 100%;
        }

		.main {
			margin: 20px 0;
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			width: 100%;
			height: calc(100vh - 40px);
		}

		.left-side {
			width: 50%;
			display: flex;
			align-items: center;
		}

		.right-side {
			width: 30%;
			height: 100%;
			margin-bottom: 20px;
		}

		#title-container {
			background-color: #393c42;
			overflow-x: hidden;
			overflow-y: scroll;
			padding: 0 10px;
			height: 75%;
		}
	</style>
</head>
	
<body>
	<div class="header">
		<div class="header-container">
            <div class="left-icon"><img src="assets/icons/1024x1024.png"></div>
            <div class="right-window">
                <div class="window-item" id="min">
                    <img src="assets/min.png">
                </div>
                <div class="window-item" id="max">
                    <img src="assets/max.png">
                </div>
                <div class="window-item" id="x">
                    <img src="assets/x.png">
                </div>
            </div>
        </div>
	</div>
<div class="main">
	<div class="left-side">
		<div class="left-container">
			<form>
				<label>Game</label>
				<input type="text" id="game" name="game" placeholder="What game are you playing?">
				<br />
				<label>Description</label>
				<input type="text" id="desc" name="desc" placeholder="What mode? (E.G Single Player, Online, etc.)">
				<br />
				<input type="submit">
			</form>
		</div>
	</div>
	<div class="right-side">
		<h2>Supported Titles</h2>
		<div id="title-container">
		</div>
	</div>
</div>

<script>
    const electron = require('electron');
	const {ipcRenderer, ipcMain} = electron;

    const x = document.getElementById("x");
    const max = document.getElementById("max");
    const min = document.getElementById("min");

    x.addEventListener('click', sendX);
    max.addEventListener('click', sendMax);
    min.addEventListener('click', sendMin);

    function sendX(e) {
        ipcRenderer.send('x');
    }

    function sendMax(e) {
        ipcRenderer.send('max');
    }

    function sendMin(e) {
        ipcRenderer.send('min');
    }
	
    const form = document.querySelector('form');
    form.addEventListener('submit', submitForm);

    function submitForm(e) {
        e.preventDefault();
        const game = document.querySelector('#game').value;
        const desc = document.querySelector('#desc').value;
        ipcRenderer.send('game:value', game);
        ipcRenderer.send('desc:value', desc);
	}
	
	document.addEventListener("DOMContentLoaded", function() {
		ipcRenderer.send('getGameData');

		ipcRenderer.on('sendingGameData', function(e, data) {
			data.forEach(function(game) {
				document.getElementById("title-container").innerHTML += `<h4>${game}</h4>`;
			})
		})
	})

</script>
</body>
</html>