<!doctype html>
<html>
<title>Fairy Tail</title>
<head>
<meta charset="windows-1251">
<meta name="robots" content="noindex, nofollow" />
<link href='https://fonts.googleapis.com/css?family=Bonbon' rel='stylesheet' type='text/css'>
<style>
body {
	width: 640px;
	height: 400px;
	margin: auto;
	}
#game-window {
	width: 100%;
	height: 100%;
	border: none;
	position: relative;
	background: url("png/gamefon.png") no-repeat center;
	margin: auto;

	}
.game-button {
	font-family: 'Bonbon', cursive;
	font-size: 37px;
	color: #9c00ff;
	border-radius: 47px 31px 51px 31px;
	position: absolute;
	width: 129px;
	height: 88px;
	background-image: url("png/gamebutt1j.png");
	text-align: center;
	line-height: 88px;
	text-decoration: none;
	}
#start-button {
	top: 30px;
	left: 400px;
	}
#story-button {
	top: 130px;
	left: 400px;
	}
.game-button:hover, .gamet-button:active {
	background-image: url("png/gamebutt1p.png");
	}

#play-window {
	width: 100%;
	height: 100%;
	border: none;
	position: relative;
	background: url("png/play fon.png") no-repeat center;
	display: none;
	}
.play-buttonB {
	background-image: url("png/playbutt.png");
	font-family: 'Bonbon', cursive;
	font-size: 33px;
	color: #000057;
	border-radius: 51px 73px 53px 73px;
	position: absolute;
	width: 177px;
	height: 127px;
	text-align: center;
	line-height: 135px;
	text-decoration: none;
	display: block;
	}
#noun-button {
	top: 30px;
	left: 33px;
	}
#verb-button {
	top: 40px;
	left: 237px;
	}
#adj-button {
	top: 58px;
	left: 440px;
	}
.play-buttonB:hover, play-buttonB:active  {
	background-image: url("png/playbutt1.png");
	}
	
.backy {
	background-image: url("png/backbutt.png");
	font-family: 'Bonbon', cursive;
	font-size: 21px;
	color: #000057;
	border-radius: 27px 27px 27px 27px ;
	position: absolute;
	width: 65px;
	height: 50px;
	text-align: center;
	line-height: 51px;
	text-decoration: none;
	display: block;
	}
#back-button {
	top: 11px;
	left: 570px;
	}
.backy:hover, backy:active  {
	background-image: url("png/backbuttB.png");
	}
.nassy {
	background-image: url("png/nasse.png");
	font-family: 'Bonbon', cursive;
	font-size: 30px;
	border-radius: 90px 87px 91px 93px;
	position: absolute;
	width: 103px;
	height: 80px;
	text-align: center;
	line-height: 77px;
	text-decoration: none;
	display: block;
	}
#name-button {
	top: 191px;
	left: 371px;
	color: #000057;
	}
#save-button {
	top: 279px;
	left: 373px;
	color: #a60069;
	}
.nassy:hover, nassy:active  {
	background-image: url("png/nasseB.png");
	}
	
#giwords {
	top: 201px;
	left: 487px;
	background-color: #f2ffff;
	font-family: Arial Rounded MT;
	font-size: 18px;
	overflow-y: scroll;
	border-radius: 11px;
	position: absolute;
	width: 135px;
	height: 177px;
	text-align: center;
	line-height: 21px;
	text-decoration: none;
	display: block;
	}
.ny {
	color: blue;
	}
.vy {
	color: #0acf00;
	}
.ay {
	color: #ff0054;
	}
.nay {
	color: #ffc100;
	}
