src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<title>FFCS On The Go - VIT University</title>
<link rel="manifest" href="./manifest.webmanifest" />
<link
rel="icon"
sizes="192x192"
href="./images/icons/icon-192x192.png"
/>
<link rel="apple-touch-icon" href="./images/icons/icon-192x192.png" />
<link rel="icon" href="./images/favicon.png" />
<script src="./js/main.js" type="module"></script>
<meta name="author" content="Vatsal Joshi" />
<meta name="subject" content="Education" />
<meta
name="Description"
content="Visualize and make the most optimum timetable for yourself."
/>
<meta
name="Keywords"
content="VIT,University,Vellore,FFCS,ffcsonthego,course,registration,timetable,visualize"
/>
<meta name="distribution" content="Global" />
<meta name="country" content="India" />
<meta name="theme-color" content="#9C27B0" />
<meta property="og:title" content="FFCS On The Go" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://ffcsonthego.vatz88.in/" />
<meta property="og:image" content="./images/og_image.png" />
<meta
property="og:description"
content="Visualize and make the most optimum timetable for yourself."
/>
<meta property="og:site_name" content="FFCS On The Go" />
</head>
<body>
<!-- Service worker to check for an update -->
<script>
// Check if service workers are supported
if ('serviceWorker' in window.navigator) {
// Use the window load event to keep the page load performant
window.addEventListener('load', () => {
window.navigator.serviceWorker
.register(`${window.location.origin}/sw.js`)
.then((reg) => {
setInterval(() => {
reg.update();
}, 10 * 60 * 1000);
});
});
window.navigator.serviceWorker.addEventListener(
'controllerchange',
function () {
if (
jQuery &&
bootstrap &&
$('#update-modal').length != 0
) {
new bootstrap.Modal(
$('#update-modal').get(0),
).show();
} else {
var result = window.confirm(
'A new version of FFCS On The Go is available! Would you like to reload the page?',
);
if (result) {
window.location.reload();
}
}
},
);
}
</script>
<!-- Google Analytics -->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
(i[r] =
i[r] ||
function () {
(i[r].q = i[r].q || []).push(arguments);
}),
(i[r].l = 1 * new Date());
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
})(
window,
document,
'script',
'//www.google-analytics.com/analytics.js',
'ga',
);
ga('create', 'UA-75111209-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
<div class="container-xl px-3 py-1">
<a class="navbar-brand" href="/">FFCS On The Go</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar"
aria-controls="navbarNavDarkDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
id="navbar"
class="collapse navbar-collapse justify-content-between"
>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a
id="campus"
class="nav-link dropdown-toggle"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
></a>
<ul
class="dropdown-menu dropdown-menu-light mb-3"
aria-labelledby="campus"
>
<li>
<a class="dropdown-item" href="#Vellore"
>Vellore Campus</a
>
</li>
<li>
<a class="dropdown-item" href="#Chennai"
>Chennai Campus</a
>
</li>
</ul>
</li>
</ul>
<div class="navbar-nav flex-row flex-wrap md-auto">
<div class="dropdown d-inline">
<a
id="share-button"
class="btn btn-outline-secondary dropdown-toggle nav-btn-outline"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
><i class="fas fa-share"></i
> Share</a
>
<ul
class="dropdown-menu dropdown-menu-light"
aria-labelledby="share-button"
>
<li>
<a
class="dropdown-item"
href="https://www.facebook.com/sharer/sharer.php?message=FFCS made hassle free!&u=https://ffcsonthego.vatz88.in/"
target="_blank"
>
<i class="fab fa-facebook"></i>
<span> Facebook</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="https://www.linkedin.com/sharing/share-offsite/?url=https://ffcsonthego.vatz88.in/"
target="_blank"
>
<i class="fab fa-linkedin"></i>
<span> LinkedIn</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="https://twitter.com/intent/tweet?text=FFCS made hassle free! https://ffcsonthego.vatz88.in/"
target="_blank"
>
<i class="fab fa-twitter"></i>
<span> Twitter</span>
</a>
</li>
<li>
<a
class="dropdown-item"
href="whatsapp://send?text=FFCS made hassle free! https://ffcsonthego.vatz88.in/"
target="_blank"
>
<i class="fab fa-whatsapp"></i>
<span> WhatsApp</span>
</a>
</li>
</ul>
</div>
<a
href="https://github.com/vatz88/FFCSonTheGo"
target="_blank"
>
<button
class="btn btn-outline-secondary nav-btn-outline ms-2"
type="button"
data-bs-toggle="modal"
data-bs-target="#about-modal"
>
<i class="fab fa-github"></i> GitHub
</button>
</a>
</div>
</div>
</div>
</nav>
<!-- End of navbar -->
<!-- #1 - Course Panel -->
<div class="container-xl">
<div class="card">
<div class="card-header text-center fw-bold">
Search Courses
</div>
<div class="card-body">
<form id="course-panel" class="container">
<div class="row gy-3">
<div class="col-lg-9 col-12">
<label for="course-input" class="form-label"
>Course</label
>
<input
type="text"
class="form-control"
id="course-input"
placeholder="CSE1001 or Problem Solving and Programming"
/>
</div>
<div class="col-lg-3 col-12">
<label for="slot-filter" class="form-label"
>Filter By Slot</label
>
<select
id="slot-filter"
class="selectpicker"
data-width="100%"
data-live-search="true"
data-live-search-placeholder="Search for a slot"
multiple
disabled
></select>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<blockquote>
<p class="text-black-50 fs-6 fw-light">
Search for a course, select a slot and
click the button below or double click
the slot to add it to your timetable.
</p>
</blockquote>
</div>
</div>
<div class="row">
<div id="slot-buttons"></div>
</div>
<div class="row mt-1 mb-3">
<div class="col-12 text-center">
<button
id="advanced-toggle"
type="button"
class="btn btn-outline-secondary"
>
Show Advanced Options
</button>
</div>
</div>
<div
id="advanced-options"
class="row my-2"
style="display: none"
>
<div class="col-6 col-md-3">
<label for="slot-input" class="form-label"
>Slot</label
>
<input
id="slot-input"
class="form-control text-uppercase"
type="text"
autocomplete="off"
placeholder="A1+TA1"
/>
</div>
<div class="col-6 col-md-3">
<label for="faculty-input" class="form-label"
>Faculty</label
>
<input
id="faculty-input"
class="form-control text-uppercase"
type="text"
autocomplete="off"
placeholder="JOHN DOE"
/>
</div>
<div class="col-6 col-md-3">
<label for="venue-input" class="form-label"
>Venue</label
>
<input
id="venue-input"
class="form-control text-uppercase"
type="text"
autocomplete="off"
placeholder="SJTG01"
/>
</div>
<div class="col-6 col-md-3">
<label for="credits-input" class="form-label"
>Credits</label
>
<input
id="credits-input"
class="form-control text-uppercase"
type="number"
autocomplete="off"
placeholder="4"
/>
</div>
<!-- This input field is to store whether the selected option is a project -->
<input
id="inputIsProject"
type="hidden"
value="false"
/>
</div>
</form>
</div>
<div class="card-footer">
<div class="row align-items-center justify-content-between">
<div class="col-sm-auto my-1 text-center">
<span id="last-update" class="fw-bold"></span>
</div>
<div class="col-sm-auto my-1 text-center">
<button
id="clear-panel-button"
type="button"
class="btn btn-light me-1"
>
Clear
</button>
<button
id="add-course-button"
type="button"
class="btn btn-success"
>
Add Course
</button>
</div>
</div>
</div>
</div>
</div>
<!-- End of #1 - Course panel -->
<hr />
<!-- #2 - Timetable -->
<!-- Option buttons for the timetable -->
<div class="container-sm px-4">
<div id="option-buttons" class="row justify-content-between">
<div class="col-auto mb-2 text-center">
<div class="btn-group" role="group">
<div class="btn-group">
<button
id="tt-picker-button"
class="btn btn-primary dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
course-list
table
aria-expanded="false"
>
Default Table
</button>
<ul id="tt-picker-dropdown" class="dropdown-menu">
<li>
<table class="dropdown-item">
<td class="tt-picker-label">
<a
href="JavaScript:void(0);"
data-table-id="0"
>Default Table</a
>
</td>
<td>
<a
class="tt-picker-rename"
href="JavaScript:void(0);"
data-bs-toggle="modal"
data-bs-target="#rename-modal"
><i
class="fas fa-pencil-alt"
></i
></a>
</td>
</table>
</li>
</ul>
</div>
<button
id="tt-picker-add"
type="button"
class="btn btn-primary"
>
<i class="fas fa-plus"></i>
</button>
</div>
</div>
<div class="col-auto mb-2 text-center">
<button
class="btn btn-success"
type="button"
data-bs-toggle="modal"
data-bs-target="#download-modal"
>
<i class="fas fa-download"></i>
<span> Download Timetable</span>
</button>
<button
id="quick-toggle"
class="btn btn-warning ms-1 me-1"
type="button"
>
<i class="fas fa-eye"></i>
<span> Enable Quick Visualization</span>
</button>
<button
class="btn btn-danger"
type="button"
data-bs-toggle="modal"
data-bs-target="#reset-modal"
>
<i class="fas fa-redo"></i>
<span> Reset Table</span>
</button>
</div>
</div>
</div>
<!-- Quick selection tiles - Morning slots -->
<div
class="container-sm my-2 quick-buttons noselect"
style="display: none"
>
<div><table></table></div>
</div>
<!-- End of quick selection tiles -->
<!-- Timetable -->
<div class="container-xxl text-center noselect">
<div id="timetable" class="table-responsive">
<table class="table table-bordered mt-2 mb-0">
<tr id="theory">
<td class="day">THEORY <br />HOURS</td>
</tr>
<tr id="lab">
<td class="day">LAB <br />HOURS</td>
</tr>
<tr id="mon" style="display: none">
<td class="day">MON</td>
</tr>
<tr id="tue" style="display: none">
<td class="day">TUE</td>
</tr>
<tr id="wed" style="display: none">
<td class="day">WED</td>
</tr>
<tr id="thu" style="display: none">
<td class="day">THU</td>
</tr>
<tr id="fri" style="display: none">
<td class="day">FRI</td>
</tr>
<tr id="sat" style="display: none">
<td class="day">SAT</td>
</tr>
<tr id="sun" style="display: none">
<td class="day">SUN</td>
</tr>
</table>
</div>
</div>
<!-- End of timetable -->
<!-- Quick selection tiles - Evening slots -->
<div
class="container-sm mt-3 quick-buttons noselect"
style="display: none"
>
<div><table></table></div>
</div>
<!-- End of quick selection tiles -->
<hr />
<!-- Course list table -->
<div class="container-xxl">
<blockquote>
<p class="text-black-50 px-3 fs-6 fw-light">
Double click a course in the list below to load it back into
the course panel.
</p>
</blockquote>
<div id="course-list" class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr class="table-success noselect">
<th>Slot</th>
<th>Course Code</th>
<th>Course Title</th>
<th>Faculty</th>
<th>Venue</th>
<th>Credits</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- Courses will be added here -->
</tbody>
<tfoot>
<tr class="table-active">
<td colspan="7">
<strong>
Total Credits:
<span id="total-credits">0</span>
</strong>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- End of course list table -->
<!-- End of #2 -->
<hr />
<!-- #3 - Comments & Footer -->
<!-- Disqus comments -->
<div class="container-sm">
<div id="disqus_thread"></div>
</div>
<!-- Footer -->
<footer class="container-fluid text-center py-2">
<span>Made with <i class="fas fa-heart"></i> for VITians</span>
</footer>
<!-- End of #3 -->
<!-- The Update Modal -->
<div
id="update-modal"
class="modal fade"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabindex="-1"
aria-labelledby="reset-modal-label"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="update-modal-label">
Update Available
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<p>
A new version of FFCS On The Go is available! Would
you like to reload the page?
</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Cancel
</button>
<button
type="button"
class="btn btn-danger"
data-bs-dismiss="modal"
onclick="window.location.reload();"
>
Reload
</button>
</div>
</div>
</div>
</div>
<!-- End of update modal -->
<!-- The Rename Modal -->
<div
id="rename-modal"
class="modal fade"
tabindex="-1"
aria-labelledby="rename-modal-label"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="rename-modal-label" class="modal-title">
Rename Table
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<form onsubmit="return false;">
<div class="mb-3">
<label for="table-name" class="col-form-label">
Table Name
</label>
<input
id="table-name"
class="form-control"
type="text"
autocomplete="off"
placeholder="Morning Timetable"
/>
</div>
</form>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Cancel
</button>
<button
id="rename-tt-button"
type="button"
class="btn btn-success"
data-bs-dismiss="modal"
>
Rename
</button>
</div>
</div>
</div>
</div>
<!-- End of rename modal -->
<!-- The Delete Modal -->
<div
id="delete-modal"
class="modal fade"
tabindex="-1"
aria-labelledby="delete-modal-label"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="delete-modal-label">
Delete Table
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<p>
Are you sure you want to delete this table? This
action cannot be undone.
</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Cancel
</button>
<button
id="delete-tt-button"
type="button"
class="btn btn-danger"
data-bs-dismiss="modal"
>
Yes, I'm sure
</button>
</div>
</div>
</div>
</div>
<!-- End of delete modal -->
<!-- The Reset Modal -->
<div
id="reset-modal"
class="modal fade"
tabindex="-1"
aria-labelledby="reset-modal-label"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="reset-modal-label">
Reset Table
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<p>
Are you sure you want to reset this table? All
selected courses will be erased.
</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Cancel
</button>
<button
id="reset-tt-button"
type="button"
class="btn btn-danger"
data-bs-dismiss="modal"
>
Yes, I'm sure
</button>
</div>
</div>
</div>
</div>
<!-- End of reset modal -->
<!-- The Switch Campus Modal -->
<div
id="switch-campus-modal"
class="modal fade"
tabindex="-1"
aria-labelledby="switch-campus-modal-label"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="switch-campus-modal-label">
Switch Campus
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<p>
Are you sure you want to switch your campus? All
data will be lost.
</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
onclick="window.location.hash = `#${window.campus}`"
>
Cancel
</button>
<button
type="button"
class="btn btn-danger"
data-bs-dismiss="modal"
onclick="switchCampus()"
>
Yes, I'm sure
</button>
</div>
</div>
</div>
</div>
<!-- End of switch campus modal -->
<!-- The Download Timetable Modal -->
<div
id="download-modal"
class="modal fade"
tabindex="-1"
aria-labelledby="reset-modal-label"
aria-hidden="true"
>
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="download-modal-label">
Download Timetable
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<button
id="download-tt-button"
type="button"
class="btn btn-success w-100 mb-2"
>
<i class="fas fa-camera"></i>
Download Timetable
</button>
<button
id="download-course-list-button"
type="button"
class="btn btn-success w-100"
>
<i class="fas fa-camera"></i>
Download Course List
</button>
</div>
</div>
</div>
</div>
<!-- End of download timetable modal -->
<!-- Initializing Disqus -->
<!-- DO NOT EDIT THIS SECTION UNLESS NECESSARY -->
<script>
var disqus_config = function () {
this.page.url = 'https://ffcsonthego.vatz88.in/'; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = 'ffcsonthego_main_page'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function () {
var d = document,
s = d.createElement('script');
s.src = 'https://ffcsonthego.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
</body>
</html>