<!DOCTYPE html>
<html lang="en">
<head>
    <!-- general -->
    <title>Juxtaposition Log In</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="manifest" href="/web/manifest.json">

    <!-- windows/ios/chrome -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="apple-mobile-web-app-title" content="Juxtaposition">
    <meta name="application-name" content="Juxtaposition">
    <meta name="msapplication-TileColor" content="#1b1f3b">
    <meta name="theme-color" content="#1b1f3b">

    <!-- open graph/embeds -->
    <meta property="og:title" content="Juxtaposition">
    <meta property="og:description" content="An open source Nintendo Network replacement that aims to build custom servers for the WiiU and 3DS family of consoles">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://juxt.pretendo.network/">
    <meta property="og:image" content="https://pretendo.network/assets/images/opengraph/opengraph-image.png">
    <meta property="og:image:alt" content="Juxtaposition">
    <meta property="og:site_name" content="Juxtaposition">

    <!-- twitter embeds -->
    <meta name="twitter:url" content="https://juxt.pretendo.network/">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@PretendoNetwork">
    <meta name="twitter:title" content="Pretendo Network">
    <meta name="twitter:description" content="An open source Nintendo Network replacement that aims to build custom servers for the WiiU and 3DS family of consoles">
    <meta name="twitter:image" content="https://pretendo.network/assets/images/opengraph/opengraph-image.png">

    <!-- google seo -->
    <meta name="description" content="An open source Nintendo Network replacement that aims to build custom servers for the WiiU and 3DS family of consoles">
    <meta name="robots" content="index, follow">

    <!-- favicon -->
    <link rel="apple-touch-icon" href="/web/icons/icon-144x144.png">
    <link rel="icon" type="image/png" href="/web/icons/icon-144x144.png">
    <link rel="shortcut icon" href="/web/icons/icon-72x72.png">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&amp;display=swap" rel="stylesheet">

	<link rel="stylesheet" href="/css/login.css">
	<link rel="stylesheet" href="/css/first_run.css">
	<script src="/js/pjax.min.js"></script>
	<script src="/js/web.min.js"></script>
