<!DOCTYPE html>
<html lang="en" translate="no">
<head>
<!-- https://github.com/gokulkrishh/awesome-meta-and-manifest -->
<!-- Must -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,width=device-width,viewport-fit=cover,minimal-ui">
<meta name="description" content="Training Progressive Web App" />
<meta name="keywords" content="UiTM, training, web app, PWA" />
<meta name="google" content="notranslate" />
<title>PWATraining</title>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="canonical" href="https://uitmpwatraining.web.app/">
<!-- Android -->
<meta name="theme-color" content="#3F51B5">
<meta name="mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<!-- iOS -->
<meta name="apple-mobile-web-app-title" content="PWATraining">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#3F51B5">
<link rel="apple-touch-icon" href="images/icons/icon-152x152.png">
<!-- Windows -->
<meta name="msapplication-navbutton-color" content="#3F51B5">
<meta name="msapplication-TileColor" content="#3F51B5">
<meta name="msapplication-TileImage" content="images/icons/icon-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">
<!-- Pinned Sites -->
<meta name="application-name" content="PWATraining">
<meta name="msapplication-tooltip" content="Training Progressive Web App">
<meta name="msapplication-starturl" content="/">
<!-- Tap highlighting -->
<meta name="msapplication-tap-highlight" content="no">
<!-- UC Mobile Browser -->
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<!-- Disable night mode for this page -->
<meta name="nightmode" content="enable/disable">
<!-- Layout mode -->
<meta name="layoutmode" content="fitscreen/standard">
<!-- imagemode - show image even in text only mode -->
<meta name="imagemode" content="force">
<!-- Orientation -->
<meta name="screen-orientation" content="portrait">
<!-- Social media -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://uitmpwatraining.web.app/">
<meta property="og:title" content="PWATraining">
<meta property="og:image" content="images/icons/icon-512x512.png">
<meta property="og:site_name" content="PWATraining">
<meta property="og:description" content="Training Progressive Web App">
<meta name='twitter:creator' content='@your-twitter-handler'>
<meta name="twitter:url" content="https://uitmpwatraining.web.app/">
<meta name="twitter:title" content="PWATraining">
<meta name="twitter:image" content="images/icons/icon-512x512.png">
<meta name="twitter:site" content="@your-twitter-handler">
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="Training Progressive Web App">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<div class="menu">
<div class="menu__header">
<span class="logo">
<img alt="Logo UiTM" src="images/logoUiTM.svg" height=100>
</span>
</div>
<ul class="menu__list">
<li><a id="page0" href="/#/home">Demo</a></li>
<li><a id="page1" href="/#/virtualcard">Page 1</a></li>
<li><a id="page2" href="/#/panduan">Page 2</a></li>
<li><a id="page3" href="/#/scheduler">Page 3</a></li>
<li id="web-push-toggle">
<a id="menuPush" onclick="return false">Notification </a>
<div class="wrapper" style="">
<input type="checkbox" name="toggle" id="toggle">
<label for="toggle"></label>
</div>
</li>
<li><a id="menuAbout" href="/#">About</a></li>
</ul>
<div class="version">Version 0.10 ALPHA</div>
</div>
<div class="menu__overlay"></div>
<header class="header">
<span class="header__icon bttn" id="btnMenu">
<svg class="menu__icon no--select" width="24px" height="24px" viewBox="0 0 48 48" fill="#fff">
<path d="M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z" />
</svg>
</span>
<span class="bttn" id="btnBackHome" hidden>
<svg width="22px" height="22px" viewBox="0 0 306 306">
<polygon points="247.35,35.7 211.65,0 58.65,153 211.65,306 247.35,270.3 130.05,153" fill="#FFFFFF"/>
</svg>
</span>
<h1 class="header__title">PWA<b>Training</b></h1>
<span class="bttn" id="btnShare" style="display: block">
<svg width="22" height="22" viewBox="0 0 24 24">
<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" fill="#FFFFFF"></path>
</svg>
</span>
<span class="bttn" id="btnHome" hidden>
<svg width="22" height="22" viewBox="0 0 510 510">
<polygon points="204,471.75 204,318.75 306,318.75 306,471.75 433.5,471.75 433.5,267.75 510,267.75 255,38.25 0,267.75 76.5,267.75 76.5,471.75" fill="#FFFFFF"/>
</svg>
</span>
</header>
<div class="container">
<div class="view page0">
<div class="page">
<div class="cardbox box-1 pwahomescreen" hidden>
<div class="box-body">
<span class="pwa-logo"></span>
<div class="pwa-text">
<div class="pwa-middle">
<div class="pwa-header">Easy access on Home Screen</div>
<div class="pwa-subheader">Our app is fast, small, and works offline.</div>
</div>
</div>
</div>
<div class="box-footer">
<button id="noinstallpwa" class="ripple">Not now</button><button id="installpwa" class="ripple">Install</button>
</div>
</div>
<div class="segment-text">Form</div>
<div class="cardbox box-1 testform">
<div class="box-body">
<div class="floating-form">
<div class="floating-label">
<input id="i1" class="floating-input" type="text" style="text-transform: capitalize" placeholder=" ">
<label for="i1">Display name</label>
</div>
<div class="floating-label">
<input id="i2" class="floating-input" type="text" onclick="(this.type='number')" pattern="[0-9]*" inputmode="numeric" min="0" oninput="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" placeholder=" ">
<label for="i2">Your height</label>
</div>
<div class="floating-label">
<input id="i3" class="floating-input" type="password" placeholder=" ">
<label for="i3">Password</label>
</div>
<div class="floating-label">
<input id="i4" class="floating-input" type="text"
onfocus="(this.type='time')"
onblur="this.type=this.value?'time':'text'"
placeholder=" ">
<label for="i4">Time</label>
</div>
<div class="floating-label">
<input id="i5" class="floating-input" type="text"
onfocus="(this.type='date')"
onblur="this.type=this.value?'date':'text'"
placeholder=" ">
<label for="i5">Date</label>
</div>
<div class="floating-label">
<input id="i6" class="floating-input" type="text"
onfocus="(this.type='datetime-local')"
onblur="this.type=this.value?'datetime-local':'text'"
placeholder=" ">
<label for="i6">Date & time</label>
</div>
<div class="floating-label">
<select id="i7" class="floating-select" onchange="this.setAttribute('value', this.value);" value="">
<option value=""></option>
<option value="1">Johor</option>
<option value="2">Kedah</option>
<option value="3">Kelantan</option>
<option value="4">Melaka</option>
<option value="5">Negeri Sembilan</option>
</select>
<label for="i7">State</label>
</div>
<div class="floating-label">
<textarea id="i8" class="floating-input floating-textarea" placeholder=" "></textarea>
<label for="i8">Textarea</label>
</div>
</div>
</div>
<div class="box-footer pull-right">
<div class="button ripple">Save</div>
</div>
</div>
<div class="segment-text">Examples / Previews</div>
<div class="cardbox box-1 card-primary">
<div class="box-header">
<div>
Enroll Now!
<div class="box-subheader">Dont miss the opportunity</div>
</div>
<div class="badge badge-danger">35</div>
</div>
<div class="box-body">Body</div>
<div class="box-footer">
<div>Button 2</div><div class="button ripple">Button 1</div>
</div>
</div>
<div class="cardbox box-1 card-danger">
<div class="box-header">
<div>
Enroll Now!
<div class="box-subheader">Dont miss the opportunity</div>
</div>
</div>
<div class="box-body">Body</div>
<div class="box-footer">
<div>Button 2</div><div>Button 1</div>
</div>
</div>
<div class="cardbox box-1 card-warning">
<div class="box-header">
<div>
Enroll Now!
</div>
<div class="badge badge-danger">99+</div>
</div>
<div class="box-body">Body</div>
<div class="box-footer pull-right">
<div>Button 1</div>
</div>
</div>
<div id="news">© 2020 Universiti Teknologi Mara (UiTM), Progressive Web App Training</div>
</div>
</div>
<div class="view page1">
<div class="page">
Page 1
</div>
</div>
<div class="view page2">
<div class="page">
Page 2
</div>
</div>
<div class="view page3">
<div class="page">
Page 3
</div>
</div>
</div>
<div class="dialog-container">
<div class="dialog">
<div class="dialog-title">Popup<b>Dialog</b></div>
<div class="dialog-body">
Contents here...
</div>
</div>
</div>
<div class="fs-message">
<div class="fms-container">
<div class="fsm-title">Fullscreen<b>Message</b></div>
<div class="fsm-body">
Text here...
</div>
<div class="fsm-footer" hidden>
<button class="btnLeft ripple" hidden>ACTION</button><button class="btnRight ripple" hidden>ACTION</button>
</div>
</div>
</div>
<div class="loader">
<svg viewBox="0 0 32 32" width="32" height="32">
<circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>
</svg>
</div>
<div class="toast__container"></div>
<script src="js/menu.js" async></script>
<script src="js/toast.js" async></script>
<script src="js/swipe.js" async></script>
<script src="js/share.js" async></script>
<script src="js/app.js" type="module" async></script>
</body>
</html>