|
|
@@ -1,13 +1,79 @@
|
|
|
<!DOCTYPE HTML>
|
|
|
<html>
|
|
|
<head>
|
|
|
- <title>Captive Portal</title>
|
|
|
+ <title>(´・ω・`)</title>
|
|
|
+ <script src="./jquery.min.js"></script>
|
|
|
+ <link rel="stylesheet" href="./main.css"/>
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
</head>
|
|
|
<body>
|
|
|
- <h3>Captive Portal</h3>
|
|
|
- <br>
|
|
|
- <br>
|
|
|
- <p>Hello World!</p>
|
|
|
+ <!-- Main contents of the webapp -->
|
|
|
+ <div id="menu">
|
|
|
+ <div class="container">
|
|
|
+ <span class="logo">(´・ω・`)</span>
|
|
|
+ </div>
|
|
|
+ <button onclick="toggleSideMenu()" class="togglemenu button">
|
|
|
+ <img class="btnicon" src="img/menu.svg">
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="container">
|
|
|
+ <div class="header">
|
|
|
+ <img src="img/checkmark.svg" >
|
|
|
+ <span>Useless Robot Connected<br>
|
|
|
+ <small>IP Address: <span id="ipaddr">Unknown</span></small></span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="divider"></div>
|
|
|
+ <h3>Quick Actions</h3>
|
|
|
+ <p>Hello World!</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Side bar for other functions-->
|
|
|
+ <div id="sidebarWrapper">
|
|
|
+ <div id="blurcover"></div>
|
|
|
+ <div id="sidebar">
|
|
|
+ <div class="item">
|
|
|
+ <b>Advance Functions</b>
|
|
|
+ </div>
|
|
|
+ <div class="divider"></div>
|
|
|
+ <a class="clickable item" href="animator.html">
|
|
|
+ <img src="img/animation.svg"> Animation Editor
|
|
|
+ </a>
|
|
|
+ <a class="clickable item">
|
|
|
+ <img src="img/action.svg"> Action Programmer
|
|
|
+ </a>
|
|
|
+ <a class="clickable item">
|
|
|
+ <img src="img/folder.svg"> SD Browser
|
|
|
+ </a>
|
|
|
+ <a class="clickable item">
|
|
|
+ <img src="img/code.svg"> Developer Tools
|
|
|
+ </a>
|
|
|
+ <div class="item">
|
|
|
+ <small>Cute Useless Robot v1.0</small>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ function toggleSideMenu(){
|
|
|
+ var left = $('#sidebar').offset().left; // Get the calculated left position
|
|
|
+ if (left >= window.innerWidth || left == 0){
|
|
|
+ //side bar is hidden
|
|
|
+ $("#sidebarWrapper").fadeIn('fast');
|
|
|
+ $("#sidebar").css({left:window.innerWidth + "px"}).animate({"left": (window.innerWidth - $('#sidebar').width())+ "px"}, "fast", function(){
|
|
|
+
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ //side bar is shown
|
|
|
+ $("#sidebar").css({left:left}).animate({"left": window.innerWidth + "px"}, "fast", function(){
|
|
|
+ $("#sidebarWrapper").fadeOut('fast');
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ $("#blurcover").on("click", function(){
|
|
|
+ toggleSideMenu();
|
|
|
+ })
|
|
|
+ </script>
|
|
|
</body>
|
|
|
</html>
|
Toby Chui
