diff --git a/docs/Documentation.html b/docs/Documentation.html new file mode 100644 index 0000000..f70a381 --- /dev/null +++ b/docs/Documentation.html @@ -0,0 +1,360 @@ + + + + + + + + + + CodeCulture Daily + + + + + + + + +
+
+ + +
+
+ +




+ +
+
+

Welcome to CodeCulture-Daily, your go-to spot for daily programming and tech + challenges! 🎉 +

+

By practicing daily, you'll not only sharpen your problem-solving skills but also learn and master + various + tools, technologies, algorithms, and much more. Whether you're starting as a beginner or pushing + through + advanced levels, CodeCulture-Daily is the perfect platform to grow your knowledge. + 💡

+
+
+ +
+
+

🌟 What to Expect

+ +
+
+ +
+
+

📚 Table of Contents

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Date (DD-MM-YYYY)Problem NameLevelDomainTypeWinner
06-10-2024 + Medal + Assignment Challenge🟢 BeginnerProgramming Languages (Any)TechNA
07-10-2024 + Perfect + Number🟢 BeginnerProgramming Languages (Any)TechNA
08-10-2024 + Eddy's + Big Interview Adventure🟢 BeginnerSoft Skills/ Personal DevelopmentNon-TechNA
09-10-2024 + Ceaser + Cipher🟢 BeginnerProgramming Languages (Any)TechTBA
+
+
+ +
+
+

📁 Directory Structure

+ 
+CodeCulture-Daily/
+├── docs/ # 🗂️ Folder containing website code
+│ ├── README.md # 📄 Documentation file for the repository
+│ ├── Documentation.html # 📚 Page dedicated to documentation
+│ ├── images/ # 📷 Folder for images
+│ │ ├── Logo.png # 🖼️ Logo image
+│ │ ├── Illustration1.webp # 🖼️ First illustration in WebP format
+│ │ ├── Illustration2.webp # 🖼️ Second illustration in WebP format
+│ │ └── Illustration3.png # 🖼️ Third illustration in PNG format
+│ ├── css/ # 🎨 Folder for stylesheets
+│ │ ├── index.css # 🎨 Stylesheet for main landing page
+│ │ └── documentation.css # 🎨 Stylesheet for documentation pages
+│ └── js/ # 🖥️ Folder for scripts
+│ ├── index.js # 🖥️ Script for main functionalities
+│ └── documentation.js # 📜 Script for documentation page functionalities
+│
+├── 06-10-2024/ # 📅 Date-specific folder for problems
+│ ├── Question.md # ❓ Problem statement
+│ ├── Solution_johndoe.ext # 💻 User solution code (example: Python)
+│ ├── Explanation_johndoe.md # 📜 Optional explanation of the solution
+│ ├── Solution.ext # 💼 Official solution (file extension can vary)
+│ └── Explanation.md # 📜 Official explanation of the solution
+│
+├── 07-10-2024/ # 📅 Date-specific folder for problems
+│ ├── Question.md # ❓ Problem statement
+│ ├── Solution_janedoe.ext # 💻 User solution code (example: JavaScript)
+│ ├── Explanation_janedoe.md # 📜 Optional explanation of the solution
+│ ├── Solution.ext # 💼 Official solution (file extension can vary)
+│ └── Explanation.md # 📜 Official explanation of the solution
+│
+├── LICENSE # 📜 MIT License file
+└── README.md # 📄 Documentation for the repository
+
+
+
+
+
+ +
+
+

🗓️ Posting Schedule

+

📅 Challenges will be posted daily at 7 PM (GMT).

+ +
+
+ +
+
+

🏆 How Winners Are Chosen

+

Winners will be selected based on:

+
    +
  1. 📊 Correctness of the solution
    2. +
  2. 🕒 Submission time (faster submissions will be favored)
    3. +
  3. 📜 Quality of the code (efficiency and readability)
    4. +
+

The winner will be announced on the following day at 7 PM (GMT).

+
+
+ +
+
+

🤝 Why Join CodeCulture-Daily?

+

Join our community to:

+ +
+
+ +
+
+

✍️ Contributing Guidelines

+

We welcome contributions! Here’s how you can help:

+
    +
  1. 🎉 Solve challenges and submit solutions.
    2. +
  2. 📝 Create new challenges for the community.
    3. +
  3. 🤝 Help fellow members with their queries.
    4. +
  4. 🔄 Share our platform with your network.
    5. +
+

To contribute, simply open an + issue or join a + discussion on our GitHub + repository. If you'd like to ask questions, solve problems, or improve the documentation, visit the Contributing + Guidelines + for more details.

