1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-30 18:20:15 +02:00

improve onboarding

This commit is contained in:
Kushagra Gour
2018-03-14 10:23:54 +05:30
parent 8ac1e82160
commit 5cbc13db1e
3 changed files with 22 additions and 8 deletions

View File

@@ -10,7 +10,7 @@
<span class="notification__version">3.0.0</span> <span class="notification__version">3.0.0</span>
<ul> <ul>
<li>After months of work, here is Web Maker 3.0. <a href="https://medium.com/web-maker/web-maker-3-0-is-here-f158a40eeaee" target="_blank">Read the blog post about it</a>.</li> <li>After months of work, here is Web Maker 3.0. <a href="https://medium.com/web-maker/web-maker-3-0-is-here-f158a40eeaee" target="_blank">Read the blog post about it</a>.</li>
<li>Web Maker is no more just a Chrome extension, it is also available as web app that runs offline just like the extension!</li> <li>Web Maker is no more just a Chrome extension, it is also available as web app that runs offline just like the extension! Checkout it out -> <a href="https://webmakerapp.com/app/" target="_blank">https://webmakerapp.com/app/</a>.</li>
<li>Now use Web Maker web app on any modern browser (tested with Chrome and Firefox).</li> <li>Now use Web Maker web app on any modern browser (tested with Chrome and Firefox).</li>
<li><strong>User Accounts</strong> - The much requested user accounts are here. Now maintain your account and store all your creations in the cloud and access them anywhere anytime. <li><strong>User Accounts</strong> - The much requested user accounts are here. Now maintain your account and store all your creations in the cloud and access them anywhere anytime.
<li><strong>New layout mode</strong> - One more layout mode, that lets you align all the panes vertically. <li><strong>New layout mode</strong> - One more layout mode, that lets you align all the panes vertically.

View File

@@ -14,7 +14,13 @@
</svg> </svg>
</div> </div>
<p> <p>
Open Web Maker anytime by visiting <a>https://webmakerapp.com/app/</a> - Even when you are offline! It just works! 😱 Open Web Maker anytime by visiting <a>https://webmakerapp.com/app/</a> - Even when you are offline! It just works! 😱 <strong>Drag the following bookmarklet</strong> on your bookmark bar to create a quick access shortcut:
<a class="ml-1 bookmarklet" href="https://webmakerapp.com/app/">
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="#logo" />
</svg>
Web Maker
</a>
</p> </p>
</div> </div>
<div class="onboard-step show-when-extension"> <div class="onboard-step show-when-extension">
@@ -52,13 +58,13 @@
</svg> </svg>
</div> </div>
<p> <p>
Follow <a href="https://twitter.com/intent/follow?screen_name=webmakerApp">@webmakerApp</a> to know about the new upcoming Follow <a href="https://twitter.com/intent/follow?screen_name=webmakerApp" targe="_blank">@webmakerApp</a> to know about the new upcoming
features! features!
</p> </p>
</div> </div>
</div> </div>
<p class="ta-c"> <p class="tac show-when-app">
If you are an existing Chrome extension user, you can import your creations from there to here. <a href="https://medium.com/web-maker/importing-exporting-your-creations-d92e7de5c3dc" target="_blank">Learn how to export/import</a>. If you are an existing Chrome extension user, you can import your creations from there to here. <a href="https://medium.com/web-maker/importing-exporting-your-creations-d92e7de5c3dc" target="_blank">Learn how to export/import</a>.
</p> </p>

View File

@@ -990,11 +990,11 @@ body > #demo-frame {
animation-delay: 0.4s; animation-delay: 0.4s;
} }
.onboard-step__icon { .onboard-step__icon {
fill: transparent !important; fill: #fff2ed;
stroke-width: 0.5px; stroke-width: 0.5px;
stroke: #eeb096; stroke: #e79f80;
width: 150px; width: 80px;
height: 150px; height: 80px;
} }
@keyframes onboard-step-show { @keyframes onboard-step-show {
@@ -1179,6 +1179,14 @@ body:not(.is-app) .show-when-app {
background: white 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>'); 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>');
} }
.bookmarklet {
display: inline-flex;
align-items: center;
border: 1px #aaa solid;
padding: 0 5px;
border-style: dashed;
color: #333;
}
/* Codemirror themes basic bg styles. This is here so that there is no big FOUC /* Codemirror themes basic bg styles. This is here so that there is no big FOUC
while the theme CSS file is loading */ while the theme CSS file is loading */