<!DOCTYPE html>
< html lang = "en-US" >
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=yes" / >
< title > welcome< / title >
< link rel = "icon" href = "imgs/avatars/ball2.gif" >
< link rel = "stylesheet" href = "index.css" >
< / head >
< body >
< div class = "introtext" >
< span style = "-webkit-padding-start: 15vw;" > It< / span > looks like you have been summoned by the < span class = "special1" > oracle (< img src = "imgs/avatars/ball1.png" height = "60vw" > ,< img src = "imgs/avatars/ball2.gif" height = "60vw" > ,< img src = "imgs/avatars/ball4.gif" height = "60vw" > )< / span >
< div class = "line" > < / div > you will be asked to start a journey: throughout it you will be called
< form name = "nameForm" >
< input id = "player_name" type = "text" >
< / form >
you can decide whether you are going to look like
< form id = "avatar_form" >
< label class = "radio" for = "player1" >
< span class = "radio__input" >
< input class = "avatar" type = "radio" id = "player1" name = "player_avatar" value = "imgs/avatars/avatar1.gif" checked = "checked" >
< span class = "radio__control" > < / span > < img id = "player_img_1" src = "imgs/avatars/avatar1.gif" height = "60vw" >
< / span >
< / label >
,
< label class = "radio" for = "player2" >
< span class = "radio__input" >
< input class = "avatar" type = "radio" id = "player2" name = "player_avatar" value = "imgs/avatars/avatar2.gif" >
< span class = "radio__control" > < / span > < img id = "player_img_2" src = "imgs/avatars/avatar2.gif" height = "60vw" >
< / span >
< / label >
,
< label class = "radio" for = "player3" >
< span class = "radio__input" >
< input class = "avatar" type = "radio" id = "player3" name = "player_avatar" value = "imgs/avatars/avatar3.gif" >
< span class = "radio__control" > < / span > < img id = "player_img_3" src = "imgs/avatars/avatar3.gif" height = "60vw" >
< / span >
< / label >
,
< label class = "radio" for = "player4" >
< span class = "radio__input" >
< input class = "avatar" type = "radio" id = "player4" name = "player_avatar" value = "imgs/avatars/avatar4.gif" >
< span class = "radio__control" > < / span > < img id = "player_img_4" src = "imgs/avatars/avatar4.gif" height = "60vw" >
< / span >
< / label >
,
< label class = "radio" for = "player5" >
< span class = "radio__input" >
< input class = "avatar" type = "radio" id = "player5" name = "player_avatar" value = "imgs/avatars/avatar5.gif" >
< span class = "radio__control" > < / span > < img id = "player_img_5" src = "imgs/avatars/avatar5.gif" height = "70vh" >
< / span >
< / label >
,
< label class = "radio" for = "player6" >
< span class = "radio__input" >
< input class = "avatar" type = "radio" id = "player6" name = "player_avatar" value = "imgs/avatars/avatar6.gif" >
< span class = "radio__control" > < / span > < img id = "player_img_6" src = "imgs/avatars/avatar6.gif" height = "70vh" >
< / span >
< / label >
,
< label class = "radio" for = "player7" >
< span class = "radio__input" >
< input class = "avatar" type = "radio" id = "player7" name = "player_avatar" value = "imgs/avatars/avatar7.gif" >
< span class = "radio__control" > < / span > < img id = "player_img_7" src = "imgs/avatars/avatar7.gif" height = "70vh" >
< / span >
< / label >
,
< label class = "radio" for = "player8" >
< span class = "radio__input" >
< input class = "avatar" type = "radio" id = "player8" name = "player_avatar" value = "imgs/avatars/avatar8.gif" >
< span class = "radio__control" > < / span > < img id = "player_img_8" src = "imgs/avatars/avatar8.gif" height = "70vh" >
< / span >
< / label >
,
< label class = "radio" for = "player9" >
< span class = "radio__input" >
< input class = "avatar" type = "radio" id = "player9" name = "player_avatar" value = "imgs/avatars/avatar9.gif" >
< span class = "radio__control" > < / span > < img id = "player_img_9" src = "imgs/avatars/avatar9.gif" height = "70vh" >
< / span >
< / label >
,
< label class = "radio" for = "player10" >
< span class = "radio__input" >
< input class = "avatar" type = "radio" id = "player10" name = "player_avatar" value = "imgs/avatars/avatar10.gif" >
< span class = "radio__control" > < / span > < img id = "player_img_10" src = "imgs/avatars/avatar10.gif" height = "70vh" >
< / span >
< / label >
,
< label class = "radio" for = "player11" >
< span class = "radio__input" >
< input class = "avatar" type = "radio" id = "player11" name = "player_avatar" value = "imgs/avatars/avatar11.gif" >
< span class = "radio__control" > < / span > < img id = "player_img_11" src = "imgs/avatars/avatar11.gif" height = "70vh" >
< / span >
< / label >
or like
< label class = "radio" for = "player12" >
< span class = "radio__input" >
< input class = "avatar" type = "radio" id = "player12" name = "player_avatar" value = "imgs/avatars/avatar12.gif" >
< span class = "radio__control" > < / span > < img id = "player_img_12" src = "imgs/avatars/avatar12.gif" height = "70vh" >
< / span >
< / label >
< / form > < div class = "line3" > < / div >
you can press
< button id = "gotostart" onclick = "storeName()" > < span class = "button_text" > start < / span > < / button >
when you are ready
< / div >
< script >
//clear local storage when back on the landing page
/*
window.onload = function() {
window.localStorage.clear();
}*/
document.addEventListener("DOMContentLoaded", function () {
window.localStorage.clear();
console.log("loaded");
updateAvatar();
});
< / script >
< script src = "jquery.min.js" > < / script >
< script type = "text/javascript" src = "index.js" > < / script >
< / body >
