tutorial.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WaifuCHAIN</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <link rel="stylesheet" type="text/css" href="css/tutorial.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/ScrollToPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/CSSPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/tutorial.js"></script>
</head>
<body onload="main()">
    <div id="background">
        <div id="bgg1"></div>
        <div id="bgg2"></div>
    </div>
    <a id="float-discord" href="https://discordapp.com/invite/ykrT4bw" target="_blank" class="round-btn"><div id="discord-text"><span>Talk to us on Discord</span></div></a>
    <nav id="nav" class="navbar">
        <div class="navbar-container">
            <div class="navbar-g expandButton">
                <svg onclick="displayMenu()" id="menu" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    width="32px" height="32px" viewBox="0 0 459 459" style="enable-background:new 0 0 459 459;" xml:space="preserve">
                    <g id="menu-icon-lines">
                        <path d="M0,382.5h459v-51H0V382.5z M0,255h459v-51H0V255z M0,76.5v51h459v-51H0z"/>
                    </g>
                    <g id="menu-icon-close">
                        <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312   c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312   l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937   c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z" fill="#000"/>
                    </g>
                </svg>
            </div>
            <div onclick="location.href='index.html'" class="navbar-g nbrand">
                <p>WaifuChain</p>
            </div>
            <div id="navlist" class="navbar-g nmenu">
                <div class="navbar-g spaces">
                    <ul>
                        <li>
                            <a href="index.html">
                                Home
                            </a>
                        </li>
                        <li>
                            <a href="soon.html">
                                Bid
                            </a>
                        </li>
                        <li>
                            <a href="faq.html">
                                FAQs
                            </a>
                        </li>             
                        <li>
                            <a href="https://github.com/corollari/waifuchain" target="_blank">
                                Contract
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="navbar-g">
                <a href="tutorial.html"><button id="playnav" class="nbutton">Start</button></a>
            </div>
        </div>
    </nav>

    <div class="slides-container">
	
	
        <div class="slide" id="slide-intro-1">
            <div class="centered">
                <h1>Welcome!</h1>
                <p>WaifuChain is a blockchain cryptocollectible, which means that some steps must be taken to get started. We will be breaking, not only the process to start, but what to do after, into easy to follow parts (a cool “tu-Toriel” if you may). After these steps, you are all set to get your waifus!</p>
				
				
                <p><span class="go-next">Aight!</span></p>
            </div>
        </div>
	
	    <div class="slide" id="slide-intro-2">
            <div class="centered">
                <h1>Steps to get ready for WaifuChain Beta:</h1>
                <p id = "cuck">1. Install Metamask <br>2. Get the funds needed to acquire your waifus<br>3. Bid on waifu auctions<br>4.	Another way to get a Waifu: the market.<br>5. I have my waifu, what do I do now?<br>6. What’s commin’ up next?</p>
				
				
                <p><span class="go-next">Lets start!</span></p>
            </div>
        </div>
	
	
	
        <div class="slide" id="slide-2">
            <div class="centered">
			    <h1>1. Install Metamask</h1>
                <h1><img src="https://metamask.io/img/ethereum-metamask-chrome.png"></h1>
                
				<p>You will need a place for your waifus to rest! That's where Metamask comes in, a cozy and secure wallet. You should install or activate your Metamask Extension in your browser. If you do not have metamask, get it here: https://metamask.io/ </p>
				<!-- <p><a>https://metamask.io</a>.</p> -->
                <p><span style="cursor:pointer" onclick="checkDoneExtension()">Done!</span></p>
            </div>
        </div>
        <div class="slide" id="slide-3">
            <div class="centered">
                <h1>Open up your browser’s MetaMask extension</h1>
                <p>That done by tapping the top right fox cute logo. Then login. You did it, you really know how to click at the right places! I mean, If I could I would give you a cookie, but welp.</p>
                <p><span onclick="checkDoneWallet()">Done!</span></p>
            </div>
        </div>
        <div class="slide" id="slide-4">
            <div class="centered">
             
				<h1>2. Getting the funds to acquire your waifus</h1>
				   <h1>(in Beta version)</h1>
				
                <p>You can go to <a>your profile</a> or see what waifus are today in <a>auction</a>. As this is the beta, the currency will be completely free (yeah, we know you like free things!). That means you can get your Waifus at no cost, yay!</p>
				<p>To get this moneyz go to: <a ref= "https://faucet.rinkeby.io/"> https://faucet.rinkeby.io/</a> and follow the instructions on the site</p>
				<p><span class="go-next">Next!</span></p>
			</div>
        </div>
        <div class="slide" id="slide-5">
            <div class="centered">
                <h1>3. Bid on waifu auctions</h1>
                <p>Each day, different waifus will be on auction. Once you click the “BID” button on the official site, you will be able to check what waifus are available. Chose and bid on the waifu/s you want, after the bidding process ends, you will know if you got your partner.</p>

				<p><b><i>“I’m sad, I didn’t get the waifu :(” </i></b>- 	No problem! You can participate again in tomorrow’s auction (Keep it between you and me, there’s still another way to get a waifu: the market. We will get there in part n.4)</p>

				<p><b><i>“Hurray! I got my dream waifu.”</i></b> - Congratulations, a new world has opened for you! </p> 
				<p><span class="go-next">Next!</span></p>
            </div>
        </div>
        <div class="slide" id="slide-6">
            <div class="centered">
                <h1>4. Another way to get a Waifu: the market </h1>
                <p>Buy, Sell, Exchange waifus with other users. Chose your prices, increase the value of your waifu, become the supreme harem owner. Sounds like a nice plan if you ask me...</p>
				<p><span class="go-next">Next!</span></p>
		   </div>
        </div>
        <div class="slide" id="slide-7">
            <div class="centered">
                <h1>5. I have my waifu, what do I do now?</h1>
                <p>Now that you have your beloved waifu, you need to share it with the world! To do that, go and install our twitter extension (Yes, you are welcome). 
We will be adding more extensions and also a bot for discord in which you will be able to use your waifus in a tactical fighting game (Poke like).
Check out our RoadMap for more information!</p>
				<p><span class="go-next">Next!</span></p>
		  </div>
        </div>
        <div class="slide" id="slide-8">
            <div class="centered">
                <h1>6. What’s commin’ up next?</h1>
                <p>We know that you know that we know that you like cool things, that is why we have some awesome ideas being developed while you are reading these lines: </p>
				<p id = "cuck">·Bot for discord.<br>·Tactical fighting battles (Poke like)<br>·Chat with your Waifu via AI</p>
				<p><i>ehemChecktheRoadMap- uh? who said that? </i></p>
            </div>
        </div>
    </div>        
    <!--<div id="nav2">
        <ul>
            <li><a href="#slide-1">Installing Metamask</a></li>
            <li><a href="#slide-2">Sign in to MetaMask</a></li>
            <li><a href="#slide-3">Finish</a></li>
            <li><a href="#slide-4">More</a></li>
        </ul>
    </div>-->
</body>
</html>