Merge branch 'trello-edits' into 'develop'
trello-edits See merge request witapp/aura-webapp!137
This commit is contained in:
Daniil Chemerkin
commit
26cce762c3
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<link rel="preload" as="image" href="/leo.png" fetchpriority="high" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
|
||||
24
public/dartsV1.svg
Normal file
24
public/dartsV1.svg
Normal file
@ -0,0 +1,24 @@
|
||||
<svg width="197" height="197" viewBox="0 0 197 197" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="98.5" cy="92.5" r="86.5" fill="url(#paint0_linear_3404_153)"/>
|
||||
<path d="M159.025 75L159.536 83.5148L168.051 84.0254L159.536 84.5359L159.025 93.0508L158.515 84.5359L150 84.0254L158.515 83.5148L159.025 75Z" fill="white"/>
|
||||
<path d="M155.315 80.3157L159.032 82.9298L162.746 80.3197L160.136 84.0339L162.75 87.7509L159.033 85.1368L155.319 87.7469L157.929 84.0327L155.315 80.3157Z" fill="white"/>
|
||||
<path d="M46.0303 91L46.3148 95.7457L51.0605 96.0303L46.3148 96.3148L46.0303 101.061L45.7457 96.3148L41 96.0303L45.7457 95.7457L46.0303 91Z" fill="white"/>
|
||||
<path d="M43.9623 93.9625L46.034 95.4194L48.1041 93.9647L46.6494 96.0348L48.1063 98.1064L46.0347 96.6495L43.9646 98.1042L45.4193 96.0341L43.9623 93.9625Z" fill="white"/>
|
||||
<path d="M63.0303 18L63.3148 22.7457L68.0605 23.0303L63.3148 23.3148L63.0303 28.0605L62.7457 23.3148L58 23.0303L62.7457 22.7457L63.0303 18Z" fill="white"/>
|
||||
<path d="M60.9623 20.9625L63.034 22.4194L65.1041 20.9647L63.6494 23.0348L65.1063 25.1064L63.0347 23.6495L60.9646 25.1042L62.4193 23.0341L60.9623 20.9625Z" fill="white"/>
|
||||
<path d="M118.509 13L118.707 16.3103L122.018 16.5088L118.707 16.7073L118.509 20.0176L118.31 16.7073L115 16.5088L118.31 16.3103L118.509 13Z" fill="white"/>
|
||||
<path d="M117.067 15.066L118.512 16.0823L119.956 15.0676L118.941 16.5115L119.957 17.9566L118.512 16.9403L117.068 17.955L118.083 16.5111L117.067 15.066Z" fill="white"/>
|
||||
<path d="M31 65L31.5657 74.4343L41 75L31.5657 75.5657L31 85L30.4343 75.5657L21 75L30.4343 74.4343L31 65Z" fill="white"/>
|
||||
<path d="M26.8881 70.8893L31.0064 73.7857L35.1217 70.8937L32.2297 75.009L35.1261 79.1274L31.0078 76.231L26.8925 79.1229L29.7845 75.0077L26.8881 70.8893Z" fill="white"/>
|
||||
<path d="M97.3333 137.25C122.932 137.25 143.667 116.516 143.667 90.9163C143.667 65.3172 122.932 44.583 97.3333 44.583C71.7342 44.583 51 65.3172 51 90.9163C51 116.516 71.7342 137.25 97.3333 137.25Z" stroke="#F8F8F8" stroke-width="8" stroke-miterlimit="2" stroke-linejoin="round"/>
|
||||
<path d="M97.3327 114.083C110.132 114.083 120.499 103.716 120.499 90.9167C120.499 78.1171 110.132 67.75 97.3327 67.75C84.5331 67.75 74.166 78.1171 74.166 90.9167C74.166 103.716 84.5331 114.083 97.3327 114.083Z" stroke="#F8F8F8" stroke-width="8" stroke-miterlimit="2" stroke-linejoin="round"/>
|
||||
<path d="M97.3327 96.7083C100.518 96.7083 103.124 94.1021 103.124 90.9167C103.124 87.7312 100.518 85.125 97.3327 85.125C94.1473 85.125 91.541 87.7312 91.541 90.9167C91.541 94.1021 94.1473 96.7083 97.3327 96.7083Z" fill="#F8F8F8"/>
|
||||
<path d="M97.3327 44.5833V33M137.874 148.833L126.291 128.563M68.3743 128.563L56.791 148.833" stroke="#F8F8F8" stroke-width="8" stroke-miterlimit="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M151.785 75.2138C151.793 75.2892 151.798 75.3649 151.801 75.4408C151.824 75.9736 151.741 76.5057 151.558 77.0066C151.375 77.5075 151.095 77.9675 150.735 78.3602C150.374 78.7529 149.939 79.0707 149.456 79.2955C148.972 79.5203 148.449 79.6476 147.916 79.6701C147.383 79.6927 146.851 79.6101 146.35 79.427L146.35 79.4269L136.993 76.0046L123.532 82.2602C124.973 85.5813 124.054 89.8215 120.839 92.3288C116.722 95.5386 109.701 95.4832 100.304 89.8111L99.151 89.115L99.3628 87.7845C101.088 76.9439 105.573 71.5415 110.68 70.465C114.67 69.624 118.502 71.6563 120.111 74.8992L133.572 68.6436L136.989 59.285L136.989 59.2844C137.359 58.2728 138.115 57.4495 139.092 56.9955C140.069 56.5416 141.186 56.4943 142.198 56.864L141.533 58.6819L142.198 56.864C142.776 57.0754 143.293 57.4132 143.714 57.8464L144.456 55.8148L144.456 55.8143C144.826 54.8027 145.583 53.9793 146.559 53.5254C147.536 53.0715 148.653 53.0242 149.665 53.3939L148.978 55.2724L149.665 53.3939C150.243 53.6052 150.76 53.9431 151.182 54.3762L151.923 52.3447L151.924 52.3441C152.293 51.3325 153.05 50.5092 154.026 50.0552C155.003 49.6013 156.12 49.554 157.132 49.9237L156.445 51.8022L157.132 49.9237C158.144 50.2934 158.967 51.0498 159.421 52.0266C159.875 53.0033 159.922 54.1204 159.552 55.132L159.552 55.1326L156.946 62.2563L164.072 64.8577L164.072 64.858C164.573 65.041 165.033 65.3209 165.426 65.6817C165.819 66.0426 166.136 66.4772 166.361 66.9608C166.586 67.4445 166.713 67.9676 166.736 68.5005C166.758 69.0333 166.676 69.5654 166.493 70.0663L151.785 75.2138ZM151.785 75.2138L153.817 75.9567L153.817 75.9569C154.318 76.1399 154.85 76.2225 155.383 76.2L155.298 74.2018L155.383 76.2C155.916 76.1774 156.439 76.0501 156.923 75.8253C157.406 75.6006 157.841 75.2828 158.202 74.89C158.563 74.4973 158.842 74.0374 159.026 73.5364L159.026 73.5364C159.209 73.0355 159.291 72.5035 159.269 71.9706C159.265 71.8947 159.26 71.8191 159.253 71.7436L161.284 72.4866L161.284 72.4867C161.785 72.6698 162.317 72.7524 162.85 72.7298C163.383 72.7073 163.906 72.58 164.39 72.3552C164.873 72.1304 165.308 71.8126 165.669 71.4199C166.03 71.0272 166.31 70.5672 166.493 70.0663L151.785 75.2138Z" fill="#EDEDED" stroke="#171F3D" stroke-width="4"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_3404_153" x1="98.5" y1="6" x2="98.5" y2="179" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1B2447"/>
|
||||
<stop offset="1" stop-color="#0F1428"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
BIN
public/lovely_bedroom.png
Normal file
BIN
public/lovely_bedroom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 392 KiB |
@ -157,7 +157,10 @@ function QuestionnairePage(): JSX.Element {
|
||||
<BackgroundTopBlob
|
||||
className={styles["background-top-blob"]}
|
||||
width={pageWidth}
|
||||
height={214}
|
||||
height={145}
|
||||
cLeftStartX={65}
|
||||
cLeft={`C 32 108 11 95 0 87`}
|
||||
cRight={`C ${pageWidth - 23} 123 ${pageWidth - 36} 115 ${pageWidth - 69} 112`}
|
||||
/>
|
||||
<Header className={styles.header} />
|
||||
{currentQuestion && (!!currentStep || currentStep === 0) && (
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
text-align: center;
|
||||
color: rgb(142, 140, 240);
|
||||
position: relative;
|
||||
margin-top: 14px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -66,7 +66,7 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
scale: 1.4;
|
||||
/* scale: 1.4; */
|
||||
}
|
||||
|
||||
.header {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
export const onboardingTitles = [
|
||||
"Welcome to AURA",
|
||||
"Welcome\nto AURA",
|
||||
"Based on your answers",
|
||||
"We’ve created your astrological blueprint and guidance plan",
|
||||
"To help you find your perfect partner",
|
||||
|
||||
@ -552,6 +552,7 @@ export const stepsQuestionary: IStep[] = [
|
||||
id: "issueTogether",
|
||||
question: "Do you agree with the statement below?",
|
||||
description: "“My partner and I can talk about any issue together“",
|
||||
backgroundImage: "/lovely_bedroom.png",
|
||||
answers: [
|
||||
{
|
||||
id: "strongly_agree",
|
||||
|
||||
@ -14,6 +14,7 @@ function HyperPersonalizedAstrologyPage() {
|
||||
|
||||
return (
|
||||
<section className={`${styles.page} page`}>
|
||||
<div className={styles["background_wrap"]} />
|
||||
<Header
|
||||
isBackButtonVisible={false}
|
||||
classNameTitle={styles["header-title"]}
|
||||
|
||||
@ -6,16 +6,21 @@
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background: url("/hyperPersonalizedAstrology.png");
|
||||
background-position-y: bottom;
|
||||
background-position-x: center;
|
||||
background-size: cover;
|
||||
/* background: url("/hyperPersonalizedAstrology.png"); */
|
||||
/* background-position-y: center;
|
||||
background-position-x: center; */
|
||||
/* background-size: cover; */
|
||||
background-repeat: no-repeat;
|
||||
color: #fff;
|
||||
padding: 33px 16px;
|
||||
background-color: #171717;
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
/* background-attachment: fixed; */
|
||||
}
|
||||
|
||||
.page > * {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@ -53,4 +58,14 @@
|
||||
.button {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
|
||||
.background_wrap {
|
||||
z-index: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-image: url("/hyperPersonalizedAstrology.png");
|
||||
}
|
||||
@ -51,25 +51,27 @@ function OnboardingPage() {
|
||||
|
||||
return (
|
||||
<section className={`${styles.page} page`}>
|
||||
<img className={styles.image} src="/Leo-icon.png" alt="Leo" />
|
||||
<img className={styles.image} src="/leo.png" alt="Leo" />
|
||||
{onboardingTitles[activeIndexTitle] && (
|
||||
<Title className={`${styles.title} ${styles[periodClassName]}`}>
|
||||
{onboardingTitles[activeIndexTitle]}
|
||||
</Title>
|
||||
)}
|
||||
<div className={styles["progress-bar__text-container"]}>
|
||||
<Title variant="h2" className={styles["progress-bar__title"]}>
|
||||
Personality ...
|
||||
</Title>
|
||||
<p className={styles["progress-bar__percentage"]}>{progress}%</p>
|
||||
</div>
|
||||
<ProgressBarLine
|
||||
containerClassName={styles["progress-bar__container"]}
|
||||
lineClassName={styles["progress-bar__line"]}
|
||||
lineColor={"#3750A8"}
|
||||
value={progress}
|
||||
delay={(onboardingTitles.length * 5000) / 100}
|
||||
/>
|
||||
<footer className={styles.footer}>
|
||||
<div className={styles["progress-bar__text-container"]}>
|
||||
<Title variant="h2" className={styles["progress-bar__title"]}>
|
||||
Personality ...
|
||||
</Title>
|
||||
<p className={styles["progress-bar__percentage"]}>{progress}%</p>
|
||||
</div>
|
||||
<ProgressBarLine
|
||||
containerClassName={styles["progress-bar__container"]}
|
||||
lineClassName={styles["progress-bar__line"]}
|
||||
lineColor={"#3750A8"}
|
||||
value={progress}
|
||||
delay={(onboardingTitles.length * 5000) / 100}
|
||||
/>
|
||||
</footer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,17 +1,21 @@
|
||||
.page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-items: end;
|
||||
grid-template-rows: min-content min-content 1fr;
|
||||
height: fit-content;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
background: #0F1323;
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
padding: 15px 40px;
|
||||
padding: 15px 40px calc(0dvh + 63px);
|
||||
}
|
||||
|
||||
.image {
|
||||
margin-top: calc(50dvh - 200px);
|
||||
margin-top: 100px;
|
||||
width: 100%;
|
||||
max-width: 273px;
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -21,12 +25,9 @@
|
||||
font-size: 32px;
|
||||
opacity: 0;
|
||||
transition: opacity 1s;
|
||||
font-weight: 400;
|
||||
margin-top: 20px;
|
||||
/* animation-name: show-up;
|
||||
animation-duration: 5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear; */
|
||||
font-weight: bold;
|
||||
margin-top: -10px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.to-transparent {
|
||||
@ -40,20 +41,15 @@
|
||||
.progress-bar__container {
|
||||
background-color: #ACDCFF;
|
||||
height: 9px;
|
||||
position: fixed;
|
||||
bottom: calc(0dvh + 63px);
|
||||
max-width: 312px;
|
||||
}
|
||||
|
||||
.progress-bar__text-container {
|
||||
position: fixed;
|
||||
bottom: calc(0dvh + 77px);
|
||||
width: 100%;
|
||||
max-width: 297px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.progress-bar__text-container * {
|
||||
@ -65,6 +61,14 @@
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
@keyframes show-up {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
||||
@ -33,7 +33,7 @@ function PartnerRightPlacePage() {
|
||||
/>
|
||||
<Header isBackButtonVisible={false} />
|
||||
<div className={styles.circle}>
|
||||
<img src="/dartsV1.png" alt="The darts" />
|
||||
<img src="/dartsV1.svg" alt="The darts" />
|
||||
</div>
|
||||
<div>
|
||||
<Title variant="h1" className={styles.title}>
|
||||
|
||||
@ -2,11 +2,6 @@
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
background-position-y: top;
|
||||
background-position-x: center;
|
||||
background-repeat: no-repeat;
|
||||
@ -16,6 +11,12 @@
|
||||
background-color: #0F1323;
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
background-image: url(/satisfied-yes.png);
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
grid-template-rows: min-content 1fr min-content min-content;
|
||||
padding-bottom: calc(0dvh + 160px);
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -54,6 +55,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.button {
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import { useCallback } from "react";
|
||||
import { useCallback, useMemo } from "react";
|
||||
|
||||
interface IBackgroundTopBlobProps {
|
||||
width: number;
|
||||
height?: number;
|
||||
className?: string;
|
||||
fillPath?: string;
|
||||
cRight?: string;
|
||||
cLeft?: string;
|
||||
cLeftStartX?: number;
|
||||
}
|
||||
|
||||
function BackgroundTopBlob({
|
||||
@ -12,16 +15,29 @@ function BackgroundTopBlob({
|
||||
height = 256,
|
||||
className = "",
|
||||
fillPath = "white",
|
||||
cRight,
|
||||
cLeft,
|
||||
cLeftStartX = 100,
|
||||
}: IBackgroundTopBlobProps) {
|
||||
const _cRight = useMemo(() => {
|
||||
return cRight?.length
|
||||
? cRight
|
||||
: `C ${width - 2.728} ${height - 65.035} ${width - 46.795} ${
|
||||
height - 107.293
|
||||
} ${width - 101.394} ${height - 107.293}`;
|
||||
}, [cRight, height, width]);
|
||||
|
||||
const _cLeft = useMemo(() => {
|
||||
return cLeft?.length
|
||||
? cLeft
|
||||
: `C 44.7715 ${height - 107.293} 0 ${height - 152.065} 0 ${
|
||||
height - 207.2934
|
||||
}`;
|
||||
}, [cLeft, height]);
|
||||
|
||||
const getLinesPath = useCallback(() => {
|
||||
return `M 0 0 H ${width} V ${height} L ${width - 0.482} ${
|
||||
height - 11.484
|
||||
} C ${width - 2.728} ${height - 65.035} ${width - 46.795} ${
|
||||
height - 107.293
|
||||
} ${width - 101.394} ${height - 107.293} H 100 C 44.7715 ${
|
||||
height - 107.293
|
||||
} 0 ${height - 152.065} 0 ${height - 207.2934} V 0 Z`;
|
||||
}, [height, width]);
|
||||
return `M 0 0 H ${width} V ${height} ${_cRight} H ${cLeftStartX} ${_cLeft} V 0 Z`;
|
||||
}, [_cLeft, _cRight, cLeftStartX, height, width]);
|
||||
|
||||
return (
|
||||
<svg
|
||||
|
||||
@ -246,3 +246,11 @@ textarea {
|
||||
.slick-disabled {
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user