Skip to content

Commit d48e0c2

Browse files
josueJUREjosueJURE
committed
feat(JS): commit before merging
2 parents 7f94017 + f90bb67 commit d48e0c2

3 files changed

Lines changed: 61 additions & 40 deletions

File tree

‎public/index.css‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,9 @@
3939
.main-element {
4040
overflow: scroll;
4141
min-height: 100vh;
42-
width: 500px;
43-
border: black 1px solid;
42+
width: 100%;
43+
max-width: 500px;
44+
border: black 3px solid;
4445
border-radius: 5%;
4546
background-image: url("./image/Designer_2.png");
4647
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
@@ -51,6 +52,7 @@
5152
top: 50%;
5253
left: 50%;
5354
transform: translate(-50%,-50%);
55+
margin: 0 auto;
5456
}
5557

5658
.preserve-line-breaks {
@@ -85,20 +87,23 @@ main {
8587

8688

8789
#background-img {
88-
background-color: blue;
8990
z-index: -2;
9091
position: absolute;
9192
top: 50%;
9293
left: 50%;
93-
transform: translate(-50%,-50%);
94-
right: 0;
95-
bottom: 0;
96-
width: 500px;
94+
transform: translate(-50%, -50%);
95+
width: 100%;
96+
height: 100%;
97+
max-width: 500px;
9798
min-height: 100vh;
9899
border-radius: 5%;
99-
border: 4px black solid;
100+
border: 2px solid black;
101+
background-image: url("./image/Designer_2.png");
102+
background-size: cover;
103+
background-position: center;
100104
}
101105

106+
102107
h1 {
103108
/* text-wrap: balance; */
104109
text-align: center;
@@ -140,8 +145,9 @@ button {
140145

141146
.send-recipe-to-user-inbox,
142147
.want-another-recipe {
143-
width: 200px;
148+
width: 170px;
144149
margin: auto;
150+
display: none;
145151
}
146152

147153
.email-section {
@@ -179,19 +185,19 @@ button {
179185
transition: background-color 0.5s ease;
180186
margin-top: 260px;
181187
margin-bottom: 20px;
182-
/* display: none; */
188+
display: none;
183189
}
184190

185191
/* The switch - the box around the slider */
186192
.switch {
187193
position: relative;
188-
display: inline-block;
194+
display: block;
189195
width: 60px;
190196
height: 34px;
191-
margin-left: 235px;
192-
margin-top: 10px;
197+
margin: 10px auto;
193198
}
194199

200+
195201
/* Hide default HTML checkbox */
196202
.switch input {
197203
opacity: 0;
@@ -289,3 +295,9 @@ input:checked + .slider:before {
289295
transform: rotate(360deg);
290296
}
291297
}
298+
@media only screen and (max-width: 768px) {
299+
.main-element {
300+
width: 100%; /* Adjusted width for smaller screens */
301+
max-width: none;
302+
}
303+
}

‎public/index.html‎

Lines changed: 23 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="viewport" content="width=device-width" />
77
<link rel="stylesheet" href="index.css" />
88
<title>Recipe For Success</title>
99
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -98,38 +98,34 @@ <h1 aria-label="app text" class="headline">
9898
<div id="loading-indicator"></div>
9999
<h3 id="loading-text">Creating Recipe...</h3>
100100
</div>
101-
102-
103101

104102
<!-- <label for="user-email">Enter you email address</label> -->
105103
<button class="try-again-btn">Try again</button>
106104
</main>
107105
<div class="test">
108106
<section
109-
aria-label="gpt-response"
110-
class="gpt-response preserve-line-breaks"
111-
112-
></section>
113-
<button class="want-another-recipe">I want another recipe</button>
114-
<button
115-
class="send-recipe-to-user-inbox"
116-
name="do_we_email_user"
117-
value="false"
118-
>
119-
send recipe to my in
120-
</button>
121-
<section class="email-section">
122-
<input
123-
type="email"
124-
id="user-email"
125-
class=""
126-
name="user_email_address"
127-
placeholder="sophie@example.com"
128-
/>
129-
<i class="fa fa-paper-plane" aria-hidden="true" fa-lg></i>
130-
<!-- <button class="send-email-btn">send</button> -->
131-
</section>
132-
107+
aria-label="gpt-response"
108+
class="gpt-response preserve-line-breaks"
109+
></section>
110+
<button class="want-another-recipe">I want another recipe</button>
111+
<button
112+
class="send-recipe-to-user-inbox"
113+
name="do_we_email_user"
114+
value="false"
115+
>
116+
send recipe to my in
117+
</button>
118+
<section class="email-section">
119+
<input
120+
type="email"
121+
id="user-email"
122+
class=""
123+
name="user_email_address"
124+
placeholder="sophie@example.com"
125+
/>
126+
<i class="fa fa-paper-plane" aria-hidden="true" fa-lg></i>
127+
<!-- <button class="send-email-btn">send</button> -->
128+
</section>
133129
</div>
134130
</div>
135131
<script src="index.js"></script>

‎server.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ app.get("/email", async (req, res) => {
4747
});
4848
});
4949

50+
51+
5052
app.get("/openai", async (req, res) => {
5153
console.log(req.query);
5254
try {
@@ -102,6 +104,17 @@ app.get("/openai", async (req, res) => {
102104
}
103105
});
104106

107+
// const dishCountry = req.body.recipe_country_of_origin;
108+
// const isUserLactoseIntolerant = req.body.is_lactose_intolerant;
109+
110+
111+
// res.json({
112+
// message: `Variables ${dishCountry} and ${isUserLactoseIntolerant} received successfully`,
113+
// });
114+
// });
115+
116+
117+
105118
app.use(express.static("public"));
106119
const port = process.env.PORT || 3000;
107120
app.listen(port, () => {

0 commit comments

Comments
 (0)