From 715c5f0dc1d7bcd307702e91bddbdcfa7cba9432 Mon Sep 17 00:00:00 2001 From: Mandeep Ray <102048798+Mandy1200@users.noreply.github.com> Date: Sat, 19 Oct 2024 23:35:09 +0530 Subject: [PATCH] Add files via upload (#963) --- index.html | 269 +++++++ styles/blog.css | 664 ++++++++++++++++ styles/compare.css | 211 +++++ styles/construction.css | 44 ++ styles/construction.css.map | 0 styles/events.css | 364 +++++++++ styles/explore.css | 199 +++++ styles/githubbadge.css | 293 +++++++ styles/hamburger.css | 105 +++ styles/help.css | 311 ++++++++ styles/modal.css | 101 +++ styles/pagination.css | 34 + styles/speech.css | 63 ++ styles/styles.css | 1471 +++++++++++++++++++++++++++++++++++ 14 files changed, 4129 insertions(+) create mode 100644 index.html create mode 100644 styles/blog.css create mode 100644 styles/compare.css create mode 100644 styles/construction.css create mode 100644 styles/construction.css.map create mode 100644 styles/events.css create mode 100644 styles/explore.css create mode 100644 styles/githubbadge.css create mode 100644 styles/hamburger.css create mode 100644 styles/help.css create mode 100644 styles/modal.css create mode 100644 styles/pagination.css create mode 100644 styles/speech.css create mode 100644 styles/styles.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..a6885438 --- /dev/null +++ b/index.html @@ -0,0 +1,269 @@ + + + + + + Awesome GitHub Profile READMEs + + + + + + + + + + + + + + +
+
+
+ + +
+ Github-Badge + Tools + Events + Blog + Add Profile + Learn + Login + +
+ + +
+
+ + +
+
+ + +
+ +
+
+ + +
+ +
+
+ + + + + + +
+ +
+
+ + +
+ +
+ +
+ + + +
+

Awesome GitHub Profile READMEs

+
+ Badge 🎖️ + Minimalistic ✨ + Dynamic 🔄 + Icons 🎯 + + Backgrounds 😎 + GIFS 🖼️ + Game Mode 🚀 + Code 👨‍💻 +
+
+ + + + + + + + + +
+ +
+
+

Least Views

+

Most Views

+

Least Likes

+

Most Likes

+
+
+ + +

No profiles found

+ +
+ +
+ + + + +
+ + + + + + + + + + +
+ + + + + + + + + + + + + + + + +
+ + + + + diff --git a/styles/blog.css b/styles/blog.css new file mode 100644 index 00000000..22c6c6c2 --- /dev/null +++ b/styles/blog.css @@ -0,0 +1,664 @@ +*{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + } +body { + + background-color: #f4f4f4; + margin: 0; + padding: 0; +} + +body img { + max-width: 100vw !important; +} + +.blog-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 20px; +} + +.blog-card { + background: white; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin: 15px; + padding: 20px; + overflow: hidden; + cursor: pointer; + width: 27%; + height: fit-content; + transition: transform 0.2s; +} + +body.dark-mode .blog-card { + background-color: #333; +} + +body.dark-mode .blog-card .excerpt, +body.dark-mode .blog-card .save-btn { + color: #fff; +} + +.saved-blogs { + display: flex; + align-items: center; + background-color: #f0f0f0; /* Gray background */ + color: #333; /* Dark text color */ + padding: 10px 20px; + border-radius: 25px; /* Rounded corners */ + text-decoration: none; /* No underline by default */ + font-family: Arial, sans-serif; + transition: background-color 0.3s, transform 0.3s; /* Transition effects */ + position: relative; /* For positioning the arrow */ +} +.dark-mode .saved-blogs { + background-color: #333; /* Dark mode background color */ + color: #fff; /* Dark mode text color */ +} +.dark-mode .saved-blogs:hover { + background: linear-gradient(135deg, #444, #333); /* Dark mode tag hover background */ +} + + +.saved-blogs i { + margin-left: 10px; /* Space between text and arrow */ + transition: transform 0.3s; /* Transition for arrow movement */ +} + +.saved-blogs:hover { + background-color: #e0e0e0; /* Slightly darker gray on hover */ + transform: scale(1.02); /* Slight scale effect on hover */ + text-decoration: none; /* Ensure no underline on hover */ +} + +.saved-blogs:hover i { + transform: translateX(5px); /* Move arrow to the right on hover */ +} + +body.dark-mode .saved-blogs { + color: #d5d5d5; +} + +.blog-card .image-wrapper { + width: 100%; + height: auto; + overflow: hidden; + border-radius: 12px; +} + +/* .blog-card:hover { + transform: scale(1.15); +} */ + +.blog-card img { + scale: 1.15; + width: 100%; + height: 100%; + transition: 0.3s ease-in-out; +} + +.blog-card img:hover { + scale: 1; +} + +.blog-card-content { + padding: 20px 10px; +} + +.blog-card .category { + color: #ff4383; + font-weight: bold; + font-size: 12px; + text-transform: uppercase; + margin-bottom: 10px; +} + +.blog-card .blogtitle { + font-size: 18px; + margin: 10px 0; + transition: 0.5s ease-in-out; +} + +.blog-card .blogtitle:hover { + color: #ff4383; +} + +.blog-card .meta { + color: #999; + font-size: 14px; + margin: 5px 0; +} + +.blog-card .excerpt { + font-size: 14px; + color: #333; + margin: 15px 0; +} + +.blog-card .read-more { + display: block; + width: fit-content; + padding: 10px 15px; + background-color: #007bff; + color: white; + text-align: center; + text-decoration: none; + border-radius: 5px; + margin: 10px 0 0; + font-size: 14px; +} + +.blog-card .read-more:hover { + background-color: #0056b3; +} + +#categoryTags { + display: flex; + justify-content: center; + gap: 15px; + margin-bottom: 20px; + flex-wrap: wrap; +} + +.tag { + padding: 10px 20px; + font-size: 1.1em; + background: linear-gradient(135deg, #f0f0f0, #dcdcdc); /* Light mode tag background */ + color: #333333; /* Light mode text color */ + border-radius: 30px; + cursor: pointer; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: background 0.3s, box-shadow 0.3s, transform 0.2s; +} +.dark-mode .tag { + background: linear-gradient(135deg, #333, #222); /* Dark mode tag background */ + color: #fff; /* Dark mode text color */ +} +.dark-mode .tag:hover { + background: linear-gradient(135deg, #444, #333); /* Dark mode tag hover background */ +} + +.tag:hover { + background: linear-gradient(135deg, #e0e0e0, #c0c0c0); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); + transform: translateY(-2px); +} + + +.tag.active { + background: linear-gradient(135deg, #ffc107, #ff9800); /* Active tag styling */ + color: #fff; /* Active tag text color */ +} + +/* Responsive Styles */ +@media (max-width: 768px) { + .tag { + padding: 8px 15px; + font-size: 1em; + } +} + + + +@media (max-width:976px) { + .blog-card { + width: 40%; + } +} + +@media (max-width:768px) { + .blog-card { + width: 100%; + } + + .ways-content { + padding: 0 !important; + } +} + + +.certificate { + width: 100%; + justify-content: center; + display: flex; + flex-wrap: wrap; +} + +.certificate-left { + width: 40%; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} + +.ways { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + +} + +.ways-content { + padding: 60px; + padding-top: 30px; +} + +.ways-content h1 { + font-size: 50px !important; +} + +.ways-content p { + font-size: 20px !important; +} + +.ways img { + object-fit: contain !important; + border-radius: 20px; +} + +.ways1 { + width: 80%; + display: flex; + /* flex-wrap: wrap; */ + margin-top: 20px; + margin-bottom: 20px !important; +} +.dark-mode .ways1 a{ + color: white !important; +} +.dark-mode .ways2 a{ + color: white !important; +} + +.ways2 { + width: 80%; + display: flex; + flex-direction: row-reverse; + margin-top: 30px; + /* flex-wrap: wrap; */ + margin-bottom: 30px !important; +} + +@media only screen and (max-width:1400px) { + .certificate-left { + width: 80%; + } + + .certificate-right { + width: 100%; + height: auto; + } + + .ways1, + .ways2 { + justify-content: center; + flex-wrap: wrap; + } + + .ways1, + .ways2 { + padding: 0px !important; + text-align: center; + } +} + +@media only screen and (max-width:600px) { + .ways img { + object-fit: inherit; + scale: 0.60 !important; + } +} + +.ways a:hover { + text-decoration: underline; +} + +.ways a { + font-size: 30px; + text-decoration: none; + color: black; + font-weight: 600; +} + +.certificate-left h1 { + font-size: 30px; + text-align: start; +} + +.certificate-left p { + font-size: 20px; + text-align: start; + +} + +.certificate-right { + width: 40%; + height: 400px; +} + + + +/* Popup container */ +.popup { + display: none; + /* Hidden by default */ + position: fixed; + /* Stay in place */ + z-index: 1500; + /* Sit on top */ + left: 0; + top: 0; + width: 100%; + /* Full width */ + height: 100%; + /* Full height */ + overflow: hidden; + /* Enable scroll if needed */ + background-color: rgba(0, 0, 0, 0.5); + /* Black with opacity */ +} + +/* Popup content */ +.popup-content { + background-color: #fefefe; + display: flex; + max-width: 700px; + margin: 10% auto; + /* 15% from the top and centered */ + + border: 1px solid #888; + width: 80%; + /* Could be more or less, depending on screen size */ + position: relative; + border-radius: 20px; +} + +.main-popup-content .card-footer a:hover{ + color: blue !important; + /* padding: 10px; */ +} + +/* Dark Mode */ +.dark-mode .main-popup-content, +.dark-mode .side-content{ + background-color: black; +} + +.dark-mode .main-popup-content i, +.dark-mode .main-popup-content span, +.dark-mode .main-popup-content h1, +.dark-mode .main-popup-content p, +.dark-mode .main-popup-content a, +.dark-mode .main-popup-content .card-footer, +.dark-mode .main-popup-content .side-content { + color: white !important; +} + +/* Light Mode */ +.main-popup-content { + background-color: white; +} + +.main-popup-content i, +.main-popup-content span, +.main-popup-content h1, +.main-popup-content a, +.main-popup-content .card-footer{ + color: black !important; +} + +.line { + width: 100px; + border-right: solid 1px black; + border-right-style: dashed; +} + +/* Close button */ +.popup-close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + position: absolute; + right: 20px; + top: 10px; +} + +.popup-close:hover, +.popup-close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} + +/* Button inside popup */ +.popup-button { + background-color: #4CAF50; + /* Green */ + border: none; + color: white; + padding: 10px 20px; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 10px 2px; + cursor: pointer; +} + +.popup-button:hover { + background-color: #45a049; +} + +.main-popup-content { + padding-left: 20px; + padding-top: 20px; + width: 500px; + height: 417px; + +} + +.main-popup-content h1 { + margin-bottom: 40px; +} + +.call { + display: flex; + height: 70px; + align-items: center; + justify-content: space-between; + font-weight: 500; + font-size: 20px; + color: black; +} + +.card-footer { + height: 80px; + padding-bottom: 20px; + font-size: 20px; +} + +.card-footer a { + text-decoration: none; + color: black; +} + +.side-content { + height: 100%; + display: flex; + width: 300px; + align-items: center; + flex-direction: column; + justify-content: center; + height: 417px; +} + +.side-content svg { + position: relative; + top: 100px; +} + +@media only screen and (max-width:700px) { + .side-content { + height: auto; + } + + .main-popup-content { + height: auto; + } + + .main-popup-content h1 { + font-size: 30px !important; + margin-bottom: 10px; + } + + .main-popup-content p { + margin-bottom: 4px; + } + + .call { + flex-direction: column; + gap: 10px; + align-items: start; + } + + .popup-content { + margin: 15% auto; + width: 95vw; + } +} + +/* .dark-mode .main-popup-content h1 { + color: black !important; +} + +.dark-mode .card-footer p { + color: black !important; +} */ + +.blog-save { + display: flex; + justify-content: space-between; +} + +.save-btn { + display: flex; + gap: 10px; + cursor: pointer; + justify-content: center; + align-items: center; + color: rgb(69, 69, 69); + font-size: 20px; + font-weight: 500; +} + +.saved-blogs { + font-size: 20px; + text-align: center; + text-decoration: none; + color: rgb(61, 61, 61); +} + +.saved-blogs:hover { + text-decoration: underline; +} + + +/* Toast Notification Styles */ +/* #toast-container { + position: fixed; + top: 10px; + right: 10px; + z-index: 1000; + } + + .toast { + display: none; + min-width: 200px; + margin-bottom: 10px; + padding: 15px; + top: 30px; + color: #fff; + border-radius: 5px; + font-size: 14px; + position: relative; + padding: 18px !important; + + } + .line{ + position: absolute; + bottom: -20px; + z-index: 10000; + left: 0px; + height: 4px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + background-color: green; + animation: line-animate 2s ease-in-out forwards; + } + @keyframes line-animate { + from{ + width: 0px; + }to{ + width: 100%; + } + } + .toast.show { + display: block; + animation: fadeInOut 3s ease-out; + } + + .toast.like { + background: #12229d; + color: #fff; + + font-size: 12px; + font-size: 15px; + text-align: center; + font-weight: 600; + min-width: 200px; + right: 0; + width: 22vw; + padding: 10px; + + } + + .toast.unlike { + background-color: #F44336; + } + + @keyframes fadeInOut { + 0% { opacity: 0; } + 10% { opacity: 1; } + 90% { opacity: 1; } + 100% { opacity: 0; } + } + + .toast .close-btn { + position: absolute; + top: 5px; + right: 10px; + cursor: pointer; + } + */ + +#progressBarContainer { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 7px; + background-color: #333; + z-index: 9999; +} + +#progressBar { + height: 100%; + width: 0%; + background: white; + transition: width 0.2s ease; +} \ No newline at end of file diff --git a/styles/compare.css b/styles/compare.css new file mode 100644 index 00000000..82c7c677 --- /dev/null +++ b/styles/compare.css @@ -0,0 +1,211 @@ +*{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + } +body { + + background-color: #f4f4f9; + color: #333; + margin: 0; + padding: 0; +} + +.container { + width: 90%; + max-width: 1200px; + margin: 0 auto; + padding: 20px; + min-height: 41vh !important; +} + +#result-container{ + margin-top: 20px; + height: 400px; +} + +h1 { + text-align: center; + color: #333; + margin-bottom: 20px; +} +h2{ + text-align: center; + color: #333; +} +label{ + font-size: 20px; +} +.form-group { + margin-bottom: 15px; +} + +.label { + display: block; + margin-bottom: 5px; + font-weight: bold; +} + +.select { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 16px; +} + +.button { + display: block; + width: 100%; + padding: 10px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 4px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.button:hover { + background-color: #45a049; +} + +.comparison { + margin-top: 20px; +} + +.comparison h2 { + text-align: center; + margin-bottom: 15px; +} + +table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; +} + +th, td { + padding: 12px; + text-align: center; + border: 1px solid #ddd; +} + +th { + background-color: #4CAF50; + color: white; +} + +tr:nth-child(even) { + background-color: #f9f9f9; +} +.dark-mode tr:nth-child(even) { + background-color: #1a1717; +} +.hidden { + display: none; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .container { + padding: 10px; + } + + .button { + font-size: 14px; + } + + #result-container{ + height: 300px; + } +} +select{ + background: transparent; + outline: none; + border: none; + border: solid 1px gray; + padding: 10px; + font-size: 20px; +} +.dark-mode select{ + color: white; + background-color: black; +} +#avatarImg1{ + --s: 10px; + padding: var(--s); + border: calc(2*var(--s)) solid #ffffff00; + outline: 1px solid #ffffff; + outline-offset: calc(-1*var(--s)); + background: conic-gradient(from 90deg at 1px 1px, #ffffff00 25%, #ffffff 0); + /* border-radius: 50%; */ + -webkit-user-drag: none; + -moz-user-drag: none; + -o-user-drag: none; + user-drag: none; + width: 200px; + height: 200px; +} + +#avatarImg2{ + --s: 10px; + padding: var(--s); + border: calc(2*var(--s)) solid #ffffff00; + outline: 1px solid #ffffff; + outline-offset: calc(-1*var(--s)); + background: conic-gradient(from 90deg at 1px 1px, #ffffff00 25%, #ffffff 0); + /* border-radius: 50%; */ + -webkit-user-drag: none; + -moz-user-drag: none; + -o-user-drag: none; + user-drag: none; + width: 200px; + height: 200px; +} + +/* CSS for spinner */ +.spinner { + border: 4px solid rgba(0, 0, 0, 0.1); + border-radius: 50%; + border-top: 4px solid #08b461; + width: 40px; + height: 40px; + animation: spin 1s linear infinite; + margin: 10px auto; + } + + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + .hidden { + display: none; + } + + #progressBarContainer { + + +#progressBarContainer { + + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 7px; + background-color: #333; + z-index: 9999; +} + +#progressBar { + height: 100%; + width: 0%; + background: white; + transition: width 0.2s ease; + +} + diff --git a/styles/construction.css b/styles/construction.css new file mode 100644 index 00000000..17f3f569 --- /dev/null +++ b/styles/construction.css @@ -0,0 +1,44 @@ +*{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} +.fixed-heading { + font-size: 6rem; /* Big heading size */ + color: #242322; /* Orange color */ + position: fixed; /* Fixed position */ + top:30vh; + text-align: center; + animation: fadeIn 3s ease-in-out infinite alternate; + z-index: 5; /* Animation */ +} +.fixed-div{ + display: flex; + align-items: center; + justify-content: center; +} +/* Animation keyframes */ +@keyframes fadeIn { + 0% { + opacity: 0; + transform: translateY(-20px); + } + 50% { + opacity: 1; + transform: translateY(0); + } + 100% { + opacity: 0; + transform: translateY(20px); + } +} + +@media (max-width: 600px) { + .fixed-heading { + font-size: 8vw; /* Smaller font size for smaller screens */ + } +} + +@media (max-width: 400px) { + .fixed-heading { + font-size: 6vw; /* Even smaller font size for very small screens */ + } +} \ No newline at end of file diff --git a/styles/construction.css.map b/styles/construction.css.map new file mode 100644 index 00000000..e69de29b diff --git a/styles/events.css b/styles/events.css new file mode 100644 index 00000000..240aeef6 --- /dev/null +++ b/styles/events.css @@ -0,0 +1,364 @@ +*{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} +.timeline { + position: relative; + max-width: 1200px; + margin: 0 auto; + padding: 40px 0; +} + +.timeline::after { + content: ""; + position: absolute; + width: 6px; + background-color: #333; + top: 80px; + bottom: 0; + left: 50%; + margin-left: -3px; +} + +.timeline-item { + padding: 10px 40px; + position: relative; + width: calc(50% - 40px); + box-sizing: border-box; +} + +.timeline-item::after { + content: ""; + position: absolute; + width: 25px; + height: 25px; + background-color: #3b9cdd; + border: 4px solid #3b9cdd; + border-radius: 50%; + z-index: 2; + top: 20px; +} + +.timeline-item:nth-child(odd) { + left: 0; + width: calc(50%); +} + +.timeline-item:nth-child(even) { + left: 50%; + width: calc(50%); +} + +.timeline-item:nth-child(odd)::after { + right: -17px; +} + +.timeline-item:nth-child(even)::after { + left: -17px; +} + +.timeline-content { + padding: 20px 30px; + background-color: #fff; + position: relative; + border-radius: 6px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.timeline-item:nth-child(odd) .timeline-content::after { + content: ""; + position: absolute; + top: 15px; + right: -15px; + width: 0; + height: 0; + border-top: 15px solid transparent; + border-bottom: 15px solid transparent; + border-left: 15px solid #fff; +} + +.timeline-item:nth-child(even) .timeline-content::after { + content: ""; + position: absolute; + top: 15px; + left: -15px; + width: 0; + height: 0; + border-top: 15px solid transparent; + border-bottom: 15px solid transparent; + border-right: 15px solid #fff; +} + +.event-title { + color: #333; + font-size: 24px; + margin-bottom: 10px; +} + +.event-date { + font-style: italic; + color: #888; + margin-bottom: 10px; +} + +.event-description { + margin-bottom: 15px; +} + +.event-link { + display: inline-block; + background-color: #333; + color: #fff; + padding: 8px 15px; + border-radius: 4px; + text-decoration: none; + transition: background-color 0.3s; +} + +.event-link:hover { + background-color: #555; +} + +/* Dark mode styles */ +body.dark-mode .timeline::after { + background-color: #f0f0f0; +} + +body.dark-mode .timeline-item::after { + background-color: #ccc; + border: 4px solid #999; +} + +body.dark-mode .timeline-content { + background-color: #444; + color: #f0f0f0; +} + +body.dark-mode .timeline-item:nth-child(odd) .timeline-content::after { + border-left-color: #444; +} + +body.dark-mode .timeline-item:nth-child(even) .timeline-content::after { + border-right-color: #444; +} + +body.dark-mode .event-title { + color: #f0f0f0; +} + +body.dark-mode .event-date { + color: #ccc; +} + +body.dark-mode .event-link { + background-color: #f0f0f0; + color: #333; +} + +body.dark-mode .event-link:hover { + background-color: #ccc; +} + +body.dark-mode .navbar-text { + color: #fff; +} + +/* Responsive design */ +@media screen and (max-width: 768px) { + .container{ + padding: 5px; + } + + .timeline { + max-width: 100vw; + padding: 20px 0; + } + + .timeline-item { + padding: 10px 0px; + } + + .timeline-content{ + width: 100%; + padding: 10px; + } + + .banner{ + width: 100%; + } + + .banner iframe{ + height: 215px; + } + + .timeline::after { + left: 31px; + } + + .line { + left: 28px !important; + } + + .line1 { + right: 93.5% !important; + } + + .timeline-item { + width: 100%; + padding-left: 70px; + padding-right: 25px; + } + + .timeline-item::after { + left: 15px; + } + + .timeline-item:nth-child(odd) { + width: 100%; + } + + .timeline-item:nth-child(even) { + left: 0; + width: 100%; + } + + .timeline-item:nth-child(odd)::after, + .timeline-item:nth-child(even)::after { + left: 15px; + } + + .timeline-item:nth-child(odd) .timeline-content::after, + .timeline-item:nth-child(even) .timeline-content::after { + left: -15px; + border-right: 15px solid #fff; + border-left: none; + } + + body.dark-mode .timeline-item:nth-child(odd) .timeline-content::after, + body.dark-mode .timeline-item:nth-child(even) .timeline-content::after { + border-right-color: #444; + } +} + + +@media screen and (min-width:768px) and (max-width: 1024px) { + .timeline { + max-width: 100vw; + padding: 20px 0; + } + + .timeline-item { + padding: 10px 0px; + } + + .timeline-content{ + width: 80%; + padding: 20px; + } + + .banner{ + width: 100%; + } + + .banner iframe{ + height: 215px; + } +} + +.line { + position: absolute; + background-color: #3b9cdd; + width: 6px; + top: 40px; + z-index: 1; +} + +.line--left { + left: 99.5%; +} + +.line--right { + right: 99.5%; +} + +.scroll-animate { + transition: all 1.5s ease-out; + background-color: #3b9cdd !important; +} + +#scrollToTop { + position: fixed; + bottom: 20px; + right: 20px; + width: 45px; + height: 45px; + border-radius: 50%; + background-color: #000000; + color: #ffffff; + border: none; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + transition: background-color 0.3s, color 0.3s, opacity 0.3s, transform 0.3s; + opacity: 0; + visibility: hidden; + z-index: 9999; +} + +#scrollToTop:hover { + background-color: #3e3e3e; +} + +#scrollToTop.show { + opacity: 1; + visibility: visible; +} + +#scrollToTop .arrow-icon { + fill: white; + width: 24px; + height: 24px; + transition: transform 0.3s; +} + +#scrollToTop:hover { + transform: translateY(-5px); + /* Move button up on hover */ +} + +#scrollToTop:hover .arrow-icon { + transform: translateY(-2px); + /* Move arrow up on hover */ +} + +body.dark-mode #scrollToTop { + background-color: #ffffff; + color: #000000; +} + +body.dark-mode #scrollToTop:hover { + background-color: #b6b6b6ff; +} + +body.dark-mode #scrollToTop .arrow-icon { + fill: black; +} + +#progressBarContainer { + + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 7px; + background-color: #333; + z-index: 9999; +} + +#progressBar { + height: 100%; + width: 0%; + background: white; + transition: width 0.2s ease; +} \ No newline at end of file diff --git a/styles/explore.css b/styles/explore.css new file mode 100644 index 00000000..ccb0ec63 --- /dev/null +++ b/styles/explore.css @@ -0,0 +1,199 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + background-color: #f0f0f0; + color: #333; + transition: background-color 0.3s ease, color 0.3s ease; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 2rem; +} + +.header { + text-align: center; + margin-bottom: 2rem; +} + +.title-text { + display: flex; + justify-content: center; + font-weight: bold; + color: #333; + font-size: 2rem; + text-decoration: underline; + text-decoration-color: #FFA500; + text-underline-offset: 0.5rem; +} + +.highlight { + color: #FFA500; +} + +.content { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: space-between; +} + +/* Card styles */ +.cards { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: 20px; + width: 100%; +} + +.card { + background-color: #505050; + border-radius: 8px; + padding: 20px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + width: 30%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; + position: relative; +} + +.card:hover { + transform: translateY(-10px); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); +} + +.card-header { + display: flex; + flex-direction: column; + align-items: center; +} + +.item-number { + font-size: 24px; + color: #ffffff; + /* Ensure the number is visible on the card background */ + background-color: #ff6900; + /* Background color for the number */ + border-radius: 9999px; + /* Make it circular */ + padding: 0.5rem 1rem; + font-weight: bold; + position: absolute; + top: 10px; + /* Adjust position as needed */ + left: -25px; + /* Adjust position as needed */ + width: 40px; + /* Set a fixed width for consistent sizing */ + height: 40px; + /* Set a fixed height for consistent sizing */ + display: flex; + align-items: center; + justify-content: center; + z-index: 1; + /* Ensure it stays above other content */ +} + +.item-heading { + font-weight: bold; + font-size: 18px; + font-weight: 500; + text-align: center; + color: #ffb300; + position: relative; + width: 100%; +} + +.item-heading::after { + content: ""; + width: 100%; + height: 3px; + background-color: #ffb300; + display: block; + margin: 8px auto 0; +} + +.item-description { + font-size: 16px; + line-height: 1.6; + color: #ffffff; + text-align: justify; + margin-top: 10px; +} + +/* Light mode specific styles */ +body .item { + background-color: #ffedd5; + border-radius: 0.5rem; + padding: 1rem; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); +} + +body .item-number { + font-size: 24px; + color: #4CAF50; + margin-bottom: 10px; + /* Ensuring it's visible and positioned */ + position: absolute; + left: -1.5rem; + top: -22px; + background-color: #ff6900; + color: #ffffff; + border-radius: 9999px; + padding: 0.5rem 1rem; + font-weight: bold; + display: flex; + align-items: center; + justify-content: center; + width: 54px; + height: 54px; + z-index: 1; + /* Ensures it's above other content */ +} + +body .item-heading { + font-size: large; + font-weight: bold; +} + +/* Dark mode specific styles */ +body.dark-mode { + background-color: #333; + color: #f0f0f0; +} + +body.dark-mode .card { + background-color: #444; +} + +body.dark-mode .item-heading { + color: #ffb300; + font-weight: bold; +} + +body.dark-mode .item-number { + background-color: #555; + color: #ffffff; +} + +/* Responsive styles */ +@media (max-width: 768px) { + .card { + width: 100%; + padding: 15px; + } + + .title-text { + font-size: 1.5rem; + } +} \ No newline at end of file diff --git a/styles/githubbadge.css b/styles/githubbadge.css new file mode 100644 index 00000000..5c4a70c6 --- /dev/null +++ b/styles/githubbadge.css @@ -0,0 +1,293 @@ +*{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} +body { + + background-color: #f4f4f4; + color: #333; + margin: 0; + padding: 0; + line-height: 1.6; +} + +.wrapper { + max-width: 1200px; + margin: auto; + padding: 20px; + background: #fff; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.title { + text-align: center; + font-size: 3em; + font-weight: bold; + color: #f67621; + margin-bottom: 20px; + text-decoration: underline; + text-underline-offset: 8px; +} + +/* Chrono component styles */ +.chrono { + margin: 0 auto; + width: 100%; +} + +.event-container { + display: flex; + flex-direction: column; + align-items: center; +} + +.event { + background-color: #f67621; + color: white; + border-radius: 8px; + margin: 20px 0; + padding: 20px; + max-width: 600px; + text-align: center; +} + +.event img { + width: 100%; + max-width: 600px; + height: auto; + border-radius: 8px; +} + +.event figcaption { + font-size: 2em; + font-weight: bold; + margin-top: 10px; +} + +.event p { + font-size: 1em; + margin: 10px 0; +} + +.event .link { + color: #fff; + font-size: 1.2em; + font-weight: bold; + text-decoration: none; + border-bottom: 2px solid #fff; +} + +.event .link:hover { + text-decoration: underline; +} + +/* Dark mode styles */ +body.theme-dark { + background-color: #121212; + color: #e0e0e0; +} + +body.theme-dark .wrapper { + background: #1e1e1e; +} + +body.theme-dark .title { + color: #f67621; +} + +body.theme-dark .event { + background-color: #474747; +} + +body.theme-dark .event .link { + color: #f67621; + border-bottom: 2px solid #f67621; +} + +body.theme-dark .container{ + background-color: black !important; +} +body.theme-dark .center { + background-color: black !important; +} +body.dark-mode .themed-text { + color: white; +} + +body:not(.dark-mode) .themed-text { + color: black; +} +body.dark-mode .themed-text { + color: white; +} +/* Light Mode Styles */ +.darkmodeimg { + display: none; +} + +/* Dark Mode Styles */ +.dark-mode .darkmodeimg { + display: block !important; +} +.lightmodeimg{ + display: block; +} +.dark-mode .lightmodeimg { + display: none !important; +} +.dark-mode .container h1,.dark-mode .container h2{ + color: white !important; +} +.table-container { + width: 100% !important; /* Set width to 90% of the viewport width */ + overflow-x: auto; /* Enable horizontal scrolling */ + margin: 0 auto; /* Center the container */ +} + +.header, .row { + display: flex; + + flex-wrap: wrap; /* Prevent wrapping */ +} + +.cell { + flex: auto; /* Allow cells to expand and fill the row */ + padding: 8px; + border: 1px solid #ddd; /* Add border */ + text-align: left; /* Align text to the left */ + /* min-width: 100px; */ +} + +.header { + background-color: #f2f2f2; /* Light gray background for header */ + font-weight: bold; +} + +.inner-table { + display: flex; + flex-direction: column; + width: 100%; +} + +.inner-table .header, .inner-table .rows { + display: flex; + flex-wrap: wrap; /* Prevent wrapping */ +} + +.inner-table .header .cell { + flex: auto !important; + background-color: #f2f2f2; /* Light gray background for inner table header */ +} + +.inner-table .rows { + overflow-x: auto; /* Allow horizontal scrolling */ +} + +.inner-table .row { + display: flex; + flex-wrap: nowrap; /* Prevent wrapping */ +} + +.inner-table .row .cell { + flex: 1; + border: 1px solid #ddd; /* Add border */ +} +.dark-mode .header,.dark-mode .cell{ + background-color: black !important; +} + + + + + +.certificate{ + width: 100%; + justify-content: center; + display: flex; + flex-wrap: wrap; +} +.certificate-left{ + width: 40%; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} + +.ways{ + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + +} +.ways-content{ + padding: 60px; + padding-top: 30px; +} +.ways-content h1{ + font-size: 50px !important; +} +.ways-content p{ + font-size: 20px !important; +} +.ways img{ + object-fit: contain; + border-radius: 20px; +} +.ways1{ + width: 80%; + display: flex; + /* flex-wrap: wrap; */ + margin-top: 20px; + margin-bottom: 20px !important; +} +.ways2{ + width: 80%; + display: flex; + flex-direction: row-reverse; + margin-top: 30px; + /* flex-wrap: wrap; */ + margin-bottom: 30px !important; +} +@media only screen and (max-width:1300px){ + .certificate-left{ + width: 80%; + }.certificate-right{ + width: 100%; + height: auto; + } + .ways1,.ways2{ + justify-content: center; + flex-direction: column; + } + .ways1,.ways2{ + padding: 0px !important; + text-align: center; + } +} +@media only screen and (max-width:500px) { + .ways img{ + scale: 0.60 !important;} +} +.ways a:hover{ + text-decoration: underline; +} +.ways a{ + font-size: 30px; + text-decoration: none; + color: black ; + font-weight: 600; +} +.certificate-left h1{ + font-size: 30px; + text-align: start; +} +.certificate-left p{ + font-size: 20px; text-align: start; + +} +.certificate-right{ + width: 40%; + height: 400px; +} \ No newline at end of file diff --git a/styles/hamburger.css b/styles/hamburger.css new file mode 100644 index 00000000..d99fe81f --- /dev/null +++ b/styles/hamburger.css @@ -0,0 +1,105 @@ +*{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} +.navbar-links { + margin-left: 20px; + text-decoration: none; + color: #fff; + } + + .hamburger { + display: none ; + flex-direction: column; + cursor: pointer; + transition: transform 0.6s ease; + } + + .hamburger div { + + width: 25px; + height: 2px; + background-color: #000000; + margin: 4px; + transition: transform 0.3s ease, opacity 0.3s ease; + } + + .hamburger.active div:nth-child(1) { + transform: translateY(14px) rotate(45deg); + } + + .hamburger.active div:nth-child(2) { + opacity: 0; + } + + .hamburger.active div:nth-child(3) { + transform: translateY(-6px) rotate(-45deg); + } + + .mobile-menu { + display: none; + flex-direction: column; + align-items: center; + background-color: #ffffff; + width: 100%; + position: fixed; + top: 52px; + left: 0; + opacity: 0; + z-index: 999; + transform: translateY(-20px); + transition: transform 0.5s ease, opacity 0.3s ease; + } + + + .mobile-menu a { + padding: 7px; + width: 100%; + text-align: center; + /* border-bottom: 1px solid #444; */ + color: #000000; + text-decoration: none; + } + + .mobile-menu.show { + display: flex; + opacity: 1; + transform: translateY(0); + } + + .mobile-menu a:hover { + text-decoration: underline; + } + + + body.dark-mode .hamburger div { + background-color: white; + } + + body.dark-mode .mobile-menu a { + color: white; + } + + body.dark-mode .mobile-menu { + background-color: #333; + color: #f0f0f0; + } + + + @media (max-width: 768px) { + .hamburger div { + display: block; + } + .navbar-right { + display: none; + } + + .hamburger { + display: flex; + } + + .side-icons { + flex-direction: column; + margin-top: 45px; + } + + } \ No newline at end of file diff --git a/styles/help.css b/styles/help.css new file mode 100644 index 00000000..f6b02bf2 --- /dev/null +++ b/styles/help.css @@ -0,0 +1,311 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); +*{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} +.container-help { + display: flex; + font-family: "Poppins", sans-serif; + flex-direction: column; + align-items: center; + max-width: 100vw !important; +} + +.content-block { + display: flex; + gap: 200px; + justify-content: center; + align-items: center; + width: 80%; + margin-top: 60px; + margin-bottom: 30px; + background-color: #fff; + height: 450px; +} + +body.dark-mode .content-block{ + background-color: #333; + +} + +.main-heading { + font-size: 48px; + font-weight: 500; + color: #121212; + margin-bottom: 20px; + width: 450px; + word-wrap: break-word; +} + +body.dark-mode .main-heading{ + color: #fff; +} + +.description { + font-size: 16px; + font-family: "Poppins", sans-serif; + font-weight: 400; + color: #666; +} + +body.dark-mode .description{ + color: #c0c0c0; +} + +.steps-indicator { + position: relative; + height: 300px; +} + +.step-line { + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 4px; + background-color: #0066cc; +} + +body.dark-mode .step-line{ + background-color: #c0c0c0; +} + +.step-dot { + position: absolute; + left: 50%; + width: 20px; + height: 20px; + background-color: #0066cc; + border-radius: 50%; + transform: translateX(-40%); +} + +body.dark-mode .step-dot{ + background-color: #c0c0c0; +} + +.step-dot::after { + content: attr(data-step); + position: absolute; + left: 30px; + top: 50%; + transform: translateY(-50%); + color: #0066cc; + font-weight: bold; +} + +.step-dot:nth-child(2) { top: 0; } +.step-dot:nth-child(3) { top: 50%; } +.step-dot:nth-child(4) { bottom: 0; } + +.step-box { + position: absolute; + background-color: #fff; + box-shadow: 7px 7px 20px 0 rgba(18, 18, 18, 0.2); + padding: 16px; + border-radius: 16px; + font-size: 12px; + font-weight: 700; + color: #0066cc; + white-space: nowrap; +} + +body.dark-mode .step-box{ + background-color: #555; + color: #fff; +} + + .steps-clone { + position: relative; + display: flex; + margin-top: 0px; + flex-direction: column; + justify-content: center; + } + + .steps-clone:tiny { + position: static; + display: block; + }.steps-clone { + position: relative; + display: flex; + margin-top: 0px; + flex-direction: column; + justify-content: center; + } + .content-wrap{ + width: 50%; + display: flex; + justify-content: center; + align-items: center; + + + + } + .text-block{ + padding: 50px; + } + .step-content-block{ + width: 70%; + padding: 50px !important; + } + .steps-clone:tiny { + position: static; + display: block; + }.dot { + z-index: 3; + position: absolute; + width: 12px; + height: 12px; + margin-top: -6px; + margin-bottom: -6px; + border-top-left-radius: 50%; + border-top-right-radius: 50%; + border-bottom-left-radius: 50%; + border-bottom-right-radius: 50%; + } + + .dot:small { + position: absolute; + bottom: 50%; + z-index: 99; + margin-bottom: 0px; + align-self: center; + order: 2; + } + + .step-block { + position: relative; + display: flex; + width: 100vw !important; + min-height: 80vh; + margin-top: -1px; + justify-content: space-around; + flex-wrap: nowrap; + align-items: center; + align-content: center; + } + + @media only screen and (max-width:700px){ + .content-block { + width: 100vw !important; + overflow-x: hidden; + } + .text-section h3 { + font-size: 1.5rem; + max-width: 40%; + transform: translateX(80%); + } + .text-section p { + font-size: 1rem; + max-width: 40%; + transform: translateX(80%); + } + .steps-indicator .step-box { + transform: translateX(-300%) !important; + } + .steps-indicator .step-dot { + transform: translateX(-1200%) !important; + } + .steps-indicator .step-line { + transform: translateX(-5800%) !important; + } + + .step-block { + max-width: 100vw !important; + overflow-x: hidden !important; + } + .img-block img { + max-width: 100vw !important; + /* background-color: red; */ + } + .content-wrap { + width: 100% !important; + } + .step-block{ + flex-direction: column; + } + .dot{ + bottom: 10px; + } + .step-block .content-wrap{ + z-index: 100; + } + .step-block .img-block{ + z-index: 100; + } + } + .step-block:small { + min-height: 110vh; + flex-direction: column; + justify-content: center; + align-items: center; + } + .scoll-wrap { + position: absolute; + bottom: 50%; + background-color: #eeeff4; + width: 10px; + display: flex; + height: 100%; + flex-direction: column; + align-items: center; + } + + .scoll-wrap:small { + bottom: 50%; + z-index: 1; + height: 100%; + } + .img-block { + width: 50%; + display: flex; + justify-content: center; + align-items: center; + } + + .img-block img{ + width: 350px; + } + + .img-block .first{ + width: 450px; + } + + .content .heading{ + font-size: 20px; + } + + .scroll-animate { + position: absolute; + top: 0px; + width: 6px; + transition: all 1.5s ease-out; + z-index: 0; + background-color: #3b9cdd !important; + } + + body.dark-mode .text-block{ + background-color: #333; + } + + body.dark-mode .text-block .content{ + color: #f0f0f0 !important; + } + + body.dark-mode .text-block .content a{ + color: #3b9cdd; + } + + body.dark-mode .scroll-wrap{ + border: none !important; + background-color: #fff !important; + } + + body.dark-mode .scroll-animate{ + border: none !important; + background-color: #c0c0c0 !important; + } + + body.dark-mode .dot{ + background-color: #c0c0c0 !important; + } diff --git a/styles/modal.css b/styles/modal.css new file mode 100644 index 00000000..e26ad9a3 --- /dev/null +++ b/styles/modal.css @@ -0,0 +1,101 @@ +*{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} +#profileModal { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: none; + background-color: rgba(0, 0, 0, 0.7); /* Dark transparent overlay */ + justify-content: center; + align-items: center; + z-index: 1000; + } + + .modal-content { + background-color: #fff; + padding: 30px; + border-radius: 10px; + text-align: center; + width: 80%; + max-width: 500px; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); + position: relative; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; + } + + .modal-content h2 { + margin-top: 0px; + font-size: 24px; + margin-bottom: 20px; + color: #000; + } + + .modal-content p { + font-size: 16px; + margin-bottom: 30px; + color: #333; + } + + .add-profile-button { + display: inline-block; + padding: 12px 25px; + background-color: #000; + color: #fff; + font-size: 16px; + border-radius: 5px; + text-decoration: none; + transition: background-color 0.3s ease; + } + + .add-profile-button:hover { + background-color: #333; + } + + .close-button { + position: absolute; + right: 20px; + top: 15px; + font-size: 24px; + color: #333; + cursor: pointer; + } + + #profileModal a { + font-weight: bold; + text-transform: uppercase; + letter-spacing: 0.5px; + } + + /* Navbar Icon Styling */ + .navbar-icon { + width: 40px; + height: 40px; + } + + .navbar-text { + font-size: 24px; + font-weight: bold; + color: #000; + margin-left: 10px; + } + +body.dark-mode .modal-content p { + color: rgb(181, 181, 181); +} + +body.dark-mode .modal-content h2 { + color: white; +} + +body.dark-mode .add-profile-button:hover { + background-color: #5f5f5f; +} + +body.dark-mode .close-button { + color: #ffffff; +} \ No newline at end of file diff --git a/styles/pagination.css b/styles/pagination.css new file mode 100644 index 00000000..65127dc3 --- /dev/null +++ b/styles/pagination.css @@ -0,0 +1,34 @@ +*{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} +.pagination { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; +} + +.pagination button { + font-size: medium; + margin: 0 10px; + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.pagination button:hover { + background-color: #3a90d5; /* Background color on hover */ + transform: scale(1.05); /* Slightly enlarge button on hover */ +} + +.pagination button:disabled { + background-color: #c0c0c0; + cursor: not-allowed; +} + +.pagination #page-info { + font-weight: bold; +} diff --git a/styles/speech.css b/styles/speech.css new file mode 100644 index 00000000..4d01fc5a --- /dev/null +++ b/styles/speech.css @@ -0,0 +1,63 @@ +*{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + } +.mic-button{ + display: none; + position: relative; + right : 12px; + font-size: 1em; + background: none; + border: none; + outline: none; + box-shadow: none; + padding: 10px; + +} + +body.dark-mode .mic-button{ + /* padding: 15px; */ + border-radius: 100%; + /* background-color: white !important; */ +} +body.dark-mode .fa-microphone{ + color: white; +} + +.show{ + display: inline-block; +} +.mic-button :hover{ + /* background-color: rgb(219, 214, 214); */ + border-radius: 100%; + /* padding: 15px; */ + /* height: 10px; */ + /* width: 10px; */ + cursor: pointer; + transition: background-color 0.3s ease; + display: flex; + align-items: center; + justify-content: center; + +} +#animated-voice{ + display: none; +} +.listening{ + background-color: rgb(8, 8, 8); + padding: 20px; + border-radius: 100%; + height: 10px; + width: 10px; + +} +.listening >i{ + display: none; +} +.listening #animated-voice{ + display: block; + position: relative; + right: 9.5px; + bottom: 7px; + font-size: 1.25em; + +} diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 00000000..e8c1f911 --- /dev/null +++ b/styles/styles.css @@ -0,0 +1,1471 @@ +*{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} +body { + background-color: #f0f0f0; + color: #333; + margin: 0; + padding: 0; + transition: background-color 0.3s ease, color 0.3s ease; +} + +.container { + max-width: 1200px; + margin: 100px ; + padding: 200px; + text-align: center; + margin-top: 20%; + /* margin-bottom: 400px; */ +} + +.main-heading { + margin-bottom: 1000px; + font-size: 50px; + margin-bottom: 80px; +} + +.tags { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 20px; +} + +.views-likes { + display: flex; + justify-content: space-around; +} + +.like-red { + color: red; +} + +.tag { + display: inline-block; + margin: 5px; + padding: 10px 15px; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 20px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.tag:hover { + background-color: #ebebeb; +} + +.search-bar { + margin-bottom: 20px; +} + +.search-input { + width: 259px; + padding: 15px; + font-size: 16px; + border: 2px solid #ddd; + border-radius: 25px; + box-shadow: none; + transition: border-color 0.3s ease, box-shadow 0.3s ease, all 0.3s; +} + +.search-input:focus { + width: 50%; + outline: none; + transition: all 0.3s; +} + +.search-input:hover, +.search-input:focus { + border-color: #aaa; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.profiles { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.profile { + background-color: #fff; + border: 1px solid #ddd; + border-radius: 10px; + margin: 10px; + width: 250px; + padding: 15px; + margin-top: 30; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + animation: fadeIn 0.5s ease-out; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.profile:hover { + transform: scale(1.05); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); +} + +.profile img { + max-width: 100%; + border-radius: 10px; +} + +.profile p { + color: #333; +} + +.grey-banner { + display: inline-block; + background: linear-gradient(135deg, #f0f0f0, #fff); + color: black; + padding: 10px 20px; + font-size: 16px; + border: none; + border-radius: 20px; + text-align: center; + text-decoration: none; + transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; + cursor: pointer; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); + margin: 20px auto; +} + +.grey-banner:hover { + background: linear-gradient(135deg, #e0e0e0, #f0f0f0); + transform: translateY(-2px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12); +} + +.grey-banner:active { + transform: translateY(0); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15); +} + +body.dark-mode .grey-banner { + background: linear-gradient(135deg, #444, #555); + color: #fff; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); +} + +body.dark-mode .grey-banner:hover { + background: linear-gradient(135deg, #333, #444); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5); +} + +body.dark-mode .grey-banner:active { + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.6); +} + +/* Dark Mode Styles */ +body.dark-mode { + background-color: #000000; + color: #f0f0f0; +} + +body.dark-mode .tag { + background-color: #555; + border-color: #444; + color: #fff; +} + +body.dark-mode .tag:hover { + background-color: #3f3f3f; +} + +body.dark-mode .search-input { + background-color: #555; + border-color: #444; + color: #fff; +} + +body.dark-mode .profile { + background-color: #444; + border-color: #555; +} + +body.dark-mode .profile p { + color: #f0f0f0; +} + +/* Switch Label */ +.toggle-switch label { + position: relative; + top: 0px; + left: 7px; + cursor: pointer; + width: 55px; + /* Adjust width to fit switch button and icons */ + height: 30px; + /* Adjust height if needed */ + background-color: #ccc; + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + padding: 0 5px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: background-color 0.5s ease; +} + +.no-profiles-message h2 { + color: black; +} + +/* Styling for Vertical Scrollbar */ + +::-webkit-scrollbar { + width: 12px; +} + +::-webkit-scrollbar-track { + background: #ebebeb; + border-radius: 6px; +} + +::-webkit-scrollbar-thumb { + background-color: #383838; + border-radius: 6px; + border: 0.4px solid #eaeaeb; + transition: background 0.6s ease-in-out; +} + +::-webkit-scrollbar-thumb:hover { + background-color: #545454; +} + +::-webkit-scrollbar-button { + background-color: #f1f1f1; + background-repeat: no-repeat; + background-size: 120%; +} + +::-webkit-scrollbar-button:decrement { + background-image: url("https://omjsblog.wordpress.com/wp-content/uploads/2024/05/rocket-up.png"); +} + +::-webkit-scrollbar-button:increment { + background-image: url("https://omjsblog.wordpress.com/wp-content/uploads/2024/05/rocket-down.png"); +} + +/* Styling for Dark Mode */ + +body.dark-mode ::-webkit-scrollbar { + width: 12px; +} + +body.dark-mode::-webkit-scrollbar-track { + background: #646464; + border-radius: 6px; +} + +body.dark-mode::-webkit-scrollbar-thumb { + background-color: #ffffff; + border-radius: 6px; + border: 0.4px solid #555; + transition: background 0.6s ease-in-out; +} + +body.dark-mode::-webkit-scrollbar-thumb:hover { + background-color: #edfbff; +} + +body.dark-mode ::-webkit-scrollbar-button { + background-color: #444; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; + text-align: center; + margin-bottom: 70px; +} + +.main-heading { + margin-bottom: 40px; +} + +.tags { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 20px; +} + +.tag { + display: inline-block; + margin: 5px; + padding: 10px 15px; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 20px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.tag:hover { + background-color: #ebebeb; +} + +.search-bar { + margin-bottom: 20px; +} + +.search-input { + width: 50%; + padding: 15px; + font-size: 16px; + border: 2px solid #ddd; + border-radius: 25px; + box-shadow: none; + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +.search-input:hover, +.search-input:focus { + border-color: #aaa; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.profiles { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.profile { + background-color: #fff; + border: 1px solid #ddd; + border-radius: 10px; + margin: 10px; + width: 250px; + padding: 15px; + margin-top: 30; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + animation: fadeIn 0.5s ease-out; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.profile:hover { + transform: scale(1.05); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); +} + +.profile img { + max-width: 100%; + border-radius: 10px; +} + +.profile p { + color: #333; +} + +/* Dark Mode Styles */ +body.dark-mode { + background-color: #000000; + color: #f0f0f0; +} + +body.dark-mode h1, +h2 { + color: #fff; +} + +body.dark-mode .tag { + background-color: #555; + border-color: #444; + color: #fff; +} + +body.dark-mode .tag:hover { + background-color: #3f3f3f; +} + +body.dark-mode .search-input { + background-color: #555; + border-color: #444; + color: #fff; +} + +body.dark-mode .profile { + background-color: #444; + border-color: #555; +} + +body.dark-mode .profile p { + color: #f0f0f0; +} + +/* Switch Label */ +.toggle-switch label { + position: relative; + top: 0px; + left: 7px; + width: 55px; + /* Adjust width to fit switch button and icons */ + height: 30px; + /* Adjust height if needed */ + background-color: #ccc; + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + padding: 0 5px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: background-color 0.5s ease; +} + +/* Switch Button */ +.switch-button { + position: absolute; + top: 2px; + left: 3px; + width: 27px; + height: 27px; + background-color: #fff; + border-radius: 50%; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + transition: transform 0.5s ease, background-color 0.5s ease; +} + +/* Icon Styles */ +.sun-icon, +.moon-icon { + user-select: none; + font-size: 25px; + position: absolute; + top: 50%; + transform: translateY(-50%); + transition: opacity 0.5s ease, color 0.5s ease; +} + +/* Sun Icon */ +.sun-icon { + color: #f39c12; + left: 1px; + /* Position from the left edge */ + opacity: 1; + /* Initially visible */ +} + +/* Moon Icon */ +.moon-icon { + color: #bdc3c7; + right: 1px; + /* Position from the right edge */ + opacity: 0; + /* Initially hidden */ +} + +/* Hide the checkbox itself */ +#theme-toggle { + opacity: 0; + position: absolute; + width: 0; + height: 0; +} + +/* Checkbox Checked State */ +#theme-toggle:checked + label { + background-color: #555; +} + +#theme-toggle:checked + label .sun-icon { + opacity: 0; + /* Hide sun icon when checked */ +} + +#theme-toggle:checked + label .moon-icon { + opacity: 1; + /* Show moon icon when checked */ +} + + +#theme-toggle:checked + label .switch-button { + transform: translateX(34px); + /* Adjust to fit switch width */ + background-color: black; +} +/* Hide the checkbox itself */ +#theme-toggle-mobile { + opacity: 0; + position: absolute; + width: 0; + height: 0; +} + + +/* Checkbox Checked State */ +#theme-toggle-mobile:checked+label { + background-color: #555; +} + +#theme-toggle-mobile:checked+label .sun-icon { + opacity: 0; + /* Hide sun icon when checked */ +} + +#theme-toggle-mobile:checked+label .moon-icon { + opacity: 1; + /* Show moon icon when checked */ +} + +#theme-toggle-mobile:checked+label .switch-button { + transform: translateX(30px); + /* Adjust to fit switch width */ + background-color: black; +} +body.dark-mode .toggle-label { + color: #f0f0f0; +} + +.navbar { + position: sticky; + top: 7px; + z-index: 1007; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + background-color: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.navbar-left { + display: flex; + cursor: pointer; + align-items: center; +} + +.navbar-icon { + width: 30px; + height: 30px; + margin-left: 1px; + margin-top: -1px; +} + +.navbar-text { + font-size: 18px; + font-weight: bold; + margin-left: 10px; +} + +.navbar-right { + display: flex; + align-items: center; +} + +.navbar-link { + text-decoration: none; + color: #333; + font-size: 16px; + padding: 5px 10px; + border-radius: 5px; + transition: background-color 0.3s ease; + margin-right: 5px; +} + +.navbar-link:hover { + background-color: #c5c5c5; +} + +.toggle-switch { + margin-left: 5px; +} + +/* Dark mode adjustments */ +body.dark-mode .navbar, +body.dark-mode .modal-content { + background-color: #333; + color: #f0f0f0; +} + +body.dark-mode .navbar-link { + color: #f0f0f0; +} + +body.dark-mode .navbar-text { + background-color: #333; + color: #f0f0f0; +} + +body.dark-mode .navbar-link:hover { + background-color: #555; +} +.footer-2 { + background-color: #dedede; + padding: 12px 0; +} + +.footer-container { + padding: 0 100px; + font-size: 14px; + line-height: 1.5; +} + +.footer-content { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: 20px 0; +} + +.footer-info { + /* flex: 200px; */ + margin-bottom: 2px; +} + +.footer-links { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + gap: 50px; +} + +.footer-description { + flex: 1 1 300px; + max-width: 500px; + margin-right: 25px; +} + +.footer-logo { + margin-top: 31px; + margin-left: -80px; + width: 170px; + height: auto; + cursor: pointer; +} + +.footer-section { + margin-left: 40px; +} + +.footer-heading { + font-size: 1.1rem; + font-weight: bold; + margin-bottom: 0.75rem; + color: #333; + transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease; /* Added transitions for hover effects */ +} +.footer-heading:hover { + color: #000; /* Darker on hover */ + transform: scale(1.05); /* Slight zoom effect */ + text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); /* Soft shadow for a lifted effect */ +} +.footer-link { + display: block; + color: #000; + font-size: 0.875rem; + text-decoration: none; + margin-bottom: 0.5rem; +} + +.footer-link:hover { + color: #000; /* Darker on hover */ + text-decoration: underline; + transform: translateX(5px); /* Slight shift to the right */ + text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); /* Soft shadow effect */ +} + +.footer-description h5 { + margin-left: 100px; + font-size: 1rem; + font-weight: normal; + margin-bottom: 1rem; +} + +.footer-button { + margin-left: 100px; + background-color: #000; + color: #fff; + padding: 0.5rem 1rem; + border-radius: 0.25rem; + text-decoration: none; + transition: background-color 0.3s ease; +} + +.footer-button:hover { + background-color: #333; +} + +.footer-bottom { + border-top: 1px solid #ccc; + padding: 10px 0; + text-align: center; +} + +.footer-copyright { + font-size: 0.875rem; + margin: 10; +} + +/* Dark mode styles */ +body.dark-mode .footer-2 { + background: #333; +} + +body.dark-mode .footer-link { + color: #fff; +} + +body.dark-mode .footer-info img { + filter: brightness(0) invert(1); +} + +body.dark-mode .footer-heading { + color: #fff; +} + +body.dark-mode .footer-button { + background-color: #fff; + color: #000; +} + +body.dark-mode .footer-button:hover { + background-color: #e0e0e0; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .footer-content { + flex-direction: column; + text-align: center; + } + + .footer-links { + gap: 20px; + justify-content: center; + } + + .footer-info, + .footer-description { + margin-bottom: 20px; + } +} + +.img-container { + height: 250px; + /* Set the height of the container */ + width: 100%; + /* Adjust width if necessary */ + overflow: hidden; + position: relative; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.img-container::-webkit-scrollbar { + width: 0; + height: 0; +} + +.scroll-on-hover { + height: 250px; + width: 100%; + overflow: hidden; + position: relative; +} + +.scroll-on-hover img { + transition: transform 1.5s ease-in-out; +} + +.side-icons { + position: fixed; + right: 20px; + top: 30%; + display: flex; + flex-direction: column; + gap: 25px; +} + +.icon-content { + position: relative; +} + +.icon-content a { + display: flex; + justify-content: center; + align-items: center; + width: 50px; + height: 50px; + border-radius: 50%; + color: #4d4d4d; + /* Default icon color */ + background-color: #fff; + transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; + overflow: hidden; + text-decoration: none; + position: relative; +} + +.icon-content a i { + font-size: 24px; + position: relative; + z-index: 2; + /* Icons should be above the background fill */ +} + +.icon-content a .filled { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #000; + transition: transform 0.3s ease-in-out; + transform: scaleY(0); + /* Hide the fill initially */ + transform-origin: bottom; + /* Start the fill from the bottom */ + z-index: 1; + /* Background fill should be below the icons */ +} + +.icon-content a:hover .filled { + transform: scaleY(1); + /* Scale the fill to full height on hover */ +} + +.icon-content a:hover i { + color: #fff; + /* Change icon color to white on hover */ +} + +.icon-content a[data-social="facebook"] .filled { + background-color: #3b5998; +} + +.icon-content a[data-social="linkedin"] .filled { + background-color: #0077b5; +} + +.icon-content a[data-social="twitter"] .filled { + background-color: #1da1f2; +} + +.icon-content a[data-social="youtube"] .filled { + background-color: #ff0000; +} + +.icon-content a[data-social="github"] .filled { + background-color: #24292e; +} + +/* Optional: add box-shadow on hover */ +.icon-content a:hover { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +/* Dark mode styles */ +body.dark-mode .side-icons .icon-content a { + background-color: #333; + /* Dark background for icons in dark mode */ + color: #ddd; + /* Light icon color in dark mode */ +} + +body.dark-mode .side-icons .icon-content a:hover .filled { + background-color: #444; + /* Slightly lighter dark mode background fill */ +} + +body.dark-mode .side-icons .icon-content a:hover i { + color: #fff; + /* White icon color on hover in dark mode */ +} + +/* Dark mode background colors for different icons */ +body.dark-mode .side-icons .icon-content a[data-social="facebook"] .filled { + background-color: #3b5998; + /* Darker shade for Facebook in dark mode */ +} + +body.dark-mode .side-icons .icon-content a[data-social="linkedin"] .filled { + background-color: #0077b5; + /* Darker shade for LinkedIn in dark mode */ +} + +body.dark-mode .side-icons .icon-content a[data-social="twitter"] .filled { + background-color: #1da1f2; + /* Darker shade for Twitter in dark mode */ +} + +body.dark-mode .side-icons .icon-content a[data-social="youtube"] .filled { + background-color: #ff0000; + /* Darker shade for YouTube in dark mode */ +} + +body.dark-mode .side-icons .icon-content a[data-social="github"] .filled { + background-color: #444c56; + /* Darker shade for GitHub in dark mode */ +} + +/* Optional: add box-shadow on hover in dark mode */ +body.dark-mode .side-icons .icon-content a:hover { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); + /* Slightly stronger shadow in dark mode */ +} + +/* Base styles */ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + color: #333; + margin: 0; + padding: 0; + line-height: 1.6; +} + +.wrapper { + max-width: 1200px; + margin: auto; + padding: 20px; + background: #fff; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.title { + text-align: center; + font-size: 3em; + font-weight: bold; + color: #f67621; + margin-bottom: 20px; + text-decoration: underline; + text-underline-offset: 8px; +} + +/* Chrono component styles */ +.chrono { + margin: 0 auto; + width: 100%; +} + +.event-container { + display: flex; + flex-direction: column; + align-items: center; +} + +.event { + background-color: #f67621; + color: white; + border-radius: 8px; + margin: 20px 0; + padding: 20px; + max-width: 600px; + text-align: center; +} + +.event img { + width: 100%; + max-width: 600px; + height: auto; + border-radius: 8px; +} + +.event figcaption { + font-size: 2em; + font-weight: bold; + margin-top: 10px; +} + +.event p { + font-size: 1em; + margin: 10px 0; +} + +.event .link { + color: #fff; + font-size: 1.2em; + font-weight: bold; + text-decoration: none; + border-bottom: 2px solid #fff; +} + +.event .link:hover { + text-decoration: underline; +} + +/* Dark mode styles */ +body.theme-dark { + background-color: #121212; + color: #e0e0e0; +} + +body.theme-dark .wrapper { + background: #1e1e1e; +} + +body.theme-dark .title { + color: #f67621; +} + +body.theme-dark .event { + background-color: #474747; +} + +body.theme-dark .event .link { + color: #f67621; + border-bottom: 2px solid #f67621; +} + +body.theme-dark .container { + background-color: black !important; +} + +body.theme-dark .center { + background-color: black !important; +} + +/* Light Mode Styles */ +.darkmodeimg { + display: none; +} + +/* Dark Mode Styles */ +.dark-mode .darkmodeimg { + display: block !important; +} + +.lightmodeimg { + display: block; +} + +.dark-mode .lightmodeimg { + display: none !important; +} + +.dark-mode .container h1, +.dark-mode .container h2 { + color: white !important; +} + +.table-container { + width: 100% !important; + /* Set width to 90% of the viewport width */ + overflow-x: auto; + /* Enable horizontal scrolling */ + margin: 0 auto; + /* Center the container */ +} + +.header, +.row { + display: flex; + + flex-wrap: wrap; + /* Prevent wrapping */ +} + +.cell { + flex: auto; + /* Allow cells to expand and fill the row */ + padding: 8px; + border: 1px solid #ddd; + /* Add border */ + text-align: left; + /* Align text to the left */ + /* min-width: 100px; */ +} + +.header { + background-color: #f2f2f2; + /* Light gray background for header */ + font-weight: bold; +} + +.inner-table { + display: flex; + flex-direction: column; + width: 100%; +} + +.inner-table .header, +.inner-table .rows { + display: flex; + flex-wrap: wrap; + /* Prevent wrapping */ +} + +.inner-table .header .cell { + flex: auto !important; + background-color: #f2f2f2; + /* Light gray background for inner table header */ +} + +.inner-table .rows { + overflow-x: auto; + /* Allow horizontal scrolling */ +} + +.inner-table .row { + display: flex; + flex-wrap: nowrap; + /* Prevent wrapping */ +} + +.inner-table .row .cell { + flex: 1; + border: 1px solid #ddd; + /* Add border */ +} + +.dark-mode .header, +.dark-mode .cell { + background-color: black !important; +} + +body.dark-mode .side-icons a { + color: white !important; +} + +@media (max-width: 768px) { + .side-icons { + width: 50px; + height: auto; + padding: 10px 0; + gap: 15px; + } + + .icons { + width: 30px; + height: 30px; + } + + .side-icons a { + font-size: 18px; + } +} + +@media (max-width: 425px) { + .side-icons { + width: 42px; + height: auto; + padding: 30px 0; + gap: 10px; + } + + .icons { + width: 25px; + height: 25px; + } + + .side-icons a { + font-size: 16px; + } + .footer-description { + max-width: 80%; + } +} + +#scrollToTop { + position: fixed; + bottom: 20px; + right: 20px; + width: 45px; + height: 45px; + border-radius: 50%; + background-color: #000000; + color: #ffffff; + border: none; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + transition: background-color 0.3s, color 0.3s, opacity 0.3s, transform 0.3s; + opacity: 0; + visibility: hidden; + z-index: 9999; +} + +#scrollToTop:hover { + background-color: #3e3e3e; +} + +#scrollToTop.show { + opacity: 1; + visibility: visible; +} + +#scrollToTop .arrow-icon { + fill: white; + width: 24px; + height: 24px; + transition: transform 0.3s; +} + +#scrollToTop:hover { + transform: translateY(-5px); + /* Move button up on hover */ +} + +#scrollToTop:hover .arrow-icon { + transform: translateY(-2px); + /* Move arrow up on hover */ +} + +body.dark-mode #scrollToTop { + background-color: #ffffff; + color: #000000; +} + +body.dark-mode #scrollToTop:hover { + background-color: #b6b6b6ff; +} + +body.dark-mode #scrollToTop .arrow-icon { + fill: black; +} + +html { + scroll-behavior: smooth; +} + +/* view count */ +a { + text-decoration: none; +} + +.dropdown { + cursor: pointer; + font-size: 1.5rem; +} + +/* Modal Background */ +.modal1 { + display: none; + /* Hidden by default */ + position: absolute; + /* Positioned relative to the parent */ + z-index: 1000; + /* Make sure it is above other content */ + top: 100px; + /* Position below the caret */ + left: 0; + /* Align to the left of the parent */ + width: 200px; + /* Adjust width as needed */ +} + +/* Modal Content */ +.modal-content { + background-color: #fff; + padding: 10px; + border-radius: 8px; + font-size: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + position: relative; +} + +.modal-content p { + border-bottom: solid 1px gray; + padding-top: 0px; + cursor: pointer; + padding-bottom: 5px; + margin-top: 0px !important; + margin-bottom: 5px; +} + +/* Close Button */ +.close-button { + position: absolute; + top: 10px; + right: 10px; + font-size: 20px; + cursor: pointer; +} + +/* Toast Notification Styles */ +#toast-container { + position: fixed; + height: 50px; + width: 24vw; + top: 90px; + right: 50px; + z-index: 1000; +} + +/* Style for the toast message */ +.toast { + display: none; + min-width: 200px; + margin-bottom: 10px; + padding: 15px; + color: #fff; + border-radius: 5px; + font-size: 14px; + position: relative; + padding: 18px !important; +} +.fa-search { + position: relative; + right: 40px; +} + +/* Media query for mobile view */ +@media (max-width: 768px) { + #toast-container { + width: 90vw; /* Make the width take up most of the screen on mobile */ + top: 55px; + right: 0; + left: 0; /* Center the toast container horizontally */ + margin: 0 auto; /* Automatically center with equal margin */ + } + + .toast { + min-width: 90vw; /* Make the toast width responsive to screen size */ + max-width: 90vw; + font-size: 12px; /* Adjust font size for smaller screens */ + } + + .search-input { + padding-right: 35px; + } + .fa-search { + position: relative; + right: 35px; + } + .fa-caret-down.dropdown { + position: relative; + right: 15px; + } +} + +@media(max-width: 530px){ + .search-input{ + font-size: 12px; + width: 55%; + } + .fa-search{ + margin-left: 0.3rem; + font-size: 0.9rem; + } +} + + +.line.show{ + position: relative; + /* bottom: -20px; */ + top: 95px; + z-index: 10000; + height: 5px; + width: 24vw; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} +.line.like { + background-color: #0e5711; + animation: line-animate 2s ease-in-out forwards; +} +.line.unlike { + background-color: #f44336; + animation: line-animate 2s ease-in-out forwards; +} +@keyframes line-animate { + from { + width: 0px; + } + to { + width: 100%; + } +} +.toast.show { + display: block; + /* position: absolute; */ + /* top: 50px; */ + /* right: 50px; */ + animation: fadeInOut 3s ease-out; +} + +.toast.like { + background: #0e5711; + color: #fff; + + font-size: 12px; + font-size: 15px; + text-align: center; + font-weight: 600; + min-width: 200px; + right: 0; + width: 22vw; + padding: 10px; /* Green for likes */ +} + +.toast.unlike { + background-color: #f44336; + color: #fff; + + font-size: 12px; + font-size: 15px; + text-align: center; + font-weight: 600; + min-width: 200px; + right: 0; + width: 22vw; + padding: 10px; /* Red for unlikes */ +} + +@keyframes fadeInOut { + 0% { + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +.toast .close-btn { + position: absolute; + top: 5px; + right: 10px; + cursor: pointer; +} + +#progressBarContainer { + + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 7px; + background-color: #333; + z-index: 9999; +} +#progressBar { + height: 100%; + width: 0%; + background: white; + transition: width 0.2s ease; +} +