-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
64 lines (61 loc) · 5.03 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Panic Attack Helper</title>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet" />
</head>
<body>
<div class="app">
<div class="intro-page" id="introPage">
<p class="heading">Are you having a panic attack?</p>
<a href="app.html" class="help-btn" id="helpButton">
<img src="./svg/HELP.svg" alt="help button">
<g id="Group_1">
<g id="Union">
<mask id="path-1-inside-1" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M196.694 76.876H211.244V125.381H211.158C210.072 175.492 163.376 215.821 105.931 215.821C47.8043 215.821 0.683716 174.53 0.683716 123.595C0.683716 122.488 0.705959 121.386 0.750076 120.289V76.876H15.1671C33.4611 49.6436 67.2603 31.3682 105.931 31.3682C144.601 31.3682 178.4 49.6436 196.694 76.876Z" />
</mask>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M196.694 76.876H211.244V125.381H211.158C210.072 175.492 163.376 215.821 105.931 215.821C47.8043 215.821 0.683716 174.53 0.683716 123.595C0.683716 122.488 0.705959 121.386 0.750076 120.289V76.876H15.1671C33.4611 49.6436 67.2603 31.3682 105.931 31.3682C144.601 31.3682 178.4 49.6436 196.694 76.876Z"
fill="url(#paint0_radial)" />
<path
d="M211.244 76.876H215.244V72.876H211.244V76.876ZM196.694 76.876L193.374 79.1065L194.562 80.876H196.694V76.876ZM211.244 125.381V129.381H215.244V125.381H211.244ZM211.158 125.381V121.381H207.244L207.159 125.294L211.158 125.381ZM0.750076 120.289L4.74685 120.45L4.75008 120.369V120.289H0.750076ZM0.750076 76.876V72.876H-3.24992V76.876H0.750076ZM15.1671 76.876V80.876H17.2988L18.4875 79.1065L15.1671 76.876ZM211.244 72.876H196.694V80.876H211.244V72.876ZM215.244 125.381V76.876H207.244V125.381H215.244ZM211.158 129.381H211.244V121.381H211.158V129.381ZM207.159 125.294C206.13 172.77 161.692 211.821 105.931 211.821V219.821C165.059 219.821 214.014 178.214 215.157 125.468L207.159 125.294ZM105.931 211.821C49.5009 211.821 4.68372 171.841 4.68372 123.595H-3.31628C-3.31628 177.219 46.1078 219.821 105.931 219.821V211.821ZM4.68372 123.595C4.68372 122.542 4.70488 121.493 4.74685 120.45L-3.24669 120.128C-3.29296 121.279 -3.31628 122.435 -3.31628 123.595H4.68372ZM-3.24992 76.876V120.289H4.75008V76.876H-3.24992ZM15.1671 72.876H0.750076V80.876H15.1671V72.876ZM18.4875 79.1065C35.9841 53.0611 68.4922 35.3682 105.931 35.3682V27.3682C66.0285 27.3682 30.9381 46.2262 11.8468 74.6454L18.4875 79.1065ZM105.931 35.3682C143.369 35.3682 175.877 53.0611 193.374 79.1065L200.014 74.6454C180.923 46.2262 145.833 27.3682 105.931 27.3682V35.3682Z"
fill="#323345" mask="url(#path-1-inside-1)" />
</g>
<path id="Ellipse_2"
d="M209 93C209 143.037 163.12 184 106 184C48.8796 184 3 143.037 3 93C3 42.9633 48.8796 2 106 2C163.12 2 209 42.9633 209 93Z"
fill="url(#paint1_radial)" stroke="#323345" stroke-width="4" />
<path id="HELP"
d="M59.8808 111V84.92H65.7608V94.96H74.7608V84.92H80.6808V111H74.7608V100.12H65.7608V111H59.8808ZM88.8339 111V84.92H105.154V89.88H94.7139V95.12H103.594V100.04H94.7139V106.04H105.554V111H88.8339ZM112.748 111V84.92H118.628V106.04H128.948V111H112.748ZM135.451 111V84.92H144.411C145.851 84.92 147.198 85.0667 148.451 85.36C149.704 85.6267 150.798 86.0933 151.731 86.76C152.664 87.4 153.398 88.2667 153.931 89.36C154.491 90.4267 154.771 91.7467 154.771 93.32C154.771 94.84 154.491 96.16 153.931 97.28C153.398 98.4 152.664 99.32 151.731 100.04C150.798 100.76 149.718 101.293 148.491 101.64C147.264 101.987 145.958 102.16 144.571 102.16H141.331V111H135.451ZM141.331 97.48H144.211C147.411 97.48 149.011 96.0933 149.011 93.32C149.011 91.96 148.584 91 147.731 90.44C146.878 89.88 145.651 89.6 144.051 89.6H141.331V97.48Z"
fill="white" />
</g>
<defs>
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
gradientTransform="translate(105.997 101.128) rotate(90) scale(24.2525 105.247)">
<stop stop-color="#FA807D" />
<stop offset="1" stop-color="#CD5551" />
</radialGradient>
<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
gradientTransform="translate(106 93) rotate(90) scale(93 105)">
<stop offset="0.125" stop-color="#FA807D" />
<stop offset="0.4375" stop-color="#FE6A66" />
<stop offset="1" stop-color="#EA6965" />
</radialGradient>
</defs>
</svg>
</a>
<p class="heading heading2">
Just press this button,<br />and you will be
<span class="pink">okay.</span>
</p>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>