for #498: security onboarding panels and logic

This commit is contained in:
groovecoder
2017-06-14 15:46:21 -05:00
committed by Jonathan Kingston
parent 13cd601212
commit 5237e67fa6
5 changed files with 79 additions and 22 deletions
+28 -6
View File
@@ -7,28 +7,50 @@
</head>
<body>
<div class="hide panel onboarding onboarding-panel-1" id="onboarding-panel-1">
<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="#" id="onboarding-start-button" class="onboarding-button">Get Started</a>
<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 keep your sensitive data where you want it.
</p>
<a href="#" class="onboarding-button onboarding-start-button">Get Started</a>
</div>
<div class="panel onboarding onboarding-panel-2 hide" id="onboarding-panel-2">
<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="#" id="onboarding-next-button" class="onboarding-button">Next</a>
<a href="#" class="onboarding-button onboarding-next-button">Next</a>
</div>
<div class="panel onboarding onboarding-panel-3 hide" id="onboarding-panel-3">
<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="#" id="onboarding-almost-done-button" class="onboarding-button">Next</a>
<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/security-onboarding-3.png" />
<h3 class="onboarding-title">Use containers to secure everything within.</h3>
<p>Containers separate cookies and sensitive data from other containers, like surrounded by firewalls to block tracking.</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">