-
Notifications
You must be signed in to change notification settings - Fork 0
/
projects.html
executable file
·86 lines (82 loc) · 4.14 KB
/
projects.html
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
85
86
<!DOCTYPE html>
<html>
<head>
<title>Charles's Projects</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Flip/1.1.2/jquery.flip.min.js"></script>
</head>
<nav>
<a href="index.html">Home</a>
<a class="active" href="projects.html">Projects</a>
</nav>
<body id="projects-pg" onload="start()">
<section class="project" id="project1">
<section class="project-intro front">
<h1>Synchronized Tutoring System</h1>
<a href="https://github.com/charW/Synchronized-Tutoring-System"><img class="icon" src="Icons/github.png"></a>
<img class="icon" src="Icons/images.png" onclick="$('#project1').flip(true)">
<p class="about-project">
Connect tutors and students with concurrent network sessions, each consisting of<br>
an instant messaging system and a sequence of virtual blackboards and embedded<br>
web browsers that are synchronized in real time across the network.
</p>
</section>
<section class="project-images back">
<img class="icon" src="Icons/back.png" onclick="$('#project1').flip(false)">
<img class="thumbnail" src="Screenshots/TutoringSystem1.png" onmouseover="display(1, this)">
<img class="thumbnail" src="Screenshots/TutoringSystem2.png" onmouseover="display(1, this)">
<img class="thumbnail" src="Screenshots/TutoringSystem3.png" onmouseover="display(1, this)">
<img class="thumbnail" src="Screenshots/TutoringSystem4.png" onmouseover="display(1, this)">
<img class="thumbnail" src="Screenshots/TutoringSystem5.png" onmouseover="display(1, this)">
<img class="display" id="project1-display" src="Screenshots/TutoringSystem1.png">
</section>
</section>
<section class="project" id="project2">
<section class="project-intro front">
<h1>Media Note Taker</h1>
<a href="https://github.com/charW/Media-Note-Taker"><img class="icon" src="Icons/github.png"></a>
<img class="icon" src="Icons/images.png" onclick="$('#project2').flip(true)">
<p class="about-project">
Users can play video or audio files with a built-in multimedia player and take notes<br>
that get “bookmarked” along the progress bar.
</p>
</section>
<section class="project-images back">
<img class="icon" src="Icons/back.png" onclick="$('#project2').flip(false)">
<img class="thumbnail" src="Screenshots/NoteTaker1.png" onmouseover="display(2, this)">
<img class="thumbnail" src="Screenshots/NoteTaker2.png" onmouseover="display(2, this)">
<img class="display" id="project2-display" src="Screenshots/NoteTaker1.png">
</section>
</section>
<script>
var prevImg;
function display(projectNum, img) {
if (prevImg == img) return;
var name = "#project" + projectNum + "-display";
$(name)[0].src = img.src;
if (prevImg) prevImg.className = "thumbnail";
img.className = "thumbnail-selected";
prevImg = img;
}
function flipProject1() {
$("#project1").flip({
forceWidth: true,
forceHeight: true,
trigger: 'manual'
});
}
function flipProject2() {
$("#project2").flip({
forceWidth: true,
forceHeight: true,
trigger: 'manaul'
});
}
function start() {
flipProject1();
flipProject2();
}
</script>
</body>
</html>