-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
202 lines (197 loc) · 7.97 KB
/
index.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Alex Chang">
<meta name="description" content="A basic description and comparison of web browsers.">
<meta name="keywords" content="web browser, firefox, edge, chrome">
<title>Modern Web Browsers</title>
<!-- Bootstrap 4 CSS -->
<link type="text/css" rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- Icon Font -->
<link href="https://cdn.jsdelivr.net/devicons/1.8.0/css/devicons.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link type="text/css" rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="wrapper">
<!-- Header and Navigation -->
<header>
<div class="container">
<h1 class="display-3">Modern Web Browsers</h1>
<nav class="navbar navbar-expand-md navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="./components/start.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./components/firefox.html">Firefox</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./components/chrome.html">Chrome</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./components/edge.html">Edge</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./components/vivaldi.html">Vivaldi</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<!-- Main Content -->
<main id="main-content">
</main>
<!-- About Modal -->
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-6">
<h2 class="orange d-flex justify-content-center">About Me</h2>
<p>This simple Electron application was written by <strong>Alex Chang</strong>, a
student in the Seneca College Webmaster Program. This application was made using
a mix of HTML5, CSS3, Bootstrap 4, ES6 JavaScript, jQuery, and was compiled with
Electron.</p>
</div>
<div class="col-sm-12 col-lg-6">
<h2 class="blue d-flex justify-content-center">Electron</h2>
<p><strong>Electron</strong> (formerly Atom Shell) is an open-source software
framework created by Cheng Zhao; it is currently developed by GitHub. Electron
allows web developers specializing in HTML, CSS, and JavaScript to develop
desktop applications by providing a frontend (utilizing Chromium) and backend
(utilizing Node.js). For the end-user, a well developed and designed Electron
application would be virtually identical in form and functionality to a
traditional desktop application. The current version of Electron is
<strong>1.7.8</strong>.</p>
<p>Every Electron application, at the very minimum, requires the
<strong>package.json</strong> file, the <strong>main.js</strong> file, and the
<strong>index.html</strong> file. These three files provide the metadata, the
main JavaScript code, and the graphical user interface of a Electron
application. Once a developer has completed the design of their application,
they can package their application for desktop use by using <strong>Electron
Packager</strong>. Electron Packager is used to generate an executeable
file, which can then be run on a variety of platforms, such as Windows, MacOS,
or Linux.</p>
<hr>
<h3>Some applications made with Electron:</h3>
<ul class="list-unstyled">
<li><a class="text-info" href="https://code.visualstudio.com/" target="_blank"
title="Visual Studio Code Text Editor"><span
class="devicons devicons-visualstudio"></span> Visual Studio
Code</a></li>
<li><a class="text-info" href="https://atom.io/" target="_blank"
title="Atom Text Editor"><span class="devicons devicons-atom"></span>
Atom</a></li>
<li><a class="text-info" href="https://desktop.github.com/" target="_blank"
title="GitHub Desktop"><span
class="devicons devicons-github_badge"></span> GitHub Desktop</a>
</li>
</ul>
<hr>
<h3>Other Resources:</h3>
<ul class="list-unstyled">
<li>
<a class="text-success" href="https://nodejs.org" target="_blank"
title="Node.js">Node.js (required for Electron)
</a>
</li>
<li>
<a class="text-success"
href="https://electron.atom.io/docs/tutorial/quick-start/"
target="_blank" title="Quick Start Guide for Electron">Quick Start Guide
for Electron
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<!-- Dev Console Button -->
<div class="col d-flex justify-content-start">
<button type="button" class="btn btn-outline-primary" id="devConsole">Toggle Dev.
Console</button>
</div>
<!-- About Modal Button -->
<div class="col d-flex justify-content-end">
<button type="button" class="btn btn-outline-success" data-toggle="modal"
data-target="#aboutModal">About This App</button>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<p><small>Alex Chang © <span id="date"></span></small></p>
</div>
</div>
</div>
</footer>
</div>
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js" defer></script>
<script type="text/javascript" src="./node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
<script defer>
window.onload = () => {
// Setting date
const date = new Date().getFullYear();
document.getElementById("date").textContent = date;
// Set content utility function
async function setContent (contentPath) {
const mainContentContainer = document.getElementById("main-content");
let content = await fetch(contentPath).then(function(response) {
return response.text();
})
mainContentContainer.innerHTML = content;
}
// Loading initial content
async function init() {
await setContent('./components/start.html')
}
// Loading content from components
const navLinks = Array.from(document.querySelectorAll(".nav-link"));
navLinks.forEach((link) => {
link.addEventListener('click', function(event) {
event.preventDefault();
let href = this.getAttribute("href");
setContent(href);
})
})
// Open developer console
const devButton = document.getElementById("devConsole");
devButton.addEventListener('click', function(event) {
require('electron').remote.getCurrentWindow().webContents.openDevTools({
mode: 'bottom'
});
})
init()
}
</script>
<script>if (window.module) module = window.module;</script>
</body>
</html>