+ +
+
+ + + + + + + + + \ No newline at end of file diff --git a/docs/css/Documentation.css b/docs/css/Documentation.css new file mode 100644 index 0000000..4507fe1 --- /dev/null +++ b/docs/css/Documentation.css @@ -0,0 +1,151 @@ +/* +********************************************************************************************* +* File: Documentation.css +* Author: Madhurima Rawat +* Date: October 10, 2024 +* Description: CSS styles for the documentation page of the CodeCulture repository, providing +* a consistent look and feel for cards, tables, dropdown menus, and responsive +* layouts to enhance usability and readability. +* Version: 1.0 +* GitHub Repository: https://github.com/madhurimarawat/CodeCulture-Daily +* Issues/Bugs: For any issues or bugs, please visit the GitHub repository's [Issues](https://github.com/madhurimarawat/CodeCulture-Daily/issues) section. +* Comments: This CSS file contains styles for aligning text, customizing table appearances, and +* styling dropdown menus. It ensures a responsive design that adapts to different screen +* sizes while maintaining visual consistency. +* Dependencies: + - **Bootstrap 4.5.2**: External CSS for responsive design and components. +* Design Notes: + - **Alignment Styles**: Text is justified for improved readability, ensuring a clean layout. + - **Card Styles**: Cards are designed without borders, featuring light grey backgrounds, smooth + * corners, and subtle shadows for a modern appearance. + - **Table Styling**: Tables are fully responsive, with specific styles for headers and cells to + * enhance readability and user interaction. + - **Dropdown Menu Customization**: Hover and active states for dropdown items are styled for + * visual feedback, utilizing a vibrant pink color scheme. + - **Link Styles**: Table links are styled with a darker pink, providing a clear visual cue on + * hover and focus states. + - **Media Queries**: Responsive adjustments for smaller screens, including horizontal scrolling + * for tables to ensure usability across devices. + - **Accessibility**: Ensures adequate contrast for text colors against backgrounds for improved + * readability and accessibility. +********************************************************************************************* +*/ + +/* Alignments */ +.alignment { + text-align: justify !important; +} + +/* Base Styles */ +.card { + border: none; + margin-bottom: 20px; + text-align: center; + background-color: #FFFFF0 !important; + /* Light Grey */ + border-radius: 10px; + margin-left: 5%; + margin-right: 5%; + /* Smooth corners */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + /* Shadow */ + transition: transform 0.3s, box-shadow 0.3s; + padding: 5px; + /* Add padding for spacing inside the card */ +} + +/* Table Styles */ +.table { + width: 100%; + border-collapse: collapse; + margin: 0; + /* Remove margin */ + box-sizing: border-box; + /* Include padding in width calculations */ +} + +.table th, +.table td { + padding: 8px; + text-align: center; + border: 1px solid #ddd; + font-size: 12px; + /* Set a base font size */ +} + +/* css/Resources.css */ + +/* Change hover color for dropdown menu items */ +.dropdown-menu .dropdown-item:hover { + background-color: #ee6ba9; + /* Desired hover background color */ + color: #ffffff; + /* Desired hover text color */ +} + +/* Change active (clicked) color for dropdown menu items */ +.dropdown-menu .dropdown-item:active, +.dropdown-menu .dropdown-item:focus { + background-color: #ee6ba9; + /* Desired active background color */ + color: #ffffff; + /* Desired active text color */ +} + +/* Table Links */ +.table a { + color: #ee6ba9 !important; + /* Darker pink for table links */ +} + +.table a:hover { + color: #a71d49 !important; + /* Even darker pink on hover */ + text-decoration: underline !important; +} + +#contributing-guidelines a, +#posting-schedule a { + color: #FF69B4; + /* link color */ + text-decoration: none; +} + +#contributing-guidelines a:hover, +#posting-schedule a:hover { + color: #FF1493; + /* hover color */ + text-decoration: underline; + /* underline on hover */ +} + +/* Media Query for Smaller Screens (max-width: 768px) */ +@media (max-width: 768px) { + .table { + display: block; + overflow-x: auto; + /* Make the table scroll horizontally on small screens */ + white-space: nowrap; + /* Prevent wrapping inside table cells */ + } + + .table th, + .table td { + font-size: 12px; + /* Adjust font size for smaller screens */ + padding: 10px; + /* Adjust padding */ + } +} + +/* Media Query for Very Small Devices (max-width: 390px) */ +@media (max-width: 390px) { + + .table th, + .table td { + font-size: 10px; + /* Reduce font size for very small screens */ + padding: 8px; + /* Adjust padding */ + } +} \ No newline at end of file diff --git a/docs/css/Leaderboard.css b/docs/css/Leaderboard.css new file mode 100644 index 0000000..e69de29 diff --git a/docs/css/index.css b/docs/css/index.css new file mode 100644 index 0000000..37499bf --- /dev/null +++ b/docs/css/index.css @@ -0,0 +1,212 @@ +/* +********************************************************************************************* +* File: index.css +* Author: Madhurima Rawat +* Date: October 10, 2024 +* Description: CSS styles for the main page of the CodeCulture website, providing styling for +* navigation, cards, tool buttons, sliders, and other UI elements to enhance user +* experience and visual appeal. +* Version: 1.0 +* GitHub Repository: https://github.com/madhurimarawat/CodeCulture-Daily +* Issues/Bugs: For any issues or bugs, please visit the GitHub repository's [Issues](https://github.com/madhurimarawat/CodeCulture-Daily/issues) section. +* Comments: This CSS file includes styles for the navigation bar, cards, tool buttons, banners, +* and footer. It utilizes a color palette centered around hot pink and light blue, +* along with transitions and hover effects for an engaging user interface. +* Dependencies: + - **Bootstrap 4.5.2**: External CSS for responsive design and components. + - **Font Awesome 6.0.0-beta3**: External CSS for icons. +* Design Notes: + - **Color Scheme**: A vibrant palette featuring hot pink (#ee6ba9) and light blue (#6cb2eb), + * creating an energetic and inviting atmosphere. + - **Navigation Bar**: Styled with a hot pink background, featuring a logo and hover effects + * to enhance usability. + - **Card Design**: Cards are designed with smooth rounded corners, shadows, and hover effects + * to provide a tactile feel, with consistent heights and responsive layouts. + - **Hover Effects**: Implemented on cards and buttons to create interactive feedback, enhancing + * the overall user experience. + - **Responsive Layout**: Leveraging Bootstrap's grid system for layout consistency across + * different screen sizes. + - **Accessibility**: Ensuring text contrasts adequately with background colors for readability + * and accessibility. +********************************************************************************************* +*/ + +/* Navigation Bar color */ +.navbar { + background-color: #ee6ba9; + /* Hot Pink */ +} + +/* Styling for logo */ +.logo { + width: 40px; + /* Adjust the size of the logo as needed */ + height: 40px; + /* Ensure equal height for a perfect circle */ + margin-right: 10px; + /* Space between the logo and text */ + border-radius: 50%; + /* Make the logo circular */ +} + +.card { + border: 2px solid #ee6ba9 !important; + /* Add a border with a light gray color */ + margin-bottom: 20px; + text-align: center; + background-color: #FFFFF0 !important; + /* Light Grey */ + border-radius: 25px !important; + /* Increase radius for smoother corners */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; + /* Added transition for border color */ +} + +.card:hover { + transform: scale(1.05); + /* Scale up slightly on hover */ + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); + /* Enhanced shadow on hover */ + border-color: #aaa; + /* Change border color on hover for a subtle effect */ +} + +.problem-card { + color: black !important; + /* Ensure all text is black */ +} + +/* Style for links in the card */ +.problem-card a { + color: black !important; + /* Links are black */ + text-decoration: none; + /* Remove underline */ +} + +.problem-card a:hover { + color: #ee6ba9 !important; + /* Links turn blue on hover */ + text-decoration: underline; + /* Optional: underline on hover */ +} + +/* Set consistent height for the card body */ +.problem-card { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; +} + +.problem-card .card-body { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + padding: 20px; +} + +/* Ensure card titles have the same height */ +.card-title { + font-size: 1.25rem; + margin-bottom: 15px; + min-height: 60px; + /* Adjust this based on your text size */ +} + +/* Ensure card text and other details maintain consistency */ +.card-text { + flex-grow: 1; + font-size: 0.9rem; +} + +/* Make sure the cards have a minimum height */ +.card { + min-height: 250px; + /* Adjust as per your needs */ +} + +/* Add padding between cards */ +.row>.col-md-4 { + margin-bottom: 20px; +} + +.slider { + height: 500px; + overflow: hidden; +} + +.slider img { + width: 100%; + height: 500px; +} + +.blue-theme { + background-color: #6cb2eb; + /* Blue */ +} + +.container { + text-align: center; +} + +.heading { + color: #ee6ba9; +} + +.banner { + display: flex; + justify-content: center; + /* Centers the content horizontally */ + margin-bottom: 20px; +} + +.quote { + font-style: italic; + margin-top: 10px; + color: #6c757d; +} + +.spacer { + margin-top: 30px; +} + +h2 { + font-family: 'Roboto', sans-serif; + text-align: center; + color: #ee6ba9; + /* Use your desired color */ + text-shadow: 4px 2px 4px rgba(0, 0, 0, 0.1); + /* Optional shadow effect */ +} + +/* Styling for tool buttons */ +.tool-button { + display: inline-block; + background-color: white; + /* Light purple background */ + color: black; + /* White text */ + border: 2px solid #ee6ba9; + /* Pink border */ + padding: 8px 16px; + border-radius: 5px; + text-align: center; + transition: background-color 0.3s ease; +} + +/* Hover effect for tool buttons */ +.tool-button:hover { + background-color: #ee6ba9; + /* Pink background on hover */ + color: #ffffff; + /* White text on hover */ +} + +footer { + background-color: #ee6ba9; + /* Hot Pink */ + color: white; +} \ No newline at end of file diff --git a/docs/images/Illustration 1.webp b/docs/images/Illustration 1.webp new file mode 100644 index 0000000..f3dfcd3 Binary files /dev/null and b/docs/images/Illustration 1.webp differ diff --git a/docs/images/Illustration 2.webp b/docs/images/Illustration 2.webp new file mode 100644 index 0000000..ef31edc Binary files /dev/null and b/docs/images/Illustration 2.webp differ diff --git a/docs/images/Illustration 3.png b/docs/images/Illustration 3.png new file mode 100644 index 0000000..8d36a37 Binary files /dev/null and b/docs/images/Illustration 3.png differ diff --git a/docs/images/Logo.png b/docs/images/Logo.png new file mode 100644 index 0000000..cd66841 Binary files /dev/null and b/docs/images/Logo.png differ diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..afc9e6a --- /dev/null +++ b/docs/index.html @@ -0,0 +1,244 @@ + + + + + + + + + + CodeCulture Daily + + + + + + + + +
+ + + +
+ +

+ + + +
+
+

+   Welcome to CodeCulture Daily!

+

A daily programming challenge repository where fun meets learning! Solve challenges, learn new tools and + technologies, and get featured as a top contributor. Join now to sharpen your coding skills!

+ +

“It's not about ideas. It's about making ideas happen.” – Scott Belsky

+ + +
+
+ +
+ + +
+

+ +   Today Challenges

+
+
+ +
+
+
+ +
+   Caesar Cipher
+ +

+ + Date: 09-10-2024
+ Level: 🟢 Beginner
+ Domain: Programming Languages (Any)
+ Type: Tech
+ Winner: TBD +

+
+
+
+
+
+ + +
+

+   Previous Challenges

+
+
+ +
+
+
+ +
  Medal Assignment Challenge +
+ +

+ + Date: 06-10-2024
+ Level: 🟢 Beginner
+ Domain: Programming Languages (Any)
+ Type: Tech
+ Winner: NA +

+
+
+
+ + +
+
+
+ +
+   Perfect Number +
+ +

+ + Date: 07-10-2024
+ Level: 🟢 Beginner
+ Domain: Programming Languages (Any)
+ Type: Tech
+ Winner: NA +

+
+
+
+ + +
+
+
+ +
+   Eddy's Big Interview Adventure +
+ +

+ + Date: 08-10-2024
+ Level: 🟢 Beginner
+ Domain: Soft Skills / Personal Development
+ Type: Non-Tech
+ Winner: NA +

+
+
+
+ +
+
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/docs/js/Documentation.js b/docs/js/Documentation.js new file mode 100644 index 0000000..4582abe --- /dev/null +++ b/docs/js/Documentation.js @@ -0,0 +1,76 @@ +// +//********************************************************************************************* +//* File: documentation.js +//* Author: Madhurima Rawat +//* Date: October 10, 2024 +//* Description: JavaScript functionality for the documentation page of the CodeCulture Daily +//* platform, providing smooth scrolling behavior for dropdown menu links to enhance +//* user navigation and improve content accessibility. +//* Version: 1.0 +//* GitHub Repository: https://github.com/madhurimarawat/CodeCulture-Daily +//* Issues/Bugs: For any issues or bugs, please visit the GitHub repository's [Issues](https://github.com/madhurimarawat/CodeCulture-Daily/issues) section. +//* Comments: This script attaches smooth scrolling functionality to dropdown menu links, +//* calculating target section positions with appropriate offsets for mobile and desktop +//* devices to ensure an optimal user experience. +//* Dependencies: +//* - **Bootstrap 4.5.2**: External CSS framework for responsive design and dropdown components. +//* Design Notes: +//* - **Smooth Scrolling**: Enhances user experience by providing a smooth transition to +//* the selected section, improving readability and navigation efficiency. +//* - **Responsive Behavior**: Adjusts scrolling behavior based on device type, ensuring +//* usability across various screen sizes and orientations. +//********************************************************************************************* +// + +// This Function handles the smooth scrolling functionality for the dropdown menu +document.addEventListener("DOMContentLoaded", function () { + // Function to handle smooth scrolling with offset + function smoothScroll(event) { + // Prevent default anchor click behavior + event.preventDefault(); + + // Get the target section ID from the href attribute + const targetId = this.getAttribute("href").substring(1); + const targetSection = document.getElementById(targetId); + + if (targetSection) { + // Calculate the position to scroll to + const navbarHeight = document.querySelector(".navbar").offsetHeight; + + // Define minimal paddings for mobile and desktop + const mobilePadding = -420; // Set to 0 for no padding on mobile + const desktopPadding = 40; // Very minimal padding for desktop + + // Determine if the device is mobile + const isMobile = window.innerWidth <= 768; // Change 768 to the desired breakpoint for mobile + + // Calculate target position based on device type + const padding = isMobile ? mobilePadding : desktopPadding; + + // Calculate the target position + const targetPosition = targetSection.getBoundingClientRect().top + window.pageYOffset - navbarHeight - padding; + + // Log values for debugging + console.log(`Target Section: ${targetId}`); + console.log(`Navbar Height: ${navbarHeight}`); + console.log(`Padding: ${padding}`); + console.log(`Calculated Target Position: ${targetPosition}`); + + // Smoothly scroll to the target position + window.scrollTo({ + top: targetPosition, + behavior: isMobile ? "auto" : "smooth" // Instant scroll for mobile, smooth for desktop + }); + } else { + console.error(`No target section found for ID: ${targetId}`); + } + } + + // Select all dropdown menu links + const dropdownLinks = document.querySelectorAll(".dropdown-item"); + + // Attach the smoothScroll function to each dropdown link + dropdownLinks.forEach(function (link) { + link.addEventListener("click", smoothScroll); + }); +}); diff --git a/docs/js/index.js b/docs/js/index.js new file mode 100644 index 0000000..6570e9d --- /dev/null +++ b/docs/js/index.js @@ -0,0 +1,48 @@ +// +//********************************************************************************************* +//* File: index.js +//* Author: Madhurima Rawat +//* Date: October 10, 2024 +//* Description: JavaScript functionality for the main page of the CodeCulture Daily platform, +//* providing smooth scrolling behavior for navigation links, enhancing user +//* experience and interaction with the page content. +//* Version: 1.0 +//* GitHub Repository: https://github.com/madhurimarawat/CodeCulture-Daily +//* Issues/Bugs: For any issues or bugs, please visit the GitHub repository's [Issues](https://github.com/madhurimarawat/CodeCulture-Daily/issues) section. +//* Comments: This script includes event listeners for navigation links, calculates target +//* positions for smooth scrolling, and adjusts scroll behavior based on the device type. +//* Dependencies: +//* - **Bootstrap 4.5.2**: External CSS framework for responsive design and pre-built components. +//* Design Notes: +//* - **Smooth Scrolling**: The smooth scroll effect enhances navigation by providing a +//* visually appealing transition when users click on navigation links. +//* - **Responsive Behavior**: Adjustments are made to scrolling behavior for mobile devices, +//* ensuring a seamless experience across different screen sizes. +//********************************************************************************************* +// + +// Smooth scroll to the Problems section +document.querySelector('.nav-link[href="#problems"]').addEventListener('click', function (event) { + event.preventDefault(); // Prevent default anchor click behavior + + // Get the target section + const targetSection = document.getElementById('problems'); + + // Calculate the target position with an offset for the navbar + const navbarHeight = document.querySelector('.navbar').offsetHeight; + + // Determine if the device is mobile + const isMobile = window.innerWidth <= 768; // Adjust the breakpoint as needed + + // Set padding values based on the device type + const padding = isMobile ? -95 : 15; // No padding for mobile, 15px for desktop + + // Calculate the section position based on device type + const sectionPosition = targetSection.getBoundingClientRect().top + window.scrollY - navbarHeight - padding; + + // Smoothly scroll to the adjusted position + window.scrollTo({ + top: sectionPosition, + behavior: isMobile ? 'auto' : 'smooth' // Instant scroll for mobile, smooth for desktop + }); +});