Skip to content

Commit afa84e1

Browse files
hoangsonwwhoangsonww
committed
Update: Enhanced UI layout & design (#111)
1 parent bd2b6c4 commit afa84e1

File tree

3 files changed

+209
-8
lines changed

3 files changed

+209
-8
lines changed

‎MovieVerse-Frontend/css/style.css

+118
Original file line numberDiff line numberDiff line change
@@ -1505,6 +1505,123 @@ p {
15051505
transition: 0.1s linear;
15061506
}
15071507

1508+
#menu-btn {
1509+
background-color: #7378c5;
1510+
color: white;
1511+
padding: 10px;
1512+
border: none;
1513+
border-radius: 8px;
1514+
cursor: pointer;
1515+
text-align: center;
1516+
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
1517+
font: inherit;
1518+
font-size: 14px;
1519+
}
1520+
1521+
#menu-btn i {
1522+
font-size: 18px;
1523+
margin-bottom: 4px;
1524+
}
1525+
1526+
#menu-btn:hover {
1527+
background-color: #ff8623;
1528+
transition: 0.1s linear;
1529+
}
1530+
1531+
#settings-btn,
1532+
#movie-of-the-day-btn,
1533+
#movie-match-btn,
1534+
#movie-timeline-btn,
1535+
#discussions-btn,
1536+
#trivia-btn,
1537+
#back-to-top-btn {
1538+
transition: transform 0.5s ease, opacity 0.5s ease;
1539+
transform: translateY(20px);
1540+
opacity: 0;
1541+
display: none;
1542+
}
1543+
1544+
@media (min-width: 768px) {
1545+
#settings-btn,
1546+
#movie-of-the-day-btn,
1547+
#movie-match-btn,
1548+
#movie-timeline-btn,
1549+
#discussions-btn,
1550+
#trivia-btn,
1551+
#back-to-top-btn {
1552+
position: fixed;
1553+
right: 20px;
1554+
z-index: 1000;
1555+
}
1556+
1557+
#menu-btn {
1558+
display: block;
1559+
}
1560+
}
1561+
1562+
.mobile-bottom-bar {
1563+
display: none;
1564+
position: fixed;
1565+
bottom: 0;
1566+
left: 0;
1567+
right: 0;
1568+
height: 50px;
1569+
background-color: #373b69;
1570+
box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
1571+
justify-content: space-around;
1572+
align-items: center;
1573+
z-index: 1001;
1574+
}
1575+
1576+
.mobile-bottom-bar {
1577+
transition: transform 0.3s ease-in-out;
1578+
}
1579+
1580+
.hide-bar {
1581+
transform: translateY(100%);
1582+
}
1583+
1584+
.mobile-bottom-bar a {
1585+
flex-grow: 1;
1586+
text-align: center;
1587+
color: white;
1588+
text-decoration: none;
1589+
padding: 6px 0;
1590+
}
1591+
1592+
.mobile-bottom-bar a:hover {
1593+
background-color: #ff8623;
1594+
transition: 0.1s linear;
1595+
}
1596+
1597+
.mobile-bottom-bar i {
1598+
font-size: 18px;
1599+
margin-bottom: 4px;
1600+
}
1601+
1602+
.mobile-bottom-bar span {
1603+
display: block;
1604+
font-size: 10px;
1605+
color: #ecf0f1;
1606+
}
1607+
1608+
@media (max-width: 767px) {
1609+
.mobile-bottom-bar {
1610+
display: flex;
1611+
}
1612+
1613+
#settings-btn,
1614+
#movie-of-the-day-btn,
1615+
#movie-match-btn,
1616+
#movie-timeline-btn,
1617+
#discussions-btn,
1618+
#trivia-btn,
1619+
#menu-btn,
1620+
#back-to-top-btn {
1621+
display: none;
1622+
}
1623+
}
1624+
15081625
.nav-button:disabled {
15091626
background-color: #b5b5b5;
15101627
cursor: not-allowed;
@@ -1514,6 +1631,7 @@ p {
15141631
border-radius: 8px;
15151632
background-color: rgba(255, 255, 255, 0.1);
15161633
padding: 10px;
1634+
margin: 10px;
15171635
}
15181636

15191637
@media (max-width: 767px) {

‎index.html

+90-7
Original file line numberDiff line numberDiff line change
@@ -428,13 +428,96 @@ <h2 id="other" style="margin-top: 50px; cursor: pointer">Timeless Classics: Tren
428428
<p>© 2024 The MovieVerse. All rights reserved.</p>
429429
</footer>
430430

431-
<button id="settings-btn" style="position: fixed; bottom: 220px; z-index: 1001">Settings</button>
432-
<button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" style="bottom: 185px; z-index: 1001" title="Get a recommended movie to watch for today!">Surprise Me!</button>
433-
<button id="movie-match-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-match.html'" title="Find movies that match your mood and preferences!" style="bottom: 150px; z-index: 1001">Movie Match</button>
434-
<button id="movie-timeline-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-timeline.html'" style="bottom: 115px; z-index: 1001" title="Explore movies through different eras!">Movie Timeline</button>
435-
<button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="bottom: 80px; z-index: 1001" title="Want to know more about movies? Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
436-
<button id="trivia-btn" onclick="window.location.href='MovieVerse-Frontend/html/trivia.html'" style="bottom: 45px; z-index: 1001" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
437-
<button id="back-to-top-btn" style="bottom: 10px; z-index: 1001">Back To Top</button>
431+
<button id="settings-btn" style="position: fixed; bottom: 290px; right: 10px; z-index: 1001">Settings</button>
432+
<button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" style="bottom: 255px; right: 10px; z-index: 1001" title="Get a recommended movie to watch for today!">Surprise Me!</button>
433+
<button id="movie-match-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-match.html'" title="Find movies that match your mood and preferences!" style="bottom: 220px; right: 10px; z-index: 1001">Movie Match</button>
434+
<button id="movie-timeline-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-timeline.html'" style="bottom: 185px; right: 10px; z-index: 1001" title="Explore movies through different eras!">Movie Timeline</button>
435+
<button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="bottom: 150px; right: 10px; z-index: 1001" title="Want to know more about movies? Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
436+
<button id="trivia-btn" onclick="window.location.href='MovieVerse-Frontend/html/trivia.html'" style="bottom: 115px; right: 10px; z-index: 1001" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
437+
<button id="back-to-top-btn" style="bottom: 80px; right: 10px; z-index: 1001">Back To Top</button>
438+
439+
<div id="mobile-bottom-bar" class="mobile-bottom-bar">
440+
<a href="MovieVerse-Frontend/html/settings.html" class="bottom-bar-item">
441+
<i class="fas fa-cog"></i>
442+
<span>Settings</span>
443+
</a>
444+
<a href="#" class="bottom-bar-item" onclick="showMovieOfTheDay()">
445+
<i class="fas fa-surprise"></i>
446+
<span>Surprise Me</span>
447+
</a>
448+
<a href="MovieVerse-Frontend/html/movie-match.html" class="bottom-bar-item">
449+
<i class="fas fa-film"></i>
450+
<span>Movie Match</span>
451+
</a>
452+
<a href="MovieVerse-Frontend/html/movie-timeline.html" class="bottom-bar-item">
453+
<i class="fas fa-clock"></i>
454+
<span>Movie Timeline</span>
455+
</a>
456+
<a href="MovieVerse-Frontend/html/chatbot.html" class="bottom-bar-item">
457+
<i class="fas fa-robot"></i>
458+
<span>Chatbot</span>
459+
</a>
460+
<a href="MovieVerse-Frontend/html/trivia.html" class="bottom-bar-item">
461+
<i class="fas fa-question-circle"></i>
462+
<span>Movie Trivia</span>
463+
</a>
464+
<a href="#" class="bottom-bar-item" onclick="scrollToTop()">
465+
<i class="fas fa-arrow-up"></i>
466+
<span>Back to Top</span>
467+
</a>
468+
</div>
469+
470+
<button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu">
471+
<i class="fas fa-bars"></i><br>
472+
<span>Menu</span>
473+
</button>
474+
475+
<script>
476+
let lastScrollY = window.scrollY;
477+
478+
window.addEventListener('scroll', () => {
479+
const currentScrollY = window.scrollY;
480+
481+
if (currentScrollY > lastScrollY) {
482+
document.querySelector('.mobile-bottom-bar').classList.add('hide-bar');
483+
}
484+
else {
485+
document.querySelector('.mobile-bottom-bar').classList.remove('hide-bar');
486+
}
487+
488+
lastScrollY = currentScrollY;
489+
});
490+
491+
document.getElementById('menu-btn').addEventListener('click', () => {
492+
const buttonIds = [
493+
'settings-btn',
494+
'movie-of-the-day-btn',
495+
'movie-match-btn',
496+
'movie-timeline-btn',
497+
'discussions-btn',
498+
'trivia-btn',
499+
'back-to-top-btn'
500+
];
501+
502+
buttonIds.forEach((id, index) => {
503+
const button = document.getElementById(id);
504+
if (button.style.display === 'none' || !button.style.display) {
505+
button.style.display = 'block';
506+
setTimeout(() => {
507+
button.style.opacity = '1';
508+
button.style.transform = 'translateY(0)';
509+
}, 50 * index);
510+
}
511+
else {
512+
button.style.opacity = '0';
513+
button.style.transform = 'translateY(20px)';
514+
setTimeout(() => {
515+
button.style.display = 'none';
516+
}, 250 + 50 * index);
517+
}
518+
});
519+
});
520+
</script>
438521

439522
<script>
440523
document.getElementById('settings-btn').addEventListener('click', () => {

‎index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -812,7 +812,7 @@ function fallbackMovieSelection() {
812812

813813
function calculateMoviesToDisplay() {
814814
const screenWidth = window.innerWidth;
815-
if (screenWidth <= 689.9) return 7; // 1 movie per row
815+
if (screenWidth <= 689.9) return 5; // 1 movie per row
816816
if (screenWidth <= 1021.24) return 20; // 2 movies per row
817817
if (screenWidth <= 1353.74) return 21; // 3 movies per row
818818
if (screenWidth <= 1684.9) return 20; // 4 movies per row

0 commit comments

Comments
 (0)