diff --git a/index.html b/index.html
index a36851aa80aba5b38f4b01644d41075c18f5d9e5..6279b89f1d3a5d5fa5b0b89c59f79106d677ecba 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
<title>Insu-Learn</title>
</head>
<body>
- <div id="root"></div>
+ <div style="width: 100%" id="root"></div>
<script src="https://code.createjs.com/1.0.0/createjs.min.js" type="text/javascript"></script>
<script src="/animations/intro.js" type="text/javascript"></script>
<script src="/animations/opening.js" type="text/javascript"></script>
diff --git a/src/App.tsx b/src/App.tsx
index b263349391e668a12c420bcbc086d9b7baee86d4..66ca2c2bb032adfa4f3aa2e57b41aeb1c524cd1d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,7 +14,7 @@ import SymptomsTest from "./pages/SymptomsTest";
const App: FC = () => {
return (
<>
- <div className="max-h-screen font-primary">
+ <div className="max-h-[100%] w-[100%] font-primary">
<header>
<Navbar />
</header>
diff --git a/src/assets/backgrounds/chapters.svg b/src/assets/backgrounds/chapters.svg
index 87acb7c887341efd4c3ac0e1994fedca602fe6d3..2ed0ccd898649b7ed36893e565be9b1d9a3635f1 100644
--- a/src/assets/backgrounds/chapters.svg
+++ b/src/assets/backgrounds/chapters.svg
@@ -2,9 +2,9 @@
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
- width="1923.7107mm"
- height="963.76428mm"
- viewBox="0 0 1923.7107 963.76429"
+ width="1869.6162mm"
+ height="805.08936mm"
+ viewBox="0 0 1869.6162 805.08936"
version="1.1"
id="svg5"
inkscape:export-filename="chapters.svg"
@@ -29,14 +29,14 @@
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.125"
- inkscape:cx="4052"
- inkscape:cy="600"
+ inkscape:cx="3396"
+ inkscape:cy="1160"
inkscape:window-width="1680"
inkscape:window-height="979"
inkscape:window-x="98"
inkscape:window-y="-8"
inkscape:window-maximized="1"
- inkscape:current-layer="g35056"
+ inkscape:current-layer="layer1"
showguides="true" />
<defs
id="defs2" />
@@ -44,529 +44,502 @@
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
- transform="translate(-38.269704,-1975.5681)">
- <g
- id="g35056"
- inkscape:label="CHAPTERS"
- inkscape:export-filename="insu-learn\src\assets\icons\chapters.svg"
+ transform="translate(-78.546209,-2059.9473)">
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.01711"
+ id="rect33996-6"
+ width="51.13673"
+ height="76.682518"
+ x="-1434.4978"
+ y="1843.2894"
+ ry="24.909613"
+ transform="matrix(0.81083178,-0.58527926,0.70556366,0.70864654,0,0)"
+ inkscape:export-filename=".\chapters.svg"
inkscape:export-xdpi="96"
- inkscape:export-ydpi="96"
- transform="matrix(1.0000035,0,0,0.98992506,-0.00341349,19.906897)">
- <rect
- style="fill:#aaccff;stroke:#000000;stroke-width:1.40061"
- id="rect1580-4"
- width="1926.5372"
- height="972.17285"
- x="28.38975"
- y="917.85132"
- ry="2.0906942"
- inkscape:export-filename="chapters.svg"
- inkscape:export-xdpi="96"
- inkscape:export-ydpi="96" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99372"
- id="rect33996-6"
- width="50.943424"
- height="76.257317"
- x="-1446.0994"
- y="1852.6027"
- ry="24.771488"
- transform="matrix(0.81390567,-0.58099703,0.70949537,0.7047101,0,0)"
- inkscape:export-filename=".\chapters.svg"
- inkscape:export-xdpi="96"
- inkscape:export-ydpi="96" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99858"
- id="rect33996-7"
- width="50.670727"
- height="76.817062"
- x="-200.76105"
- y="2375.8281"
- ry="24.953316"
- transform="matrix(0.99821421,-0.05973594,0.23736111,0.97142149,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:5.00789"
- id="rect33996-1"
- width="50.993126"
- height="76.615837"
- x="1489.1565"
- y="1659.7574"
- ry="24.887951"
- transform="matrix(0.77597986,0.63075769,-0.46467511,0.88548125,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:5.00805"
- id="rect33996-3"
- width="51.014683"
- height="76.58828"
- x="1544.13"
- y="1718.6154"
- ry="24.879"
- transform="matrix(0.75897824,0.65111599,-0.48772427,0.87299773,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99387"
- id="rect33996-9"
- width="51.116741"
- height="76.003189"
- x="-2207.1848"
- y="2129.6257"
- ry="24.688936"
- transform="matrix(0.67301157,-0.73963195,0.84238484,0.5388764,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99453"
- id="rect33996-10"
- width="51.220322"
- height="75.869835"
- x="-2418.4443"
- y="1977.2545"
- ry="24.645615"
- transform="matrix(0.57336895,-0.81929729,0.90480302,0.42583036,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:5.00329"
- id="rect33996-10-7"
- width="51.492676"
- height="75.73333"
- x="-2964.3123"
- y="420.50104"
- ry="24.601274"
- transform="matrix(-0.07600429,-0.99710749,0.9648248,-0.26289373,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99936"
- id="rect33996-63"
- width="51.468891"
- height="75.649643"
- x="-2896.1501"
- y="1046.5537"
- ry="24.574089"
- transform="matrix(0.18377851,-0.98296768,0.99999479,0.00322754,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:5.00053"
- id="rect33996-79"
- width="50.672638"
- height="76.874001"
- x="-558.83154"
- y="-2618.4656"
- ry="24.971811"
- transform="matrix(-0.99703044,-0.07700849,-0.10681949,-0.99427843,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99402"
- id="rect33996-5"
- width="50.876492"
- height="76.366844"
- x="1035.8567"
- y="-2630.0483"
- ry="24.807066"
- transform="matrix(-0.86250932,0.50604117,-0.64431153,-0.76476314,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:5.00659"
- id="rect33996-75"
- width="50.874725"
- height="76.754425"
- x="1340.8883"
- y="1679.2961"
- ry="24.932966"
- transform="matrix(0.86375726,0.50390813,-0.32540065,0.94557623,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:5.00853"
- id="rect33996-75-7"
- width="51.139057"
- height="76.416862"
- x="1895.4861"
- y="915.68011"
- ry="24.823317"
- transform="matrix(0.65278067,0.75754696,-0.61233875,0.79059551,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:5.003"
- id="rect33996-36"
- width="51.494881"
- height="75.721298"
- x="-2332.011"
- y="614.72833"
- ry="24.597368"
- transform="matrix(-0.05640277,-0.9984081,0.96995,-0.24330434,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99478"
- id="rect33996-36-4"
- width="51.246597"
- height="75.83844"
- x="-1669.1305"
- y="1899.0653"
- ry="24.635422"
- transform="matrix(0.54531483,-0.83823131,0.91892171,0.39443996,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99516"
- id="rect33996-77"
- width="50.768311"
- height="76.564377"
- x="-300.60025"
- y="2624.6748"
- ry="24.871233"
- transform="matrix(0.93610587,-0.35171836,0.506892,0.86200957,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:5.00241"
- id="rect33996-4"
- width="50.701534"
- height="76.888115"
- x="1161.3062"
- y="2216.5706"
- ry="24.976395"
- transform="matrix(0.97899293,0.20389418,-0.01722259,0.99985168,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:5.00761"
- id="rect33996-16"
- width="50.961388"
- height="76.655197"
- x="2118.1255"
- y="1417.7944"
- ry="24.900734"
- transform="matrix(0.80039422,0.59947401,-0.42966631,0.90298774,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:5.00584"
- id="rect33996-71"
- width="51.439098"
- height="75.889847"
- x="2590.1714"
- y="-907.78326"
- ry="24.652117"
- transform="matrix(0.26250458,0.96493075,-0.89569334,0.44467228,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:5.00553"
- id="rect33996-94"
- width="50.811901"
- height="76.816933"
- x="1897.644"
- y="1415.085"
- ry="24.953276"
- transform="matrix(0.90711418,0.42088462,-0.23757181,0.97136998,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99625"
- id="rect33996-94-5"
- width="50.71677"
- height="76.675606"
- x="439.05109"
- y="2942.2827"
- ry="24.907366"
- transform="matrix(0.96936013,-0.24564392,0.41035426,0.91192619,0,0)"
- inkscape:transform-center-x="-7.4735755"
- inkscape:transform-center-y="9.5081555" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:5.00578"
- id="rect33996-8"
- width="51.441666"
- height="75.883835"
- x="-3057.5508"
- y="469.4722"
- ry="24.650167"
- transform="matrix(-0.25665627,-0.96650275,0.8984344,-0.43910776,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:5.00607"
- id="rect33996-84"
- width="51.430573"
- height="75.909279"
- x="-3058.8667"
- y="504.62106"
- ry="24.65843"
- transform="matrix(-0.28101586,-0.95970313,0.88676373,-0.46222298,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99763"
- id="rect33996-95"
- width="51.418869"
- height="75.670509"
- x="-2502.0156"
- y="2175.0288"
- ry="24.580868"
- transform="matrix(0.30462505,-0.95247235,0.99132982,0.13139707,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99372"
- id="rect33996-31"
- width="50.943424"
- height="76.257317"
- x="-682.22711"
- y="2899.0815"
- ry="24.771488"
- transform="matrix(0.81390567,-0.58099703,0.70949537,0.7047101,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.9948"
- id="rect33996-49"
- width="51.248718"
- height="75.83596"
- x="-1910.1702"
- y="2756.085"
- ry="24.634613"
- transform="matrix(0.54298862,-0.83974005,0.92003134,0.39184478,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99372"
- id="rect33996-72"
- width="50.943424"
- height="76.257317"
- x="-677.2312"
- y="2994.7837"
- ry="24.771488"
- transform="matrix(0.81390567,-0.58099703,0.70949537,0.7047101,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99397"
- id="rect33996-798"
- width="51.138149"
- height="75.974457"
- x="-1042.4912"
- y="2580.1138"
- ry="24.679604"
- transform="matrix(0.65361634,-0.75682606,0.85619067,0.51665998,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99372"
- id="rect33996-0"
- width="50.943424"
- height="76.257317"
- x="-388.21664"
- y="2970.5217"
- ry="24.771488"
- transform="matrix(0.81390567,-0.58099703,0.70949537,0.7047101,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99372"
- id="rect33996-05"
- width="50.943424"
- height="76.257317"
- x="-389.41428"
- y="3073.3293"
- ry="24.771488"
- transform="matrix(0.81390567,-0.58099703,0.70949537,0.7047101,0,0)" />
- <rect
- style="fill:#80b3ff;stroke:none;stroke-width:4.99372"
- id="rect33996"
- width="50.943424"
- height="76.257317"
- x="-1449.5822"
- y="1758.1478"
- ry="24.771488"
- transform="matrix(0.81390567,-0.58099703,0.70949537,0.7047101,0,0)" />
- <a
- id="a113"
- xlink:href="http://localhost:5173/opening"
- onclick="alert('Circle Clicked!');"
- transform="matrix(1,0,0,1.0163762,-2.1166593,7.5439399)">
- <g
- id="chpt1"
- inkscape:label="chpt1">
- <ellipse
- style="fill:#0044aa;stroke:none;stroke-width:21.4606"
- id="path34420"
- cx="314.32501"
- cy="2196.0417"
- rx="94.191666"
- ry="89.958336" />
- <text
- xml:space="preserve"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:117.951px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:49.8288"
- x="241.49048"
- y="2545.0378"
- id="text34914"
- transform="scale(1.1429339,0.87494122)"><tspan
- sodipodi:role="line"
- id="tspan34912"
- style="font-size:117.951px;stroke-width:49.8288"
- x="241.49048"
- y="2545.0378">1</tspan></text>
- </g>
- </a>
+ inkscape:export-ydpi="96" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.02502"
+ id="rect33996-7"
+ width="50.672939"
+ height="77.6287"
+ x="-195.0656"
+ y="2376.675"
+ ry="25.21697"
+ transform="matrix(0.99817414,-0.06040192,0.23488023,0.97202432,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.04107"
+ id="rect33996-1"
+ width="51.221077"
+ height="77.289093"
+ x="1484.5454"
+ y="1655.452"
+ ry="25.106651"
+ transform="matrix(0.77252919,0.63497925,-0.46062899,0.88759277,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.04136"
+ id="rect33996-3"
+ width="51.257645"
+ height="77.242538"
+ x="1539.6531"
+ y="1714.8236"
+ ry="25.09153"
+ transform="matrix(0.75538336,0.65528313,-0.48359485,0.87529196,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.01735"
+ id="rect33996-9"
+ width="51.430607"
+ height="76.251389"
+ x="-2200.3982"
+ y="2120.3728"
+ ry="24.76956"
+ transform="matrix(0.66890672,-0.74334635,0.8396458,0.54313435,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.01841"
+ id="rect33996-10"
+ width="51.605911"
+ height="76.02475"
+ x="-2414.7678"
+ y="1967.4965"
+ ry="24.695936"
+ transform="matrix(0.56908679,-0.82227746,0.90296254,0.42971927,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.03301"
+ id="rect33996-10-7"
+ width="52.065723"
+ height="75.792465"
+ x="-2973.7988"
+ y="422.65833"
+ ry="24.620483"
+ transform="matrix(-0.07516804,-0.99717088,0.96407536,-0.26562887,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.02634"
+ id="rect33996-63"
+ width="52.025635"
+ height="75.649918"
+ x="-2903.1655"
+ y="1042.1338"
+ ry="24.574177"
+ transform="matrix(0.18181247,-0.98333322,0.99999467,0.00326365,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.0283"
+ id="rect33996-79"
+ width="50.676201"
+ height="77.724686"
+ x="-561.43799"
+ y="-2623.1841"
+ ry="25.24815"
+ transform="matrix(-0.99696391,-0.07786498,-0.10565073,-0.9944033,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.01759"
+ id="rect33996-5"
+ width="51.023056"
+ height="76.868034"
+ x="1023.3347"
+ y="-2626.4705"
+ ry="24.969873"
+ transform="matrix(-0.86003478,0.51023542,-0.64011277,-0.76828096,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.03877"
+ id="rect33996-75"
+ width="51.020054"
+ height="77.523048"
+ x="1336.8438"
+ y="1675.0703"
+ ry="25.182646"
+ transform="matrix(0.86129989,0.50809694,-0.3221755,0.94667996,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.04222"
+ id="rect33996-75-7"
+ width="51.468399"
+ height="76.952698"
+ x="1892.8129"
+ y="906.23431"
+ ry="24.997377"
+ transform="matrix(0.64860586,0.76112446,-0.60807707,0.793878,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.03252"
+ id="rect33996-36"
+ width="52.069439"
+ height="75.77198"
+ x="-2334.4055"
+ y="616.49591"
+ ry="24.613834"
+ transform="matrix(-0.05578058,-0.99844305,0.96930457,-0.24586307,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.01881"
+ id="rect33996-36-4"
+ width="51.650349"
+ height="75.971352"
+ x="-1660.0465"
+ y="1889.2755"
+ ry="24.678598"
+ transform="matrix(0.54105401,-0.84098785,0.91731724,0.39815711,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.01942"
+ id="rect33996-77"
+ width="50.839104"
+ height="77.202148"
+ x="-288.83395"
+ y="2623.8718"
+ ry="25.078405"
+ transform="matrix(0.93480557,-0.35515988,0.50270632,0.86445726,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.03151"
+ id="rect33996-4"
+ width="50.725426"
+ height="77.748466"
+ x="1161.4348"
+ y="2217.5342"
+ ry="25.255875"
+ transform="matrix(0.9785353,0.20607927,-0.01703207,0.99985494,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.04058"
+ id="rect33996-16"
+ width="51.167221"
+ height="77.355568"
+ x="2116.2671"
+ y="1411.2588"
+ ry="25.128242"
+ transform="matrix(0.79717721,0.60374539,-0.42577765,0.90482783,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.03747"
+ id="rect33996-71"
+ width="51.975395"
+ height="76.058769"
+ x="2595.3499"
+ y="-916.14496"
+ ry="24.706991"
+ transform="matrix(0.25979689,0.96566328,-0.89370713,0.44865082,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.03692"
+ id="rect33996-94"
+ width="50.913261"
+ height="77.628487"
+ x="1895.6863"
+ y="1407.9331"
+ ry="25.216902"
+ transform="matrix(0.90531148,0.42474831,-0.23508898,0.97197385,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.02119"
+ id="rect33996-94-5"
+ width="50.751369"
+ height="77.39003"
+ x="449.21191"
+ y="2946.1929"
+ ry="25.139439"
+ transform="matrix(0.96870264,-0.24822407,0.40656752,0.91362074,0,0)"
+ inkscape:transform-center-x="-7.4735328"
+ inkscape:transform-center-y="9.7123748" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.03735"
+ id="rect33996-8"
+ width="51.979729"
+ height="76.048553"
+ x="-3067.6384"
+ y="476.69043"
+ ry="24.703676"
+ transform="matrix(-0.2540004,-0.96720411,0.8964915,-0.44306094,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.03786"
+ id="rect33996-84"
+ width="51.961021"
+ height="76.091812"
+ x="-3068.8071"
+ y="512.62476"
+ ry="24.717724"
+ transform="matrix(-0.27814806,-0.96053821,0.8846396,-0.46627542,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.02345"
+ id="rect33996-95"
+ width="51.94128"
+ height="75.685463"
+ x="-2503.3669"
+ y="2168.1323"
+ ry="24.58573"
+ transform="matrix(0.30156229,-0.95344648,0.99113729,0.13284152,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.01711"
+ id="rect33996-31"
+ width="51.13673"
+ height="76.682518"
+ x="-667.72705"
+ y="2895.6035"
+ ry="24.909613"
+ transform="matrix(0.81083178,-0.58527926,0.70556366,0.70864654,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.01884"
+ id="rect33996-49"
+ width="51.653931"
+ height="75.967133"
+ x="-1903.0116"
+ y="2747.7903"
+ ry="24.677223"
+ transform="matrix(0.53873086,-0.84247793,0.91844594,0.39554652,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.01711"
+ id="rect33996-72"
+ width="51.13673"
+ height="76.682518"
+ x="-662.71216"
+ y="2991.8391"
+ ry="24.909613"
+ transform="matrix(0.81083178,-0.58527926,0.70556366,0.70864654,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.01752"
+ id="rect33996-798"
+ width="51.466862"
+ height="76.202583"
+ x="-1028.5128"
+ y="2572.124"
+ ry="24.753708"
+ transform="matrix(0.64944407,-0.76040937,0.85363055,0.52087895,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.01711"
+ id="rect33996-0"
+ width="51.13673"
+ height="76.682518"
+ x="-372.60095"
+ y="2967.4421"
+ ry="24.909613"
+ transform="matrix(0.81083178,-0.58527926,0.70556366,0.70864654,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.01711"
+ id="rect33996-05"
+ width="51.13673"
+ height="76.682518"
+ x="-373.80313"
+ y="3070.8228"
+ ry="24.909613"
+ transform="matrix(0.81083178,-0.58527926,0.70556366,0.70864654,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:5.01711"
+ id="rect33996"
+ width="51.13673"
+ height="76.682518"
+ x="-1437.9939"
+ y="1748.308"
+ ry="24.909613"
+ transform="matrix(0.81083178,-0.58527926,0.70556366,0.70864654,0,0)" />
+ <a
+ id="a113"
+ xlink:href="http://localhost:5173/opening"
+ onclick="alert('Circle Clicked!');"
+ transform="matrix(1.0000035,0,0,1.0277526,-2.1200802,-16.293452)">
<g
- id="g37326"
- inkscape:label="chpt2"
- transform="matrix(1,0,0,1.0163762,-2.1166593,7.5439399)">
+ id="chpt1"
+ inkscape:label="chpt1">
<ellipse
style="fill:#0044aa;stroke:none;stroke-width:21.4606"
- id="path34420-0"
- cx="234.95001"
- cy="2643.7166"
+ id="path34420"
+ cx="314.32501"
+ cy="2196.0417"
rx="94.191666"
ry="89.958336" />
<text
xml:space="preserve"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:116.676px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:49.29"
- x="200.23006"
- y="2669.0283"
- id="text34968"
- transform="scale(0.99366294,1.0063775)"><tspan
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:117.951px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:49.8288"
+ x="241.49048"
+ y="2545.0378"
+ id="text34914"
+ transform="scale(1.1429339,0.87494122)"><tspan
sodipodi:role="line"
- id="tspan34966"
- style="stroke-width:49.29"
- x="200.23006"
- y="2669.0283">2</tspan></text>
+ id="tspan34912"
+ style="font-size:117.951px;stroke-width:49.8288"
+ x="241.49048"
+ y="2545.0378">1</tspan></text>
</g>
- <g
- id="g37331"
- inkscape:label="chpt3"
- transform="matrix(1,0,0,1.0163762,-2.1166593,7.5439399)">
- <ellipse
- style="fill:#0044aa;stroke:none;stroke-width:21.4606"
- id="path34420-02"
- cx="817.03339"
- cy="2709.3335"
- rx="94.191666"
- ry="89.958336" />
- <text
- xml:space="preserve"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:129.407px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:54.6684"
+ </a>
+ <g
+ id="g37326"
+ inkscape:label="chpt2"
+ transform="matrix(1.0000035,0,0,1.0277526,-2.1200802,-16.293452)">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-0"
+ cx="234.95001"
+ cy="2643.7166"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:116.676px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:49.29"
+ x="200.23006"
+ y="2669.0283"
+ id="text34968"
+ transform="scale(0.99366294,1.0063775)"><tspan
+ sodipodi:role="line"
+ id="tspan34966"
+ style="stroke-width:49.29"
+ x="200.23006"
+ y="2669.0283">2</tspan></text>
+ </g>
+ <g
+ id="g37331"
+ inkscape:label="chpt3"
+ transform="matrix(1.0000035,0,0,1.0277526,-2.1200802,-16.293452)">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-02"
+ cx="817.03339"
+ cy="2709.3335"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:129.407px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:54.6684"
+ x="731.18695"
+ y="2942.96"
+ id="text34972"
+ transform="scale(1.0702498,0.9343613)"><tspan
+ sodipodi:role="line"
+ id="tspan34970"
+ style="stroke-width:54.6684"
x="731.18695"
- y="2942.96"
- id="text34972"
- transform="scale(1.0702498,0.9343613)"><tspan
- sodipodi:role="line"
- id="tspan34970"
- style="stroke-width:54.6684"
- x="731.18695"
- y="2942.96">3</tspan></text>
- </g>
- <g
- id="g37336"
- inkscape:label="chpt4"
- transform="matrix(1,0,0,1.0163762,-2.1166593,7.5439399)">
- <ellipse
- style="fill:#0044aa;stroke:none;stroke-width:21.4606"
- id="path34420-9"
- cx="611.71667"
- cy="2408.7668"
- rx="94.191666"
- ry="89.958336" />
- <text
- xml:space="preserve"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:133.985px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:56.6025"
+ y="2942.96">3</tspan></text>
+ </g>
+ <g
+ id="g37336"
+ inkscape:label="chpt4"
+ transform="matrix(1.0000035,0,0,1.0277526,-2.1200802,-16.293452)">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-9"
+ cx="611.71667"
+ cy="2408.7668"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:133.985px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:56.6025"
+ x="554.00641"
+ y="2495.2522"
+ id="text34976"
+ transform="scale(1.0178015,0.98250987)"><tspan
+ sodipodi:role="line"
+ id="tspan34974"
+ style="stroke-width:56.6025"
x="554.00641"
- y="2495.2522"
- id="text34976"
- transform="scale(1.0178015,0.98250987)"><tspan
- sodipodi:role="line"
- id="tspan34974"
- style="stroke-width:56.6025"
- x="554.00641"
- y="2495.2522">4</tspan></text>
- </g>
- <g
- id="g37341"
- inkscape:label="chpt5"
- transform="matrix(1,0,0,1.0163762,-2.1166593,7.5439399)">
- <ellipse
- style="fill:#0044aa;stroke:none;stroke-width:21.4606"
- id="path34420-8"
- cx="982.13336"
- cy="2222.5"
- rx="94.191666"
- ry="89.958336" />
- <text
- xml:space="preserve"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:136.771px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:57.7794"
+ y="2495.2522">4</tspan></text>
+ </g>
+ <g
+ id="g37341"
+ inkscape:label="chpt5"
+ transform="matrix(1.0000035,0,0,1.0277526,-2.1200802,-16.293452)">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-8"
+ cx="982.13336"
+ cy="2222.5"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:136.771px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:57.7794"
+ x="896.5127"
+ y="2387.0181"
+ id="text34980"
+ transform="scale(1.0547038,0.9481335)"><tspan
+ sodipodi:role="line"
+ id="tspan34978"
+ style="stroke-width:57.7794"
x="896.5127"
- y="2387.0181"
- id="text34980"
- transform="scale(1.0547038,0.9481335)"><tspan
- sodipodi:role="line"
- id="tspan34978"
- style="stroke-width:57.7794"
- x="896.5127"
- y="2387.0181">5</tspan></text>
- </g>
- <g
- id="g37346"
- inkscape:label="chpt6"
- transform="matrix(1,0,0,1.0163762,-2.1166593,7.5439399)">
- <ellipse
- style="fill:#0044aa;stroke:none;stroke-width:21.4606"
- id="path34420-3"
- cx="1098.5499"
- cy="2713.5667"
- rx="94.191666"
- ry="89.958336" />
- <text
- xml:space="preserve"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:138.593px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:58.5488"
+ y="2387.0181">5</tspan></text>
+ </g>
+ <g
+ id="g37346"
+ inkscape:label="chpt6"
+ transform="matrix(1.0000035,0,0,1.0277526,-2.1200802,-16.293452)">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-3"
+ cx="1098.5499"
+ cy="2713.5667"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:138.593px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:58.5488"
+ x="1056.5385"
+ y="2769.1133"
+ id="text34984"
+ transform="scale(1.0033095,0.99670141)"><tspan
+ sodipodi:role="line"
+ id="tspan34982"
+ style="stroke-width:58.5488"
x="1056.5385"
- y="2769.1133"
- id="text34984"
- transform="scale(1.0033095,0.99670141)"><tspan
- sodipodi:role="line"
- id="tspan34982"
- style="stroke-width:58.5488"
- x="1056.5385"
- y="2769.1133">6</tspan></text>
- </g>
- <g
- id="g37351"
- inkscape:label="chpt7"
- transform="matrix(1,0,0,1.0163762,-2.1166593,7.5439399)">
- <ellipse
- style="fill:#0044aa;stroke:none;stroke-width:21.4606"
- id="path34420-2"
- cx="1697.5667"
- cy="2700.8667"
- rx="94.191666"
- ry="89.958336" />
- <text
- xml:space="preserve"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:139.259px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:58.8305"
+ y="2769.1133">6</tspan></text>
+ </g>
+ <g
+ id="g37351"
+ inkscape:label="chpt7"
+ transform="matrix(1.0000035,0,0,1.0277526,-2.1200802,-16.293452)">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-2"
+ cx="1697.5667"
+ cy="2700.8667"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:139.259px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:58.8305"
+ x="1567.8684"
+ y="2900.6326"
+ id="text34988"
+ transform="scale(1.0578638,0.94530126)"><tspan
+ sodipodi:role="line"
+ id="tspan34986"
+ style="stroke-width:58.8305"
x="1567.8684"
- y="2900.6326"
- id="text34988"
- transform="scale(1.0578638,0.94530126)"><tspan
- sodipodi:role="line"
- id="tspan34986"
- style="stroke-width:58.8305"
- x="1567.8684"
- y="2900.6326">7</tspan></text>
- </g>
- <g
- id="g37356"
- inkscape:label="chpt8"
- transform="matrix(1,0,0,1.0163762,-2.1166593,7.5439399)">
- <ellipse
- style="fill:#0044aa;stroke:none;stroke-width:21.4606"
- id="path34420-21"
- cx="1416.0499"
- cy="2317.7498"
- rx="94.191666"
- ry="89.958336" />
- <text
- xml:space="preserve"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:138.937px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:58.6941"
+ y="2900.6326">7</tspan></text>
+ </g>
+ <g
+ id="g37356"
+ inkscape:label="chpt8"
+ transform="matrix(1.0000035,0,0,1.0277526,-2.1200802,-16.293452)">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-21"
+ cx="1416.0499"
+ cy="2317.7498"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:138.937px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:58.6941"
+ x="1372.9524"
+ y="2369.271"
+ id="text34992"
+ transform="scale(1.0031428,0.99686703)"><tspan
+ sodipodi:role="line"
+ id="tspan34990"
+ style="stroke-width:58.6941"
x="1372.9524"
- y="2369.271"
- id="text34992"
- transform="scale(1.0031428,0.99686703)"><tspan
- sodipodi:role="line"
- id="tspan34990"
- style="stroke-width:58.6941"
- x="1372.9524"
- y="2369.271">8</tspan></text>
- </g>
- <g
- id="g37361"
- inkscape:label="chpt9"
- transform="matrix(1,0,0,1.0163762,-2.1166593,7.5439399)">
- <ellipse
- style="fill:#0044aa;stroke:none;stroke-width:21.4606"
- id="path34420-21-7"
- cx="1714.5"
- cy="2167.4666"
- rx="94.191666"
- ry="89.958336" />
- <text
- xml:space="preserve"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:132.455px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:55.9558"
+ y="2369.271">8</tspan></text>
+ </g>
+ <g
+ id="g37361"
+ inkscape:label="chpt9"
+ transform="matrix(1.0000035,0,0,1.0277526,-2.1200802,-16.293452)">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-21-7"
+ cx="1714.5"
+ cy="2167.4666"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:132.455px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:55.9558"
+ x="1670.8499"
+ y="2223.9648"
+ id="text34996"
+ transform="scale(1.0053854,0.99464346)"><tspan
+ sodipodi:role="line"
+ id="tspan34994"
+ style="stroke-width:55.9558"
x="1670.8499"
- y="2223.9648"
- id="text34996"
- transform="scale(1.0053854,0.99464346)"><tspan
- sodipodi:role="line"
- id="tspan34994"
- style="stroke-width:55.9558"
- x="1670.8499"
- y="2223.9648">9</tspan></text>
- </g>
- <rect
- style="fill:none;stroke:none;stroke-width:2.23213"
- id="rect1457"
- width="1917.6934"
- height="1034.8932"
- x="42.506302"
- y="1849.4105"
- ry="2.1387188" />
+ y="2223.9648">9</tspan></text>
</g>
</g>
</svg>
diff --git a/src/index.css b/src/index.css
index c09640bc1c1e5983d034b5e0321fafb2c6a175c4..842da368f5d2230a4860c95ea82512849c3bf646 100644
--- a/src/index.css
+++ b/src/index.css
@@ -29,6 +29,8 @@ body {
display: flex;
flex-direction: column;
position: relative;
+ margin: 0;
+
}
h1 {
@@ -190,3 +192,32 @@ strong {
.card .back {
transform: rotateY(180deg);
}
+
+.chapter {
+ width: 12rem;
+ height: 12rem;
+ background-color: #3D348B;
+ color: #fff;
+ font-family: 'Bauhaus 93', sans-serif;
+ font-size: 3rem;
+ border-radius: 50%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ transition: transform 0.3s ease-in-out;
+}
+
+.chapter:hover {
+ transform: scale(1.2);
+}
+
+.chapter-name {
+ font-size: 1.7rem;
+}
+
+.line {
+ border-top: 4px solid #fff;
+ width: 6rem;
+ margin: 0 20px;
+}
diff --git a/src/pages/Chapters.tsx b/src/pages/Chapters.tsx
index a3c761139da5b6dc69122e1804172bdadaf1e2be..fad8872caec0be77db69d790e113bf3012bf758b 100644
--- a/src/pages/Chapters.tsx
+++ b/src/pages/Chapters.tsx
@@ -1,19 +1,28 @@
-import chapters from '../assets/backgrounds/chapters.svg';
+import {useNavigate} from "react-router-dom";
const Chapters = () => {
+ const navigate = useNavigate();
+
+ const chapters = [
+ {id: 'chpt1', label: '1', name: 'Introduction'},
+ {id: 'chpt2', label: '2', name: 'Insulin'},
+ {id: 'chpt3', label: '3', name: 'Symptoms'},
+ {id: 'chpt4', label: '4', name: 'Treatment'},
+ ];
+
const handleChapterClick = (chapterId: string) => {
switch (chapterId) {
case 'chpt1':
- window.location.href = '/intro';
+ navigate('/intro');
break;
case 'chpt2':
- window.location.href = '/insulin';
+ navigate('/insulin');
break;
case 'chpt3':
- window.location.href = '/symptoms';
+ navigate('/symptoms');
break;
case 'chpt4':
- window.location.href = '/treatment';
+ navigate('/treatment');
break;
default:
break;
@@ -22,41 +31,27 @@ const Chapters = () => {
return (
<>
- <div className="flex absolute bottom-0 bg-primary-dark left-0 z-3">
- <img src={chapters} alt={chapters}
- onClick={(e: React.MouseEvent<HTMLImageElement>) => {
- const target = e.target as HTMLImageElement;
- console.log(target.src);
- if (target.id) {
- handleChapterClick(target.id);
- }
- }}
- />
- <div
- id="chpt1"
- className="absolute w-44 h-44 left-[9%] top-[25%] z-10 cursor-pointer"
- onClick={() => handleChapterClick('chpt1')}
- ></div>
-
- <div
- id="chpt2"
- className="absolute w-44 h-44 left-[5%] bottom-[12%] z-10 cursor-pointer"
- onClick={() => handleChapterClick('chpt2')}
- ></div>
-
- <div
- id="chpt3"
- className="absolute w-44 h-44 left-[35%] bottom-[5%] z-10 cursor-pointer"
- onClick={() => handleChapterClick('chpt3')}
- ></div>
-
- <div
- id="chpt4"
- className="absolute w-44 h-44 left-[25%] top-[48%] z-10 cursor-pointer"
- onClick={() => handleChapterClick('chpt4')}
- ></div>
+ <div className="w-screen h-screen bg-primary-dark flex items-center justify-center">
+ {chapters.map((chapter, index) => (
+ <>
+ {index > 0 && (
+ <div className="line"></div>
+ )}
+ <div key={chapter.id}>
+ <div
+ id={chapter.id}
+ className="chapter cursor-pointer"
+ onClick={() => handleChapterClick(chapter.id)}
+ >
+ <div>{chapter.label}</div>
+ <div className="chapter-name">{chapter.name}</div>
+ </div>
+ </div>
+ </>
+ ))}
</div>
</>
);
};
+
export default Chapters;
diff --git a/src/pages/Navbar.tsx b/src/pages/Navbar.tsx
index 7872e917247914e032682f2aabcb1b358e1b2612..c34b9f10daea8078d21febe8f062eeedc1f2c9fc 100644
--- a/src/pages/Navbar.tsx
+++ b/src/pages/Navbar.tsx
@@ -9,8 +9,8 @@ const Navbar = () => {
return (
- <nav className="bg-primary-main z-10 relative w-screen">
- <div className="p-2 mx-auto flex justify-between">
+ <nav className="bg-primary-main z-10 relative w-[100%]">
+ <div className="p-2 flex justify-between">
<div>
<img src={logo} alt="Logo"
onClick={() => navigate("/")}
diff --git a/src/pages/Opening.tsx b/src/pages/Opening.tsx
index 3232d50f24815a4d9e2c1d39620450c362d4f647..e9e8574c54bd113ca0d77836d66f936d2336f78c 100644
--- a/src/pages/Opening.tsx
+++ b/src/pages/Opening.tsx
@@ -84,7 +84,7 @@ const Opening = () => {
</div>
<div className="flex items-center">
- <div className="w-screen">
+ <div className="w-[100%]">
<div className="text mt-8">
<div className="flex relative">
<div id="animation-container">