190 lines
9 KiB
HTML
190 lines
9 KiB
HTML
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<title>Multi-Account Containers</title>
|
|
<link rel="stylesheet" href="/css/popup.css">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="hide panel onboarding onboarding-panel-1">
|
|
<img class="onboarding-img" alt="Container Tabs Overview" src="/img/onboarding-1.png" />
|
|
<h3 class="onboarding-title">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>
|
|
<a href="#" class="onboarding-button onboarding-start-button">Get Started</a>
|
|
</div>
|
|
|
|
<div class="hide panel onboarding security-onboarding-panel-1">
|
|
<img class="onboarding-img" alt="Container Tabs Overview" src="/img/onboarding-1.png" />
|
|
<h3 class="onboarding-title">A simple and secure way to manage your online life</h3>
|
|
<p>
|
|
Use containers to organize tasks, manage accounts, and store sensitive data.
|
|
</p>
|
|
<a href="#" class="onboarding-button onboarding-start-button">Get Started</a>
|
|
</div>
|
|
|
|
<div class="panel onboarding onboarding-panel-2 hide">
|
|
<img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
|
|
<h3 class="onboarding-title">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="#" class="onboarding-button onboarding-next-button">Next</a>
|
|
</div>
|
|
|
|
<div class="panel onboarding security-onboarding-panel-2 hide">
|
|
<img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
|
|
<h3 class="onboarding-title">Put containers to work for you.</h3>
|
|
<p>Color-coding helps you categorize your online life, find things easily, and minimize distractions.</p>
|
|
<a href="#" class="onboarding-button onboarding-next-button">Next</a>
|
|
</div>
|
|
|
|
<div class="panel onboarding onboarding-panel-3 hide">
|
|
<img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3.png" />
|
|
<h3 class="onboarding-title">A place for everything, and everything in its place.</h3>
|
|
<p>Start with the containers we've created, or create your own.</p>
|
|
<a href="#" class="onboarding-button onboarding-almost-done-button">Next</a>
|
|
</div>
|
|
|
|
<div class="panel onboarding security-onboarding-panel-3 hide">
|
|
<img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3-security.png" />
|
|
<h3 class="onboarding-title">Set boundaries for your browsing.</h3>
|
|
<p>Cookies are stored within a container, so you can segment sensitive data and browsing history to stay organized and to limit the impact of online trackers.</p>
|
|
<a href="#" class="onboarding-button onboarding-almost-done-button">Next</a>
|
|
</div>
|
|
|
|
<div class="panel onboarding onboarding-panel-4 hide" id="onboarding-panel-4">
|
|
<img class="onboarding-img" alt="How to assign sites to containers" src="/img/onboarding-4.png" />
|
|
<h3 class="onboarding-title">Always open sites in the containers you want.</h3>
|
|
<p>Right-click inside a container tab to assign the site to always open in the container.</p>
|
|
<a href="#" id="onboarding-done-button" class="onboarding-button">Next</a>
|
|
</div>
|
|
|
|
<div class="panel onboarding onboarding-panel-5 hide" id="onboarding-panel-5">
|
|
<img class="onboarding-img" alt="Long-press the New Tab button to create a new container tab." src="/img/onboarding-3.png" />
|
|
<h3 class="onboarding-title">Container tabs when you need them.</h3>
|
|
<p>Long-press the New Tab button to create a new container tab.</p>
|
|
<a href="#" id="onboarding-longpress-button" class="onboarding-button">Done</a>
|
|
</div>
|
|
|
|
<div class="panel container-panel hide" id="container-panel">
|
|
<div id="current-tab">
|
|
<h3>Current Tab</h3>
|
|
<div id="current-page"></div>
|
|
<label for="container-page-assigned">
|
|
<input type="checkbox" id="container-page-assigned" />
|
|
<span class="truncate-text">
|
|
Always open in
|
|
<span id="current-container"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="container-panel-controls">
|
|
<a href="#" class="action-link" id="sort-containers-link" title="Sort tabs into container order">Sort Tabs</a>
|
|
</div>
|
|
<div class="scrollable panel-content" tabindex="-1">
|
|
<table class="identities-list">
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="panel-footer edit-identities">
|
|
<div class="edit-containers-text panel-footer-secondary">
|
|
<a href="#" tabindex="0" id="edit-containers-link">Edit Containers</a>
|
|
</div>
|
|
<a href="#" tabindex="0" class="add-container-link pop-button" id="container-add-link" title="Create new container">
|
|
<img class="pop-button-image-small icon" alt="Create new container icon" src="/img/container-add.svg" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="hide panel container-info-panel" id="container-info-panel" tabindex="-1">
|
|
<div class="columns">
|
|
<div class="panel-back-arrow" id="close-container-info-panel">
|
|
<img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
|
|
</div>
|
|
<div class="column-panel-content">
|
|
<div class="panel-header container-info-panel-header">
|
|
<span class="usercontext-icon" id="container-info-icon"></span>
|
|
<h3 id="container-info-name" class="panel-header-text container-name truncate-text"></h3>
|
|
</div>
|
|
<div class="select-row clickable container-info-panel-hide container-info-has-tabs" id="container-info-hideorshow">
|
|
<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>
|
|
</div>
|
|
<div class="select-row clickable container-info-panel-movetabs container-info-has-tabs" id="container-info-movetabs">Move tabs to a new window</div>
|
|
<div class="scrollable">
|
|
<table id="container-info-table" class="container-info-list">
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="panel edit-containers-panel hide" id="edit-containers-panel">
|
|
<div class="panel-header">
|
|
<h3 class="panel-header-text">Edit Containers</h3>
|
|
</div>
|
|
<div class="scrollable panel-content">
|
|
<table class="unstriped">
|
|
<tbody id="edit-identities-list"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="panel-footer edit-containers-panel-footer">
|
|
<a href="#" id="exit-edit-mode-link" class="exit-edit-mode-link edit-containers-exit-text">Exit Edit Mode</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="panel edit-container-panel hide" id="edit-container-panel">
|
|
<div class="columns">
|
|
<div class="panel-back-arrow" id="edit-container-panel-back-arrow">
|
|
<img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
|
|
</div>
|
|
<div class="column-panel-content">
|
|
<form id="edit-container-panel-form">
|
|
<input type="hidden" name="container-id" id="edit-container-panel-usercontext-input" />
|
|
<fieldset>
|
|
<legend>Name</legend>
|
|
<input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/>
|
|
</fieldset>
|
|
<fieldset id="edit-container-panel-choose-color" class="radio-choice">
|
|
<legend>Choose a color</legend>
|
|
</fieldset>
|
|
<fieldset id="edit-container-panel-choose-icon" class="radio-choice">
|
|
<legend>Choose an icon</legend>
|
|
</fieldset>
|
|
</form>
|
|
<div id="edit-sites-assigned" class="scrollable" hidden>
|
|
<h3>Sites assigned to this container</h3>
|
|
<div class="assigned-sites-list">
|
|
</div>
|
|
</div>
|
|
<div class="panel-footer">
|
|
<a href="#" class="button secondary expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a>
|
|
<a class="button primary expanded footer-button" id="edit-container-ok-link">OK</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hide panel delete-container-panel" id="delete-container-panel">
|
|
<div class="panel-header">
|
|
<span class="usercontext-icon" id="delete-container-icon"></span>
|
|
<h3 id="delete-container-name" class="panel-header-text container-name"></h3>
|
|
</div>
|
|
<div class="panel-content delete-container-confirm">
|
|
<h4 class="delete-container-confirm-title">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="panel-footer">
|
|
<a href="#" class="button expanded secondary footer-button cancel-button" id="delete-container-cancel-link">Cancel</a>
|
|
<a href="#" class="button expanded primary footer-button" id="delete-container-ok-link">OK</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/utils.js"></script>
|
|
<script src="js/popup.js"></script>
|
|
</body>
|
|
</html>
|