Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

dmd3440-chat-app/index.html

Go to file
 
 
Cannot retrieve contributors at this time
164 lines (137 sloc) 6.86 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="theme-color" content="#f00" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DMD 3440 - Room of Chat</title>
<link href="main.css" rel="stylesheet">
<link rel="manifest" href="manifest.json">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" href="/chat-icon-57.png"/>
<script src="https://kit.fontawesome.com/42c200d820.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="box">
<div id="left">
<div id="sidebar">
<div class="logo">
<img id="icon" src="images/icon192.png" alt="Chat App Icon">
<div class="name">LIVE CHAT</div>
</div>
<div class="display2">
<img class="smallImage" src="#" id="userProfilePicDisplay"/>
<div class="nameAndStatus">
<a href="edit-profile.html"><span id="usernameDisplay">{UserName}</span></a>
<span class="small" id="userStatusDisplay">{Status}</span>
</div>
</div>
<div class="allSideNav">
<div class="sideNav">
<a href="profile.html">View Profile</a>
</div>
<div class="sideNav">
<a href="edit-profile.html">Edit Profile</a>
</div>
<div class="sideNav lastNav">
<div class="dark-title">Dark Mode</div>
<div class="toggle-container">
<input type="checkbox" id="switch" name="theme" /><label for="switch">Toggle</label>
</div>
</div>
</div>
<a class="signOut" href="login.html"><i class="fas fa-long-arrow-alt-left"></i>Sign Out</a>
</div>
</div>
<div id="right">
<header>
<div id="time"></div>
<div class="top">
<nav role="navigation">
<div id="menuToggle">
<!--A fake / hidden checkbox is used as click reciever, so you can use the :checked selector on it. -->
<input type="checkbox" />
<!--Some spans to act as a hamburger. -->
<span class="burg"></span>
<span class="burg"></span>
<span class="burg"></span>
<ul id="menu">
<a href="profile.html"><li>View Profile</li></a>
<a href="edit-profile.html"><li>Edit Profile</li></a>
<li><div class="sideNav lastNav">
<div class="dark-title">Dark Mode</div>
<div class="toggle-container">
<input type="checkbox" id="switch2" name="theme2" /><label for="switch2">Toggle</label>
</div>
</div></li>
<a href="login.html"><li><i class="fas fa-long-arrow-alt-left"></i> Sign Out</li></a>
</ul>
</div>
</nav>
<h1>LET'S CHAT</h1>
<a href="profile.html" height="30" width="30"><img src="images/user-icon.png" class="profile-icon" alt="Profile Icon" height="30" width="30"></a>
</div>
<div class="course-name">DMD 3440</div>
</header>
<div id="chatBox">
<div class="display">
<img class="smallImage" src="#" id="userProfilePicDisplay2"/>
<div class="nameAndStatus">
<a href="edit-profile.html"><span id="usernameDisplay2">{UserName}</span></a>
<span class="small" id="userStatusDisplay2">{Status}</span>
</div>
</div>
</div>
<footer>
<div class="msgInputArea">
<input id="newMsg" type="text" name="newMsg" placeholder="Message the chat..."><br><br>
<input id="sendBtn" type="button" value="Send">
</div>
</footer>
</div>
</div>
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-app.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-firestore.js"></script>
<script src="firebase-config.js"></script>
<script src="register-sw.js"></script>
<script src="https://cdn.jsdelivr.net/gh/joelsalisbury/firebase-chat-3440/firebase-chat-functions.js"></script>
<script>
var checkBox = document.querySelector('input[name=theme]');
checkBox.addEventListener('change', function() {
if(this.checked) {
trans()
document.documentElement.setAttribute('data-theme', 'dark')
localStorage.setItem('data-theme', 'dark');
} else {
trans()
document.documentElement.setAttribute('data-theme', 'light')
localStorage.setItem('data-theme', 'light');
}
})
var checkBox2 = document.querySelector('input[name=theme2]');
checkBox2.addEventListener('change', function() {
if(this.checked) {
trans()
document.documentElement.setAttribute('data-theme', 'dark')
localStorage.setItem('data-theme', 'dark');
} else {
trans()
document.documentElement.setAttribute('data-theme', 'light')
localStorage.setItem('data-theme', 'light');
}
})
let trans = () => {
document.documentElement.classList.add('transition');
window.setTimeout(() => {
document.documentElement.classList.remove('transition');
}, 500)
}
</script>
<script src="main.js"></script>
</body>
</html>