ZIMkaRU/app-init.html Secret

## app-init.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Loader</title>
  <style>
    html {
      height: 100%;
    }

    body {
      position: relative;
      height: 100%;
      padding: 0;
      margin: 0;
      text-align: center;
      color: #f5f8fa;
      background-color: #172d3e;
        font-family: "Roboto", sans-serif;
    }

    .lds-roller {
      display: inline-block;
      position: absolute;
      width: 128px;
      height: 128px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity .5s ease-in-out;
    }

    .show-roller {
      opacity: 1;
    }

    .lds-roller div {
      animation: lds-roller 2.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      transform-origin: 64px 64px;
    }

    .lds-roller div:after {
      content: " ";
      display: block;
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #f5f8fa;
      margin: -3px 0 0 -3px;
    }

    .lds-roller div:nth-child(1) {
      animation-delay: -0.036s;
    }

    .lds-roller div:nth-child(1):after {
      top: 100px;
      left: 100px;
    }

    .lds-roller div:nth-child(2) {
      animation-delay: -0.072s;
    }

    .lds-roller div:nth-child(2):after {
      top: 108px;
      left: 90px;
    }

    .lds-roller div:nth-child(3) {
      animation-delay: -0.108s;
    }

    .lds-roller div:nth-child(3):after {
      top: 113px;
      left: 77px;
    }

    .lds-roller div:nth-child(4) {
      animation-delay: -0.144s;
    }

    .lds-roller div:nth-child(4):after {
      top: 115px;
      left: 64px;
    }

    .lds-roller div:nth-child(5) {
      animation-delay: -0.18s;
    }

    .lds-roller div:nth-child(5):after {
      top: 113px;
      left: 51px;
    }

    .lds-roller div:nth-child(6) {
      animation-delay: -0.216s;
    }

    .lds-roller div:nth-child(6):after {
      top: 108px;
      left: 38px;
    }

    .lds-roller div:nth-child(7) {
      animation-delay: -0.252s;
    }

    .lds-roller div:nth-child(7):after {
      top: 100px;
      left: 28px;
    }

    .lds-roller div:nth-child(8) {
      animation-delay: -0.288s;
    }

    .lds-roller div:nth-child(8):after {
      top: 90px;
      left: 20px;
    }

    .logo-img {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .logo {
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      animation: logo-shower 3s ease-in-out;
      width: 200px;
      height: 200px;
      background-color: #172d3e;
    }

    @keyframes lds-roller {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes logo-shower {
      0% {
        opacity: 0;
      }

      40% {
        opacity: 1;
      }

      60% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }
  </style>
</head>

<body class="body">
  <div class="lds-roller">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="logo">
    <span class="logo-img">Logo</span>
  </div>
</body>

<script>
  window.addEventListener('load', () => {
    const rollers = document.getElementsByClassName('lds-roller')

    setTimeout(() => {
      for (const roller of rollers) {
        roller.classList.add("show-roller")
      }
    }, 2500)
  })
</script>

</html>

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

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

function createWindow (layout = 'index.html', opts) {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    },
    show: false,
    ...opts
  })

  // and load the index.html of the app.
  win.loadFile(layout)

  // Open the DevTools.
  // win.webContents.openDevTools()

  return win
}

// 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.whenReady().then(() => {
  console.log('[createWindow-call]')

  const mainWindow = createWindow()

  mainWindow.on('error', (e) => {
    console.error('[mainWindow-error]:', e)
  })
  mainWindow.once('show', () => {
    console.log('[show-event]')
  })
  mainWindow.once('ready-to-show', () => {
    console.log('[ready-to-show]')

    const childWindow = createWindow(
      'app-init.html',
      {
        width: 400,
        height: 400,
        frame: false,
        resizable: false,
        parent: mainWindow
      }
    )
    childWindow.once('ready-to-show', () => {
      childWindow.show()
    })

    setTimeout(() => {
      console.log('[show-call]')

      childWindow.hide()
      mainWindow.show()
    }, 10000)
  })

  app.on('activate', function () {
    // On macOS 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()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  app.quit()
})

// 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.

## preload.js
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

## renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// No Node.js APIs are available in this process because
// `nodeIntegration` is turned off. Use `preload.js` to
// selectively enable features needed in the rendering
// process.

