diff --git a/frontend/css/contributors.css b/frontend/css/contributors.css index ca01f5c..bfd3376 100644 --- a/frontend/css/contributors.css +++ b/frontend/css/contributors.css @@ -923,6 +923,90 @@ body.dark-mode .contributors-section p { align-items: center; } +/* ===== Contributors Controls (Search + Toggle) ===== */ +.contributors-controls { + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + margin: 30px auto 20px; + max-width: 900px; + flex-wrap: wrap; +} + +/* Search Wrapper */ +.search-wrapper { + position: relative; + flex: 1; + min-width: 280px; +} + +/* Search Icon */ +.search-icon { + position: absolute; + left: 14px; + top: 50%; + transform: translateY(-50%); + color: #9ca3af; + font-size: 15px; + pointer-events: none; +} + +/* Search Input Styling */ +#contributor-search { + width: 100%; + padding: 14px 16px 14px 42px; + border-radius: 12px; + border: 1.5px solid #e5e7eb; + font-size: 16px; + font-family: "Inter", sans-serif; + background: #ffffff; + transition: all 0.25s ease; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); +} + +/* Hover Effect */ +#contributor-search:hover { + border-color: #d1d5db; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); +} + +/* Focus Effect (Important for UX) */ +#contributor-search:focus { + outline: none; + border-color: var(--primary-gold, #d4af37); + box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15); + background: #ffffff; +} + +/* Bot Toggle Styling */ +.bot-toggle { + display: flex; + align-items: center; + gap: 8px; + font-weight: 500; + color: #374151; + background: #ffffff; + padding: 10px 14px; + border-radius: 10px; + border: 1px solid #e5e7eb; + transition: all 0.2s ease; + cursor: pointer; +} + +.bot-toggle:hover { + border-color: #d1d5db; + background: #f9fafb; +} + +.bot-toggle input { + accent-color: var(--primary-gold, #d4af37); + cursor: pointer; +} + +/* Mobile Responsiveness */ +@media (max-width: 640px) { + .contributors-controls { /* Animation trigger */ .contributor-card.is-visible { opacity: 1; @@ -1020,7 +1104,6 @@ body.dark-mode .contributors-section p { /* ========================================= SKELETON LOADING ANIMATION -========================================= */ .contributor-skeleton { background: #fff; border: 1px solid #eee; @@ -1064,7 +1147,6 @@ body.dark-mode .contributors-section p { /* ========================================= DARK MODE OVERRIDES (The Fix) -========================================= */ body.dark-mode .contributor-card { background-color: #1e1e1e !important; border-color: #333 !important; @@ -1112,7 +1194,6 @@ body.dark-mode .sk { /* ========================================= CONTRIBUTORS STATS -========================================= */ .contributors-stats { display: flex; @@ -1173,7 +1254,6 @@ body.dark-mode .sk { /* ========================================= TOP CONTRIBUTOR – ENHANCED -========================================= */ .stat-pill.stat-top { background: linear-gradient(180deg, #e6c453, #fdeeb5); @@ -1196,7 +1276,6 @@ body.dark-mode .sk { /* ========================================= CONTRIBUTORS CONTROLS -========================================= */ .contributors-controls { display: flex; @@ -1238,7 +1317,6 @@ body.dark-mode .sk { /* ========================================= RESPONSIVE -========================================= */ @media (max-width: 768px) { .contributors-stats { @@ -1257,6 +1335,25 @@ body.dark-mode .sk { align-items: stretch; } + .bot-toggle { + justify-content: center; + } +} + +.contributors-section { + padding-top: 40px; +} + +.contributors-section h3 { + text-align: center; + margin-bottom: 10px; +} + +.contributors-section p { + text-align: center; + margin-bottom: 20px; + color: #6b7280; +} .stat-pill { width: 100%; justify-content: center; @@ -1274,7 +1371,6 @@ body.dark-mode .sk { /* ========================================= DARK MODE -========================================= */ body.dark-mode .stat-pill { background: linear-gradient(180deg, #ffffff, #ffe9a9); @@ -1311,7 +1407,6 @@ body.dark-mode #contributor-search { /* ========================================= ANIMATION -========================================= */ @keyframes statFadeUp { to { @@ -1322,7 +1417,6 @@ body.dark-mode #contributor-search { /* ========================== Enhance contributors UI -========================== */ .dark-mode { --contributors-bg: #0f172a; @@ -1401,4 +1495,4 @@ body.dark-mode #contributor-search { /* Divider lines */ .dark-mode hr { border-color: var(--contributors-border); -} \ No newline at end of file +} diff --git a/frontend/css/feedback.css b/frontend/css/feedback.css index 2676aae..56acefc 100644 --- a/frontend/css/feedback.css +++ b/frontend/css/feedback.css @@ -1,8 +1,15 @@ +body { + margin: 0; +} + .feedback-header { text-align: center; - padding: 80px 20px 40px; + padding: 40px 20px 0px; /* remove bottom gap */ + margin-bottom: 0; } + + .feedback-header h1 { font-size: 2.5rem; color: var(--deep-navy); @@ -15,10 +22,12 @@ .feedback-container { max-width: 600px; - margin: auto; - padding: 30px; + margin: 0 auto 60px; /* removes top gap */ + padding: 0 20px 40px; } + + form { display: flex; flex-direction: column; @@ -61,3 +70,64 @@ button:hover { margin-top: 10px; font-weight: 600; } + +/* ===== Card Layout Enhancement ===== */ + +.feedback-container { + max-width: 700px; + margin: auto; + padding: 40px 20px 80px; + display: flex; + justify-content: center; +} + +.feedback-card { + width: 100%; + background: #ffffff; + padding: 35px 30px; + border-radius: 14px; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; + border: 1px solid rgba(0, 0, 0, 0.05); +} + +/* Hover effect for modern UI depth */ +.feedback-card:hover { + transform: translateY(-4px); + box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12); +} + +/* Improve input styling consistency */ +.feedback-card input, +.feedback-card select, +.feedback-card textarea { + width: 100%; + padding: 12px; + border-radius: 8px; + border: 1px solid #dcdcdc; + font-size: 1rem; + transition: border 0.2s ease, box-shadow 0.2s ease; +} + +/* Focus interaction */ +.feedback-card input:focus, +.feedback-card select:focus, +.feedback-card textarea:focus { + outline: none; + border-color: var(--primary-gold); + box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2); +} + +/* Better button polish */ +.feedback-card button { + margin-top: 10px; + font-size: 1rem; + letter-spacing: 0.3px; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.feedback-card button:hover { + transform: translateY(-2px); + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); +} + diff --git a/frontend/css/guides.css b/frontend/css/guides.css index 67ed87d..734d19c 100644 --- a/frontend/css/guides.css +++ b/frontend/css/guides.css @@ -789,10 +789,71 @@ html { } } +/* ========================================================= + DARK MODE FIX — GUIDES PAGE READABILITY (Issue #860) + ========================================================= */ + +/* Page background & base text */ +body.dark-mode { + background-color: #0f172a; + color: #e5e7eb; +} + +/* Section headings */ +body.dark-mode h2, +body.dark-mode h3, +body.dark-mode h4 { + color: #f9fafb !important; +} + +/* Paragraph text readability */ +body.dark-mode p, +body.dark-mode li { + color: #cbd5e1 !important; +} + +/* Guide cards (major issue: parchment background in dark mode) */ +body.dark-mode .guide-list li, +body.dark-mode .pr-steps li, +body.dark-mode .practice-item, +body.dark-mode .mistakes-list li { + background: #1e293b !important; /* replaces light parchment */ + color: #e5e7eb !important; + border: 1px solid rgba(255,255,255,0.06); +} + +/* Fix titles inside cards */ +body.dark-mode .guide-list h4, +body.dark-mode .pr-steps h4, +body.dark-mode .timeline-list h4, +body.dark-mode .practice-item h4 { + color: #ffffff !important; +} + +/* Fix description text inside components */ +body.dark-mode .guide-list p, +body.dark-mode .pr-steps p, +body.dark-mode .timeline-list p, +body.dark-mode .practice-item p, +body.dark-mode .mistakes-list p { + color: #cbd5e1 !important; +} + +/* Timeline line visibility */ +body.dark-mode .timeline-list::before { + background: linear-gradient(to bottom, #facc15, #eab308); +} + +/* Icons contrast */ +body.dark-mode .icon, +body.dark-mode .step, +body.dark-mode .mistake-icon { + background: #facc15 !important; + color: #0f172a !important; +} /* ===================================================== Dark Mode Refinement – Guides Page (Final Patch) Paste at the bottom of guides.css -===================================================== */ /* Section surfaces */ .dark-mode .guides-hero, @@ -888,4 +949,4 @@ html { .dark-mode .mistakes-list li:hover p { color: #f9fafb !important; -} \ No newline at end of file +} diff --git a/frontend/css/style.css b/frontend/css/style.css index 91207a6..b4a7e06 100644 --- a/frontend/css/style.css +++ b/frontend/css/style.css @@ -1580,9 +1580,94 @@ body.dark-mode .chat-widget-btn { color: #0b1220; } +/* FAQ Accordion Styles */ +/* ===== FAQ Accordion - Improved Structure ===== */ +.faq-accordion { + max-width: 950px; + margin: 50px auto 0; + display: flex; + flex-direction: column; + gap: 16px; /* SPACE BETWEEN QUESTIONS */ +} + +.faq-item { + background: #ffffff; + border-radius: 14px; /* ROUNDED CORNERS */ + box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); + overflow: hidden; + transition: all 0.3s ease; + border: 1px solid #e5e7eb; +} + +/* Hover Card Effect */ +.faq-item:hover { + transform: translateY(-3px); + box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); + border-color: #d1d5db; +} + +.faq-question { + width: 100%; + background: #ffffff; + border: none; + padding: 20px 24px; + font-size: 19px; + font-weight: 600; + text-align: left; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + color: #1f2937; + transition: all 0.25s ease; + border-radius: 14px; +} + +/* Hover effect on question */ +.faq-question:hover { + background: #f8fafc; +} + +/* Chevron icon animation */ +.faq-question i { + font-size: 16px; + transition: transform 0.3s ease; + color: #6b7280; +} + +.faq-item.active .faq-question i { + transform: rotate(180deg); +} + +/* Answer section */ +.faq-answer { + max-height: 0; + overflow: hidden; + background: #ffffff; + transition: max-height 0.35s ease, padding 0.3s ease; + padding: 0 24px; + border-top: 1px solid transparent; +} + +/* When open */ +.faq-item.active { + border-color: #e2e8f0; +} + +.faq-item.active .faq-answer { + max-height: 300px; + padding: 10px 24px 22px 24px; + border-top: 1px solid #f1f5f9; +} + +.faq-answer p { + margin: 0; + color: #4b5563; + font-size: 16px; + line-height: 1.7; +} /* ========================= ACCESSIBILITY -========================= */ @media (prefers-reduced-motion: reduce) { footer.site-footer::after, @@ -1600,14 +1685,12 @@ body.dark-mode .chat-widget-btn { /* ========================= QUIZ SECTION SCROLLBAR -========================= */ #level-chain-wrapper::-webkit-scrollbar { display: none; } /* ========================= PRINT STYLES -========================= */ @media print { .why-section::before, @@ -1622,7 +1705,6 @@ body.dark-mode .chat-widget-btn { /* ========================= FOOTER (GLOBAL) -========================= */ footer.site-footer { position: relative; overflow: hidden; @@ -1879,7 +1961,6 @@ body.dark-mode footer.site-footer { /* ========================= RESOURCE LINKS -========================= */ .resource-link-wrapper { display: flex; align-items: center; @@ -1918,7 +1999,6 @@ body.dark-mode footer.site-footer { /* ========================= DARK MODE FIXES -========================= */ body.dark-mode .navbar, body.dark-mode header { background-color: rgba(27, 38, 59, 0.98); @@ -2127,4 +2207,4 @@ body.dark-mode .newsletter-section input { body.dark-mode { background: #121212 !important; -} \ No newline at end of file +} diff --git a/frontend/pages/Event/gsoc.html b/frontend/pages/Event/gsoc.html index bdfd6f9..b9bbc70 100644 --- a/frontend/pages/Event/gsoc.html +++ b/frontend/pages/Event/gsoc.html @@ -16,11 +16,977 @@ +
+

OpenSource Compass

+ +
+

@@ -534,6 +1500,58 @@

Plan Your Proposal

+ +
+

Tips to Get Selected for GSoC

+

Practical strategies that significantly increase your chances of getting accepted into Google Summer of Code.

+ +
+
+ +

Start Contributing Early

+

Begin contributing to open source projects before the application period to build credibility and familiarity with the codebase.

+
+ +
+ +

Pick Beginner-Friendly Issues

+

Look for “good first issue” or “beginner-friendly” tags to understand the project structure and workflow.

+
+ +
+ +

Communicate with Mentors

+

Actively interact in community channels like Discord, Slack, or mailing lists to show genuine interest.

+
+ +
+ +

Write a Strong Proposal

+

Create a detailed proposal with technical approach, timeline, and expected deliverables to stand out.

+
+ +
+ +

Be Consistent

+

Regular contributions and consistent activity show commitment and reliability to mentors.

+
+ +
+ +

Understand the Codebase

+

Study documentation, past PRs, and project architecture before proposing your idea.

+
+
+
+ + +
+

Ready to Start Your GSoC Journey?

+

Take the first step today. Begin preparing, contribute to open source, and build your profile for GSoC 2026.

+
+ + + Read FAQ
@@ -589,6 +1607,79 @@

Ready to Kickstart Your GSoC Journey?

+ diff --git a/frontend/pages/contributors.html b/frontend/pages/contributors.html index 12519e5..7b4782e 100644 --- a/frontend/pages/contributors.html +++ b/frontend/pages/contributors.html @@ -143,6 +143,25 @@

Contributors

+
+
+ + +
+ + +
+ + +

Frequently Asked Questions

Common questions about OpenSource Compass and open source contributions.

+
+
+ +
+

OpenSource Compass is a platform that helps beginners navigate open source by providing structured guides, resources, and program information.

+
+
+ +
+ +
+

No. You can contribute to open source through documentation, design, testing, community support, and many other non-coding roles.

+
+
+ +
+ +
+

Start by reading contribution guides, choosing a beginner-friendly project, and working on small issues such as documentation or bug fixes.

+
+
+ +
+ +
+

Pick projects that match your interests and skill level. Look for repositories with labels like “good first issue” or “help wanted”.

+
+
+ +
+ +
+

Contributing helps you build a portfolio, improve technical skills, collaborate globally, and gain real-world development experience.

+
+
+ +
+ +
+

Most projects have active communities on GitHub, Discord, or Slack. Asking questions is encouraged and is part of open-source culture.

+
+
+ +
+ +
+

Look for repositories with labels like good first issue, beginner, or help wanted.

+
+
+ +
+ +
+

A good first issue is a small, well-defined task that helps beginners understand the project without deep knowledge of the entire codebase.

+
+
+ +
+ +
+

Basic Git knowledge is helpful, but not mandatory. Many projects provide step-by-step contribution guides.

+
+
+ +
+ +
+

Be polite, clear, and patient. Use GitHub issues or discussions to ask questions and seek feedback before starting work.

+
+
+ +
+ +
+

Don’t be discouraged. Read the feedback carefully, make the suggested changes, or ask for clarification.

+
+
+
@@ -448,6 +559,29 @@

Frequently Asked Questions

+ + +