Creating a Simple Linux Dashboard with Oracle Jet - Part 5 the Oracle Jet index.html Code
Also for completeness and for reference:
index.html
Code
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>UNIX.COM Dashboard</title>
<meta charset="UTF-8">
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1">
<link rel="icon" href="css/images/favicon.ico" type="image/x-icon" />
<!-- This is the main css file for the default Alta theme -->
<!-- injector:theme -->
<link rel="stylesheet" href="css/libs/oj/v6.0.0/alta/oj-alta-min.css" type="text/css" />
<!-- endinjector -->
<!-- This contains icon fonts used by the starter template -->
<link rel="stylesheet" href="css/demo-alta-site-min.css" type="text/css" />
<!-- This is where you would add any app specific styling -->
<link rel="stylesheet" href="css/app.css" type="text/css" />
<style>
.neo-color{
color:rgba(1, 8, 94,0.9) !important;
}
</style>
</head>
<body class="oj-web-applayout-body">
<!-- Template for rendering navigation items shared between nav bar and nav list -->
<script type="text/html" id="navTemplate">
<li><a href="#">
<span :class="[[$data['iconClass']]]"></span>
<oj-bind-text value="[[$data['name']]]"></oj-bind-text>
</a></li>
</script>
<div id="globalBody" class="oj-offcanvas-outer-wrapper oj-offcanvas-page">
<!--
** Oracle JET V6.0.0 web application navigation drawer pattern.
** Please see the demos under Cookbook/Patterns/App Shell: Web
** and the CSS documentation under Support/API Docs/Non-Component Styling
** on the JET website for more information on how to use this pattern.
** The off-canvas section is used when the browser is resized to a smaller media
** query size for a phone format and hidden until a user clicks on
** the header hamburger icon.
-->
<div id="navDrawer" role="navigation" class="oj-contrast-marker oj-web-applayout-offcanvas oj-offcanvas-start neo-color">
<oj-navigation-list data="[[navDataSource]]" edge="start" item.renderer="[[oj.KnockoutTemplateUtils.getRenderer('navTemplate', true)]]"
on-click="[[toggleDrawer]]" selection="{{router.stateId}}">
</oj-navigation-list>
</div>
<div id="
pageContent" class="oj-web-applayout-page">
<!--
** Oracle JET V6.0.0 web application header pattern.
** Please see the demos under Cookbook/Patterns/App Shell: Web
** and the CSS documentation under Support/API Docs/Non-Component Styling
** on the JET website for more information on how to use this pattern.
-->
<header role="banner" class="oj-web-applayout-header">
<div class="oj-web-applayout-max-width oj-flex-bar oj-sm-align-items-center">
<!-- Offcanvas toggle button -->
<div class="oj-flex-bar-start oj-md-hide">
<oj-button id="drawerToggleButton" class="oj-button-lg" on-oj-action="[[toggleDrawer]]" chroming="half"
display="icons">
<span slot="startIcon" class="oj-web-applayout-offcanvas-icon"></span>
<span>Application Navigation</span>
</oj-button>
</div>
<div class="oj-flex-bar-middle oj-sm-align-items-baseline ">
<span style="display:none" role="img" class="oj-icon demo-oracle-icon" title="Oracle Logo" alt="Oracle Logo"></span>
<h1 class="oj-sm-only-hide oj-web-applayout-header-title neo-color" title="Application Name" style="font-weight: bold;margin:50px 0px 0px 20px;font-size:1.5em">
<oj-bind-text value="[[appName]]"></oj-bind-text>
</h1>
</div>
<!--
** the code below was "display:none;" 'd out of the app
** because did not yet fully integrate the user session functions yet
-->
<div class="oj-flex-bar-end" style="display:none;">
<!-- Responsive Toolbar -->
<oj-toolbar>
<oj-menu-button id="userMenu" display="[[smScreen() ? 'icons' : 'all']]" chroming="half">
<span>
<oj-bind-text value="[[userLogin]]"></oj-bind-text>
</span>
<span slot="endIcon" :class="[[{'oj-icon demo-appheader-avatar': smScreen(), 'oj-component-icon oj-button-menu-dropdown-icon': !smScreen()}]]"></span>
<oj-menu id="menu1" slot="menu" style="display:none">
<oj-option id="pref" value="pref">Preferences</oj-option>
<oj-option id="help" value="help">Help</oj-option>
<oj-option id="about" value="about">About</oj-option>
<oj-option id="out" value="out">Sign Out</oj-option>
</oj-menu>
</oj-menu-button>
</oj-toolbar>
</div>
</div>
<div role="navigation" class="oj-web-applayout-max-width oj-web-applayout-navbar">
<oj-navigation-list class="
oj-sm-only-hide oj-md-condense oj-md-justify-content-flex-end neo-color"
data="[[navDataSource]]" edge="top" item.renderer="[[oj.KnockoutTemplateUtils.getRenderer('navTemplate', true)]]"
selection="{{router.stateId}}">
</oj-navigation-list>
</div>
</header>
<oj-module role="main" class="oj-web-applayout-max-width oj-web-applayout-content neo-color" config="[[moduleConfig]]">
</oj-module>
<footer class="oj-web-applayout-footer neo-color" role="contentinfo">
<div style="display:inline-block" class="oj-web-applayout-footer-item oj-web-applayout-max-width neo-color">
<ul>
<oj-bind-for-each data="[[footerLinks]]">
<template>
<li><a class="neo-color" :id="[[$current.data.linkId]]" :href="[[$current.data.linkTarget]]">
<oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
</a></li>
</template>
</oj-bind-for-each>
</ul>
</div>
<div style="display:inline-block" class="oj-web-applayout-footer-item oj-web-applayout-max-width oj-text-secondary-color oj-text-sm neo-color">
<oj-bind-text value="[[appName]]"></oj-bind-text>
<oj-bind-text value="[[neoVersion]]"></oj-bind-text>
</div>
</footer>
</div>
</div>
<script type="text/javascript" src="js/libs/require/require.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
