Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Feature : Progress bar added in home page & contributors page" #310

Merged
merged 3 commits into from
Nov 8, 2024
Merged

"Feature : Progress bar added in home page & contributors page" #310

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
af485f5
"Feature : Progress bar added in home page & contributors page"
Edasgh Nov 7, 2024
69a4e14
"progress bar color modified"
Edasgh Nov 8, 2024
9d0cacb
Merge branch 'main' into progbar-302
Edasgh Nov 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 100 additions & 62 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,29 @@
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- Primary Meta Tags -->
<!-- Primary Meta Tags -->
<title>CodeIt</title>
<meta name="description" content="CodeIt provides tools for developers to refine, obfuscate, and analyze code. Optimize your development process with CodeIt's features for efficient coding." />
<meta name="keywords" content="CodeIt, code refinement, code obfuscation, time complexity analysis, coding tools, developer tools, coding efficiency, code management" />
<meta name="description"
content="CodeIt provides tools for developers to refine, obfuscate, and analyze code. Optimize your development process with CodeIt's features for efficient coding." />
<meta name="keywords"
content="CodeIt, code refinement, code obfuscation, time complexity analysis, coding tools, developer tools, coding efficiency, code management" />
<meta name="author" content="Tejas Gupta" />

<!-- Open Graph / Facebook Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="CodeIt - Developer Tools for Code Refinement, Obfuscation & Analysis" />
<meta property="og:description" content="Enhance your coding with CodeIt's powerful tools for code refinement, obfuscation, and performance analysis." />
<meta property="og:description"
content="Enhance your coding with CodeIt's powerful tools for code refinement, obfuscation, and performance analysis." />
<meta property="og:url" content="https://codeittool.netlify.app" />
<meta property="og:site_name" content="CodeIt" />
<!-- <meta property="og:image" content="images/Nomenclature.png" />
<!-- <meta property="og:image" content="images/Nomenclature.png" />

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="CodeIt - Developed for the Developers" />
<meta name="twitter:description" content="Refine, obfuscate, and analyze your code with CodeIt to optimize development processes." />
<!-- <meta name="twitter:image" content="images/Nomenclature.png" /> -->
<meta name="twitter:description"
content="Refine, obfuscate, and analyze your code with CodeIt to optimize development processes." />
<!-- <meta name="twitter:image" content="images/Nomenclature.png" /> -->

<link rel="stylesheet" href="resources/home-style.css" />
<link rel="stylesheet" href="resources/style.css" />
Expand All @@ -51,7 +55,11 @@
<button type="button" class="theme" id="lightThemeBtn">
<img src="./images/sun.png" class="themeLogo" />
</button>

<!-- progress bar container -->
<div class="progress-bar-container">
<!-- progress bar -->
<div class="progress-bar" id="progress-bar-home"></div>
</div>
<div class="top-elements">
<a href="index.html" class="top-link"><img src="images/Nomenclature.png" alt="logo" class="logo" id="logo" />
<p class="codeit">CodeIt</p>
Expand Down Expand Up @@ -219,32 +227,39 @@

<div class="faq-section" id="faq">
<p class="heading">Frequently Asked Questions</p>

<details class="faq-item">
<summary class="faq-question">Q1: What is CodeIt?</summary>
<p class="faq-answer">A: CodeIt is a software solution tool designed to streamline and enhance the coding experience for developers.</p>
<summary class="faq-question">Q1: What is CodeIt?</summary>
<p class="faq-answer">A: CodeIt is a software solution tool designed to streamline and enhance the coding
experience for developers.</p>
</details>

<details class="faq-item">
<summary class="faq-question">Q2: Can CodeIt integrate with coding platforms like LeetCode?</summary>
<p class="faq-answer">A: Yes, CodeIt is designed to work seamlessly with coding platforms like LeetCode. It converts the default code templates provided by these platforms into fully functional code, allowing developers to jump right into algorithm development and testing.</p>
<summary class="faq-question">Q2: Can CodeIt integrate with coding platforms like LeetCode?</summary>
<p class="faq-answer">A: Yes, CodeIt is designed to work seamlessly with coding platforms like LeetCode. It
converts the default code templates provided by these platforms into fully functional code, allowing developers
to jump right into algorithm development and testing.</p>
</details>

