sunsetsonwheels/test.html

## test.html
<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,user-scalable=no">
      <title>"Pages" in KaiOS</title>
      <link rel="stylesheet" href="./window.css">
    </head>
    <body>
      <header class="header">
        <h1 class="header_title">"Pages" in KaiOS</h1>
      </header>
      <div class="spacer"></div>
      <section class="content">
        <h2>Hello, I'm a page</h2>
        <p>
          I'm a page. Press the softkeys to advance forward,
           or backwards.
        </p>
      </section>
      <section class="content">
        <h2>Ciao, I'm a page</h2>
        <p>
          Another page with stuff in it.
        </p>
      </section>
      <section class="content">
        <h2>Merci, I'm a page</h2>
        <p>
          Last page with stuff in it.
        </p>
      </section>
      <div class="spacer"></div>
      <footer class="softkey_bar">
        <h2 class="softkey_left"></h2>
        <h2 class="softkey_center"></h1>
        <h2 class="softkey_right"></h2>
      </footer>
    </body>
    <script src="./test.js"></script>
</html>

## test.js
var currentContentPage = 0;
var contentElements = document.getElementsByClassName("content");

function navPage() {
  for(var i = 0; i < contentElements.length; i++) {
    if (i == currentContentPage) {
      contentElements[i].style.display = "initial";
    } else {
      contentElements[i].style.display = "none";
    }
  }
  if (currentContentPage == 0) {
    document.getElementsByClassName("softkey_left")[0].textContent = "Quit";
    document.getElementsByClassName("softkey_right")[0].textContent = "Next";
  } else if (currentContentPage == 1) {
    document.getElementsByClassName("softkey_left")[0].textContent = "Back";
    document.getElementsByClassName("softkey_right")[0].textContent = "Finish";
  } else if (currentContentPage == contentElements.length) {
    window.close();
  } else if(currentContentPage < 0) {
    if(confirm("Close window now?")) close();
  }
}

//Focuses on the first page.
navPage();

window.addEventListener('DOMContentLoaded', e => {
  window.addEventListener("keydown", e => {
    switch(e.key) {
      case 'SoftLeft':
        currentContentPage--;
        navPage();
        break;
      case 'SoftRight':
        currentContentPage++;
        navPage();
        break;
      case 'Backspace':
        e.preventDefault();
        currentContentPage = -1;
        navPage();
        break;
    }
  });
});

## window.css
/*

Normalizing stuff...

*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Open Sans";
}

/*

This section below is the basic layout for almost all pages
in Kaidi.

A page here consists of a header bar (which contains
the title of the current page), the content, and finally a
softkey bar (describes what function is attached to which
softkey button).

All pages use these CSS rules. Some might have their own
unique ones, which should be in the same folder as this
file.

*/

.header {
  position: fixed;
  width: 100%;
  height: 54px;
  background-color: #1BC1C4;
}

.header_title {
  width: 100%;
  padding-top: 27px;
  font-size: 17px;
  color: #ffffff;
  font-weight: 300;
  text-align: center;
}

.spacer {
  width: 100%;
  height: 0px;
}

.content {
  position: fixed;
  width: 100%;
  top: 54px;
  bottom: 30px;
}

/* Softkey CSS taken from Nadim1992's KaiUI project and modified. */
.softkey_bar {
  position: fixed; bottom: 0; left: 0; width: 100%;
  height: 30px;
  background-color: #dadada;
  display: flex;
  align-items: center;
  padding: 0 5px;
}

.softkey_bar * {
  width: 33.3333333333%;
  color: #323232;
}

.softkey_left, .softkey_right {
  font-weight: 600;
  font-size: 14px;
}

.softkey_bar .softkey_left {
  text-align: left;
}

.softkey_bar .softkey_center {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.softkey_bar .softkey_right {
  text-align: right;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,user-scalable=no">
	<title>"Pages" in KaiOS</title>
	<link rel="stylesheet" href="./window.css">
	</head>
	<body>
	<header class="header">
	<h1 class="header_title">"Pages" in KaiOS</h1>
	</header>
	<div class="spacer"></div>
	<section class="content">
	<h2>Hello, I'm a page</h2>
	<p>
	I'm a page. Press the softkeys to advance forward,
	or backwards.
	</p>
	</section>
	<section class="content">
	<h2>Ciao, I'm a page</h2>
	<p>
	Another page with stuff in it.
	</p>
	</section>
	<section class="content">
	<h2>Merci, I'm a page</h2>
	<p>
	Last page with stuff in it.
	</p>
	</section>
	<div class="spacer"></div>
	<footer class="softkey_bar">
	<h2 class="softkey_left"></h2>
	<h2 class="softkey_center"></h1>
	<h2 class="softkey_right"></h2>
	</footer>
	</body>
	<script src="./test.js"></script>
	</html>
	var currentContentPage = 0;
	var contentElements = document.getElementsByClassName("content");

	function navPage() {
	for(var i = 0; i < contentElements.length; i++) {
	if (i == currentContentPage) {
	contentElements[i].style.display = "initial";
	} else {
	contentElements[i].style.display = "none";
	}
	}
	if (currentContentPage == 0) {
	document.getElementsByClassName("softkey_left")[0].textContent = "Quit";
	document.getElementsByClassName("softkey_right")[0].textContent = "Next";
	} else if (currentContentPage == 1) {
	document.getElementsByClassName("softkey_left")[0].textContent = "Back";
	document.getElementsByClassName("softkey_right")[0].textContent = "Finish";
	} else if (currentContentPage == contentElements.length) {
	window.close();
	} else if(currentContentPage < 0) {
	if(confirm("Close window now?")) close();
	}
	}

	//Focuses on the first page.
	navPage();

	window.addEventListener('DOMContentLoaded', e => {
	window.addEventListener("keydown", e => {
	switch(e.key) {
	case 'SoftLeft':
	currentContentPage--;
	navPage();
	break;
	case 'SoftRight':
	currentContentPage++;
	navPage();
	break;
	case 'Backspace':
	e.preventDefault();
	currentContentPage = -1;
	navPage();
	break;
	}
	});
	});
	/*

	Normalizing stuff...

	*/

	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "Open Sans";
	}

	/*

	This section below is the basic layout for almost all pages
	in Kaidi.

	A page here consists of a header bar (which contains
	the title of the current page), the content, and finally a
	softkey bar (describes what function is attached to which
	softkey button).

	All pages use these CSS rules. Some might have their own
	unique ones, which should be in the same folder as this
	file.

	*/

	.header {
	position: fixed;
	width: 100%;
	height: 54px;
	background-color: #1BC1C4;
	}

	.header_title {
	width: 100%;
	padding-top: 27px;
	font-size: 17px;
	color: #ffffff;
	font-weight: 300;
	text-align: center;
	}

	.spacer {
	width: 100%;
	height: 0px;
	}

	.content {
	position: fixed;
	width: 100%;
	top: 54px;
	bottom: 30px;
	}

	/* Softkey CSS taken from Nadim1992's KaiUI project and modified. */
	.softkey_bar {
	position: fixed; bottom: 0; left: 0; width: 100%;
	height: 30px;
	background-color: #dadada;
	display: flex;
	align-items: center;
	padding: 0 5px;
	}

	.softkey_bar * {
	width: 33.3333333333%;
	color: #323232;
	}

	.softkey_left, .softkey_right {
	font-weight: 600;
	font-size: 14px;
	}

	.softkey_bar .softkey_left {
	text-align: left;
	}

	.softkey_bar .softkey_center {
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	}

	.softkey_bar .softkey_right {
	text-align: right;
	}