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

added scroll to reveal animation to the home page #309

Merged
merged 1 commit into from
Nov 8, 2024
Merged

added scroll to reveal animation to the home page #309

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
112 changes: 67 additions & 45 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,15 @@
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<link rel="shortcut icon" href="images/Nomenclature.png" type="image/x-icon" />

<!-- Added the CDN link -->

<script src="https://unpkg.com/scrollreveal"></script>





</head>

<body id="body">
Expand Down Expand Up @@ -110,7 +119,7 @@
</div>

<div class="section-l" id="intro">
<div class="left">
<div class="left reveal">
<div class="top_codeit">
<p id="code">Code</p>
<p>It</p>
Expand All @@ -131,7 +140,7 @@
</p>
</div>

<div class="right">
<div class="right reveal">
<div id="map"></div>
</div>
<div class="scroll_icon" id="scroll_icon">
Expand All @@ -141,120 +150,120 @@
</div>
</div>
<div class="section-r" id="refine">
<div class="left">
<p class="heading" id="heading">Key Features</p>
<p class="subheading">Code Refinement</p>
<p class="text">
<div class="left reveal">
<p class="heading reveal" id="heading">Key Features</p>
<p class="subheading reveal">Code Refinement</p>
<p class="text reveal">
Quickly convert your default / boilerplate code to a more useful and
executable code in one click! <br /><br />It reduces repetitive tasks,
manual mistakes and saves time.
<br />
</p>
</div>
<div class="right">
<div class="right reveal">
<img src="images/coedit.png" class="preview" />
</div>
</div>
<div class="section-l" id="obfuscate">
<div class="section-l reveal" id="obfuscate">
<div class="left" id="zoom">
<img src="images/obfuscation.png" class="preview" id="obfuscatePreview" />
</div>
<div class="right">
<p class="subheading">Code Obfuscation</p>
<p class="text">
<p class="subheading reveal">Code Obfuscation</p>
<p class="text reveal">
Make your code harder to read and understand but still executable. It
adds an extra layer of security, protecting your code from plagiarism.
<br /><br />This feature is of great importance when you're working on
innovative projects.
</p>
</div>
</div>
<div class="section-r" id="nomenclature">
<div class="section-r reveal" id="nomenclature">
<div class="left">
<p class="subheading">Smart File Naming</p>
<p class="text">
<p class="subheading reveal">Smart File Naming</p>
<p class="text reveal">
Follow a fixed file naming convention, which helps reducing the
overhead of manual file management. <br /><br />It is useful for the
developers working on large and collaborative projects.
<br />
</p>
</div>
<div class="right">
<div class="right reveal">
<img src="images/naming.png" class="preview" />
</div>
</div>
<div class="section-l" id="complexity">
<div class="section-l reveal" id="complexity">
<div class="left">
<img src="images/complexity.png" class="preview" />
</div>
<div class="right">
<p class="subheading">Time Complexity Analysis</p>
<p class="text">
<div class="right reveal">
<p class="subheading reveal">Time Complexity Analysis</p>
<p class="text reveal">
Understand how fast your code runs and optimize it for better
performance. CodeIt also visualises the time complexity on a
line-chart for better understanding.
</p>
</div>
</div>

<div class="section-r" id="working">
<div class="section-r reveal" id="working">
<div class="left">
<p class="heading">How CodeIt Works?</p>
<p class="subheading">I. Choose Your Task...</p>
<p class="text">
<p class="heading reveal">How CodeIt Works?</p>
<p class="subheading reveal">I. Choose Your Task...</p>
<p class="text reveal">
Select from code conversion, obfuscation, file naming, or analysis.
</p>
<br />
<p class="subheading">II. Upload Your Code...</p>
<p class="text">Paste your code into the tool.</p>
<p class="subheading reveal">II. Upload Your Code...</p>
<p class="text reveal">Paste your code into the tool.</p>
<br />
<p class="subheading">III. Get Instant Results!</p>
<p class="text">See the results immediately and copy them if needed.</p>
<p class="subheading reveal">III. Get Instant Results!</p>
<p class="text reveal">See the results immediately and copy them if needed.</p>
<br />
</div>
<div class="right">
<div class="right reveal">
<img src="images/flowChart.png" class="preview" id="flowchart" />
</div>
</div>

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

<details class="faq-item">
<summary class="faq-question">Q1: What is CodeIt?</summary>
<summary class="faq-question reveal">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>
<summary class="faq-question reveal">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>
<summary class="faq-question reveal">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>
<summary class="faq-question reveal">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>
<summary class="faq-question reveal">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 class="section-l" id="contributeSection">
<div class="section-l reveal" id="contributeSection">
<div class="left">
<img src="images/working.png" class="preview" />
</div>
<div class="right">
<p class="heading">Want to contribute to this Project?</p>
<p class="text">
<div class="right reveal">
<p class="heading reveal">Want to contribute to this Project?</p>
<p class="text reveal">
As this is an Open-Source Software, contributions are always welcome. Whether you're interested in adding new
features, fixing bugs, or improving documentation, your contributions are valuable. You can contribute to the
project by visiting the link to the GitHub repository provided below. Join me in making CodeIt even better for
Expand All @@ -264,11 +273,11 @@
src="https://static-00.iconduck.com/assets.00/github-icon-2048x1999-d37ckpm6.png" id="github"></a>
</div>
</div>
<div id="feedback"></div>
<div id="feedback" reveal></div>

<div class="design_line"></div>
<footer>
<div class="left_last">
<div class="left_last reveal">
<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;"/>
Expand All @@ -283,11 +292,11 @@ <h3 style="margin-top: 20px;text-align: center;">Our Social Media Handles</h3>
</div>
</div>
</div>
<div class="right_last">
<div class="right_last reveal">
<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="form reveal">
<div class="user">
<i class="fa-solid fa-user"></i>
<input type="text" name="Name" placeholder="Your Name" required />
Expand Down Expand Up @@ -322,7 +331,7 @@ <h3 style="margin-top: 20px;text-align: center;">Our Social Media Handles</h3>

</footer>

<div class="license" id="licenseSection">
<div class="license reveal" id="licenseSection">
<div class="lic-left">
<div class="lic-heading">
<h2 class="heading">License</h2>
Expand All @@ -338,7 +347,7 @@ <h4>This is a super flexible license, allowing you to freely use, modify, and sh
</div>
</div>

<div class="lic-right">
<div class="lic-right reveal">
<div class="lic-right-vals">
<div class="lic-per">
<h3 class="subheading">Permissions</h3>
Expand Down Expand Up @@ -372,7 +381,7 @@ <h3 class="subheading">Condition</h3>
</div>
</div>
<div class="design_line"></div>
<div class="last">
<div class="last reveal">
<p>
Designed & Developed by Tejas Gupta<br />
<a href="https://github.com/multiverseweb/CodeIt/blob/main/LICENSE">&copy; 2024 Tejas Gupta</a>
Expand Down Expand Up @@ -428,6 +437,19 @@ <h3 class="subheading">Condition</h3>
defer>
</script>

<!-- Added this script to initialize elements you want to reveal. -->

<script>ScrollReveal().reveal('.reveal', {
distance: '50px',
duration: 800,
easing: 'ease-in-out',
origin: 'bottom',
interval: 200, // Delay between revealing multiple elements
});
</script>




</body>

Expand Down