<details class="faq-item">
<summary class="faq-question">Q3: Does CodeIt support multiple programming languages?</summary>
<p class="faq-answer">A: Yes, CodeIt supports multiple popular programming languages, including Python, Java, and C++, ensuring flexibility for developers working across different languages.</p>
<summary class="faq-question">Q3: Does CodeIt support multiple programming languages?</summary>
<p class="faq-answer">A: Yes, CodeIt supports multiple popular programming languages, including Python, Java, and
C++, ensuring flexibility for developers working across different languages.</p>
</details>

<details class="faq-item">
<summary class="faq-question">Q4: Is CodeIt suitable for beginners?</summary>
<p class="faq-answer">A: Absolutely! CodeIt has a clean, user-friendly interface that makes it easy to navigate, even for those new to coding platforms.</p>
<summary class="faq-question">Q4: Is CodeIt suitable for beginners?</summary>
<p class="faq-answer">A: Absolutely! CodeIt has a clean, user-friendly interface that makes it easy to navigate,
even for those new to coding platforms.</p>
</details>

<details class="faq-item">
<summary class="faq-question">Q5: Does CodeIt require any specific setup or installation?</summary>
<p class="faq-answer">A: No special setup is required to start using CodeIt. The tool is designed to be user-friendly and easy to integrate into existing workflows, making it accessible to developers at any skill level.</p>
<summary class="faq-question">Q5: Does CodeIt require any specific setup or installation?</summary>
<p class="faq-answer">A: No special setup is required to start using CodeIt. The tool is designed to be
user-friendly and easy to integrate into existing workflows, making it accessible to developers at any skill
level.</p>
</details>
</div>
</div>



Expand All @@ -269,9 +284,11 @@
<div class="design_line"></div>
<footer>
<div class="left_last">
<div class="contact" style="display: flex;align-items: center;justify-content: center; flex-direction: column;width: 400px;">
<div class="name" style="display: flex; justify-content: center;gap: 20px; text-align: center;align-items: center;">
<img src="images/Nomenclature.png" alt="" class="end-logo" style="margin: 0px;position: relative;"/>
<div class="contact"
style="display: flex;align-items: center;justify-content: center; flex-direction: column;width: 400px;">
<div class="name"
style="display: flex; justify-content: center;gap: 20px; text-align: center;align-items: center;">
<img src="images/Nomenclature.png" alt="" class="end-logo" style="margin: 0px;position: relative;" />
<a class="subheading" href="index.html" style="margin: 0px;" id="last_link">CodeIt</a>
</div>
<h3 style="margin-top: 20px;text-align: center;">Our Social Media Handles</h3>
Expand All @@ -283,24 +300,27 @@ <h3 style="margin-top: 20px;text-align: center;">Our Social Media Handles</h3>
</div>
</div>
</div>
<div class="right_last">
<form name="CodeIt Reviews" style="margin-left: 0px;" action="POST" data-netlify="true" onsubmit="return validateFeedback()">
<p>Let Us Know Your Thoughts!</p>
<div class="right_last">
<form name="CodeIt Reviews" style="margin-left: 0px;" action="POST" data-netlify="true"
onsubmit="return validateFeedback()">
<p>Let Us Know Your Thoughts!</p>

<div class="form">
<div class="user">
<div class="user">
<i class="fa-solid fa-user"></i>
<input type="text" name="Name" placeholder="Your Name" required />
</div>
<div class="email">
<i class="fa-solid fa-envelope"></i>
</div>
<div class="email">
<i class="fa-solid fa-envelope"></i>
<input type="email" name="Email" placeholder="Your Email ID" required />
</div>
<div class="feed-back">
</div>
<div class="feed-back">
<i class="fa-solid fa-comment"></i>

<input name="Feedback" class="feedback" placeholder="Your Feedback (minimum 10 characters)"required oninput="checkFeedbackLength(this)"></input>
<span id="feedbackError"style="color:#ff5457"display="none">Feedback must be at least 10 characters long.</span>

<input name="Feedback" class="feedback" placeholder="Your Feedback (minimum 10 characters)" required
oninput="checkFeedbackLength(this)"></input>
<span id="feedbackError" style="color:#ff5457" display="none">Feedback must be at least 10 characters
long.</span>
</div>

