Skip to content

Commit

Permalink
New changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Prabuddhraj88
Prabuddhraj88 committed Dec 4, 2023
1 parent be625cf commit ea9d9dd
Show file tree
Hide file tree
Showing 8 changed files with 1,968 additions and 23 deletions.
243 changes: 220 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,228 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="index.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /></head>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<script src="scripts/home.js"></script>
<script src="scripts/meter.js"></script>
<link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/gauge.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>

<body>
<div class="nav">
<div class="logo">
AQI Predictor
<section class="navigation">
<div class="nav-container">
<div class="brand">
<a href="/" id="logo">GlaSheers<span class="material-symbols-outlined">air</span></a>
</div>
<nav>
<div class="nav-mobile"><a id="navbar-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
<a href="#!">Home</a>
</li>
<li>
<a href="/pages/predictor.html">Predictor</a>
</li>
<li>
<a href="#!">Services</a>
<ul class="navbar-dropdown">
<li>
<a href="#!">Sass</a>
</li>
<li>
<a href="#!">Less</a>
</li>
<li>
<a href="#!">Stylus</a>
</li>
</ul>
</li>
<li>
<a href="#!">Portfolio</a>
</li>
<li>
<a href="#!">Category</a>
<ul class="navbar-dropdown">
<li>
<a href="#!">Sass</a>
</li>
<li>
<a href="#!">Less</a>
</li>
<li>
<a href="#!">Stylus</a>
</li>
</ul>
</li>
<li>
<a href="#!">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
<div id="user-input">
<div>
Start time <input type="date" id="date">
</div>
<div>
Training duration <input type="number" id="td" value="30">
</div>
<div>
Prediction interval <input type="number" id="pi" value="5">
</section>
<div class="meter-panel">
<svg id="noise-svg">
<!-- gives background a bit of texture -->
<filter id='noiseFilter'>
<feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch' />
</filter>
<rect id="noise-rect" filter='url(#noiseFilter)' />
</svg>

<div class="clock off">
<div class="shadow"></div>

<div class="base-container">
<div class="base">
<div></div>
</div>
</div>
<div class="small-outer-pipe">
<div class="small-inner-pipe"></div>
</div>
<div class="outer-pipe">
<div class="inner-pipe"></div>
</div>
<div class="pipe-accents">
<div class="top-tube"></div>
<div class="tube-holders">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="top"></div>
<div class="topinset"></div>
<div class="left">
<div></div>
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
<div></div>
</div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>

<div class="display">
<div class="row">
<div class="col">
<div>8</div>
<div id="char01">0</div>
<div id="char02">0</div>
</div>
<div class="col">
<div>8</div>
<div id="char11">0</div>
<div id="char12">0</div>
</div>
</div>
<div class="row">
<div class="col">
<div>8</div>
<div id="char21">0</div>
<div id="char22">0</div>
</div>
<div class="col">
<div>8</div>
<div id="char31">0</div>
<div id="char32">0</div>
</div>
</div>
<div style="height: 0.2em;"></div>
<div class="small-row">
<div class="row">
<div class="col">
<div>8</div>
<div id="char41">0</div>
<div id="char42">0</div>
</div>
<div class="col">
<div>8</div>
<div id="char51">0</div>
<div id="char52">0</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div>8</div>
<div id="char61">0</div>
<div id="char62">0</div>
</div>
<div class="col">
<div>8</div>
<div id="char71">0</div>
<div id="char72">0</div>
</div>
</div>
<div class="row">
<div class="col">
<div>8</div>
<div id="char81">0</div>
<div id="char82">0</div>
</div>
<div class="col">
<div>8</div>
<div id="char91">0</div>
<div id="char92">0</div>
</div>
</div>
<div class="row">
<div class="col">
<div>8</div>
<div id="char101">0</div>
<div id="char102">0</div>
</div>
<div class="col">
<div>8</div>
<div id="char111">0</div>
<div id="char112">0</div>
</div>
</div>
</div>

<div class="glass-tube"></div>
<div class="hex">
<div class="overlay"></div>
</div>

<div class="tube-base-container">
<div class="wires">
<div></div>
<div></div>
</div>
<div class="tube-base"></div>
<div class="rods">
<div class="left-rod"></div>
<div class="center-rod"></div>
<div class="right-rod"></div>
</div>
<div class="tube-btm"></div>
</div>

<div class="power-cord">
<div></div>
<div></div>
</div>

<div class="button" onclick="body.querySelector('.clock').classList.toggle('off')">
<div></div>
</div>
</div>
<button id="btn">Get Data</button>
</div>
<div id="plots"></div>
</body>

</html>
31 changes: 31 additions & 0 deletions pages/predictor.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="scripts/predictor.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<title>AQI Information</title>
<link rel="stylesheet" href="styles/predictor.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /></head>
<body>
<div class="nav">
<div class="logo">
AQI Predictor
</div>
</div>
<div id="user-input">
<div>
Start time <input type="date" id="date">
</div>
<div>
Training duration <input type="number" id="td" value="30">
</div>
<div>
Prediction interval <input type="number" id="pi" value="5">
</div>
<button id="btn">Get Data</button>
</div>
<div id="plots"></div>
</body>
</html>
29 changes: 29 additions & 0 deletions scripts/home.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
window.onload = () => {
(function ($) {
$(function () {
// open and close nav
$("#navbar-toggle").click(function () {
$("nav ul").slideToggle();
});

// Hamburger toggle
$("#navbar-toggle").on("click", function () {
this.classList.toggle("active");
});

// If a link has a dropdown, add sub menu toggle.
$("nav ul li a:not(:only-child)").click(function (e) {
$(this).siblings(".navbar-dropdown").slideToggle("slow");

// Close dropdown when select another dropdown
$(".navbar-dropdown").not($(this).siblings()).hide("slow");
e.stopPropagation();
});

// Click outside the dropdown will remove the dropdown class
$("html").click(function () {
$(".navbar-dropdown").hide();
});
});
})(jQuery);
};
34 changes: 34 additions & 0 deletions scripts/meter.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
window.onload = () => {

function updateTimeAndDate() {
const now = new Date();
let hours = now.getHours();
const minutes = now.getMinutes().toString().padStart(2, "0");
let amPm = hours >= 12 ? "PM" : "AM";
if (hours > 12) {
hours -= 12;
} else if (hours === 0) {
hours = 12;
}
let timeStr = hours.toString().padStart(2, "0") + minutes;
if (timeStr.startsWith("0")) {
timeStr = " " + timeStr.slice(1);
}
let month = (now.getMonth() + 1).toString().padStart(2, "0");
let day = now.getDate().toString().padStart(2, "0");
const year = now.getFullYear().toString().slice(-2);
if (month.startsWith("0")) {
month = " " + month.slice(1);
}
if (day.startsWith("0")) {
day = " " + day.slice(1);
}
const displayStr = timeStr + amPm + month + day + year;
for (let i = 0; i < 12; i++) {
document.getElementById("char" + i + "1").textContent = displayStr[i];
document.getElementById("char" + i + "2").textContent = displayStr[i];
}
}
updateTimeAndDate();
setInterval(updateTimeAndDate, 600);
}
0 index.js → scripts/predictor.js
View file
File renamed without changes.
Loading

0 comments on commit ea9d9dd

Please sign in to comment.