## styles.css
/* Empty */
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Loader</title>
	<style>
	html {
	height: 100%;
	}

	body {
	position: relative;
	height: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	color: #f5f8fa;
	background-color: #172d3e;
	font-family: "Roboto", sans-serif;
	}

	.lds-roller {
	display: inline-block;
	position: absolute;
	width: 128px;
	height: 128px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity .5s ease-in-out;
	}

	.show-roller {
	opacity: 1;
	}

	.lds-roller div {
	animation: lds-roller 2.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	transform-origin: 64px 64px;
	}

	.lds-roller div:after {
	content: " ";
	display: block;
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #f5f8fa;
	margin: -3px 0 0 -3px;
	}

	.lds-roller div:nth-child(1) {
	animation-delay: -0.036s;
	}

	.lds-roller div:nth-child(1):after {
	top: 100px;
	left: 100px;
	}

	.lds-roller div:nth-child(2) {
	animation-delay: -0.072s;
	}

	.lds-roller div:nth-child(2):after {
	top: 108px;
	left: 90px;
	}

	.lds-roller div:nth-child(3) {
	animation-delay: -0.108s;
	}

	.lds-roller div:nth-child(3):after {
	top: 113px;
	left: 77px;
	}

	.lds-roller div:nth-child(4) {
	animation-delay: -0.144s;
	}

	.lds-roller div:nth-child(4):after {
	top: 115px;
	left: 64px;
	}

	.lds-roller div:nth-child(5) {
	animation-delay: -0.18s;
	}

	.lds-roller div:nth-child(5):after {
	top: 113px;
	left: 51px;
	}

	.lds-roller div:nth-child(6) {
	animation-delay: -0.216s;
	}

	.lds-roller div:nth-child(6):after {
	top: 108px;
	left: 38px;
	}

	.lds-roller div:nth-child(7) {
	animation-delay: -0.252s;
	}

	.lds-roller div:nth-child(7):after {
	top: 100px;
	left: 28px;
	}

	.lds-roller div:nth-child(8) {
	animation-delay: -0.288s;
	}

	.lds-roller div:nth-child(8):after {
	top: 90px;
	left: 20px;
	}

	.logo-img {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

	.logo {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	animation: logo-shower 3s ease-in-out;
	width: 200px;
	height: 200px;
	background-color: #172d3e;
	}

	@keyframes lds-roller {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(360deg);
	}
	}

	@keyframes logo-shower {
	0% {
	opacity: 0;
	}

	40% {
	opacity: 1;
	}

	60% {
	opacity: 1;
	}

	100% {
	opacity: 0;
	}
	}
	</style>
	</head>

	<body class="body">
	<div class="lds-roller">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	</div>
	<div class="logo">
	<span class="logo-img">Logo</span>
	</div>
	</body>

	<script>
	window.addEventListener('load', () => {
	const rollers = document.getElementsByClassName('lds-roller')

	setTimeout(() => {
	for (const roller of rollers) {
	roller.classList.add("show-roller")
	}
	}, 2500)
	})
	</script>

	</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
	<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
	<title>Hello World!</title>
	</head>
	<body>
	<h1>Hello World!</h1>
	We are using Node.js <span id="node-version"></span>,
	Chromium <span id="chrome-version"></span>,
	and Electron <span id="electron-version"></span>.

	<!-- You can also require other files to run in this process -->
	<script src="./renderer.js"></script>
	</body>
	</html>
	// Modules to control application life and create native browser window
	const { app, BrowserWindow } = require('electron')
	const path = require('path')

	function createWindow (layout = 'index.html', opts) {
	// Create the browser window.
	const win = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	preload: path.join(__dirname, 'preload.js')
	},
	show: false,
	...opts
	})

	// and load the index.html of the app.
	win.loadFile(layout)

	// Open the DevTools.
	// win.webContents.openDevTools()

	return win
	}

	// 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.whenReady().then(() => {
	console.log('[createWindow-call]')

	const mainWindow = createWindow()

	mainWindow.on('error', (e) => {
	console.error('[mainWindow-error]:', e)
	})
	mainWindow.once('show', () => {
	console.log('[show-event]')
	})
	mainWindow.once('ready-to-show', () => {
	console.log('[ready-to-show]')

	const childWindow = createWindow(
	'app-init.html',
	{
	width: 400,
	height: 400,
	frame: false,
	resizable: false,
	parent: mainWindow
	}
	)
	childWindow.once('ready-to-show', () => {
	childWindow.show()
	})

	setTimeout(() => {
	console.log('[show-call]')

	childWindow.hide()
	mainWindow.show()
	}, 10000)
	})

	app.on('activate', function () {
	// On macOS 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()
	})
	})

	// Quit when all windows are closed, except on macOS. There, it's common
	// for applications and their menu bar to stay active until the user quits
	// explicitly with Cmd + Q.
	app.on('window-all-closed', function () {
	app.quit()
	})

	// 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.
	// All of the Node.js APIs are available in the preload process.
	// It has the same sandbox as a Chrome extension.
	window.addEventListener('DOMContentLoaded', () => {
	const replaceText = (selector, text) => {
	const element = document.getElementById(selector)
	if (element) element.innerText = text
	}

	for (const type of ['chrome', 'node', 'electron']) {
	replaceText(`${type}-version`, process.versions[type])
	}
	})
	// This file is required by the index.html file and will
	// be executed in the renderer process for that window.
	// No Node.js APIs are available in this process because
	// `nodeIntegration` is turned off. Use `preload.js` to
	// selectively enable features needed in the rendering
	// process.