<div class="star-rating" style="text-align: center; margin: 10px;">
Expand All @@ -314,11 +334,11 @@ <h3 style="margin-top: 20px;text-align: center;">Our Social Media Handles</h3>
<label for="star2" title="2 stars">&#9733;</label>
<input type="radio" id="star1" name="rating" value="1" />
<label for="star1" title="1 stars">&#9733;</label>
</div>
<button type="submit" id="send">Send</button>
</div>
</form>
</div>
<button type="submit" id="send">Send</button>
</div>
</form>
</div>

</footer>

Expand Down Expand Up @@ -382,14 +402,36 @@ <h3 class="subheading">Condition</h3>
<img src="https://icons.veryicon.com/png/o/miscellaneous/foundation-icon-5/link-86.png" alt="" />
</button>
<a href="https://github.com/multiverseweb/CodeIt" class="footer_logo">
<img src="https://pngimg.com/d/github_PNG83.png" alt="" id="link2" /></a>

<img src="https://pngimg.com/d/github_PNG83.png" alt="" id="link2" /></a>

</div>
<script src="resources/homeScript.js"></script>
<script src="resources/common_functions.js"></script>

<script>

//for the progressbar on scroll
(function () {
const handleScroll = () => {
const totalHeight =
document.documentElement.scrollHeight - window.innerHeight;
const scrollPosition = window.pageYOffset;
const scrollPercentage = (scrollPosition / totalHeight) * 100;
document.getElementById(
"progress-bar-home"
).style.width = `${scrollPercentage}%`;
};

window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
})();




function checkFeedbackLength(input) {
var errorSpan = document.getElementById('feedbackError');
if (input.value.length < 10) {
Expand All @@ -400,35 +442,31 @@ <h3 class="subheading">Condition</h3>
input.setCustomValidity('');
}
}

function validateFeedback() {
var feedback = document.forms["CodeIt Reviews"]["Feedback"];
checkFeedbackLength(feedback);
return feedback.value.length >= 10;
}
function validateForm() {
const rating = document.querySelector('input[name="rating"]:checked');
if (!rating) {
alert("Please select a rating.");
return false; // Prevent form submission
}
return true; // Allow form submission
}
const rating = document.querySelector('input[name="rating"]:checked');
if (!rating) {
alert("Please select a rating.");
return false; // Prevent form submission
}
return true; // Allow form submission
}
</script>
<script>
window.embeddedChatbotConfig = {
chatbotId: "DBi2wppZwMgjgoS8dKAXE",
domain: "www.chatbase.co"
chatbotId: "DBi2wppZwMgjgoS8dKAXE",
domain: "www.chatbase.co"
}
</script>
<script
src="https://www.chatbase.co/embed.min.js"
chatbotId="DBi2wppZwMgjgoS8dKAXE"
domain="www.chatbase.co"
defer>
</script>


</script>
<script src="https://www.chatbase.co/embed.min.js" chatbotId="DBi2wppZwMgjgoS8dKAXE" domain="www.chatbase.co" defer>
</script>


</body>

</html>
</html>
5 changes: 5 additions & 0 deletions pages/contributorsSection.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@
<link rel="shortcut icon" href="../images/Nomenclature.png" type="image/x-icon" />
</head>
<body>
<!-- the progress bar container -->
<div class="progress-bar-container">
<!-- the progress bar -->
<div class="progress-bar" id="progress-bar-con"></div>
</div>
<div class="containerr">

<!-- Stats Section -->
Expand Down
20 changes: 20 additions & 0 deletions resources/contributorsSection.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,26 @@ body {
margin: 0 auto;
}

/* Styling the progress bar */
.progress-bar-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
height: 8px;
}

.progress-bar{
border: none;
border-radius: 2rem;
height: 100%;
width:0%;
background:linear-gradient(90deg, #b6dbf9, #1694DB,#5C6BC0,#2751BD);
box-shadow: 0 0 5px #BBDEFB, 0 0 15px #2751BD, 0 0 21px #2d04d1;
}


/* Hero Section */
.hero {
background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=2850&q=80');
Expand Down
Loading