</head>
<body>
<div class="main-body">
	<script>
		var experience = 0;
		var notifications = false;
		function selectExperience(type) {
			document.getElementById('beginner').classList.remove('selected');
			document.getElementById('intermediate').classList.remove('selected');
			document.getElementById('expert').classList.remove('selected');
			switch (type) {
				case 0:
					document.getElementById("beginner").classList.add('selected');
					experience = 0;
					break;
				case 1:
					document.getElementById("intermediate").classList.add('selected');
					experience = 1;
					break;
				case 2:
					document.getElementById("expert").classList.add('selected');
					experience = 2;
					break;
			}
		}
		function submit() {
			var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance
			var theUrl = "/titles/show/newUser";
			xmlhttp.open("POST", theUrl);
			xmlhttp.onreadystatechange = function() {
				if (this.readyState === 4 && (this.status === 423 || this.status === 404 || this.status === 504)) {
					alert('Unable to complete setup, the server is likely having issues.\n\nPlease try again later.');
				}
			}
			xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
			xmlhttp.send(JSON.stringify({ "experience": experience, "notifications": notifications }));
		}
	</script>
    <div class="wrapper">
        <div class="account-form-wrapper">
			<h2>Account Creation is only available when you have a linked Wii U or 3DS.</h2>
            <!--<a class="logotype" href="/">
                <svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
                    <g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
                        <g id="logo" transform="translate(553 467)">
                            <rect id="XMLID_158_" width="39.876" height="39.876" fill="#9d6ff3" opacity="0"></rect>
                            <g id="XMLID_6_" transform="translate(8.222 1.418)">
                                <path id="XMLID_15_" d="M69.149,28.312c-1.051.553-.129,2.139.922,1.585a12.365,12.365,0,0,1,8.794-.571,10.829,10.829,0,0,1,6.342,4.166c.645,1,2.231.074,1.585-.922C83.308,27.169,74.7,25.436,69.149,28.312Z" transform="translate(-64.246 -23.389)" fill="#9d6ff3"></path>
                                <path id="XMLID_14_" d="M82.64,14.608A15.565,15.565,0,0,0,73.5,8.45a17.535,17.535,0,0,0-12.647.9c-1.051.553-.129,2.139.922,1.585,3.411-1.788,7.6-1.714,11.209-.719,3.1.848,6.268,2.544,8.038,5.309C81.681,16.543,83.267,15.622,82.64,14.608Z" transform="translate(-57.476 -7.693)" fill="#9d6ff3"></path>
                                <path id="XMLID_9_" d="M55.68,47.8a10.719,10.719,0,0,0-6.71,2.3H45.983A1.336,1.336,0,0,0,44.6,51.376V75.84a1.431,1.431,0,0,0,1.383,1.383h3.023a1.367,1.367,0,0,0,1.309-1.383V68.392A10.993,10.993,0,1,0,55.68,47.8Zm0,17.182a6.213,6.213,0,1,1,6.213-6.213A6.216,6.216,0,0,1,55.68,64.982Z" transform="translate(-44.6 -40.406)" fill="#9d6ff3"></path>
                            </g>
                        </g>
                        <text id="Pretendo" transform="translate(593 492)" fill="#fff" font-size="17" font-family="Poppins-Bold, Poppins" font-weight="700">
                            <tspan x="0" y="0">Pretendo</tspan>
                        </text>
                    </g>
                </svg>
            </a>
            <div id="welcome" class="about-wrapper background" style="display: flex">
				<h1 class="about-header"><%= lang.setup.welcome %></h1>
				<div class="about-body">
					<p>
						<%= lang.setup.welcome_text %>
					</p>
				</div>
				<div class="button-wrapper">
					<input type="button" class="post-button fixed-bottom-button"
						value="<%= lang.global.next %>" data-sound="SE_WAVE_MENU"
						data-module-show="beta" data-module-hide="welcome"
						data-header="false" data-menu="false">
				</div>
			</div>
			<div id="beta" class="about-wrapper background">
				<h1 class="about-header"><%= lang.setup.beta %></h1>
				<div class="about-body" style="position: relative">
					<p>
						<%= lang.setup.beta_text.first %>
						<br>
						<b><u><%= lang.setup.beta_text.second %></u></b>
						<br>
						<%= lang.setup.beta_text.third %>
					</p>
				</div>
				<div class="button-wrapper">
					<input type="button" class="fixed-bottom-button left"
						value="<%= lang.global.back %>" data-sound="SE_WAVE_CANCEL"
						data-module-show="welcome" data-module-hide="beta"
						data-header="false" data-menu="false">
					<input type="button" class="post-button fixed-bottom-button"
						value="<%= lang.global.next %>" data-sound="SE_WAVE_MENU"
						data-module-show="about" data-module-hide="beta"
						data-header="false" data-menu="false">
				</div>
			</div>
			<div id="about" class="about-wrapper background">
				<h1 class="about-header"><%= lang.setup.info %></h1>
				<div class="about-body">
					<p>
						<%= lang.setup.info_text %>
					</p>
				</div>
				<div class="button-wrapper">
					<input type="button" class="fixed-bottom-button left"
						value="<%= lang.global.back %>" data-sound="SE_WAVE_CANCEL"
						data-module-show="beta" data-module-hide="about"
						data-header="false" data-menu="false">
					<input type="button" class="post-button fixed-bottom-button"
						value="<%= lang.global.next %>" data-sound="SE_WAVE_MENU"
						data-module-show="manners" data-module-hide="about"
						data-header="false" data-menu="false">
				</div>
			</div>
			<div id="manners" class="background">
				<h1 class="about-header"><%= lang.setup.rules %></h1>
				<div class="about-body" style="position: relative">
					<p>
						<%= lang.setup.rules_text.first %>
						<br><br>
						<div class="headline">
							<h2><%= lang.setup.rules_text.second %></h2>
						</div>
						<%= lang.setup.rules_text.third %>
						<br><br>
						<div class="headline">
							<h2><%= lang.setup.rules_text.fourth %></h2>
						</div>
						<%= lang.setup.rules_text.fifth %>
						<br><br>
						<div class="headline">
							<h2><%= lang.setup.rules_text.sixth %></h2>
						</div>
						<%= lang.setup.rules_text.seventh %>
						<br><br>
						<div class="headline">
							<h2><%= lang.setup.rules_text.eighth %></h2>
						</div>
						<%= lang.setup.rules_text.ninth %>
						<br><br>
						<div class="headline">
							<h2><%= lang.setup.rules_text.tenth %></h2>
						</div>
						<%= lang.setup.rules_text.eleventh %>
						<br><br>
						<div class="headline">
							<h2><%= lang.setup.rules_text.twelfth %></h2>
						</div>
						<%= lang.setup.rules_text.thirteenth %>
						<br><br>
					</p>
				</div>
				<div class="button-wrapper">
					<input type="button" class="fixed-bottom-button left"
						value="<%= lang.global.back %>" data-sound="SE_WAVE_CANCEL"
						data-module-show="about" data-module-hide="manners"
						data-header="false" data-menu="false">
					<input type="button" class="post-button fixed-bottom-button"
						value="<%= lang.global.next %>" data-sound="SE_WAVE_MENU"
						data-module-show="google-analytics" data-module-hide="manners"
						data-header="false" data-menu="false">
				</div>
			</div>
			<div id="google-analytics" class="about-wrapper background">
				<h1 class="about-header"><%= lang.setup.google %></h1>
				<div class="about-body">
					<p>
						<%= lang.setup.google_text %>
					</p>
				</div>
				<div class="button-wrapper">
					<input type="button" class="fixed-bottom-button left"
						value="<%= lang.global.back %>" data-sound="SE_WAVE_CANCEL"
						data-module-show="manners" data-module-hide="google-analytics"
						data-header="false" data-menu="false">
					<input type="button" class="post-button fixed-bottom-button"
						value="<%= lang.global.next %>" data-sound="SE_WAVE_MENU"
						data-module-show="game-experience" data-module-hide="google-analytics"
						data-header="false" data-menu="false">
				</div>
			</div>
			<div id="game-experience" class="about-wrapper background">
				<h1 class="about-header"><%= lang.setup.experience %></h1>
				<div class="about-body">
					<p>
						<%= lang.setup.experience_text.info %>
					</p>
				</div>
				<div>
					<ul class="horizontal-list">
						<li  id="beginner" onclick="selectExperience(0)" class="selected"><a href="#"><%= lang.setup.experience_text.beginner %></a></li>
						<li  id="intermediate" onclick="selectExperience(1)"><a href="#"><%= lang.setup.experience_text.intermediate %></a></li>
						<li  id="expert" onclick="selectExperience(2)"><a href="#"><%= lang.setup.experience_text.expert %></a></li>
					</ul>
				</div>
				<div class="button-wrapper">
					<input type="button" class="fixed-bottom-button left"
						value="<%= lang.global.back %>" data-sound="SE_WAVE_CANCEL"
						data-module-show="google-analytics" data-module-hide="game-experience"
						data-header="false" data-menu="false">
					<input type="button" class="post-button fixed-bottom-button"
						value="<%= lang.global.next %>" data-sound="SE_WAVE_MENU"
						data-module-show="ready" data-module-hide="game-experience"
						data-header="false" data-menu="false">
				</div>
			</div>
			<div id="ready" class="about-wrapper background">
				<h1 class="about-header"><%= lang.setup.ready %></h1>
				<div class="about-body">
					<p>
						<%= lang.setup.ready_text %>
					</p>
				</div>
				<div class="button-wrapper">
					<input type="button" class="fixed-bottom-button left"
						value="<%= lang.global.back %>" data-sound="SE_WAVE_CANCEL"
						data-module-show="game-experience" data-module-hide="ready"
						data-header="false" data-menu="false">
					<input type="button" class="post-button fixed-bottom-button"
						value="<%= lang.global.next %>" data-sound="GL_OLV_INIT_END"
						data-module-show="have-fun" data-module-hide="ready"
						data-header="false" data-menu="false" onclick="submit()">
				</div>
			</div>
			<div id="have-fun" class="about-wrapper background">
				<h1 class="about-header"></h1>
				<div class="about-body">
					<h1 class="about-header"><%= lang.setup.done %></h1>
				</div>
				<div class="center">
					<button class="about-button"
							onclick="window.location.replace('/titles')"><%= lang.setup.done_button %></button>
				</div>
			</div>-->
        </div>
    </div>
</div>
</body></html>