Skip to content

Commit 37ff08a

Browse files
NamkhangNLeNamkhangNLe
authored
Merge pull request #68 from NamkhangNLe/63-final-visual-works-finalize-fade-delays-redo-color-schemes-finalize-spacing-and-lowercase-letters
2 parents b39c37a + 47f40a2 commit 37ff08a

15 files changed

+208
-129
lines changed

‎DiagnoseMeApp/public/home.css

+51-50
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
1+
h1 {
2+
background: linear-gradient(to right, rgb(80, 52, 221) 0%, rgb(221, 52, 218));
3+
-webkit-background-clip: text;
4+
-webkit-text-fill-color: transparent;
5+
text-align: center;
6+
font-size: 1.9em;
7+
margin-top: 10px;
8+
opacity: 1;
9+
text-shadow: 0px 0px 1px rgba(25,139,154, 0.5); /* Add this line */
10+
}
11+
112
.subtitle {
213
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
3-
4-
font-size: 0.5em;
5-
margin-top: -20px;
14+
font-size: 1em;
15+
padding: 5px;
16+
margin-bottom: 20px;
617
width: 100%;
7-
818
background: linear-gradient(to right, #685896, #361e7c);
919
border-radius: 15px;
1020
-webkit-background-clip: text;
@@ -15,28 +25,32 @@
1525

1626
p {
1727
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
18-
font-size: 0.75em;
28+
font-size: 0.85em;
29+
font-style: italic;
1930
margin-top: 10px;
2031
width: 100%;
2132
text-align: center;
22-
color: white;
33+
color: #592c7d;
34+
}
35+
36+
p2 {
37+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
38+
font-size: 1em;
39+
font-style: bold;
40+
margin-left: 40px;
41+
width: 100%;
42+
text-align: center;
43+
color: #20bba4;
44+
2345
}
2446

2547
.github-button {
2648
width: 30px; /* adjust as needed */
2749
height: 30px; /* adjust as needed */
28-
padding-bottom: 5px;
50+
padding-bottom: 10px;
2951
}
3052

31-
h1 {
32-
background: linear-gradient(to right, #91dfe9 0%, #188b9a 100%);
33-
-webkit-background-clip: text;
34-
-webkit-text-fill-color: transparent;
35-
text-align: center;
36-
font-size: 1.8em;
37-
margin-top: -10px;
38-
opacity: 1;
39-
}
53+
4054

4155
.container {
4256
display: flex;
@@ -103,22 +117,26 @@ body, html {
103117
}
104118

105119
.box:nth-child(1) {
106-
background: linear-gradient(to right, #ca35db, #d99dfd);
120+
grid-row: 2;
121+
grid-column: 1;
122+
background: linear-gradient(to right, #8cb5f5, #5b90e7);
107123
opacity: 0.5;
108124
}
109125

110126
.box:nth-child(1):hover {
111-
background: #b94ff7;
112-
color: #66bcde;
113-
box-shadow: 0 0 30px #e13c62;
114-
127+
background: linear-gradient(to right, #8abbf5, #4b7dba);
128+
color: #66dade;
129+
box-shadow: 0 0 30px #fedfff;
115130
opacity: 1;
116131
transform: scale(1.1); /* This scales up the box to 110% of its original size when you hover over it. Adjust the scale factor (1.1) as needed. */
117132

118133
}
119134

120135
.box:nth-child(3) {
121-
background: linear-gradient(to right, #8cb5f5, #e2c4f6);
136+
grid-row: 1;
137+
grid-column: 1;
138+
background: linear-gradient(to right, #ca35db, #d99dfd);
139+
122140
opacity: 0.5;
123141

124142
display: flex;
@@ -128,9 +146,9 @@ body, html {
128146
}
129147

130148
.box:nth-child(3):hover {
131-
background: #8b6dc3;
132-
color: #66dade;
133-
box-shadow: 0 0 30px #e13c62;
149+
background: linear-gradient(to right, #a973d5, #923fd6);
150+
color: #66bcde;
151+
box-shadow: 0 0 30px #83f0ff;
134152
color: #66bcde;
135153
opacity: 1;
136154
transform: scale(1.1); /* This scales up the box to 110% of its original size when you hover over it. Adjust the scale factor (1.1) as needed. */
@@ -151,8 +169,10 @@ body, html {
151169

152170
.dropdown-header {
153171
background: linear-gradient(to right, #c44561, #790d24); /* Different variant */
172+
border-radius: 10px;
154173
padding: 10px;
155-
174+
height: 15px;
175+
margin-bottom: 2px;
156176
cursor: pointer;
157177
overflow-y: auto; /* Enable vertical scrolling */
158178
overflow-x: hidden; /* Disable horizontal scrolling */
@@ -162,12 +182,13 @@ body, html {
162182

163183
.dropdown-body {
164184
background: linear-gradient(to right, #a8e6d1, #46d9a8); /* Different variant */
185+
border-radius: 10px;
165186
height: 0;
166187
padding: 10px;
167188
overflow: hidden;
168189
max-width: 200px;
169190
max-height: 150px;
170-
transition: height 2s ease-in-out;
191+
transition: height 4s ease-in-out;
171192
overflow-y: auto;
172193
}
173194

@@ -200,12 +221,12 @@ body, html {
200221
}
201222

202223
.main-box:hover {
203-
background: #460b8f; /* Different variant */
224+
background: linear-gradient(to right, #9792c5, #def0fa);
204225
color: #66bcde;
205-
box-shadow: 0 0 30px #e13c62;
226+
box-shadow: 0 0 30px #b2f8ff;
206227
text-shadow: 0 0 30px #e13c62;
207228
opacity: 1;
208-
transform: scale(1.05); /* This scales up the box to 110% of its original size when you hover over it. Adjust the scale factor (1.1) as needed. */
229+
transform: scale(1.1); /* This scales up the box to 110% of its original size when you hover over it. Adjust the scale factor (1.1) as needed. */
209230
z-index: 1;
210231
}
211232

@@ -238,26 +259,6 @@ body, html {
238259
overflow: auto
239260
}
240261

241-
/* .submit-diagnosis-button {
242-
display: block;
243-
margin: 0 auto;
244-
padding: 20px 40px;
245-
font-size: 1.5em;
246-
background: linear-gradient(to right, #d2aafc, #7e0955);
247-
color: #fff;
248-
border: none;
249-
border-radius: 10px;
250-
cursor: pointer;
251-
transition: background 0.3s ease;
252-
transition: transform 2s ease;
253-
}
254-
255-
.submit-diagnosis-button:hover {
256-
background: #37034d;
257-
transform: scale(1.1);
258-
}
259-
*/
260-
261262
.reset-button {
262263
display: block;
263264
margin: 0 auto;

‎DiagnoseMeApp/public/result.css

+45-25
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,52 @@
1+
h1 {
2+
background: linear-gradient(to right, #ca35db 0%, #330867 100%);
3+
-webkit-background-clip: text;
4+
-webkit-text-fill-color: transparent;
5+
text-align: center;
6+
font-size: 2.5em;
7+
margin-top: 10px;
8+
}
9+
110
.subtitle {
211
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
312

4-
font-size: 0.75em;
5-
margin-top: -20px;
13+
font-size: 1em;
14+
margin-top: 10px;
15+
padding: 5px;
616
width: 100%;
7-
817
background: linear-gradient(to right, #9f60e1, #5f3a9b);
918
border-radius: 15px;
1019
-webkit-background-clip: text;
1120
-webkit-text-fill-color: transparent;
1221
text-align: center;
1322
color: white;
1423
}
15-
24+
1625
.github-button {
1726
width: 30px; /* adjust as needed */
1827
height: 30px; /* adjust as needed */
19-
padding-bottom: 5px;
28+
padding-bottom: 20px;
2029
}
30+
31+
.credits {
32+
font-size: 0.7px;
33+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
34+
margin-top: 20px;
35+
padding: 5px;
36+
width: 100%;
37+
background: linear-gradient(to right, #e16089, #b31144);
38+
border-radius: 15px;
39+
-webkit-background-clip: text;
40+
-webkit-text-fill-color: transparent;
41+
text-align: center;
42+
color: white;
43+
}
44+
45+
46+
47+
48+
2149

22-
h1 {
23-
background: linear-gradient(to right, #ca35db 0%, #330867 100%);
24-
-webkit-background-clip: text;
25-
-webkit-text-fill-color: transparent;
26-
text-align: center;
27-
font-size: 1.5em;
28-
margin-top: 30px;
29-
}
3050

3151
.container {
3252
display: flex;
@@ -94,10 +114,10 @@
94114
}
95115

96116
.box:nth-child(2):hover {
97-
background: #b94ff7;
98-
color: #66bcde;
99-
box-shadow: 0 0 30px #e13c62;
100-
117+
background: linear-gradient(to right, #d4c0f5, #cfd1f7);
118+
color: #fde0fe;
119+
box-shadow: 0 0 30px #fde0fe;
120+
z-index: 1;
101121
opacity: 1;
102122
transform: scale(1.1); /* This scales up the box to 110% of its original size when you hover over it. Adjust the scale factor (1.1) as needed. */
103123

@@ -116,9 +136,9 @@
116136
}
117137

118138
.box:nth-child(3):hover {
119-
background: #8b6dc3;
139+
background: linear-gradient(to right, #c5d8f8, #e5e1fa);
120140
color: #66dade;
121-
box-shadow: 0 0 30px #e13c62;
141+
box-shadow: 0 0 30px #cf71ff;
122142
color: #66bcde;
123143
opacity: 1;
124144
transform: scale(1.1); /* This scales up the box to 110% of its original size when you hover over it. Adjust the scale factor (1.1) as needed. */
@@ -137,12 +157,12 @@
137157
}
138158

139159
.main-box:hover {
140-
background: #460b8f; /* Different variant */
160+
background: linear-gradient(to right, #d8b8f9, #cdd0fb);
141161
color: #66bcde;
142-
box-shadow: 0 0 30px #e13c62;
143-
text-shadow: 0 0 30px #e13c62;
162+
box-shadow: 0 0 30px #b0f6fe;
163+
text-shadow: 0 0 30px #d96f88;
144164
opacity: 1;
145-
transform: scale(1.05); /* This scales up the box to 110% of its original size when you hover over it. Adjust the scale factor (1.1) as needed. */
165+
transform: scale(1.1); /* This scales up the box to 110% of its original size when you hover over it. Adjust the scale factor (1.1) as needed. */
146166
z-index: 1;
147167
}
148168

@@ -218,7 +238,7 @@
218238
display: block;
219239
margin: 0 auto;
220240
margin-top: 10px;
221-
font-size: 0.8em;
241+
font-size: 1.5em;
222242
background: linear-gradient(to right, #d2aafc, #7e0955);
223243
color: #fff;
224244
border: none;
@@ -230,6 +250,6 @@
230250

231251
.reset-button:hover {
232252
background: #37034d;
233-
transform: scale(1.3);
253+
transform: scale(1.5);
234254
color: #d2aafc;
235255
}

‎DiagnoseMeApp/src/chatbot/Dropdown.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,16 @@ const Dropdown = ({ options }) => {
4444
setDisplay(!display);
4545
setOpenedOnce(true);
4646
}
47+
document.getElementById('diagnosis').style.display = 'none';
4748
};
4849

4950
return (
5051
<div className="dropdown">
5152
<div className="dropdown-header"
52-
onMouseEnter={() => { toggleDropdown(); setIsMouseInside(true); }} // Set isMouseInside to true
53+
onMouseUp={() => { toggleDropdown(); setIsMouseInside(true); }} // Set isMouseInside to true
5354
onMouseLeave={() => setIsMouseInside(false)} // Set isMouseInside to false
5455
>
56+
<p2 id="diagnosis">diagnosis</p2>
5557
{search}
5658
</div>
5759
{display &&(

‎DiagnoseMeApp/src/components/ButtonGooey.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { ArrowRightIcon } from "@radix-ui/react-icons";
66

77
export const ButtonGooey = () => {
88
return (
9-
<FadeIn delay = {600} transitionDuration={2000}>
9+
<FadeIn delay = {700} transitionDuration={2000}>
1010
<div className="wrapper">
1111
<button className="button">
1212
get started

‎DiagnoseMeApp/src/components/GithubButton.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react';
33
import FadeIn from 'react-fade-in';
44

55
const GithubButton = ({ repoUrl }) => (
6-
<FadeIn delay={1500} transitionDuration={2000}>
6+
<div className='app'>
77
<div className="github-button-wrapper">
88
<a href={repoUrl} className="github-button">
99
<img src="./assets/images/github-logo.png" alt="GitHub" />
@@ -30,7 +30,7 @@ const GithubButton = ({ repoUrl }) => (
3030
height: 30px; // Adjust as needed
3131
}
3232
`}</style>
33-
</FadeIn>
33+
</div>
3434
);
3535

3636
export default GithubButton;

‎DiagnoseMeApp/src/components/Header.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import FadeIn from 'react-fade-in';
33

44
function Header() {
55
return (
6-
<FadeIn delay={500} transitionDuration={2000}>
6+
77
<h1>DiagnoseMe</h1>
8-
</FadeIn>
8+
99
);
1010
}
1111

‎DiagnoseMeApp/src/components/ResetButton.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,9 @@ const ResetButton = () => {
77
};
88

99
return (
10-
<FadeIn delay={1500} transitionDuration={2000}>
1110
<button className="reset-button" onClick={handleClick}>
12-
Reset
11+
reset
1312
</button>
14-
</FadeIn>
1513
);
1614
};
1715

‎DiagnoseMeApp/src/components/ResultHeader.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import FadeIn from 'react-fade-in';
33

44
function ResultHeader() {
55
return (
6-
<FadeIn delay={500} transitionDuration={2000} className='result-header'>
7-
<h1>Results</h1>
8-
</FadeIn>
6+
7+
<h1>results</h1>
8+
99
);
1010
}
1111

0 commit comments

Comments
 (0)