safari-beauty-toolbar
Version:
Make the Safari Toolbar more consistent with your brand colors
134 lines (131 loc) • 5.69 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Safari Beauty Toolbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div class="sct">
<div class="sct__header">
<div class="sct__center-side">
<div class="sct__rotator">
<div class="sct__rotator-item sct__rotator-item--first" style="background-image: url('./assets/8.jpg') ">
</div>
<div class="sct__rotator-item sct__rotator-item--main" style="background-image: url('./assets/2.jpg') ">
</div>
<div class="sct__rotator-item sct__rotator-item--last" style="background-image: url('./assets/6.jpg') ">
</div>
</div>
<h1>Safari Beauty Toolbar</h1>
<h2>Make the Safari Toolbar more consistent with your brand colors</h2>
<div class="sct__header-caption">
Tiny zero-dependencies JavaScript module
</div>
<a class="sct__button sct__button--github" href="https://github.com/neSpecc/safari-beauty-toolbar">
View on the GitHub
</a>
<br />
<a class="sct__link sct__link--yarn" href="https://yarnpkg.com/en/package/safari-beauty-toolbar">
Available via Yarn
</a>
<a class="sct__link sct__link--npm" href="https://www.npmjs.com/package/safari-beauty-toolbar">
Available via NPM
</a>
</div>
</div>
<div class="sct__center-side">
<div class="sct__try" id="js-demo" hidden>
<h3>Try it yourself</h3>
<div class="sct__table">
<div class="sct__table-cell">
<label>
Set up an any color
</label>
<div class="sct__colors">
<span class="sct__colors-item sct__colors-item--red" onclick="demo.reset('red')"></span>
<span class="sct__colors-item sct__colors-item--blue" onclick="demo.reset('#519AFF')"></span>
<span class="sct__colors-item sct__colors-item--yellow" onclick="demo.reset('#F3FF6F')"></span>
<span class="sct__colors-item sct__colors-item--green" onclick="demo.reset('#62FF99')"></span>
<span class="sct__colors-item sct__colors-item--pink" onclick="demo.reset('#FFC5FA')"></span>
<!--<input value="#CFEDEE">-->
</div>
<code><span class="hcode--keyword">const</span> <span class="hcode--object">toolbarColor</span> = <span class="hcode--keyword">new</span> <span class="hcode--object">SBToolbar</span>({
<span class="hcode--property">color</span>: <span class="hcode--string" id="js-color-value">"red"</span>
});
</code>
</div>
<div class="sct__table-cell">
<label>
Animation effect
</label>
<span class="sct__button" onclick="demo.animate(this)">
Try animation
</span>
<code><span class="hcode--object">toolbarColor</span>.<span class="hcode--method">animate</span>({
<span class="hcode--property">colors</span>: [<span class="hcode--string">"#ff0a8a"</span>, <span class="hcode--string">"blue"</span>, <span class="hcode--string">"#61ffa7"</span>, <span class="hcode--string">"yellow"</span>],
<span class="hcode--property">speed</span>: <span class="hcode--number">600</span>
});
</code>
</div>
<div class="sct__table-cell">
<label>
Blinking effect
</label>
<span class="sct__button" onclick="demo.blink(this)">
Try to blink
</span>
<code><span class="hcode--object">toolbarColor</span>.<span class="hcode--method">blink</span>({
<span class="hcode--property">interval</span>: <span class="hcode--number">300</span>,
<span class="hcode--property">transitionSpeed</span>: <span class="hcode--number">1000</span>
});
</code>
</div>
<div class="sct__table-cell">
<label>
Progress animation
</label>
<span class="sct__button" onclick="demo.progress(this)">
Start progress
</span>
<code><span class="hcode--object">toolbarColor</span>.<span class="hcode--method">startProgress</span>({
<span class="hcode--property">color</span>: <span class="hcode--string">"rgb(49, 82, 92)"</span>,
<span class="hcode--property">estimate</span>: <span class="hcode--number">3500</span>
});
</code>
</div>
</div>
<div class="sct__docs">
Read a few lines of the <a href="https://github.com/neSpecc/safari-beauty-toolbar">documentation</a>.
</div>
</div>
<div class="sct__how">
<h3>How it works</h3>
<p>
Module works only on the Safari browser on MacOS and iOS because they have a little transparency on the Toolbar.
So we can add the colorful layer and place it under the Toolbar. That's it. This tool just simplifies the trick.
</p>
<div class="sct__gifs">
<div class="sct__gifs-item">
<video autoplay loop muted playsinline>
<source src="assets/desktop.mp4" type="video/mp4">
</video>
</div>
<div class="sct__gifs-item">
<video autoplay loop muted playsinline>
<source src="assets/mobile.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="sct__footer">
Petr Savchenko, <a href="https://ifmo.su">CodeX</a>
<a class="sct__footer-right" href="https://github.com/neSpecc/safari-beauty-toolbar">https://github.com/neSpecc/safari-beauty-toolbar</a>
</div>
</div>
</div>
<script src="../dist/sct.min.js"></script>
<script src="demo.js" onload="demo.init(); new Rotator('sct__rotator-item');"></script>
</body>
</html>