</style>
<script>	
	var storage = window.sessionStorage;
	var nouny = ["crate", "saddle", "snowstorm", "pony", "thought", "rabbit", "ski", "mitten", "brake", "ear", "knife", "battery", "drum", "milk", "cucumber", "apricot", "laces", "campfire", "ticket", "omelette", "gun", "bag", "suitcase", "frying pan", "acrobat", "shepherd", " gold", "wind", "wheel", "water", "wheat", "key", "theatre", "recorder", "clay", "sun", "snow", "tree", "fox", "mouse", "house", "balcony", "burrow", "spade", "towel", "sweater", "book", "rifle", "letter", "light", "care", "alarm", "pen", "laughter", "tear", "illness", "birthday", "clock", "balloon", "juice", "cup", "square", "sunrise", "rash", "apron", "snore", "murmur", "fattening", "volcano", "shot glass", "spoon", "vampire", "worm", "emerald", "amethyst", "storm", "door", "pine", "hedgehog", "gooseberry", "rustle", "chip", "sea", "lake", "river", "mountain", "pass", "plain", "field", "spinner", "miracle", "iodine", "pepper", "chocolate", "marmalade", "treat", "sledge", "well", "lady", "dress", "jelly", "borsch", "pelmeni", "axe", "scythe", "pile", "barley", "oat", "buckwheat", "kokoshnik", "shirt", "port", "flour", "handful", "cream", "butter", "window", "bench", "floor", "threshold", "porch", "backyard", "gate", "path", "bunny", "song", "wolf", "bear", "nose", "tongue", "boy", "girl", "dog", "cat", "apple", "pear", "carrot", "prince", "princess", "fairy", "teapot", "lamp", "fir", "wind", " evening", "frost", "year", "son", "sweet", "shout", "sign", "telescope", "smile", "snowman", "train", "planet", "ring", "screen", "painting", "street", "house", "home", "pinecone"];
	function noun() {
		var randomWordIndex = Math.floor(Math.random() * (nouny.length - 1));
		nouny.splice(randomWordIndex, 1);
		var randomWord = nouny[randomWordIndex];
		document.getElementById("giwords").innerHTML += "<br/>" + "<span class='ny'>" + randomWord + "</span>";
	}
	var verby = ["to read", "to stroll", "to run", "to laugh", "to grow up", "to be", "to cook", "to drive", "to joke", "to speak", "to swim", "to talk", "to step", "to jump", "to sit", "to stand", "to think", "to exist", "to react", "to act out", "to have fun", "to wash", "to dress", "to sew", "to feed", "to clean", "to care for", "to kiss", "to rejoice", "to dive", "to growl", "to sing", "to rot", "to drift", "to pick (at)", "to pour", "to add", "to blow (your nose)", "to burrow", "to learn", "to smell", "to build", "to hate", "to wiggle", "to sleep", "to laze (around)", "to fall", "to bake", "to cover", "to cool", "to hang", "to clarify", "to rip", "to tug", "to live", "to wait", "to search", "to give", "to play", "to curse", "to take off", "to film", "to stick up", "to shiver", "to mute", "to lock", "to spin", "to be done with", "to drink", "      to round", "to break", "to knock", "to fly away", "to spray", "to brush", "to crumple", "to drown", "to mince", "to plant", "to squeeze", "to cut down", "to hammer", "to dance", "to rub in", "to insert", "to get", "to meet", "to start", "to make", "to wind", "to ride", "to lead", "to go", "to cross", "to fry", "to lie", "to roll", "to eat", "to see", "to hear", "to jump up", "to leap", "to knit", "to cock-a-doodle-doo", "to run", "to tease", "to hide", "to purr", "to shine", "to warm", "to circle", "to be visible", "to blush", "to rustle", "to darken", "to love", "to barter", "to get wet", "to read", "to print", "to pop", "to collect dust", "to draw", "to dream"];
	function verb() {
	var randomWordIndex = Math.floor(Math.random() * (verby.length - 1));
		verby.splice(randomWordIndex, 1);
		var randomWord = verby[randomWordIndex];
		document.getElementById("giwords").innerHTML += "<br/>" + "<span class='vy'>" + randomWord + "</span>";
	}
	var adjy = ["cute", "damp", "weird", "funny", "sad", "ginger", "cherry", "lilac", "red", "purple", "white", "buttery", "mushroom", "pointy", "ongoing", "square", "round", "infinite", "chalk", "pretty", "chatty", "soft", "green", "shiny", "singing", "ringing", "glistening", "growing", "blue", "starry", "flying", "blinking", "new", "old", "ripe", "wonky", "rusty", "evil", "smelly", "blushing", "handmade", "dangly", "underwater", "unobservant", "electric", "rotten", "real", "icy", "noisy", "velvety", "bloody", "sensitive", "dear", "forgotten", "moist", "sacred", "kind", "clever", "small", "strong", "agile", "mighty", "separate", "deep", "grey", "louder", "last", "soft", "yellow", "furry", "honey", "plastic", "bamboo", "gravitationally", "heavy", "slippy", "monochrome", "dusty", "spiky", "expensive", "far"];
	function adjective() {
	var randomWordIndex = Math.floor(Math.random() * (adjy.length - 1));
		adjy.splice(randomWordIndex, 1);
		var randomWord = adjy[randomWordIndex];
		document.getElementById("giwords").innerHTML += "<br/>" + "<span class='ay'>" + randomWord + "</span>";
	}
	var namy = ["Alexander", "Anastasia", "George", "Martha", "Tsvetana", "Mary", "May", "Evsthaphy", "Aristarkh", "Illarion", "Peter", "Gennady", "Varvara", "Pelagea", "Agaphena", "Onufriy", "Marina", "Muneteka", "Elizabeth", "Angelina", "Arina", "Alice", "Bella", "Boris", "Bruse", "Bob", "Marlin", "Marty", "Anna", "Vadim", "Andry", "Dim", "Tapary", "Miy", "Noy", "Yao", "Splin", "Eva", "Adam", "Billy", "Adept", "Nirna", "Geoffrey", "Susan", "Edmund", "Lucy", "Felix", "Theo", "Bob", "Martin", "Star", "Caspian", "Aslan", "Miraz", "Eustace", "Jill", "Rillian", "Paddy", "Paggy", "Shasta", "Bree", "Aravis", "Hwin", "Tirian", "Shift", "Puzzle", "Mononoke", "Nausica", "Kirito", "Aska", "Aila", "Anky", "Jin", "Tonic", "Sora", "Shiro", "Chihiro", "Sen", "Ponio", ]
	function nassy() {
	var randomWordIndex = Math.floor(Math.random() * (namy.length - 1));
		namy.splice(randomWordIndex, 1);
		var randomWord = namy[randomWordIndex];
		document.getElementById("giwords").innerHTML += "<br/>" + "<span class='nay'>" + randomWord + "</span>";
	}
	function play() {
		document.getElementById("game-window").style.display = "none";
		document.getElementById("play-window").style.display = "block";
	}
	
	function backy() {
		document.getElementById("play-window").style.display = "none";
		document.getElementById("game-window").style.display = "block";
		document.getElementById("giwords").innerHTmL = "";
		document.getElementById("history").innerHTML = "";
	}
	function savy() {
	var n = storage.getItem("totalSkazkaz") || 0;
		storage.setItem('skazka-' + n, {skazka: document.getElementById("history").value, giwords: document.getElementById("giwords").innerHTML, nouny: nouny, verby: verby, adjy: adjy, namy: namy});
		storage.setItem('totalSkazkaz', n + 1);
	}
	function stos() {
		var s = storage.getItem('skazka-' + n);
		document.getElementById('history').value = s.skazka;
		document.getElementById('giwords').innerHTML = s.giwords;
		nouny=s.nouny;
		verby=s.verby;
		adjy=s.adjy;
		namy=s.namy;
	}
 </script>
</head>
<body>
	<div id="game-window">
		<div id="start-button" class="game-button" onClick = "play()">play
		</div>
		<div id="story-button" class="game-button" onClick = "stos()">stories
		</div>
	</div>
	<div id="play-window">
		<div id="noun-button" class="play-buttonB" onClick = "noun()">noun
		</div>
		<div id="verb-button" class="play-buttonB" onClick = "verb()">verb
		</div>
		<div id="adj-button" class="play-buttonB" onClick = "adjective()">adjective
		</div>
		<div id="back-button" class="backy" onClick = "backy()"> back
		</div>
		<div id="name-button" class="nassy" onClick = "nassy()">name
		</div>
		<div id="save-button" class="nassy" onClick = "savy()"><b>save</b>
		</div>
		<div id="giwords">
		</div>
		<textarea id="history" rows="9" cols="33" spellcheck="false"
		style=
		"position: relative;
		left: 27px;
		top: 185px;
		border-radius: 11px;
		background-color: #f2ffff;
		padding: 7px;
		font-family: Arial Rounded MT;
		font-size: 17px;
		"></textarea>
	</div>
</body>
</html>