mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-25 07:51:12 +02:00
Code Issues Releases Wiki Activity

improve onboarding modal

Browse Source
This commit is contained in:
Kushagra Gour
2024-05-06 12:44:31 +05:30
parent 20d1c3dfde
commit 7644005d63
2 changed files with 79 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/components/OnboardingModal.jsx
View File

@@ -1,84 +1,93 @@
import { h } from 'preact'; import { h } from 'preact';
import Modal from './Modal.jsx'; import Modal from './Modal.jsx';
import { Stack } from './Stack.jsx';
export function OnboardingModal(props) { export function OnboardingModal(props) {
return ( return (
<Modal show={props.show} closeHandler={props.closeHandler}> <Modal show={props.show} closeHandler={props.closeHandler}>
<div class="tac"> <Stack gap={3} justify="center" align="center">
<svg width="130px" height="50px" aria-hidden="true"> <svg width="83" height="32" aria-hidden="true">
<use xlinkHref="#logo" /> <use xlinkHref="#logo" />
</svg> </svg>
<h1 style="margin-top:20px">Welcome to Web Maker</h1> <h1>Welcome to Web Maker</h1>
</div> </Stack>
<div class="flex--desk" style="margin-top:40px;"> <div
<div class="onboard-step show-when-app hide-on-mobile"> class="flex--desk"
<div class="tac"> style="margin-top:40px; display:grid; grid-template-columns:1fr 1fr"
>
<div class="onboard-step onboard-step--full-width show-when-app hide-on-mobile">
<Stack gap={1} align="center">
<svg class="onboard-step__icon" viewBox="0 0 24 24"> <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" /> <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> </svg>
</div>
<p> <p>
Open Web Maker anytime by visiting{' '} Open Web Maker anytime by visiting{' '}
<a>https://webmaker.app/create/</a> - Even when you are offline! It <a>https://webmaker.app/create/</a> - Even when you are offline!
just works! 😱 <strong>Drag the following bookmarklet</strong> on It just works! 😱 <strong>Drag the following bookmarklet</strong>{' '}
your bookmark bar to create a quick access shortcut: on your bookmark bar to create a quick access shortcut:
<a class="ml-1 bookmarklet" href="https://webmaker.app/create/"> <a class="ml-1 bookmarklet" href="https://webmaker.app/create/">
<svg width="20" height="20" aria-hidden="true"> <svg width="20" height="20" aria-hidden="true">
<use xlinkHref="#logo" />
</svg>
Web Maker
</a>
</p>
</Stack>
</div>
<div class="onboard-step onboard-step--full-width show-when-extension">
<Stack gap={1} align="center">
<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>
<p>
Open Web Maker anytime by clicking the
<svg class="relative" style="top:5px;" width="40" height="30">
<use xlinkHref="#logo" /> <use xlinkHref="#logo" />
</svg>{' '}
button in top-right side of your browser.
</p>
</Stack>
</div>
<div class="onboard-step">
<Stack gap={1} align="center">
<svg class="onboard-step__icon" viewBox="0 0 24 24">
<use xlinkHref="#settings-icon" />
</svg>
<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 xlinkHref="#settings-icon" />
</svg> </svg>
Web Maker ) in bottom right of the app.
</a> </p>
</p> </Stack>
</div>
<div class="onboard-step show-when-extension">
<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>
Open Web Maker anytime by clicking the
<svg class="relative" style="top:5px;" width="40" height="30">
<use xlinkHref="#logo" />
</svg>{' '}
button in top-right side of your browser.
</p>
</div> </div>
<div class="onboard-step"> <div class="onboard-step">
<div class="tac"> <Stack gap={1} align="center">
<svg class="onboard-step__icon" viewBox="0 0 24 24">
<use xlinkHref="#settings-icon" />
</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 xlinkHref="#settings-icon" />
</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.3px;"> <svg class="onboard-step__icon" style="stroke-width:0.3px;">
<use xlinkHref="#twitter-icon" /> <use xlinkHref="#twitter-icon" />
</svg> </svg>
</div>
<p> <p>
Follow{' '} Follow{' '}
<a <a
href="https://twitter.com/intent/follow?screen_name=webmakerApp" href="https://twitter.com/intent/follow?screen_name=webmakerApp"
targe="_blank" targe="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
@webmakerApp @webmakerApp
</a>{' '} </a>{' '}
to know about the new upcoming features! to know about the new upcoming features!
</p> </p>
</Stack>
</div> </div>
</div> </div>
@@ -95,11 +104,11 @@ export function OnboardingModal(props) {
. .
</p> </p>
<p class="tac"> <Stack justify="center">
<button class="btn btn--primary" onClick={props.closeHandler}> <button class="btn btn--primary" onClick={props.closeHandler}>
Lets start! Lets start!
</button> </button>
</p> </Stack>
</Modal> </Modal>
); );
} }

9
src/style.css
View File

@@ -1609,13 +1609,16 @@ body > #demo-frame {
} }
.onboard-step { .onboard-step {
margin: 15px; margin: 0.5rem;
padding: 20px 30px; padding: 1rem;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px; border-radius: 0.8rem;
box-shadow: 0 16px 22px rgba(0, 0, 0, 0.1); box-shadow: 0 16px 22px rgba(0, 0, 0, 0.1);
flex: 1; flex: 1;
} }
.onboard-step--full-width {
grid-column: 1 / -1;
}
.onboard-step__icon { .onboard-step__icon {
fill: rgba(255, 255, 255, 0.3); fill: rgba(255, 255, 255, 0.3);