TheM1N9
commited on
Commit
·
0c37653
1
Parent(s):
3dfb0b6
Enhance responsive design in index.html with viewport meta tag and improved media queries. Adjust styles for chat interface and video overlay for better usability on mobile devices.
Browse files- templates/index.html +86 -16
templates/index.html
CHANGED
|
@@ -1,6 +1,10 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html>
|
| 3 |
<head>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
<title>Divine Talk</title>
|
| 5 |
<link
|
| 6 |
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Open+Sans:wght@400;600&display=swap"
|
|
@@ -90,6 +94,7 @@
|
|
| 90 |
width: 100%;
|
| 91 |
position: relative;
|
| 92 |
z-index: 2;
|
|
|
|
| 93 |
}
|
| 94 |
|
| 95 |
.chat-messages {
|
|
@@ -100,6 +105,7 @@
|
|
| 100 |
display: flex;
|
| 101 |
flex-direction: column;
|
| 102 |
gap: 1rem;
|
|
|
|
| 103 |
}
|
| 104 |
|
| 105 |
.message {
|
|
@@ -131,6 +137,7 @@
|
|
| 131 |
align-items: center;
|
| 132 |
background: white;
|
| 133 |
border-radius: 0 0 15px 15px;
|
|
|
|
| 134 |
}
|
| 135 |
|
| 136 |
textarea {
|
|
@@ -244,6 +251,20 @@
|
|
| 244 |
transition: all 0.3s ease;
|
| 245 |
}
|
| 246 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 247 |
.video-overlay video {
|
| 248 |
width: 100%;
|
| 249 |
height: 100%;
|
|
@@ -262,21 +283,7 @@
|
|
| 262 |
gap: 0;
|
| 263 |
}
|
| 264 |
|
| 265 |
-
@
|
| 266 |
-
.video-overlay {
|
| 267 |
-
width: 300px;
|
| 268 |
-
height: 300px;
|
| 269 |
-
}
|
| 270 |
-
}
|
| 271 |
-
|
| 272 |
-
@media (max-width: 480px) {
|
| 273 |
-
.video-overlay {
|
| 274 |
-
width: 250px;
|
| 275 |
-
height: 250px;
|
| 276 |
-
}
|
| 277 |
-
}
|
| 278 |
-
|
| 279 |
-
@keyframes fadeInScale {
|
| 280 |
from {
|
| 281 |
opacity: 0;
|
| 282 |
transform: translate(-50%, -40%);
|
|
@@ -287,12 +294,75 @@
|
|
| 287 |
transform: translate(-50%, -50%);
|
| 288 |
scale: 1;
|
| 289 |
}
|
| 290 |
-
}
|
| 291 |
|
| 292 |
.video-overlay.active {
|
| 293 |
display: block;
|
| 294 |
animation: fadeInScale 0.3s ease forwards;
|
| 295 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 296 |
</style>
|
| 297 |
</head>
|
| 298 |
<body>
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
+
<meta
|
| 5 |
+
name="viewport"
|
| 6 |
+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
| 7 |
+
/>
|
| 8 |
<title>Divine Talk</title>
|
| 9 |
<link
|
| 10 |
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Open+Sans:wght@400;600&display=swap"
|
|
|
|
| 94 |
width: 100%;
|
| 95 |
position: relative;
|
| 96 |
z-index: 2;
|
| 97 |
+
/* height: fit-content; */
|
| 98 |
}
|
| 99 |
|
| 100 |
.chat-messages {
|
|
|
|
| 105 |
display: flex;
|
| 106 |
flex-direction: column;
|
| 107 |
gap: 1rem;
|
| 108 |
+
margin-bottom: 0;
|
| 109 |
}
|
| 110 |
|
| 111 |
.message {
|
|
|
|
| 137 |
align-items: center;
|
| 138 |
background: white;
|
| 139 |
border-radius: 0 0 15px 15px;
|
| 140 |
+
margin-top: auto;
|
| 141 |
}
|
| 142 |
|
| 143 |
textarea {
|
|
|
|
| 251 |
transition: all 0.3s ease;
|
| 252 |
}
|
| 253 |
|
| 254 |
+
@media (max-width: 768px) {
|
| 255 |
+
.video-overlay {
|
| 256 |
+
width: 300px;
|
| 257 |
+
height: 500px;
|
| 258 |
+
}
|
| 259 |
+
}
|
| 260 |
+
|
| 261 |
+
@media (max-width: 480px) {
|
| 262 |
+
.video-overlay {
|
| 263 |
+
width: 225px;
|
| 264 |
+
height: 400px;
|
| 265 |
+
}
|
| 266 |
+
}
|
| 267 |
+
|
| 268 |
.video-overlay video {
|
| 269 |
width: 100%;
|
| 270 |
height: 100%;
|
|
|
|
| 283 |
gap: 0;
|
| 284 |
}
|
| 285 |
|
| 286 |
+
/* @keyframes fadeInScale {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 287 |
from {
|
| 288 |
opacity: 0;
|
| 289 |
transform: translate(-50%, -40%);
|
|
|
|
| 294 |
transform: translate(-50%, -50%);
|
| 295 |
scale: 1;
|
| 296 |
}
|
| 297 |
+
} */
|
| 298 |
|
| 299 |
.video-overlay.active {
|
| 300 |
display: block;
|
| 301 |
animation: fadeInScale 0.3s ease forwards;
|
| 302 |
}
|
| 303 |
+
|
| 304 |
+
@media (max-width: 768px) {
|
| 305 |
+
.container {
|
| 306 |
+
padding: 0.5rem;
|
| 307 |
+
height: 100%;
|
| 308 |
+
width: auto;
|
| 309 |
+
}
|
| 310 |
+
|
| 311 |
+
.chat-interface {
|
| 312 |
+
flex-direction: column;
|
| 313 |
+
margin-top: 1rem;
|
| 314 |
+
}
|
| 315 |
+
|
| 316 |
+
.chat-container {
|
| 317 |
+
max-width: 100%;
|
| 318 |
+
margin: 0;
|
| 319 |
+
}
|
| 320 |
+
|
| 321 |
+
.chat-messages {
|
| 322 |
+
max-height: 70vh;
|
| 323 |
+
padding: 1rem;
|
| 324 |
+
}
|
| 325 |
+
|
| 326 |
+
.message {
|
| 327 |
+
max-width: 85%;
|
| 328 |
+
padding: 0.8rem;
|
| 329 |
+
}
|
| 330 |
+
|
| 331 |
+
.input-container {
|
| 332 |
+
padding: 0.8rem;
|
| 333 |
+
}
|
| 334 |
+
|
| 335 |
+
textarea {
|
| 336 |
+
padding: 0.6rem;
|
| 337 |
+
font-size: 15px;
|
| 338 |
+
}
|
| 339 |
+
|
| 340 |
+
button {
|
| 341 |
+
padding: 0.6rem 1.2rem;
|
| 342 |
+
font-size: 0.9rem;
|
| 343 |
+
}
|
| 344 |
+
}
|
| 345 |
+
|
| 346 |
+
@media (max-width: 480px) {
|
| 347 |
+
.header h1 {
|
| 348 |
+
font-size: 1.5rem;
|
| 349 |
+
}
|
| 350 |
+
|
| 351 |
+
.message {
|
| 352 |
+
max-width: 90%;
|
| 353 |
+
padding: 0.7rem;
|
| 354 |
+
font-size: 0.9rem;
|
| 355 |
+
}
|
| 356 |
+
|
| 357 |
+
.input-container {
|
| 358 |
+
gap: 0.5rem;
|
| 359 |
+
}
|
| 360 |
+
|
| 361 |
+
button {
|
| 362 |
+
padding: 0.6rem 1rem;
|
| 363 |
+
font-size: 0.85rem;
|
| 364 |
+
}
|
| 365 |
+
}
|
| 366 |
</style>
|
| 367 |
</head>
|
| 368 |
<body>
|