757 lines
41 KiB
HTML
757 lines
41 KiB
HTML
<!doctype html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>peach-patterns</title>
|
|
<meta name="description" content="PeachCloud Pattern Library">
|
|
<meta name="author" content="glyph">
|
|
<link rel="stylesheet" href="css/peachcloud.css">
|
|
<style>@import url("css/_variables.css");</style>
|
|
</head>
|
|
|
|
<body style="background-color: var(--near-white);">
|
|
<div style="max-width: var(--max-width-6);">
|
|
<h1>PeachCloud Pattern Library</h1>
|
|
<br>
|
|
<h3>Buttons</h3>
|
|
<!-- BUTTONS -->
|
|
<p>Standard button</p>
|
|
<button class="button">Standard button</button>
|
|
<br>
|
|
<hr style="width: 100%;">
|
|
<h3>Meters</h3>
|
|
<!-- METERS -->
|
|
<p>Standard meter</p>
|
|
<meter min="0" max="100" value="70" title="70%">70%</meter>
|
|
<p>Meter with range (value outside of range)</p>
|
|
<meter min="0" max="100" low="0" high="80" value="90" title="90%">90%</meter>
|
|
<p>Meter with fallback styling</p>
|
|
<meter value="55.93" min="0" max="120.47" title="Disk Usage - 55.93 GB out of 120 GB">
|
|
<div class="meter-gauge">
|
|
<span style="width: 46.42%;">Disk Usage - 55.93GB out of 120GB</span>
|
|
</div>
|
|
</meter>
|
|
<p>Labeled meter with fallback styling</p>
|
|
<div class="flex-grid">
|
|
<span class="card-text">Disk</span>
|
|
<span class="label-small push-right">25% (48 GB available)</span>
|
|
</div>
|
|
<meter value="16" min="0" max="64" title="Disk Usage - 16 GB out of 64 GB">
|
|
<div class="meter-gauge">
|
|
<span style="width: 25%;">Disk Usage - 16 GB out of 120 GB</span>
|
|
</div>
|
|
</meter>
|
|
<hr style="width: 100%;">
|
|
<h3>Switches</h3>
|
|
<p>Rounded switch</p>
|
|
<!-- ROUNDED SWITCH -->
|
|
<label class="switch">
|
|
<input type="checkbox">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
<br>
|
|
<hr style="width: 100%;">
|
|
<h3>Circles</h3>
|
|
<!-- CIRCLES -->
|
|
<div style="width: 250px;">
|
|
<!-- STANDARD CIRCLE -->
|
|
<p>Standard circle</p>
|
|
<div class="circle circle-medium"></div>
|
|
<br>
|
|
<!-- SUCCESS CIRCLE -->
|
|
<p>Success circle</p>
|
|
<div class="circle circle-medium circle-success">Success</div>
|
|
<br>
|
|
<!-- WARNING CIRCLE -->
|
|
<p>Warning circle</p>
|
|
<div class="circle circle-medium circle-warning">Warning</div>
|
|
<br>
|
|
<!-- ERROR CIRCLE -->
|
|
<p>Error circle</p>
|
|
<div class="circle circle-medium circle-error">Error</div>
|
|
<!-- STANDARD CIRCLE WITH ACTIVE ICON -->
|
|
<p>Standard circle with active icon</p>
|
|
<div class="circle circle-medium">
|
|
<!-- NETWORK STATUS ICON -->
|
|
<img class="icon" style="position: absolute;" src="icons/router.svg">
|
|
</div>
|
|
<br>
|
|
<!-- QUARTERED CIRCLE -->
|
|
<!-- TODO: remove links from basic atom, rather add to molecule -->
|
|
<p>Quartered circle</p>
|
|
<div class="quartered-circle">
|
|
<a href="#">
|
|
<div class="quarter top-left"></div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="quarter top-right"></div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="quarter bottom-left"></div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="quarter bottom-right"></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<hr style="width: 100%;">
|
|
<h3>Icons</h3>
|
|
<!-- ICONS -->
|
|
<!-- SMALL ICON -->
|
|
<p>Small icon</p>
|
|
<img class="icon icon-small" src="icons/cog.svg">
|
|
<!-- MEDIUM ICON -->
|
|
<p>Medium icon</p>
|
|
<img class="icon icon-medium" src="icons/router.svg">
|
|
<!-- LARGE ICON -->
|
|
<p>Large icon</p>
|
|
<img class="icon icon-large" src="icons/heart-pulse.svg">
|
|
<!-- ACTIVE ICON -->
|
|
<p>Active icon</p>
|
|
<img class="icon-active" style="width: 50%" src="icons/wifi.svg">
|
|
<!-- INACTIVE ICON -->
|
|
<p>Inactive icon</p>
|
|
<img class="icon-inactive" style="width: 50%" src="icons/wifi.svg">
|
|
<br>
|
|
<hr style="width: 100%;">
|
|
<h3>Inputs</h3>
|
|
<!-- INPUTS -->
|
|
<p>Standard input with button</p>
|
|
<!-- Standard input with button -->
|
|
<div class="card-container">
|
|
<input class="input" type="password" placeholder="Password" title="Password for access point">
|
|
<button class="button">Connect</button>
|
|
</div>
|
|
<p>Standard input with label and unit</p>
|
|
<!-- Standard input with label and unit -->
|
|
<div class="card-container">
|
|
<label class="label-small">WARNING THRESHOLD</label>
|
|
<label class="list-text font-near-black"><input class="input" style="text-align: right; width: 150px; margin-right: 5px;" placeholder="0" type="text" title="Warning threshold value">MB</label>
|
|
</div>
|
|
<hr style="width: 100%;">
|
|
<h3>Labels</h3>
|
|
<!-- LABELS -->
|
|
<!-- SMALL LABEL -->
|
|
<p>Small label</p>
|
|
<label class="label-small font-gray">Small label</label>
|
|
<label class="label-small font-gray">SMALL LABEL</label>
|
|
<br>
|
|
<!-- MEDIUM LABEL -->
|
|
<p>Medium label</p>
|
|
<label class="label-medium">Medium label</label>
|
|
<label class="label-medium">MEDIUM LABEL</label>
|
|
<br><br>
|
|
<!-- LARGE LABEL -->
|
|
<p>Large label</p>
|
|
<label class="label-large">Large label</label>
|
|
<label class="label-large">LARGE LABEL</label>
|
|
<br>
|
|
<hr style="width: 100%;">
|
|
<h3>Grids</h3>
|
|
<p>Three-across icon grid</p>
|
|
<!-- THREE-ACROSS ICON GRID -->
|
|
<div class="three-grid">
|
|
<img class="three-grid-icon-1 icon" title="Devices" src="icons/devices.svg">
|
|
<img class="three-grid-icon-2 icon" title="Download" src="icons/down-arrow.svg">
|
|
<img class="three-grid-icon-3 icon" title="Upload" src="icons/up-arrow.svg">
|
|
</div>
|
|
<p>Three-across label grid</p>
|
|
<!-- THREE-ACROSS LABEL GRID -->
|
|
<div class="three-grid">
|
|
<label class="three-grid-label-1 label-medium">Label 1</label>
|
|
<label class="three-grid-label-2 label-medium">Label 2</label>
|
|
<label class="three-grid-label-3 label-medium">Label 3</label>
|
|
</div>
|
|
<p>Three-across switch and icons grid</p>
|
|
<!-- THREE-ACROSS SWITCH AND ICONS GRID -->
|
|
<div class="three-grid">
|
|
<!-- LEFT SWITCH ICON -->
|
|
<img class="icon-inactive switch-icon-left" style="width: 50%" src="icons/wifi.svg">
|
|
<!-- ROUNDED SWITCH -->
|
|
<div class="center">
|
|
<label class="switch">
|
|
<input type="checkbox">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
</div>
|
|
<!-- RIGHT SWITCH ICON -->
|
|
<img class="icon-active switch-icon-right" style="width: 50%" src="icons/router.svg">
|
|
</div>
|
|
<p>Stack with icon and value</p>
|
|
<!-- STACK WITH ICON AND VALUE -->
|
|
<div class="stack">
|
|
<img class="icon" title="Download" src="icons/devices.svg">
|
|
<label class="label-medium" title="Number of connected devices" style="padding-top: 0.5rem;">4</label>
|
|
</div>
|
|
<p>Stack with icon, value and unit</p>
|
|
<!-- STACK WITH ICON, VALUE AND UNIT -->
|
|
<div class="stack">
|
|
<img class="icon" title="Download" src="icons/down-arrow.svg">
|
|
<div class="flex-grid" style="padding-top: 0.5rem;">
|
|
<label class="label-medium" style="padding-right: 3px;" title="Data download total in MB">21.7</label>
|
|
<label class="label-small font-near-black">GB</label>
|
|
</div>
|
|
</div>
|
|
<p>Stack with icon, value, unit and label</p>
|
|
<!-- STACK WITH ICON, VALUE, UNIT AND LABEL -->
|
|
<div class="stack">
|
|
<img class="icon" title="Download" src="icons/down-arrow.svg">
|
|
<div class="flex-grid" style="padding-top: 0.5rem;">
|
|
<label class="label-medium" style="padding-right: 3px;" title="Data download total in MB">158</label>
|
|
<label class="label-small font-near-black">MB</label>
|
|
</div>
|
|
<label class="label-small font-gray">DOWNLOAD</label>
|
|
</div>
|
|
<p>Three-across stack</p>
|
|
<!-- THREE-ACROSS STACK -->
|
|
<div class="three-grid">
|
|
<div class="stack">
|
|
<img class="icon" title="Download" src="icons/down-arrow.svg">
|
|
<div class="flex-grid" style="padding-top: 0.5rem;">
|
|
<label class="label-medium" style="padding-right: 3px;" title="Data download total in MB">158</label>
|
|
<label class="label-small font-near-black">MB</label>
|
|
</div>
|
|
<label class="label-small font-gray">DOWNLOAD</label>
|
|
</div>
|
|
<div class="stack">
|
|
<img class="icon" title="Upload" src="icons/up-arrow.svg">
|
|
<div class="flex-grid" style="padding-top: 0.5rem;">
|
|
<label class="label-medium" style="padding-right: 3px;" title="Data upload total in GB">16</label>
|
|
<label class="label-small font-near-black">GB</label>
|
|
</div>
|
|
<label class="label-small font-gray">UPLOAD</label>
|
|
</div>
|
|
<div class="stack">
|
|
<img class="icon" title="Connected devices" src="icons/devices.svg">
|
|
<div class="flex-grid" style="padding-top: 0.5rem;">
|
|
<label class="label-medium" style="padding-right: 3px;" title="Number of connected devices">3</label>
|
|
</div>
|
|
<label class="label-small font-gray">DEVICES</label>
|
|
</div>
|
|
</div>
|
|
<p>Three-across stack with capules</p>
|
|
<!-- THREE-ACROSS STACK WITH CAPSULES -->
|
|
<div class="three-grid">
|
|
<div class="stack capsule">
|
|
<img class="icon" title="Download" src="icons/down-arrow.svg">
|
|
<div class="flex-grid" style="padding-top: 0.5rem;">
|
|
<label class="label-medium" style="padding-right: 3px;" title="Data download total in MB">158</label>
|
|
<label class="label-small font-near-black">MB</label>
|
|
</div>
|
|
<label class="label-small font-gray">DOWNLOAD</label>
|
|
</div>
|
|
<div class="stack capsule success-border">
|
|
<img class="icon" title="Upload" src="icons/up-arrow.svg">
|
|
<div class="flex-grid" style="padding-top: 0.5rem;">
|
|
<label class="label-medium" style="padding-right: 3px;" title="Data upload total in GB">16</label>
|
|
<label class="label-small font-near-black">GB</label>
|
|
</div>
|
|
<label class="label-small font-gray">UPLOAD</label>
|
|
</div>
|
|
<div class="stack capsule warning-border">
|
|
<img class="icon" title="Connected devices" src="icons/devices.svg">
|
|
<div class="flex-grid" style="padding-top: 0.5rem;">
|
|
<label class="label-medium" style="padding-right: 3px;" title="Number of connected devices">3</label>
|
|
</div>
|
|
<label class="label-small font-gray">DEVICES</label>
|
|
</div>
|
|
</div>
|
|
<hr style="width: 100%;">
|
|
<h3>Lists</h3>
|
|
<!-- LISTS -->
|
|
<p>Standard list</p>
|
|
<!-- Standard list -->
|
|
<div>
|
|
<ul class="list">
|
|
<li class="list-item">Guest</li>
|
|
<li class="list-item">TRYPTYCH</li>
|
|
<li class="list-item">JustAnInnocentAP</li>
|
|
<li class="list-item">77712345</li>
|
|
<li class="list-item">MountainViewCafe</li>
|
|
<li class="list-item">portal</li>
|
|
</ul>
|
|
</div>
|
|
<br>
|
|
<p>Titled list</p>
|
|
<!-- Titled list -->
|
|
<div>
|
|
<h1 class="bold title-medium">WiFi Networks</h1>
|
|
<ul class="list">
|
|
<li class="list-item">Guest</li>
|
|
<li class="list-item">TRYPTYCH</li>
|
|
<li class="list-item">JustAnInnocentAP</li>
|
|
<li class="list-item">77712345</li>
|
|
<li class="list-item">MountainViewCafe</li>
|
|
<li class="list-item">portal</li>
|
|
</ul>
|
|
</div>
|
|
<br>
|
|
<p>Labeled list</p>
|
|
<!-- Labeled list -->
|
|
<div>
|
|
<ul class="list">
|
|
<li class="list-item">
|
|
<p class="list-text">Cottage</p>
|
|
<label class="label-small font-gray" title="Status">Connected</label>
|
|
</li>
|
|
<li class="list-item">
|
|
<p class="list-text">Home</p>
|
|
<label class="label-small font-gray" title="Status"></label>
|
|
</li>
|
|
<li class="list-item">
|
|
<p class="list-text">RadNet23432</p>
|
|
<label class="label-small font-gray" title="Status">Not in range</label>
|
|
</li>
|
|
<li class="list-item">
|
|
<p class="list-text">TPLink-2374</p>
|
|
<label class="label-small font-gray" title="Status">Not in range</label>
|
|
</li>
|
|
<li class="list-item">
|
|
<p class="list-text">DASHAUS</p>
|
|
<label class="label-small font-gray" title="Status">Not in range</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<br>
|
|
<p>Labeled list with icon right</p>
|
|
<!-- Labeled list with icon right -->
|
|
<div>
|
|
<ul class="list">
|
|
<li class="list-item">
|
|
<img class="icon icon-active icon-medium list-icon" src="icons/wifi.svg">
|
|
<p class="list-text">Cottage</p>
|
|
<label class="label-small list-label font-gray" title="Status">Connected</label>
|
|
</li>
|
|
<li class="list-item">
|
|
<img class="icon icon-inactive icon-medium list-icon" src="icons/wifi.svg">
|
|
<p class="list-text">Home</p>
|
|
<label class="label-small list-label font-gray" title="Status">Not in range</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<br>
|
|
<hr style="width: 100%;">
|
|
<h3>Navigation Bars</h3>
|
|
<!-- NAV BARS -->
|
|
<p>Top nav bar</p>
|
|
<!-- Top nav bar -->
|
|
<nav class="nav-bar">
|
|
<a class="nav-item" href="" title="Back">
|
|
<img class="icon-medium nav-icon-left icon-active" src="icons/back.svg" alt="Greater-than symbol or backward-facing arrow">
|
|
</a>
|
|
<a class="nav-item" href="/logout" title="Logout">
|
|
<img class="icon-medium nav-icon-right icon-active" src="icons/exit.svg" alt="Exit icon: an arrow pointing out from an open door">
|
|
</a>
|
|
</nav>
|
|
<p>Bottom nav bar</p>
|
|
<!-- Bottom nav bar -->
|
|
<nav class="nav-bar">
|
|
<a class="nav-item" href="https://scuttlebutt.nz/">
|
|
<img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="icons/hermies.png" alt="Logo for Secure Scuttlebutt: Hermies the Hermit Crab contained within a hexagon">
|
|
</a>
|
|
<a class="nav-item" href="/">
|
|
<img class="icon nav-icon-left" src="icons/peach-icon.png" alt="PeachCloud logo consisting of a peach with green leaves on the left and two overlapping clouds to the right" title="Home">
|
|
</a>
|
|
<a class="nav-item" href="/help">
|
|
<img class="icon-medium nav-icon-right icon-active" title="Help" src="icons/question-circle.svg" alt="Question symbol inside of a circle">
|
|
</a>
|
|
</nav>
|
|
<hr style="width: 100%;">
|
|
<h3>Network Card</h3>
|
|
<!-- NETWORK CARD -->
|
|
<!-- NETWORK INFO BOX -->
|
|
<div class="card">
|
|
<div class="two-grid" title="PeachCloud network mode and status">
|
|
<!-- NETWORK STATUS ICON -->
|
|
<!-- icon with label molecule -->
|
|
<!-- left column -->
|
|
<div class="grid-column-1">
|
|
<img class="center icon" src="icons/router.svg">
|
|
<label class="center label-small font-gray" title="Access Point Status">ONLINE</label>
|
|
</div>
|
|
<!-- right column -->
|
|
<div class="grid-column-2">
|
|
<label class="label-small font-gray" title="Network Mode">MODE</label>
|
|
<p class="card-text" title="Network Mode">Access Point</p>
|
|
<label class="label-small font-gray" title="Access Point SSID">SSID</label>
|
|
<p class="card-text" title="SSID">peach</p>
|
|
<label class="label-small font-gray" title="Access Point IP Address">IP</label>
|
|
<p class="card-text" title="IP">11.11.11.10</p>
|
|
</div>
|
|
</div>
|
|
<button class="button center">Enable WiFi</button>
|
|
<button class="button center">Add WiFi Network</button>
|
|
<!-- CARD GRID -->
|
|
<div class="card-container">
|
|
<div class="three-grid">
|
|
<div class="stack">
|
|
<img class="icon icon-medium" title="Connected devices" src="icons/devices.svg">
|
|
<div class="flex-grid" style="padding-top: 1rem;">
|
|
<label class="label-medium" style="padding-right: 3px;" title="Number of connected devices">3</label>
|
|
</div>
|
|
<label class="label-small font-gray">DEVICES</label>
|
|
</div>
|
|
<div class="stack">
|
|
<img class="icon icon-medium" title="Download" src="icons/down-arrow.svg">
|
|
<div class="flex-grid" style="padding-top: 1rem;">
|
|
<label class="label-medium" style="padding-right: 3px;" title="Data download total in MB">158</label>
|
|
<label class="label-small font-near-black">MB</label>
|
|
</div>
|
|
<label class="label-small font-gray">DOWNLOAD</label>
|
|
</div>
|
|
<div class="stack">
|
|
<img class="icon icon-medium" title="Upload" src="icons/up-arrow.svg">
|
|
<div class="flex-grid" style="padding-top: 1rem;">
|
|
<label class="label-medium" style="padding-right: 3px;" title="Data upload total in GB">16</label>
|
|
<label class="label-small font-near-black">GB</label>
|
|
</div>
|
|
<label class="label-small font-gray">UPLOAD</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr style="width: 100%;">
|
|
<h3>Network Card with Nav Bars</h3>
|
|
<div style="background-color: var(--moon-gray);">
|
|
<!-- Top nav bar -->
|
|
<nav class="nav-bar">
|
|
<a class="nav-item" href="" title="Back">
|
|
<img class="icon-medium nav-icon-left icon-active" src="icons/back.svg" alt="Greater-than symbol or backward-facing arrow">
|
|
</a>
|
|
<h1 class="nav-title">Network Configuration</h1>
|
|
<a class="nav-item" href="/logout" title="Logout">
|
|
<img class="icon-medium nav-icon-right icon-active" src="icons/exit.svg" alt="Exit icon: an arrow pointing out from an open door">
|
|
</a>
|
|
</nav>
|
|
<!-- NETWORK CARD -->
|
|
<div class="card center">
|
|
<!-- NETWORK INFO BOX -->
|
|
<div class="two-grid capsule success-border" title="PeachCloud network mode and status">
|
|
<!-- NETWORK STATUS ICON -->
|
|
<!-- icon with label molecule -->
|
|
<!-- left column -->
|
|
<div class="grid-column-1">
|
|
<img class="center icon" src="icons/router.svg">
|
|
<label class="center label-small font-gray" title="Access Point Status">ONLINE</label>
|
|
</div>
|
|
<!-- right column -->
|
|
<div class="grid-column-2">
|
|
<label class="label-small font-gray" title="Network Mode">MODE</label>
|
|
<p class="card-text" title="Network Mode">Access Point</p>
|
|
<label class="label-small font-gray" title="Access Point SSID">SSID</label>
|
|
<p class="card-text" title="SSID">peach</p>
|
|
<label class="label-small font-gray" title="Access Point IP Address">IP</label>
|
|
<p class="card-text" title="IP">11.11.11.10</p>
|
|
</div>
|
|
</div>
|
|
<button class="button button-primary center">Enable WiFi</button>
|
|
<button class="button button-primary center">Add WiFi Network</button>
|
|
<!-- CARD GRID -->
|
|
<div class="card-container">
|
|
<!-- row of icons representing network statistics -->
|
|
<div class="three-grid">
|
|
<img class="three-grid-icon-1 icon" title="Devices" src="icons/devices.svg">
|
|
<img class="three-grid-icon-2 icon" title="Download" src="icons/down-arrow.svg">
|
|
<img class="three-grid-icon-3 icon" title="Upload" src="icons/up-arrow.svg">
|
|
</div>
|
|
<!-- row of values representing current network state -->
|
|
<div class="three-grid">
|
|
<label class="three-grid-label-1 label-medium" title="Number of connected devices">6</label>
|
|
<label class="three-grid-label-2 label-medium" title="Data download total in MB">21.7</label>
|
|
<label class="three-grid-label-3 label-medium" title="Data upload total in MB">3.4</label>
|
|
</div>
|
|
<!-- row of labels for each network statistic column -->
|
|
<div class="three-grid">
|
|
<label class="three-grid-label-1 label-small font-gray">DEVICES</label>
|
|
<label class="three-grid-label-2 label-small font-gray">DOWNLOAD</label>
|
|
<label class="three-grid-label-3 label-small font-gray">UPLOAD</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom nav bar -->
|
|
<nav class="nav-bar">
|
|
<a class="nav-item" href="https://scuttlebutt.nz/">
|
|
<img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="icons/hermies.png" alt="Logo for Secure Scuttlebutt: Hermies the Hermit Crab contained within a hexagon">
|
|
</a>
|
|
<a class="nav-item" href="/help">
|
|
<img class="icon-medium nav-icon-right icon-active" title="Help" src="icons/question-circle.svg" alt="Question symbol inside of a circle">
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
<hr style="width: 100%;">
|
|
<h3>Network List with Nav Bars</h3>
|
|
<!-- Network list with nav bars -->
|
|
<div style="background-color: var(--moon-gray);">
|
|
<!-- Top nav bar -->
|
|
<nav class="nav-bar">
|
|
<a class="nav-item" href="" title="Back">
|
|
<img class="icon-medium nav-icon-left icon-active" src="icons/back.svg" alt="Greater-than symbol or backward-facing arrow">
|
|
</a>
|
|
<h1 class="nav-title">WiFi Networks</h1>
|
|
<a class="nav-item" href="/logout" title="Logout">
|
|
<img class="icon-medium nav-icon-right icon-active" src="icons/exit.svg" alt="Exit icon: an arrow pointing out from an open door">
|
|
</a>
|
|
</nav>
|
|
<!-- NETWORK CARD -->
|
|
<!-- NETWORK INFO BOX -->
|
|
<div class="card center">
|
|
<div class="list-container center">
|
|
<ul class="list">
|
|
<li class="list-item primary-bg">
|
|
<img class="icon icon-active icon-medium list-icon" src="icons/wifi.svg">
|
|
<p class="list-text">Cottage</p>
|
|
<label class="label-small list-label font-gray" title="Status">Connected</label>
|
|
</li>
|
|
<li class="list-item secondary-bg">
|
|
<img class="icon icon-inactive icon-medium list-icon" src="icons/wifi.svg">
|
|
<p class="list-text">TranquilGarden</p>
|
|
<label class="label-small list-label font-gray" title="Status">Available</label>
|
|
</li>
|
|
<li class="list-item">
|
|
<p class="list-text">Deli @TheVillage</p>
|
|
<label class="label-small list-label font-gray" title="Status">Not in range</label>
|
|
</li>
|
|
<li class="list-item">
|
|
<p class="list-text">H ⅄ P H Λ L</p>
|
|
<label class="label-small list-label font-gray" title="Status">Not in range</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom nav bar -->
|
|
<nav class="nav-bar">
|
|
<a class="nav-item" href="https://scuttlebutt.nz/">
|
|
<img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="icons/hermies.png" alt="Logo for Secure Scuttlebutt: Hermies the Hermit Crab contained within a hexagon">
|
|
</a>
|
|
<a class="nav-item" href="/help">
|
|
<img class="icon-medium nav-icon-right icon-active" title="Help" src="icons/question-circle.svg" alt="Question symbol inside of a circle">
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
<hr style="width: 100%;">
|
|
<h3>Network Details with Nav Bars</h3>
|
|
<!-- Network details with nav bars -->
|
|
<div style="background-color: var(--moon-gray);">
|
|
<!-- Top nav bar -->
|
|
<nav class="nav-bar">
|
|
<a class="nav-item" href="" title="Back">
|
|
<img class="icon-medium nav-icon-left icon-active" src="icons/back.svg" alt="Greater-than symbol or backward-facing arrow">
|
|
</a>
|
|
<h1 class="nav-title">WiFi Network</h1>
|
|
<a class="nav-item" href="/logout" title="Logout">
|
|
<img class="icon-medium nav-icon-right icon-active" src="icons/exit.svg" alt="Exit icon: an arrow pointing out from an open door">
|
|
</a>
|
|
</nav>
|
|
<!-- NETWORK CARD -->
|
|
<!-- NETWORK INFO BOX -->
|
|
<div class="card center">
|
|
<!-- status -->
|
|
<!-- signal strength -->
|
|
<!-- ip of client (if connected) -->
|
|
<!-- input for password -->
|
|
<!-- connect button -->
|
|
<!-- cancel button -->
|
|
<div class="two-grid capsule" title="PeachCloud network mode and status">
|
|
<!-- NETWORK STATUS ICON -->
|
|
<!-- icon with label molecule -->
|
|
<!-- left column -->
|
|
<div class="grid-column-1">
|
|
<img class="center icon icon-active" src="icons/wifi.svg">
|
|
<label class="center label-small font-gray" title="Access Point Status">AVAILABLE</label>
|
|
</div>
|
|
<!-- right column -->
|
|
<div class="grid-column-2">
|
|
<label class="label-small font-gray" title="Access Point SSID">SSID</label>
|
|
<p class="card-text" title="SSID">ZenGarden</p>
|
|
<label class="label-small font-gray" title="Access Point key management protocol">SECURITY</label>
|
|
<p class="card-text" title="Key management protocol of WiFi access point">WPA2-PSK</p>
|
|
<label class="label-small font-gray" title="Signal Strength">SIGNAL</label>
|
|
<p class="card-text" title="Signal strength of WiFi access point">73%</p>
|
|
</div>
|
|
</div>
|
|
<!-- Standard input with button -->
|
|
<div class="card-container" style="padding-top: 0;">
|
|
<button class="center button button-primary">Connect</button>
|
|
<button class="center button button-secondary">Modify</button>
|
|
<button class="center button button-warning">Forget</button>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom nav bar -->
|
|
<nav class="nav-bar">
|
|
<a class="nav-item" href="https://scuttlebutt.nz/">
|
|
<img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="icons/hermies.png" alt="Logo for Secure Scuttlebutt: Hermies the Hermit Crab contained within a hexagon">
|
|
</a>
|
|
<a class="nav-item" href="/">
|
|
<img class="icon nav-icon-left" src="icons/peach-icon.png" alt="PeachCloud logo consisting of a peach with green leaves on the left and two overlapping clouds to the right" title="Home">
|
|
</a>
|
|
<a class="nav-item" href="/help">
|
|
<img class="icon-medium nav-icon-right icon-active" title="Help" src="icons/question-circle.svg" alt="Question symbol inside of a circle">
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
<hr style="width: 100%;">
|
|
<h3>Network Add Credentials with Nav Bars</h3>
|
|
<!-- Network add credentials with nav bars -->
|
|
<div style="background-color: var(--moon-gray);">
|
|
<!-- Top nav bar -->
|
|
<nav class="nav-bar">
|
|
<a class="nav-item" href="" title="Back">
|
|
<img class="icon-medium nav-icon-left icon-active" src="icons/back.svg" alt="Greater-than symbol or backward-facing arrow">
|
|
</a>
|
|
<h1 class="nav-title">Add WiFi Network</h1>
|
|
<a class="nav-item" href="/logout" title="Logout">
|
|
<img class="icon-medium nav-icon-right icon-active" src="icons/exit.svg" alt="Exit icon: an arrow pointing out from an open door">
|
|
</a>
|
|
</nav>
|
|
<!-- NETWORK CARD -->
|
|
<!-- NETWORK ADD CREDENTIALS FORM -->
|
|
<div class="card center">
|
|
<!-- Standard input with button -->
|
|
<div class="card-container">
|
|
<input class="center input" type="text" placeholder="SSID" title="Network name (SSID) for WiFi access point">
|
|
<input class="center input" type="password" placeholder="Password" title="Password for WiFi access point">
|
|
<button class="center button button-primary">Connect</button>
|
|
<button class="center button button-secondary">Cancel</button>
|
|
<!-- NOTE : used to share ux information with the user -->
|
|
<div class="center capsule info-border" style="width: 70%;">
|
|
<p class="label-small font-gray" style="padding-left: 5px;">This website will be unresponsive while the access point is disabled and the WiFi connection attempt is made.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom nav bar -->
|
|
<nav class="nav-bar">
|
|
<a class="nav-item" href="https://scuttlebutt.nz/">
|
|
<img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="icons/hermies.png" alt="Logo for Secure Scuttlebutt: Hermies the Hermit Crab contained within a hexagon">
|
|
</a>
|
|
<a class="nav-item" href="/">
|
|
<img class="icon nav-icon-left" src="icons/peach-icon.png" alt="PeachCloud logo consisting of a peach with green leaves on the left and two overlapping clouds to the right" title="Home">
|
|
</a>
|
|
<a class="nav-item" href="/help">
|
|
<img class="icon-medium nav-icon-right icon-active" title="Help" src="icons/question-circle.svg" alt="Question symbol inside of a circle">
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
<hr style="width: 100%;">
|
|
<h3>WiFi Data Total and Alerts with Nav Bars</h3>
|
|
<!-- WiFi data alerts with nav bars -->
|
|
<div style="background-color: var(--moon-gray);">
|
|
<!-- Top nav bar -->
|
|
<nav class="nav-bar">
|
|
<a class="nav-item" href="" title="Back">
|
|
<img class="icon-medium nav-icon-left icon-active" src="icons/back.svg" alt="Greater-than symbol or backward-facing arrow">
|
|
</a>
|
|
<h1 class="nav-title">Network Data Usage</h1>
|
|
<a class="nav-item" href="/logout" title="Logout">
|
|
<img class="icon-medium nav-icon-right icon-active" src="icons/exit.svg" alt="Exit icon: an arrow pointing out from an open door">
|
|
</a>
|
|
</nav>
|
|
<!-- NETWORK CARD -->
|
|
<!-- WIFI DATA ALERTS -->
|
|
<div class="card center card-container">
|
|
<div class="center stack capsule" style="width: 70%;">
|
|
<div class="flex-grid">
|
|
<label class="label-large" title="Data download total in MB">158</label>
|
|
<label class="label-small font-near-black">MB</label>
|
|
</div>
|
|
<label class="center-text label-small font-gray">USAGE TOTAL</label>
|
|
</div>
|
|
<div class="card-container container">
|
|
<div>
|
|
<img class="icon" title="Warning" src="icons/alert.svg">
|
|
</div>
|
|
<div>
|
|
<label class="label-small font-near-black"><input class="alert-input" placeholder="0" type="text" title="Warning threshold value">MB</label>
|
|
<label class="label-small font-gray" style="padding-top: 0.25rem;">WARNING THRESHOLD</label>
|
|
</div>
|
|
<div>
|
|
<input title="Activate download warning" type="checkbox">
|
|
</div>
|
|
<div>
|
|
<img class="icon" title="Cutoff" src="icons/scissor.svg">
|
|
</div>
|
|
<div>
|
|
<label class="label-small font-near-black"><input class="alert-input" placeholder="0" type="text" title="Cutoff threshold value">MB</label>
|
|
<label class="label-small font-gray" style="padding-top: 0.25rem;">CUTOFF THRESHOLD</label>
|
|
</div>
|
|
<div>
|
|
<input title="Activate download cutoff" type="checkbox">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div style="grid-column-start: 1; grid-column-end: 4;">
|
|
<button class="center button button-primary">Update</button>
|
|
<button class="center button button-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom nav bar -->
|
|
<nav class="nav-bar">
|
|
<a class="nav-item" href="https://scuttlebutt.nz/">
|
|
<img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="icons/hermies.png" alt="Logo for Secure Scuttlebutt: Hermies the Hermit Crab contained within a hexagon">
|
|
</a>
|
|
<a class="nav-item" href="/">
|
|
<img class="icon nav-icon-left" src="icons/peach-icon.png" alt="PeachCloud logo consisting of a peach with green leaves on the left and two overlapping clouds to the right" title="Home">
|
|
</a>
|
|
<a class="nav-item" href="/help">
|
|
<img class="icon-medium nav-icon-right icon-active" title="Help" src="icons/question-circle.svg" alt="Question symbol inside of a circle">
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
<hr style="width: 100%;">
|
|
<h3>Radial Menu</h3>
|
|
<!-- RADIAL MENU -->
|
|
<div class="grid">
|
|
<!-- top-left -->
|
|
<!-- SYSTEM STATUS LINK AND ICON -->
|
|
<a class="top-left" href="/hello">
|
|
<div class="circle circle-small">
|
|
<img class="icon-medium" src="icons/heart-pulse.svg">
|
|
</div>
|
|
</a>
|
|
<!-- top-middle -->
|
|
<!-- CURRENT USER LINK AND ICON -->
|
|
<a class="top-middle" href="/hello">
|
|
<div class="circle circle-small">
|
|
<img class="icon-100" src="icons/glyph.png">
|
|
</div>
|
|
</a>
|
|
<!-- top-right -->
|
|
<!-- PEERS LINK AND ICON -->
|
|
<a class="top-right" href="/hello">
|
|
<div class="circle circle-small">
|
|
<img class="icon-medium" src="icons/users.svg">
|
|
</div>
|
|
</a>
|
|
<!-- middle of menu -->
|
|
<a class="middle" href="/hello">
|
|
<div class="circle circle-large">
|
|
</div>
|
|
</a>
|
|
<!-- bottom-left -->
|
|
<!-- SYSTEM SETTINGS LINK AND ICON -->
|
|
<a class="bottom-left" href="/hello">
|
|
<div class="circle circle-small">
|
|
<img class="icon-medium" src="icons/cog.svg">
|
|
</div>
|
|
</a>
|
|
<!-- bottom-middle -->
|
|
<!-- PEACHCLOUD GUIDEBOOK LINK AND ICON -->
|
|
<a class="bottom-middle" href="/hello">
|
|
<div class="circle circle-small">
|
|
<img class="icon-medium" src="icons/book.svg">
|
|
</div>
|
|
</a>
|
|
<!-- bottom-right -->
|
|
<!-- MESSAGES LINK AND ICON -->
|
|
<a class="bottom-right" href="/hello">
|
|
<div class="circle circle-small">
|
|
<img class="icon-medium" src="icons/envelope.svg">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|