163 lines
7.2 KiB
HTML
163 lines
7.2 KiB
HTML
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<title>Containers browserAction Popup</title>
|
|
<link rel="stylesheet" href="/css/foundation.min.css">
|
|
<link rel="stylesheet" href="/css/popup.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="panel onboarding onboarding-panel-1 hide" id="onboarding-panel-1">
|
|
<img alt="Container Tabs Overview" src="/img/onboarding-1.png" />
|
|
<h3>A better way to manage all the things you do online</h3>
|
|
<p>Use containers to organize tasks, manage accounts, and keep your focus where you want it.</p>
|
|
<p class="spacing" ><a href="#">Learn more</a></p>
|
|
<a href="#" id="onboarding-next-button" class="button expanded">Next</a>
|
|
</div>
|
|
|
|
|
|
<div class="panel onboarding onboarding-panel-2 hide" id="onboarding-panel-2">
|
|
<img alt="How Containers Work" src="/img/onboarding-2.png" />
|
|
<h3>Put containers to work for you.</h3>
|
|
<p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
|
|
<a href="#" id="onboarding-done-button" class="button expanded spacing">Done</a>
|
|
</div>
|
|
|
|
|
|
<div class="panel container-panel" id="container-panel">
|
|
<div class="row panel-header">
|
|
<div class="small-10 columns">
|
|
<h3 class="panel-header-text">Containers</h3>
|
|
</div>
|
|
<div class="small-2 columns panel-header-button">
|
|
<a id="sort-containers-link"><img alt="Sort Containers" title="Sort Containers" class="icon" src="/img/container-sort.svg"></a>
|
|
</div>
|
|
</div>
|
|
<table class="unstriped">
|
|
<tbody class="identities-list"></tbody>
|
|
</table>
|
|
<div class="row panel-footer edit-identities">
|
|
<div class="small-10 columns edit-containers-text">
|
|
<a id="edit-containers-link">Edit Containers</a>
|
|
</div>
|
|
<div class="small-2 columns add-container">
|
|
<a class="add-container-link">
|
|
<img alt="Create new container icon" title="Create new container" src="/img/container-add.svg" class="icon" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="hide panel container-info-panel" id="container-info-panel">
|
|
<div class="row">
|
|
<div class="small-2 columns panel-back-arrow clickable" id="close-container-info-panel">«</div>
|
|
<div class="small-10 columns">
|
|
<div class="row container-info-panel-header">
|
|
<span class="userContext-icon" id="container-info-icon" data-identity-icon="" data-identity-color=""></span>
|
|
<h3 id="container-info-name" class="panel-header-text"></h3>
|
|
</div>
|
|
<div class="row container-info-panel-hide clickable" id="container-info-hideorshow" data-user-context-id="">
|
|
<img id="container-info-hideorshow-icon" alt="Hide Container icon" src="/img/container-hide.svg" class="icon container-info-panel-hideorshow-icon"/><span id="container-info-hideorshow-label">Hide this container</span><br/>
|
|
</div>
|
|
<div class="row container-info-panel-movetabs clickable" id="container-info-movetabs">
|
|
Move tabs to a new window
|
|
</div>
|
|
<table class="unstriped" id="container-info-table">
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="panel edit-containers-panel hide" id="edit-containers-panel">
|
|
<div class="row panel-header">
|
|
<div class="small-12 columns">
|
|
<h3 class="panel-header-text">Edit Containers</h3>
|
|
</div>
|
|
</div>
|
|
<table class="unstriped">
|
|
<tbody id="edit-identities-list"></tbody>
|
|
</table>
|
|
<div class="row panel-footer edit-containers-panel-footer">
|
|
<div class="small-10 columns edit-containers-exit-text">
|
|
<a id="exit-edit-mode-link">< Exit Edit Mode</a>
|
|
</div>
|
|
<div class="small-2 columns add-container">
|
|
<a class="add-container-link">
|
|
<img alt="Create new container icon" title="Create new container" src="/img/container-add.svg" class="icon" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="panel edit-container-panel hide" id="edit-container-panel">
|
|
<div class="row">
|
|
<div class="small-2 columns panel-back-arrow" id="edit-container-panel-back-arrow">
|
|
«
|
|
</div>
|
|
<div class="small-10 columns">
|
|
<form>
|
|
<p>
|
|
<label>Name</label>
|
|
<input type="text" name="container-name" id="edit-container-panel-name-input"/>
|
|
</p>
|
|
<p>
|
|
<label>Choose a color</label>
|
|
<div id="edit-container-panel-choose-color">
|
|
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="blue"></span>
|
|
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="turquoise"></span>
|
|
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="green"></span>
|
|
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="yellow"></span>
|
|
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="orange"></span>
|
|
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="red"></span>
|
|
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="pink"></span>
|
|
<span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="purple"></span>
|
|
</div>
|
|
</p>
|
|
<p>
|
|
<label>Choose an icon</label>
|
|
<input type="text" />
|
|
</p>
|
|
</form>
|
|
<div class="row">
|
|
<div class="small-6 columns footer-columns">
|
|
<a class="button secondary expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a>
|
|
</div>
|
|
<div class="small-6 columns footer-columns">
|
|
<a class="button expanded footer-button">OK</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hide panel delete-container-panel" id="delete-container-panel">
|
|
<div class="row">
|
|
<div class="small-2 columns panel-back-arrow clickable" id="close-delete-container-panel">«</div>
|
|
<div class="small-10 columns">
|
|
<div class="row container-info-panel-header">
|
|
<span class="userContext-icon" id="delete-container-icon" data-identity-icon="" data-identity-color=""></span>
|
|
<h3 id="delete-container-name" class="panel-header-text"></h3>
|
|
</div>
|
|
<div class="row delete-container-confirm">
|
|
<h4>Remove This Container</h4>
|
|
<p>If you remove this container now, <span id="delete-container-tab-count"></span> container tabs will be closed. Are you sure you want to remove this Container?</p>
|
|
</div>
|
|
<div class="row">
|
|
<div class="small-6 columns footer-columns">
|
|
<a class="button expanded secondary footer-button cancel-button" id="delete-container-cancel-link">Cancel</a>
|
|
</div>
|
|
<div class="small-6 columns footer-columns">
|
|
<a class="button expanded footer-button">OK</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="js/popup.js"></script>
|
|
</body>
|
|
</html>
|