API tools faq
paste
Advertisement
Guest User

TCOH Site Template

a guest
Jan 12th, 2018
386
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.25 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!-- TCOH Website Template v1.0 -->
  5.   <title>TCOH Website</title>
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  
  8. <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
  9. <script>
  10.   // Initialize Firebase
  11.   var config = {
  12.     apiKey: "AIzaSyDThT5K9dsq_JkUAYw-GzspnivA5WhmDlw",
  13.     authDomain: "jottocraft-web.firebaseapp.com",
  14.     databaseURL: "https://jottocraft-web.firebaseio.com",
  15.     projectId: "jottocraft-web",
  16.     storageBucket: "jottocraft-web.appspot.com",
  17.     messagingSenderId: "333372912033"
  18.   };
  19.   firebase.initializeApp(config);
  20.  
  21.       var user = firebase.auth().currentUser;
  22. if (user) {
  23.   $( "#authwindow" ).toggle( "puff" );
  24.           $( "#content" ).toggle( "puff" );
  25.           setTimeout(function(){
  26.             document.getElementById("logoutbtn").style.display = "";
  27.       }, 100);
  28. }
  29.   function logout() {
  30.     firebase.auth().signOut().then(function() {
  31.   window.location.reload();
  32. }, function(error) {
  33.   // An error happened.
  34. });
  35.   }
  36.   </script>
  37.   <style>
  38.     body {
  39.     margin: 0;
  40. }
  41.  
  42.   </style>
  43.   <script>
  44.         function auth() {
  45.           document.getElementById("lbtn").style.display = "none";
  46.           document.getElementById("loader").style.display = "block";
  47.           loggedin = true;
  48.       const pw = document.getElementById('authdata').value;
  49.       const email = document.getElementById('emaildata').value;
  50.       firebase.auth().signInWithEmailAndPassword(email, pw).catch(function(error) {
  51.         loggedin = false;
  52.         document.getElementById("loader").style.display = "none";
  53.         $( "#logindiv" ).effect( "shake" );
  54.         $( "#lbtn" ).show( "highlight" );
  55.       }).then(function(user) {
  56.         if (loggedin) {
  57.           loggedin = true;
  58.           $( "#authwindow" ).toggle( "puff" );
  59.           $( "#content" ).toggle( "puff" );
  60.           setTimeout(function(){
  61.             document.getElementById("logoutbtn").style.display = "";
  62.       }, 100);
  63.         }
  64.       });
  65.     }
  66.     var firebaseRef = firebase.database().ref().child("announcement");
  67. firebaseRef.on('value', function(datasnapshot){
  68. announcementval = datasnapshot.val();
  69.  if (announcementval !== "none") {
  70.    document.getElementById("abtn").style.display = "";
  71.  } else {
  72.    document.getElementById("abtn").style.display = "none";
  73.  }
  74. });
  75.     function announce() {
  76.       window.alert(announcementval);
  77.     }
  78.   </script>
  79.   <script>
  80.     setTimeout(function(){
  81.         document.getElementById('authdata').addEventListener('keypress', function(event) {
  82.         if (event.keyCode == 13) {
  83.             auth();
  84.         }
  85.     });
  86.       }, 500);
  87.   </script>
  88. </head>
  89. <body style="overflow:hidden;">
  90. <!-- Fluid UI -->
  91. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  92. <link type="text/css" rel="stylesheet" href="/fluid.css"  media="screen,projection"/>
  93. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  94. <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  95.   <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  96. <script type="text/javascript" src="/fluid.js"></script>
  97.     <script>
  98.   function darkmode() {
  99.     $("body").toggleClass("dark");
  100.     var mode = $("body").hasClass("dark");
  101.     if (mode) {
  102.     document.cookie = "fluid=dark";
  103.     } else {
  104.     document.cookie = "fluid=light";
  105.     }
  106. }
  107. function getCookie(cname) {
  108.     var name = cname + "=";
  109.     var decodedCookie = decodeURIComponent(document.cookie);
  110.     var ca = decodedCookie.split(';');
  111.     for(var i = 0; i <ca.length; i++) {
  112.        var c = ca[i];
  113.        while (c.charAt(0) == ' ') {
  114.            c = c.substring(1);
  115.        }
  116.        if (c.indexOf(name) == 0) {
  117.            return c.substring(name.length, c.length);
  118.        }
  119.    }
  120.    return "";
  121. }
  122. setTimeout(function(){  
  123. var mode = getCookie("fluid");
  124. if (mode == "dark") {
  125.  $("body").addClass("dark");
  126. } else {
  127.  $("body").removeClass("dark");
  128. }
  129. }, 10);
  130. </script>
  131.   <style>
  132.     #themebtn {
  133.     position: absolute;
  134.     bottom: 0;
  135.     right: 0;
  136. }
  137.     body.dark .btn-flat {
  138.       color:white;
  139.     }
  140.   </style>
  141.   <div class="container" style="display:none" id="content">
  142.  
  143.     <h1>Empty Website</h1>
  144.     <br>
  145. <p> This is an empty TCOH Website </p>
  146. </div>
  147.  
  148.   <div class="container" id="authwindow">
  149.     <h1>Login</h1>
  150.     <br><br>
  151.     <div id="logindiv">
  152.     <input id="emaildata" placeholder="Email" type="email">
  153.     <input id="authdata" placeholder="Password" type="password">
  154.   </div>
  155.     <br><br>
  156.     <button class="btn waves-effect" onclick="auth()" id="lbtn"><i class="material-icons right">lock</i>Login</button>
  157.     <br><br>
  158.     <loader id="loader" style="display:none"></loader>
  159.    
  160.   </div>
  161.  
  162.     <div class="fixed-action-btn horizontal">
  163.     <a class="btn-flat waves-effect">
  164.       <i class="large material-icons" onclick="darkmode()">format_paint</i>
  165.     </a>
  166.       <a id="abtn" style="display:none" class="btn-flat waves-effect">
  167.       <i class="large material-icons" onclick="announce()">announcement</i>
  168.     </a>
  169.       <a id="logoutbtn" style="display:none" class="btn-flat waves-effect">
  170.       <i class="large material-icons" onclick="logout()">lock</i>
  171.     </a>
  172.   </div>
  173. </body>
  174. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!