mirror of
https://github.com/chinchang/web-maker.git
synced 2025-08-03 20:07:35 +02:00
refactor onboard modal
This commit is contained in:
Kushagra Gour
110
src/index.html
110
src/index.html
@@ -233,9 +233,8 @@
|
||||
</a>
|
||||
<!-- #00ACED -->
|
||||
<a class="footer__link hint--rounded hint--top-right" data-hint="Tweet about 'Web Maker'" href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,playground,chrome,extension" target="_blank">
|
||||
<svg viewBox="0 0 16 16" style="width:20px; height:20px; vertical-align:text-bottom">
|
||||
<path id="twitter-icon" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
|
||||
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
|
||||
<svg style="width:20px; height:20px; vertical-align:text-bottom">
|
||||
<use xlink:href="#twitter-icon"></use>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
@@ -315,63 +314,58 @@
|
||||
<div class="modal" id="onboardModal">
|
||||
<div class="modal__content">
|
||||
|
||||
<div class="tac">
|
||||
<svg width="130px" height="50px">
|
||||
<use xlink:href="#logo" />
|
||||
</svg>
|
||||
<h1 style="margin-top:20px">Welcome to Web Maker</h1>
|
||||
</div>
|
||||
<div class="tac">
|
||||
<!-- <p>Web Maker lets you do web experiments quickly and even when you are offline.</p> -->
|
||||
|
||||
<p>
|
||||
By default, Web Maker can be started by clicking the <svg class="relative" style="top:5px;" width="40" height="30"><use xlink:href="#logo" /></svg> button in top-right side of your browser. But you can choose to make Web Maker show in every new tab that you open:
|
||||
</p>
|
||||
|
||||
<h2 style="text-decoration: underline;">Choose one:</h2>
|
||||
<div class="onboard-selection-wrap flex">
|
||||
<div class="onboard-selection selected" id="onboardDontShowInTabOptionBtn" d-click="onDontShowInTabClicked">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150" viewBox="180 200 340 320" xml:space="preserve">
|
||||
<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
|
||||
C494.264,234.442,503.916,244.094,503.916,256z"></path>
|
||||
<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
|
||||
c-11.906,0-21.558-9.651-21.558-21.558V288.337h43.116v-64.674c0-5.953,4.826-10.779,10.779-10.779h64.674
|
||||
c5.953,0,10.779,4.826,10.779,10.779v64.674H503.916z"></path>
|
||||
<rect width="200px" height="20px" rx="5" ry="5" x="250" y="365px" style="fill:#f3f3f3;"></rect>
|
||||
</svg>
|
||||
<div class="onboard-selection-text">Don't show in new tab</div>
|
||||
</div>
|
||||
|
||||
<div style="opacity:0.7;">OR</div>
|
||||
|
||||
<div class="onboard-selection" id="onboardShowInTabOptionBtn" d-click="onShowInTabClicked">
|
||||
<!-- Awesome free vector from freepik.com -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150" viewBox="180 200 340 320" xml:space="preserve">
|
||||
<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
|
||||
C494.264,234.442,503.916,244.094,503.916,256z"></path>
|
||||
<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
|
||||
c-11.906,0-21.558-9.651-21.558-21.558V288.337h43.116v-64.674c0-5.953,4.826-10.779,10.779-10.779h64.674
|
||||
c5.953,0,10.779,4.826,10.779,10.779v64.674H503.916z"></path>
|
||||
<rect width="120px" height="50px" rx="5" ry="5" x="210" y="315px" style="fill:rgba(0,0,0,0.25);"></rect>
|
||||
<rect width="120px" height="50px" rx="5" ry="5" x="210" y="372px" style="fill:rgba(0,0,0,0.25);"></rect>
|
||||
<rect width="120px" height="50px" rx="5" ry="5" x="210" y="430px" style="fill:rgba(0,0,0,0.25);"></rect>
|
||||
<rect width="140px" height="165px" rx="5" ry="5" x="345" y="315px" style="fill:#f3f3f3;"></rect>
|
||||
</svg>
|
||||
<div class="onboard-selection-text">Show in every new tab</div>
|
||||
</div>
|
||||
<div class="tac">
|
||||
<svg width="130px" height="50px">
|
||||
<use xlink:href="#logo" />
|
||||
</svg>
|
||||
<h1 style="margin-top:20px">Welcome to Web Maker</h1>
|
||||
</div>
|
||||
<div class="flex" style="margin-top;: 100px;">
|
||||
<div class="onboard-step">
|
||||
<div class="tac">
|
||||
<svg class="onboard-step__icon" viewBox="0 0 24 24">
|
||||
<path d="M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
You can change this later from Settings (<svg style="width:18px;height:18px;position:relative;top:3px;fill:#888" viewBox="0 0 24 24"><use xlink:href="#settings-icon"></use></svg>) in bottom right of the app.
|
||||
</p>
|
||||
<p>
|
||||
Also, follow <a href="https://twitter.com/intent/follow?screen_name=webmakerApp">@webmakerApp</a> to know about the new upcoming features!
|
||||
</p>
|
||||
|
||||
<p class="tac">
|
||||
<button class="btn" d-click="closeAllOverlays">Lets start!</button>
|
||||
Open Web Maker anytime by clicking the
|
||||
<svg class="relative" style="top:5px;" width="40" height="30">
|
||||
<use xlink:href="#logo" />
|
||||
</svg> button in top-right side of your browser.
|
||||
</p>
|
||||
</div>
|
||||
<div class="onboard-step">
|
||||
<div class="tac">
|
||||
<svg class="onboard-step__icon" viewBox="0 0 24 24">
|
||||
<use xlink:href="#settings-icon"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<p>
|
||||
Configure and customize settings by clicking the gear icon (
|
||||
<svg style="width:18px;height:18px;position:relative;top:3px;fill:#888"
|
||||
viewBox="0 0 24 24">
|
||||
<use xlink:href="#settings-icon"></use>
|
||||
</svg>) in bottom right of the app.
|
||||
</p>
|
||||
</div>
|
||||
<div class="onboard-step">
|
||||
<div class="tac">
|
||||
<svg class="onboard-step__icon" style="stroke-width:0.2px;">
|
||||
<use xlink:href="#twitter-icon"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<p>
|
||||
Follow <a href="https://twitter.com/intent/follow?screen_name=webmakerApp">@webmakerApp</a> to know about the new upcoming
|
||||
features!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="tac">
|
||||
<button class="btn" d-click="closeAllOverlays">Lets start!</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -562,6 +556,10 @@
|
||||
<symbol id="settings-icon" viewBox="0 0 24 24">
|
||||
<path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path>
|
||||
</symbol>
|
||||
<symbol id="twitter-icon" viewBox="0 0 16 16">
|
||||
<path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
|
||||
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
|
||||
</symbol>
|
||||
<symbol id="heart-icon" viewBox="0 0 24 24">
|
||||
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" />
|
||||
</symbol>
|
||||
|
||||
@@ -792,33 +792,42 @@ body > #demo-frame {
|
||||
padding: 1px 6px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.onboard-selection-wrap {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.onboard-step {
|
||||
background: #f7f2f1;
|
||||
border: 1px solid #ecdede;
|
||||
margin: 15px;
|
||||
padding: 20px 30px;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 16px 22px rgba(0, 0, 0, 0.1);
|
||||
flex: 1;
|
||||
opacity: 0;
|
||||
animation: onboard-step-show 0.6s ease forwards;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.onboard-selection {
|
||||
padding: 10px;
|
||||
margin: 0 40px;
|
||||
border-radius: 5px;
|
||||
transition: 0.25s ease;
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
.onboard-step:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.onboard-selection:hover {
|
||||
cursor: pointer;
|
||||
/*background-color: rgba(0,0,0,0.3);*/
|
||||
transform: scale(1.15);
|
||||
/*border-color: rgba(0,0,0,0.4);*/
|
||||
.onboard-step:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.onboard-selection.selected:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
bottom: 40px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: white url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:32px;height:32px" viewBox="0 0 24 24"><path fill="limegreen" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" /></svg>');
|
||||
.onboard-step__icon {
|
||||
fill: transparent!important;
|
||||
stroke-width: 0.3px;
|
||||
stroke: #eeb096;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
@keyframes onboard-step-show {
|
||||
from {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.autocomplete-dropdown {
|
||||
|
||||
Reference in New Issue
Block a user