daily pastebin goal
53%
SHARE
TWEET

TCOH Site Template

a guest Jan 12th, 2018 91 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data
Top