-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathmain.html
More file actions
84 lines (79 loc) · 3.71 KB
/
main.html
File metadata and controls
84 lines (79 loc) · 3.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!Doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/chatbox.css"> <!-- placeholder for the chatbox styling -->
<link rel="stylesheet" href="styles/cards.css" /> <!-- stylesheet for the cards -->
<link rel="stylesheet" href="styles/basic.css"> <!-- styles for the topnav,main area and chatbtn -->
<link rel="stylesheet" href="styles/dash.css"> <!-- for the left Navbar -->
<script type="text/javascript" src="scripts/cards.js"></script> <!-- Lazy load for the community cards -->
<script type="text/javascript" src="scripts/chat.js"></script> <!-- Chat engine and animations -->
<script src="/socket.io/socket.io.js"></script> <!-- Import Socket.io -->
<title>Hoodly Desktop</title>
</head>
<body style="overflow:hidden;">
<!-- Top bar -->
<div id="topnav">
<input type='text' id="search" placeholder="Look up a community">
<button style="margin-left: 67%;"><i class="fa fa-search"></i></button>
</div>
<!-- Everything except the topbar goes here -->
<div class="main">
<div class="menu" onmouseover="chop(0)" onmouseout="chop(1)">
<div class="title">MENU</div>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">My Communities</a></li>
<li><a href="/memo">Add Memo</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class = "comm" > <!-- also styled in cards.css -->
<ul id="card-list">
</ul>
<br><br> <!-- Fixing a layout discrepancy -->
</div>
<div class="chatbtn" id="chatbtn" onmouseover="document.getElementById('chatcontainer').style.marginLeft = '-300px';"></div>
<!-- used to pull out the chat box -->
<div id="chatcontainer" onmouseleave="document.getElementById('chatcontainer').style.marginLeft = '0px';" style="position:fixed;">
<div id="chattop">
<h1>Roorkee</h1>
</div>
<div id="chatmain">
</div>
<div id="chattext">
<input id="message" type="text" /><button name="submit" class="butt" onclick="sender()" id="submitmsg"><i id="send" class="fa fa-paper-plane" aria-hidden="true"></i></button>
</div>
</div>
<p id="debug"></p> <!-- for debugging purposes -->
</div>
<script> // might port to an external file later on.
const electron = require('electron');
const mysql = require('mysql');
var connection = mysql.createConnection({
host:"localhost", // Prototype is set up on a local server.Plan to move this online once I have the funds
user: "root",
password: null, //Default username and password for the development session.Will change before it goes public
database: "city"
});
const {ipcRenderer}=electron;
function opencom(com){
window.location='http://localhost:3000/communities/'+com+'/dashboard';
}
var cards= document.querySelector('#card-list');
$fetchcoms='SELECT * FROM `communities` where `college` = "roorkee"'; //Use bundle.py to create the required database
// Fetch and display communities from the database.
connection.query($fetchcoms,(err,rows,fields)=>{
for(i=0;i<rows.length;i++){
cards.innerHTML+="<li class='card' style='margin:0px;' onclick='opencom(`"+rows[i]['name']+"`)'><a class='card-image' href='#' style='background-image: url(images/dispics/"+rows[i]['name']+")' data-image-full='images/dispics/"+rows[i]['name']+"'> <img src='images/dispics/"+rows[i]['name']+"' alt='Psychopomp' /> </a><a class='card-description' href='#'><h2 style='text-align:center;'>"+rows[i]['name']+"</h2><p style='text-align:center;'>"+rows[i]['name']+"</p></a></li>";
}
});
function chop(opac) {
document.getElementsByClassName('title')[0].style.opacity = opac;
document.getElementsByClassName('nav')[0].style.opacity= Math.abs(1-opac);
}
//chat engine
var socket = io.connect();
</script>
</body>
</html>