diff --git a/README.md b/README.md
index f11a1a3..c2116a1 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
-# manual
+# handle
 <br>
 <br>
 welcome to:<br>
-<H3>manual</H3><br>
+<H3>handle</H3><br>
 For educational purposes only.<br>
 hardware: iphone<br>
 software: phpwin iphone app<br>
@@ -20,11 +20,11 @@ my name is morgan shatee' byers,<br>
 my number is 770-687-8847<br>
 <br>
 <a href="http://morgansbyers.scienceontheweb.net/index.html">
-Visit website to see manual demo</a>
+Visit website to see handle demo</a>
 <br>
 <br>
-<a href="https://github.com/jehovahsays/manual">
-manual github repository</a>
+<a href="https://github.com/jehovahsays/handle">
+handle github repository</a>
 <br>
 <br>
 <a href="https://youtube.com/@jehovahsaysnetworth?si=FRrFrG_K02C38K_G">
diff --git a/browser.html b/browser.html
deleted file mode 100644
index 48caa30..0000000
--- a/browser.html
+++ /dev/null
@@ -1,659 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<title>browser</title>
-        <meta name="viewport" content="width=device-width"/>
-		<link rel="shortcut icon" href="./files/favicon_white.ico" media="(prefers-color-scheme: dark)"/>
-		<link rel="shortcut icon" href="./files/favicon.ico" media="(prefers-color-scheme: light)" />
-		<link rel="stylesheet" type="text/css" href="./files/main.css"></link>
-<style>
-.search {
-        margin: 70px; 
-		border-radius: 25px;
-	    padding: 0;
-	    top: 25;
-		left: 30;
-        width: 70%;
-}
-list {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-		position: fixed;
-	    top: 0;
-        left: 0;
-		right: 0;		
-}
-.handle {
-	    
-	    position: fixed;
-	    top: 0;
-        left: 0;
-		right: 0;
-        font-size: 1.2em;
-        padding: 0px;
-        animation: fadeIn 0.5s ease-in-out;
-} 
-.handle:last-child {  
-        
-	    position: fixed;
-	    top: 0;
-        left: 0;
-		right: 0;
-        border-bottom: none;
-}
-@keyframes fadeIn {
-   from {
-        opacity: 0;
-        transform: translateY(-10px);
-}
-   to   {
-        opacity: 1;
-        transform: translateY(0);
-}
-  }
-}
-</style>
-	</head>
-	<body>
-	
-		<div id="panel">
-
-			<div id="header">
-					<h1>
-					<a href="./index.html">index</a>
-					</h1>
-
-				<div id="sections">
-					<span class="selected">
-					<br>
-<br>
-<form action="./server.php" method="post" id="secure-form">
-<input id="secure-form-answer-Human" type="text" 
-name="secure-form-answer"
-value="" 
-class="titleInput" 
-style="height: 20px; width: 110px;" maxlength="140" autocomplete="true" 
-autocorrect="off" autocapitalize="off" spellcheck="true" 
-placeholder="create pages" x-webkit-speech>
-<noscript>
-<label 
-for="secure-form-answer-Human">
-Human
-</label>
-</noscript>
-</form>
-<br>
-					</span>
-				</div>
-
-				<div id="expandButton"></div>
-			</div>
-
-			<div id="panelScrim"></div>
-
-			<div id="contentWrapper">
-				<div id="inputWrapper">
-					<input name="username" placeholder="" type="text" id="filterInput" autocorrect="off" autocapitalize="off" spellcheck="true" />
-					<div id="clearSearchButton"></div>
-					<select id="language">
-						<option value="en">en</option>
-						</select>
-				</div>
-				<br/>
-				<div id="content">
-							
-				</div>
-				
-			</div>
-
-		</div>
-
-		<iframe name="viewer"></iframe>
-
-		<script>
-
-		const panel = document.querySelector( '#panel' );
-		const content = document.querySelector( '#content' );
-		const expandButton = document.querySelector( '#expandButton' );
-		const clearSearchButton = document.querySelector( '#clearSearchButton' );
-		const panelScrim = document.querySelector( '#panelScrim' );
-		const filterInput = document.querySelector( '#filterInput' );
-		let iframe = document.querySelector( 'iframe' );
-
-		const pageProperties = {};
-		const titles = {};
-		const categoryElements = [];
-
-		let navigation;
-
-		init();
-
-		async function init() {
-
-			const list = await ( await fetch( './manual.json' ) ).json();
-
-			const hash = window.location.hash.substring( 1 );
-
-			// Localization
-
-			let language = 'en';
-
-			const hashLanguage = /^(.*?)\//.exec( hash );
-
-			if ( hashLanguage ) {
-
-				language = hashLanguage[ 1 ];
-
-			}
-
-			const languageSelect = document.querySelector( '#language' );
-			languageSelect.value = language;
-			languageSelect.addEventListener( 'change', function () {
-
-				setLanguage( this.value );
-
-			} );
-
-			function setLanguage( value ) {
-
-				language = value;
-
-				createNavigation( list, language );
-				updateFilter();
-				autoChangeUrlLanguage( language );
-
-			}
-
-			// Functionality for hamburger button (on small devices)
-
-			expandButton.onclick = function ( event ) {
-
-				event.preventDefault();
-				panel.classList.toggle( 'open' );
-
-			};
-
-			panelScrim.onclick = function ( event ) {
-
-				event.preventDefault();
-				panel.classList.toggle( 'open' );
-
-			};
-
-
-			// Functionality for search/filter input field
-
-			filterInput.onfocus = function () {
-
-				panel.classList.add( 'searchFocused' );
-
-			};
-
-			filterInput.onblur = function () {
-
-				if ( filterInput.value === '' ) {
-
-					panel.classList.remove( 'searchFocused' );
-
-				}
-
-			};
-
-			filterInput.oninput = function () {
-
-				updateFilter();
-
-			};
-
-			clearSearchButton.onclick = function () {
-
-				filterInput.value = '';
-				updateFilter();
-				filterInput.focus();
-
-			};
-
-			// Activate content and title change on browser navigation
-
-			window.onpopstate = function () {
-
-				updateNavigation();
-				createNewIframe();
-
-			};
-
-			// Create the navigation panel and configure the iframe
-
-			createNavigation( list, language );
-			createNewIframe();
-
-			// Handle search query
-
-			filterInput.value = extractQuery();
-
-			if ( filterInput.value !== '' ) {
-
-				panel.classList.add( 'searchFocused' );
-
-				updateFilter();
-
-			}
-
-		}
-
-		// Navigation Panel
-
-		function createLink( pageName, pageURL ) {
-
-			const link = document.createElement( 'a' );
-			const url = new URL( pageURL, window.location.href );
-			url.pathname += '.html';
-			link.href = url.href;
-			link.textContent = pageName;
-			link.setAttribute( 'target', 'viewer' );
-			link.addEventListener( 'click', function ( event ) {
-
-				if ( event.button !== 0 || event.ctrlKey || event.altKey || event.metaKey ) return;
-
-				window.location.hash = pageURL;
-				panel.classList.remove( 'open' );
-
-				updateNavigation();
-
-			} );
-
-			return link;
-
-		}
-
-		function createNavigation( list, language ) {
-
-			if ( navigation !== undefined ) {
-
-				content.removeChild( navigation );
-
-			}
-
-			// Create the navigation panel using data from list.js
-
-			navigation = document.createElement( 'div' );
-			content.appendChild( navigation );
-
-			if ( language === 'ar' ) {
-
-				navigation.style.direction = 'rtl';
-
-			}
-
-			const categories = list[ language ];
-			const selectedPage = window.location.hash.substring( 1 ).replace( /\.html$/, '' );
-
-			for ( const category in categories ) {
-
-				// Create categories
-
-				const pages = categories[ category ];
-
-				const categoryContainer = document.createElement( 'div' );
-				navigation.appendChild( categoryContainer );
-
-				const categoryHead = document.createElement( 'h3' );
-				categoryHead.textContent = category;
-				categoryContainer.appendChild( categoryHead );
-
-				const categoryContent = document.createElement( 'ul' );
-				categoryContainer.appendChild( categoryContent );
-
-				for ( const pageName in pages ) {
-
-					// Create page links
-
-					const pageURL = pages[ pageName ];
-
-					// Localisation
-
-					const listElement = document.createElement( 'li' );
-					categoryContent.appendChild( listElement );
-
-					const linkElement = createLink( pageName, pageURL );
-					listElement.appendChild( linkElement );
-
-					// select current page
-
-					if ( pageURL === selectedPage ) {
-
-						linkElement.classList.add( 'selected' );
-
-					}
-
-					// Gather the main properties for the current subpage
-
-					pageProperties[ pageName ] = {
-						category: category,
-						pageURL: pageURL,
-						linkElement: linkElement
-					};
-
-					// Gather the document titles (used for easy access on browser navigation)
-
-					titles[ pageURL ] = pageName;
-
-				}
-
-				// Gather the category elements for easy access on filtering
-
-				categoryElements.push( categoryContent );
-
-			}
-
-		}
-
-		function updateNavigation() {
-
-			const selectedPage = window.location.hash.substring( 1 ).replace( /\.html$/, '' );
-
-			content.querySelectorAll( 'a' ).forEach( function ( item ) {
-
-				if ( item.href.includes( selectedPage ) ) {
-
-					item.classList.add( 'selected' );
-
-				} else {
-
-					item.classList.remove( 'selected' );
-
-				}
-
-			} );
-
-		}
-
-		// Auto change language url. If a reader open a document in English, when they click "zh", the document they read will auto change into Chinese version
-
-		function autoChangeUrlLanguage( language ) {
-
-			const hash = location.hash;
-			if ( hash === '' ) return;
-			const docLink = hash.slice( hash.indexOf( '/' ) );
-			location.href = '#' + language + docLink;
-
-		}
-
-		// Filtering
-
-		function extractQuery() {
-
-			const search = window.location.search;
-
-			if ( search.indexOf( '?q=' ) !== - 1 ) {
-
-				return decodeURI( search.slice( 3 ) );
-
-			}
-
-			return '';
-
-		}
-
-		function updateFilter() {
-
-			let v = filterInput.value.trim();
-			v = v.replace( /\s+/gi, ' ' ); // replace multiple whitespaces with a single one
-
-			if ( v !== '' ) {
-
-				window.history.replaceState( {}, '', '?q=' + v + window.location.hash );
-
-			} else {
-
-				window.history.replaceState( {}, '', window.location.pathname + window.location.hash );
-
-			}
-
-			//
-
-			const regExp = new RegExp( filterInput.value, 'gi' );
-
-			for ( let pageName in pageProperties ) {
-
-				const linkElement = pageProperties[ pageName ].linkElement;
-				const categoryClassList = linkElement.parentElement.classList;
-				const filterResults = pageName.match( regExp );
-
-				if ( filterResults !== null && filterResults.length > 0 ) {
-
-					pageName = pageName.replaceAll( regExp, '<b>$&</b>' );
-
-					categoryClassList.remove( 'hidden' );
-					linkElement.innerHTML = pageName;
-
-				} else {
-
-					// Hide all non-matching page names
-
-					categoryClassList.add( 'hidden' );
-
-				}
-
-			}
-
-			displayFilteredPanel();
-
-		}
-
-		function displayFilteredPanel() {
-
-			// Show/hide categories depending on their content
-			// First check if at least one page in this category is not hidden
-
-			categoryElements.forEach( function ( category ) {
-
-				const pages = category.children;
-				const pagesLength = pages.length;
-				const sectionClassList = category.parentElement.classList;
-
-				let hideCategory = true;
-
-				for ( let i = 0; i < pagesLength; i ++ ) {
-
-					const pageClassList = pages[ i ].classList;
-
-					if ( ! pageClassList.contains( 'hidden' ) ) {
-
-						hideCategory = false;
-
-					}
-
-				}
-
-				// If and only if all page names are hidden, hide the whole category
-
-				if ( hideCategory ) {
-
-					sectionClassList.add( 'hidden' );
-
-				} else {
-
-					sectionClassList.remove( 'hidden' );
-
-				}
-
-			} );
-
-		}
-
-		// Routing
-
-		function setUrl( href ) { // eslint-disable-line no-undef
-
-			// yea I know this is hacky.
-			const re = /^(\/(?:manual\/|docs\/#?))(.*?)$/;
-			const url = new URL( href );
-
-			if ( url.origin === window.location.origin ) {
-
-				const hrefNoOrigin = url.href.slice( url.origin.length );
-				const m = re.exec( hrefNoOrigin );
-				const [ , base, path ] = m;
-				if ( base.includes( 'manual' ) ) {
-
- 					const newHash = `#${ path.replace( '.html', '' ) }`;
-					// Only create new iframe if we're actually changing pages.
-					// We could just be going to an anchor on the same page.
-					const newPrefix = newHash.split( '#' )[ 1 ];
-					const oldPrefix = window.location.hash.split( '#' )[ 1 ];
-
-					if ( newPrefix === oldPrefix ) {
-
-						const newUrl = new URL( window.location.href );
-						newUrl.hash = newHash;
-						window.history.pushState( {}, '', newUrl.href );
-
-					} else {
-
-						window.location.hash = newHash;
-						updateNavigation();
-						createNewIframe();
-
-					}
-
-					return;
-
-				}
-
-			}
-
-			window.location.href = href;
-
-		}
-
-		function setTitle( title ) { // eslint-disable-line no-undef
-
-			document.title = `${title} - index.html root`;
-
-		}
-
-		function createNewIframe() {
-
-			// Change the content displayed in the iframe
-			// First separate the member part of the fragment (if existing)
-
-			const hash = window.location.hash.substring( 1 );
-			const splitHash = decomposePageName( hash, '.', '#' );
-
-			// Creating a new Iframe instead of assigning a new src is
-			// a cross-browser solution to allow normal browser navigation;
-			// - only assigning a new src would result in two history states each time.
-
-			// Note: iframe.contentWindow.location.replace(hash) should work, too,
-			// but it doesn't work in Edge with links from the subpages!
-
-			const oldIframe = iframe;
-			iframe = oldIframe.cloneNode();
-
-			if ( hash ) {
-
-				// We can have 2 hashes. One for the main page, one for the page it's referencing
-				// In other words
-				//	 #en/somePage#someSectionOfPage
-				const subHash = splitHash[ 0 ].indexOf( '#' );
-				let src;
-				if ( subHash >= 0 ) {
-
-					const beforeSubHash = splitHash[ 0 ].slice( 0, subHash );
-					const afterSubHash = splitHash[ 0 ].slice( subHash );
-					src = `${beforeSubHash}.html${afterSubHash}${splitHash[ 1 ]}`;
-		
-				} else {
-
-					src = splitHash[ 0 ] + '.html' + splitHash[ 1 ];
-		
-				}
-
-				iframe.src = src; // lgtm[js/client-side-unvalidated-url-redirection]
-				iframe.style.display = 'unset';
-
-			} else {
-
-				iframe.src = '';
-				iframe.style.display = 'none';
-
-			}
-
-			document.body.replaceChild( iframe, oldIframe );
-
-		}
-
-		function decomposePageName( pageName, oldDelimiter, newDelimiter ) {
-
-			// Helper function for separating the member (if existing) from the pageName
-			// For example: 'Geometry.morphTarget' can be converted to
-			// ['Geometry', '.morphTarget'] or ['Geometry', '#morphTarget']
-			// Note: According RFC 3986 no '#' allowed inside of an URL fragment!
-
-			let parts = [];
-
-			const dotIndex = pageName.indexOf( oldDelimiter );
-
-			if ( dotIndex !== - 1 ) {
-
-				parts = pageName.split( oldDelimiter );
-				parts[ 1 ] = newDelimiter + parts[ 1 ];
-
-			} else {
-
-				parts[ 0 ] = pageName;
-				parts[ 1 ] = '';
-
-			}
-
-			return parts;
-
-		}
-
-		//
-
-		console.log( [
-			'    __     __',
-			' __/ __\\  / __\\__   ____   _____   _____',
-			'/ __/  /\\/ /  /___\\/ ____\\/ _____\\/ _____\\',
-			'\\/_   __/ /   _   / /  __/ / __  / / __  /_   __   _____',
-			'/ /  / / /  / /  / /  / / /  ___/ /  ___/\\ _\\/ __\\/ _____\\',
-			'\\/__/  \\/__/\\/__/\\/__/  \\/_____/\\/_____/\\/__/ /  / /  ___/',
-			'                                         / __/  /  \\__  \\',
-			'                                         \\/____/\\/_____/'
-		].join( '\n' ) );
-
-		</script>
-<script>
-function handle() {
-	
-	
-  let input = document.getElementById('list').value;
-
-  input = input.toLowerCase();
-
-  let x = document.getElementsByClassName('handle');
- 
-  for (i = 0; i < x.length; i++) {
-
-    if (!x[i].innerHTML.toLowerCase().includes(input)) {
-
-      x[i].style.display = "none";
-
-    }
-
-    else {
-
-      x[i].style.display = "list-item";
-
-    }
-
-  }
-  
-}
-</script>
-	</body>
-</html>
diff --git a/delete.php b/delete.php
deleted file mode 100644
index 328e282..0000000
--- a/delete.php
+++ /dev/null
@@ -1,8 +0,0 @@
-<?php
-   // user has clicked a delete hyperlink
-   if($_GET['action'] && $_GET['action'] == 'delete') {
-       unlink($_GET['filename']);
-       header("Location: ./browser.html");
-       exit();
-   }
-?>
diff --git a/en/about.html b/en/about.html
new file mode 100644
index 0000000..896e681
--- /dev/null
+++ b/en/about.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html><meta name="viewport"content="user-scalable=yes, initial-scale=1.0, maximum-scale=1.0"/><title>about</title></br>about<br><br>
+<form action="../server.php" method="post">
+<input id="secure-form-answer-Human" type="text" name="secure-form-answer" 
+onkeypress="return event.charCode != 32" 
+style="width: 150px;height: 30px;" maxlength="40" autocomplete="true" 
+autocorrect="off" autocapitalize="off" spellcheck="true" 
+placeholder="what word defines this word">
+<noscript><label for="secure-form-answer-Human">Human</label></noscript></form>
+
+
diff --git a/en/index.html b/en/index.html
new file mode 100644
index 0000000..738f2d3
--- /dev/null
+++ b/en/index.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html><meta name="viewport"content="user-scalable=yes, initial-scale=1.0, maximum-scale=1.0"/><title>index</title></br>index<br><br>
+<form action="../server.php" method="post">
+<input id="secure-form-answer-Human" type="text" name="secure-form-answer" 
+onkeypress="return event.charCode != 32" 
+style="width: 150px;height: 30px;" maxlength="40" autocomplete="true" 
+autocorrect="off" autocapitalize="off" spellcheck="true" 
+placeholder="what word defines this word">
+<noscript><label for="secure-form-answer-Human">Human</label></noscript></form>
+
+
diff --git a/favicon.ico b/favicon.ico
deleted file mode 100644
index beb87c8..0000000
Binary files a/favicon.ico and /dev/null differ
diff --git a/index.html b/index.html
index 81e1b15..ff44154 100644
--- a/index.html
+++ b/index.html
@@ -7,107 +7,571 @@
 <meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum-scale=1.0" />
 <meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
 <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
-<link rel="icon" type="image/png" href="./favicon.ico">
-<link rel="shortcut icon" href="./favicon.ico" media="(prefers-color-scheme: dark)"/>
-<link rel="shortcut icon" href="./favicon.ico" media="(prefers-color-scheme: light)" />
+<link rel="icon" type="image/png" href="./files/favicon.ico">
+<link rel="shortcut icon" href="./files/favicon.ico" media="(prefers-color-scheme: dark)"/>
+<link rel="shortcut icon" href="./files/favicon.ico" media="(prefers-color-scheme: light)" />
 <meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
 <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
 <link rel="stylesheet" type="text/css" href="./files/main.css"></link>
-<style>
-search {	    
-	    position: center;
-        margin: 50px; 
-		border-radius: 25px;
-	    padding: 0;	
-	    top: 25;
-		left: 0;
-        width: 70%;
-}
-list {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-		position: fixed;
-	    top: 0;
-        left: 0;
-		right: 0;		
-}
-.handle {	    
-	    position: fixed;
-	    top: 0;
-        left: 0;
-		right: 0;
-        font-size: 1.2em;
-        padding: 0px;
-        animation: fadeIn 0.5s ease-in-out;
-} 
-.handle:last-child {        
-	    position: fixed;
-	    top: 0;
-        left: 0;
-		right: 0;
-        border-bottom: none;
-}
-@keyframes fadeIn {
-   from {
-        opacity: 0;
-        transform: translateY(-10px);
-}
-   to   {
-        opacity: 1;
-        transform: translateY(0);
-}
-  }
-}
-</style>
-<title>search</title>
-</head>
-<body>
-<script>
-function handle() {
-	
-  let input = document.getElementById('list').value;
-
-  input = input.toLowerCase();
-
-  let x = document.getElementsByClassName('handle');
- 
-  for (i = 0; i < x.length; i++) {
-
-    if (!x[i].innerHTML.toLowerCase().includes(input)) {
-
-      x[i].style.display = "none";
-
-    }
-
-    else {
-
-      x[i].style.display = "list-item";
-
-    }
-
-  }
-  
-}
-</script>		
-<center>
+	</head>
+	<body>
+		<div id="panel">
+			<div id="header">
+					<h1>
+					<a href="./index.html">index</a>
+					</h1>
+				<div id="sections">
+					<span class="selected">
+					<br>
 <br>
-<input 
-id="list"
-onkeyup="handle()" 
-onkeydown="return event.key != 'Enter';"
-placeholder="search" 
-type="search" 
-style="search" 
-class="search" 
-maxlength="140" 
-autocomplete="true" 
-autocorrect="on" 
-autocapitalize="off" 
-spellcheck="true">
+<form action="./server.php" method="post" id="secure-form">
+<input id="secure-form-answer-Human" type="text" 
+name="secure-form-answer"
+value="" 
+class="titleInput" 
+style="height: 20px; width: 110px;" maxlength="140" autocomplete="true" 
+autocorrect="off" autocapitalize="off" spellcheck="true" 
+placeholder="create pages">
+<noscript>
+<label 
+for="secure-form-answer-Human">
+Human
+</label>
+</noscript>
 </form>
 <br>
-</center>
-<center>
-<ul id="list">
-<a href="./browser.html" class="handle"><button>start game</button></a></br>
+					</span>
+				</div>
+				<div id="expandButton"></div>
+			</div>
+			<div id="panelScrim"></div>
+			<div id="contentWrapper">
+				<div id="inputWrapper">
+					<input name="username" placeholder="" type="text" id="filterInput" autocorrect="off" autocapitalize="off" spellcheck="true" />
+					<div id="clearSearchButton"></div>
+					<select id="language">
+						<option value="en">en</option>
+						</select>
+				</div>
+				<br/>
+				<div id="content">							
+				</div>				
+			</div>
+		</div>
+		<iframe name="viewer"></iframe>
+		<script>
+		const panel = document.querySelector( '#panel' );
+		const content = document.querySelector( '#content' );
+		const expandButton = document.querySelector( '#expandButton' );
+		const clearSearchButton = document.querySelector( '#clearSearchButton' );
+		const panelScrim = document.querySelector( '#panelScrim' );
+		const filterInput = document.querySelector( '#filterInput' );
+		let iframe = document.querySelector( 'iframe' );
+
+		const pageProperties = {};
+		const titles = {};
+		const categoryElements = [];
+
+		let navigation;
+
+		init();
+
+		async function init() {
+
+			const list = await ( await fetch( './manual.json' ) ).json();
+
+			const hash = window.location.hash.substring( 1 );
+
+			// Localization
+
+			let language = 'en';
+
+			const hashLanguage = /^(.*?)\//.exec( hash );
+
+			if ( hashLanguage ) {
+
+				language = hashLanguage[ 1 ];
+
+			}
+
+			const languageSelect = document.querySelector( '#language' );
+			languageSelect.value = language;
+			languageSelect.addEventListener( 'change', function () {
+
+				setLanguage( this.value );
+
+			} );
+
+			function setLanguage( value ) {
+
+				language = value;
+
+				createNavigation( list, language );
+				updateFilter();
+				autoChangeUrlLanguage( language );
+
+			}
+
+			// Functionality for hamburger button (on small devices)
+
+			expandButton.onclick = function ( event ) {
+
+				event.preventDefault();
+				panel.classList.toggle( 'open' );
+
+			};
+
+			panelScrim.onclick = function ( event ) {
+
+				event.preventDefault();
+				panel.classList.toggle( 'open' );
+
+			};
+
+
+			// Functionality for search/filter input field
+
+			filterInput.onfocus = function () {
+
+				panel.classList.add( 'searchFocused' );
+
+			};
+
+			filterInput.onblur = function () {
+
+				if ( filterInput.value === '' ) {
+
+					panel.classList.remove( 'searchFocused' );
+
+				}
+
+			};
+
+			filterInput.oninput = function () {
+
+				updateFilter();
+
+			};
+
+			clearSearchButton.onclick = function () {
+
+				filterInput.value = '';
+				updateFilter();
+				filterInput.focus();
+
+			};
+
+			// Activate content and title change on browser navigation
+
+			window.onpopstate = function () {
+
+				updateNavigation();
+				createNewIframe();
+
+			};
+
+			// Create the navigation panel and configure the iframe
+
+			createNavigation( list, language );
+			createNewIframe();
+
+			// Handle search query
+
+			filterInput.value = extractQuery();
+
+			if ( filterInput.value !== '' ) {
+
+				panel.classList.add( 'searchFocused' );
+
+				updateFilter();
+
+			}
+
+		}
+
+		// Navigation Panel
+
+		function createLink( pageName, pageURL ) {
+
+			const link = document.createElement( 'a' );
+			const url = new URL( pageURL, window.location.href );
+			url.pathname += '.html';
+			link.href = url.href;
+			link.textContent = pageName;
+			link.setAttribute( 'target', 'viewer' );
+			link.addEventListener( 'click', function ( event ) {
+
+				if ( event.button !== 0 || event.ctrlKey || event.altKey || event.metaKey ) return;
+
+				window.location.hash = pageURL;
+				panel.classList.remove( 'open' );
+
+				updateNavigation();
+
+			} );
+
+			return link;
+
+		}
+
+		function createNavigation( list, language ) {
+
+			if ( navigation !== undefined ) {
+
+				content.removeChild( navigation );
+
+			}
+
+			// Create the navigation panel using data from list.js
+
+			navigation = document.createElement( 'div' );
+			content.appendChild( navigation );
+
+			if ( language === 'ar' ) {
+
+				navigation.style.direction = 'rtl';
+
+			}
+
+			const categories = list[ language ];
+			const selectedPage = window.location.hash.substring( 1 ).replace( /\.html$/, '' );
+
+			for ( const category in categories ) {
+
+				// Create categories
+
+				const pages = categories[ category ];
+
+				const categoryContainer = document.createElement( 'div' );
+				navigation.appendChild( categoryContainer );
+
+				const categoryHead = document.createElement( 'h3' );
+				categoryHead.textContent = category;
+				categoryContainer.appendChild( categoryHead );
+
+				const categoryContent = document.createElement( 'ul' );
+				categoryContainer.appendChild( categoryContent );
+
+				for ( const pageName in pages ) {
+
+					// Create page links
+
+					const pageURL = pages[ pageName ];
+
+					// Localisation
+
+					const listElement = document.createElement( 'li' );
+					categoryContent.appendChild( listElement );
+
+					const linkElement = createLink( pageName, pageURL );
+					listElement.appendChild( linkElement );
+
+					// select current page
+
+					if ( pageURL === selectedPage ) {
+
+						linkElement.classList.add( 'selected' );
+
+					}
+
+					// Gather the main properties for the current subpage
+
+					pageProperties[ pageName ] = {
+						category: category,
+						pageURL: pageURL,
+						linkElement: linkElement
+					};
+
+					// Gather the document titles (used for easy access on browser navigation)
+
+					titles[ pageURL ] = pageName;
+
+				}
+
+				// Gather the category elements for easy access on filtering
+
+				categoryElements.push( categoryContent );
+
+			}
+
+		}
+
+		function updateNavigation() {
+
+			const selectedPage = window.location.hash.substring( 1 ).replace( /\.html$/, '' );
+
+			content.querySelectorAll( 'a' ).forEach( function ( item ) {
+
+				if ( item.href.includes( selectedPage ) ) {
+
+					item.classList.add( 'selected' );
+
+				} else {
+
+					item.classList.remove( 'selected' );
+
+				}
+
+			} );
+
+		}
+
+		// Auto change language url. If a reader open a document in English, when they click "zh", the document they read will auto change into Chinese version
+
+		function autoChangeUrlLanguage( language ) {
+
+			const hash = location.hash;
+			if ( hash === '' ) return;
+			const docLink = hash.slice( hash.indexOf( '/' ) );
+			location.href = '#' + language + docLink;
+
+		}
+
+		// Filtering
+
+		function extractQuery() {
+
+			const search = window.location.search;
+
+			if ( search.indexOf( '?q=' ) !== - 1 ) {
+
+				return decodeURI( search.slice( 3 ) );
+
+			}
+
+			return '';
+
+		}
+
+		function updateFilter() {
+
+			let v = filterInput.value.trim();
+			v = v.replace( /\s+/gi, ' ' ); // replace multiple whitespaces with a single one
+
+			if ( v !== '' ) {
+
+				window.history.replaceState( {}, '', '?q=' + v + window.location.hash );
+
+			} else {
+
+				window.history.replaceState( {}, '', window.location.pathname + window.location.hash );
+
+			}
+
+			//
+
+			const regExp = new RegExp( filterInput.value, 'gi' );
+
+			for ( let pageName in pageProperties ) {
+
+				const linkElement = pageProperties[ pageName ].linkElement;
+				const categoryClassList = linkElement.parentElement.classList;
+				const filterResults = pageName.match( regExp );
+
+				if ( filterResults !== null && filterResults.length > 0 ) {
+
+					pageName = pageName.replaceAll( regExp, '<b>$&</b>' );
+
+					categoryClassList.remove( 'hidden' );
+					linkElement.innerHTML = pageName;
+
+				} else {
+
+					// Hide all non-matching page names
+
+					categoryClassList.add( 'hidden' );
+
+				}
+
+			}
+
+			displayFilteredPanel();
+
+		}
+
+		function displayFilteredPanel() {
+
+			// Show/hide categories depending on their content
+			// First check if at least one page in this category is not hidden
+
+			categoryElements.forEach( function ( category ) {
+
+				const pages = category.children;
+				const pagesLength = pages.length;
+				const sectionClassList = category.parentElement.classList;
+
+				let hideCategory = true;
+
+				for ( let i = 0; i < pagesLength; i ++ ) {
+
+					const pageClassList = pages[ i ].classList;
+
+					if ( ! pageClassList.contains( 'hidden' ) ) {
+
+						hideCategory = false;
+
+					}
+
+				}
+
+				// If and only if all page names are hidden, hide the whole category
+
+				if ( hideCategory ) {
+
+					sectionClassList.add( 'hidden' );
+
+				} else {
+
+					sectionClassList.remove( 'hidden' );
+
+				}
+
+			} );
+
+		}
+
+		// Routing
+
+		function setUrl( href ) { // eslint-disable-line no-undef
+
+			// yea I know this is hacky.
+			const re = /^(\/(?:manual\/|docs\/#?))(.*?)$/;
+			const url = new URL( href );
+
+			if ( url.origin === window.location.origin ) {
+
+				const hrefNoOrigin = url.href.slice( url.origin.length );
+				const m = re.exec( hrefNoOrigin );
+				const [ , base, path ] = m;
+				if ( base.includes( 'manual' ) ) {
+
+ 					const newHash = `#${ path.replace( '.html', '' ) }`;
+					// Only create new iframe if we're actually changing pages.
+					// We could just be going to an anchor on the same page.
+					const newPrefix = newHash.split( '#' )[ 1 ];
+					const oldPrefix = window.location.hash.split( '#' )[ 1 ];
+
+					if ( newPrefix === oldPrefix ) {
+
+						const newUrl = new URL( window.location.href );
+						newUrl.hash = newHash;
+						window.history.pushState( {}, '', newUrl.href );
+
+					} else {
+
+						window.location.hash = newHash;
+						updateNavigation();
+						createNewIframe();
+
+					}
+
+					return;
+
+				}
+
+			}
+
+			window.location.href = href;
+
+		}
+
+		function setTitle( title ) { // eslint-disable-line no-undef
+
+			document.title = `${title} - index.html root`;
+
+		}
+
+		function createNewIframe() {
+
+			// Change the content displayed in the iframe
+			// First separate the member part of the fragment (if existing)
+
+			const hash = window.location.hash.substring( 1 );
+			const splitHash = decomposePageName( hash, '.', '#' );
+
+			// Creating a new Iframe instead of assigning a new src is
+			// a cross-browser solution to allow normal browser navigation;
+			// - only assigning a new src would result in two history states each time.
+
+			// Note: iframe.contentWindow.location.replace(hash) should work, too,
+			// but it doesn't work in Edge with links from the subpages!
+
+			const oldIframe = iframe;
+			iframe = oldIframe.cloneNode();
+
+			if ( hash ) {
+
+				// We can have 2 hashes. One for the main page, one for the page it's referencing
+				// In other words
+				//	 #en/somePage#someSectionOfPage
+				const subHash = splitHash[ 0 ].indexOf( '#' );
+				let src;
+				if ( subHash >= 0 ) {
+
+					const beforeSubHash = splitHash[ 0 ].slice( 0, subHash );
+					const afterSubHash = splitHash[ 0 ].slice( subHash );
+					src = `${beforeSubHash}.html${afterSubHash}${splitHash[ 1 ]}`;
+		
+				} else {
+
+					src = splitHash[ 0 ] + '.html' + splitHash[ 1 ];
+		
+				}
+
+				iframe.src = src; // lgtm[js/client-side-unvalidated-url-redirection]
+				iframe.style.display = 'unset';
+
+			} else {
+
+				iframe.src = '';
+				iframe.style.display = 'none';
+
+			}
+
+			document.body.replaceChild( iframe, oldIframe );
+
+		}
+
+		function decomposePageName( pageName, oldDelimiter, newDelimiter ) {
+
+			// Helper function for separating the member (if existing) from the pageName
+			// For example: 'Geometry.morphTarget' can be converted to
+			// ['Geometry', '.morphTarget'] or ['Geometry', '#morphTarget']
+			// Note: According RFC 3986 no '#' allowed inside of an URL fragment!
+
+			let parts = [];
+
+			const dotIndex = pageName.indexOf( oldDelimiter );
+
+			if ( dotIndex !== - 1 ) {
+
+				parts = pageName.split( oldDelimiter );
+				parts[ 1 ] = newDelimiter + parts[ 1 ];
+
+			} else {
+
+				parts[ 0 ] = pageName;
+				parts[ 1 ] = '';
+
+			}
+
+			return parts;
+
+		}
+
+		//
+
+		console.log( [
+			'    __     __',
+			' __/ __\\  / __\\__   ____   _____   _____',
+			'/ __/  /\\/ /  /___\\/ ____\\/ _____\\/ _____\\',
+			'\\/_   __/ /   _   / /  __/ / __  / / __  /_   __   _____',
+			'/ /  / / /  / /  / /  / / /  ___/ /  ___/\\ _\\/ __\\/ _____\\',
+			'\\/__/  \\/__/\\/__/\\/__/  \\/_____/\\/_____/\\/__/ /  / /  ___/',
+			'                                         / __/  /  \\__  \\',
+			'                                         \\/____/\\/_____/'
+		].join( '\n' ) );
+
+		</script>
+	</body>
+</html>
diff --git a/index.php b/index.php
index a9285fe..66c784b 100644
--- a/index.php
+++ b/index.php
@@ -18,5 +18,5 @@
 header( 'Referrer-Policy:  same-origin' );
 header( 'Accept-Language: en-US,en;q=0.5' );
 header( 'Connection: Keep-alive' );
-header( 'Location: ./browser.html' );
+header( 'Location: ./index.html#en/index' );
 ?>
\ No newline at end of file
diff --git a/manual.json b/manual.json
index 4e378ff..83a9f89 100644
--- a/manual.json
+++ b/manual.json
@@ -3,6 +3,6 @@
 	{
 	"manual":
 	{
-	"connect":"en/connect",
-	"connected":"en/connected"
+	"index":"en/index",
+	"about":"en/about"
 }}}
\ No newline at end of file
diff --git a/manual.json.txt b/manual.json.txt
new file mode 100644
index 0000000..83a9f89
--- /dev/null
+++ b/manual.json.txt
@@ -0,0 +1,8 @@
+{
+	"en":
+	{
+	"manual":
+	{
+	"index":"en/index",
+	"about":"en/about"
+}}}
\ No newline at end of file
diff --git a/server.php b/server.php
index 25352c6..4e3c190 100644
--- a/server.php
+++ b/server.php
@@ -19,17 +19,24 @@
 header( 'Referrer-Policy:  same-origin' );
 header( 'Accept-Language: en-US,en;q=0.5' );
 header( 'Connection: Keep-alive' );
-header( 'Location: ./browser.html' );
-            $answer1 = $_POST['secure-form-answer'];        
-            $totalCorrect = 0;           
-            if ($answer1 == "Human") { $totalCorrect++; }            
-            echo "<div id='results'>$totalCorrect /  1 correct</div>";    
+header( 'Location: ./index.html#en/index' );
+foreach($_POST as $variable => $value) {
+    $value = str_replace(' ', '_', $value);
+	$answer1 = $_POST['secure-form-answer'];        
+	$totalCorrect = 0;           
+	if ($answer1 == "Human") { $totalCorrect++; }            
+	echo "<div id='results'>$totalCorrect /  1 correct</div>";    
 	$handle = fopen("./en/" . $value . ".html", "a");
 	fwrite($handle, "\n" 
 	. "<!DOCTYPE html>" 
-	. "<meta name=" . "\"" . "viewport" . "\"" . "content=" . "\"" . "user-scalable=yes, initial-scale=1.0, maximum-scale=1.0" . "\"" . "/>" 
-	. "<title>" . $value . "</title>" . "</br>"
-	. "<br>\n" 
+	. "<meta name=" . "\"" . "viewport" . "\"" . "content=" 
+	. "\"" . "user-scalable=yes, initial-scale=1.0, maximum-scale=1.0" . "\"" . "/>" 
+	. "<title>" 
+	. $value 
+	. "</title>" 
+	. "</br>"
+	. $value
+	. "<br><br>\n" 
 	. "<form action=\"../server.php\" method=\"post\">\n" 
 	. "<input id=\"secure-form-answer-Human\" type=\"text\" name=\"secure-form-answer\" \n"
 	. "onkeypress=\"return event.charCode != 32\" \n" 
@@ -42,13 +49,9 @@
 	. "\""
 	. ">Human</label></noscript>"
 	. "</form>\n" 
-	. "\n" 
-	. "<br><a href=" . "\"" . "../delete.php?action=delete&filename=./en/" . $value . ".html" . "\"" . ">delete this page</a>"
-	. "<center>\n" 
-	. "<ul id=\"list\">\n"
-	. "<a href=\"../index.html\"class=\"handle\">index</a></br>\n" 
 	. "\n"
-    . $value . "\r\n");
+    . "\r\n");
+}
 $handle = fopen("./manual.json", "a");
 // load the data and delete the line from the array 
 $lines = file('./manual.json'); 
@@ -71,10 +74,5 @@
     . "\n}}}"
     . "\r\n");
 }
-$handle = fopen("./index.html", "a");
-foreach($_POST as $variable => $value) {
-    $value = str_replace(' ', '_', $value);
-	fwrite($handle, "<a href=" . "\"" . "./" . "browser.html#en" . "/" . $value . "\"" . "class=" . "\"" . "handle" . "\"" . "><button>" . $value . "</button>" . "</a></br>" . "\r\n");
-}
 fclose($handle);
 ?>
\ No newline at end of file
