Skip to content

Commit

Permalink
The feedback page now looks a lot more professional and coherent with…
Browse files Browse the repository at this point in the history 
… the website.
  • Loading branch information
@JomanaMahmoud
JomanaMahmoud committed Oct 24, 2024
1 parent 375477a commit e5c39f4
Show file tree
Hide file tree
Showing 3 changed files with 2,464 additions and 114 deletions.
380 changes: 321 additions & 59 deletions Website/Feedback.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,73 +3,335 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feedback Form</title>
<link rel="stylesheet" href="css/feedback.css" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="title" content="Machine Learning Repositories">
<meta name="description"
content="A curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community">
<meta name="keywords"
content="machine learning, machine learning repositories, machine learning repos, machine learning recode hive, recode hive, recode hive ml repos, recode give ml, ml, ml repositories, github repositories ml, machine learning github repositories">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
<meta name="revisit-after" content="1 days">
<meta name="author" content="Recode Hive">
<meta property="og:type" content="website" />
<!-- <meta property="og:url" content="url" /> define URL when deployed -->
<meta property="og:description"
content="A curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community" />
<title>Feedback</title>
<!-- <link rel="canonical" href="url-here" /> define base(root) link of deployment here -->
<link rel="stylesheet" href="css/Feedback.css" />
<link rel="icon" href="/assets/recode-hive.png" type="image/png"> <!-- Added favicon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<style>
#progress-container {
position: fixed ;
top: 0px;
left: 0;
width: 100%;
height: 15px;
z-index: 99990;
/* background: #f3f3f3; */
}

#progress-bar {
height: 53%;
width: 0;
background: linear-gradient(90deg, rgb(0, 72, 255) 0%, rgb(58, 114, 227) 50%, rgb(22, 121, 250) 100%);
box-shadow: 0 0 4px rgba(0, 166, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
transition: width 0.09s ease-in-out;
border-radius: 10px;
}
.repo {
background-color: #f9f9f9;
padding: 20px;
margin: 15px;
border-radius: 12px;
width: 250px;
text-align: center;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
animation: fadeInUp 1.2s ease-in-out;
}
.repo a {
text-decoration: none;
}
.repo:hover {
transform: translateY(-10px);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}
.repo img {
max-width: 100%;
border-radius: 8px;
transition: transform 0.3s ease;
}
.repo:hover img {
transform: scale(1.05);
}
.repo-title {
font-size: 1.4em;
margin-top: 15px;
margin-bottom: 10px;
color: #333;
}
.repo-description {
font-size: 1em;
color: #777;
}
.paragraph {
font-size: 1.2em;
line-height: 1.8em;
margin-bottom: 30px;
color: #ffffff;
text-align: center;
animation: fadeInUp 1.2s ease-in-out;
}
.repo-section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-bottom: 30px;
}
.dark-mode .content{
background-color: white;
}
.dark-mode .title{
color: #333;
}
.dark-mode .paragraph{
color: #555;
}

</style>
</head>
<body>

<div class="feedback-container">
<h2>Feedback Form</h2>
<p>We appreciate your feedback! Please rate us and leave a comment.</p>

<form id="feedbackForm" action="#" method="post" onsubmit="return handleSubmit(event);">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>

<label for="email">Email</label>
<input type="email" id="email" name="email" required>

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>

<label class="rate-label">Rate Us:</label>
<div class="star-rating">
<input type="radio" id="star1" name="rating" value="1" />
<label for="star1" title="1 star">★</label>
<input type="radio" id="star2" name="rating" value="2" />
<label for="star2" title="2 stars">★</label>
<input type="radio" id="star3" name="rating" value="3" />
<label for="star3" title="3 stars">★</label>
<input type="radio" id="star4" name="rating" value="4" />
<label for="star4" title="4 stars">★</label>
<input type="radio" id="star5" name="rating" value="5" />
<label for="star5" title="5 stars">★</label>
</div>
<body class="dark-mode">
<div id="progress-container">
<div id="progress-bar"></div>
</div>

<script>

<button type="submit">Send Feedback</button>
</form>

<!-- Back to Home Button -->
<button onclick="window.location.href='index.html'" class="back-button">Back to Home</button>
window.addEventListener('scroll', function() {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.getElementById('progress-bar').style.width = scrolled + '%';
});
</script>
<div class="loading-container" id="loading-animation">
<div class="loader"></div>
</div>
<header>
<nav class="navbar">
<a class="logo-container" href="/">
<img src="assets/recode-hive.png" alt="Recode Hive Icon" class="logo-icon">
<span class="logo-text">Recode Hive</span>
</a>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>

<script>
function handleSubmit(event) {
event.preventDefault(); // Prevent the default form submission
<li><a href="https://recodehive.github.io/awesome-github-profiles/pages/blog.html">Learn</a></li>
<li><a href="organization.html">Organization</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="Feedback.html">Feedback</a></li>
<li><a href="contact.html">Contact</a></li>
<!-- Dropdown on navbar -->
<li class="dropdown">
<button id="dropdownButton" class="dropbtn">Know More</button>
<div id="dropdownMenu" class="dropdown-content">
<a href="https://github.com/recodehive">How we work?</a>
<a href="https://github.com/recodehive">Projects</a>
<a href="https://github.com/recodehive">Team</a>
<a href="https://github.com/recodehive">Code of Conduct</a>
</div>
</li>
<div class="nav-icons">
<li>
<a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
<img src="assets/images.png" alt="GitHub"> <!-- GitHub Icon -->
</a>
</li>
<li>
<button id="toggle-dark-mode" title="Use Ctrl+Q to toggle themes easily">
<i class="fas fa-moon"></i>
</button>
</li>
</div>
</ul>
<div class="line" id="line">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
</header>

// You can add logic here to process the form data as needed
// For example, you could send the data to a server using AJAX
<main>
<div class="contact-container">
<h2>Feedback form</h2>
<p>We appreciate your feedback! Please rate us and leave a comment.</p>

<form action="#" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>

<label for="email">Email</label>
<input type="email" id="email" name="email" required>

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
<label class="rate-label">Rate Us</label>
<div class="star-rating">
<input type="radio" id="star1" name="rating" value="1" />
<label for="star1" title="1 star">★</label>
<input type="radio" id="star2" name="rating" value="2" />
<label for="star2" title="2 stars">★</label>
<input type="radio" id="star3" name="rating" value="3" />
<label for="star3" title="3 stars">★</label>
<input type="radio" id="star4" name="rating" value="4" />
<label for="star4" title="4 stars">★</label>
<input type="radio" id="star5" name="rating" value="5" />
<label for="star5" title="5 stars">★</label>
</div>
<button type="submit">Send Feedback</button>
</form>

// After processing, redirect to the home page
window.location.href = 'index.html';
return false; // Prevent any additional form submission
}
<!-- Back to Home Button -->
<button onclick="window.location.href='index.html'" class="back-button">Back to Home</button>
</div>
</main>
<!-- Chatbot Button -->
<div class="chatbot-button" id="chatbot-button">
<img src="assets/chatbot.png" height="50px" width="50px" id="chatbot-img" class="floating" alt="chatbot">
<div class="tooltip">Welcome to RecodeHive - Machine Learning Repos, How can we help you?</div>
</div>

// Highlight stars logic
const stars = document.querySelectorAll('.star-rating input');

stars.forEach(star => {
star.addEventListener('change', () => {
// Reset all stars to gray
stars.forEach(s => s.nextElementSibling.style.color = '#ddd');

// Highlight checked star and all stars to the left
for (let i = 0; i < star.value; i++) {
stars[i].nextElementSibling.style.color = 'gold';
}
});
});
<!-- Chatbox -->
<div class="chatbot" id="chatbot">
<div class="chatbot-header">
Recodehive's Chatbot
<span class="close-btn" id="close-chatbot">&times;</span>
</div>
<div class="chatbot-messages" id="chatbot-messages"></div>
<div class="chatbot-questions">
<p>Choose a question:</p>
<ul id="question-list">
<!-- Questions will be populated here -->
</ul>
</div>
<div class="chatbot-input-container">
<input type="text" id="chatbot-input" placeholder="Type your message...">
<button id="chatbot-send">Send</button>
</div>
</div>

<!-- Scroll to Top Button -->
<button id="scroll-top-btn" title="Go to top">
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512">
<path d="M256 512c70.684 0 134.695-28.658 181.019-74.981C483.342 390.695 512 326.691 512 256s-28.658-134.695-74.981-181.019C390.695 28.658 326.691 0 256 0S121.305 28.658 74.981 74.981C28.658 121.305 0 185.309 0 256s28.658 134.695 74.981 181.019C121.305 483.342 185.309 512 256 512zm-79.003-200.641c-30.983 17.861-46.316-6.963-29.012-25.063l88.741-101.046c16.129-16.136 22.426-16.136 38.563 0l88.741 101.046c17.18 18.187 2.203 42.867-29.02 25.063l-79.003-46.932-79.01 46.932z"/>
</svg>
</button>


<!-- Side Icons -->

<div class="side-icons">
<div class="icon-content">
<a href="https://www.facebook.com/recodehive" target="_blank" aria-label="Facebook" data-social="facebook">
<i class="fab fa-facebook-f"></i>
<div class="filled"></div>
</a>
</div>
<div class="icon-content">
<a href="https://www.linkedin.com/in/sanjay-k-v/" target="_blank" aria-label="LinkedIn" data-social="linkedin">
<i class="fab fa-linkedin-in"></i>
<div class="filled"></div>
</a>
</div>
<div class="icon-content">
<a href="https://twitter.com/sanjay_kv" target="_blank" aria-label="Twitter" data-social="twitter">
<i class="fa fa-twitter"></i>
<div class="filled"></div>
</a>
</div>
<div class="icon-content">
<a href="https://youtube.com" target="_blank" aria-label="YouTube" data-social="youtube">
<i class="fab fa-youtube"></i>
<div class="filled"></div>
</a>
</div>
<div class="icon-content">
<a href="https://github.com/recodehive" target="_blank" aria-label="GitHub" data-social="github">
<i class="fab fa-github"></i>
<div class="filled"></div>
</a>
</div>
</div>


<!-- new footer changes -->
<div class="footer">
<div class="footer-col">
<img src="./assets/recode-hive.png" alt="">
<p class="footer-p">

Machine Learning is an exciting and rapidly evolving field that offers endless opportunities for innovation and discovery.

</p>
<div class="footer-social">
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-square-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-github"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
<div class="footer-col-main">
<h4 class="h46">Company</h4>
<a href="#">Organisation</a>
<a href="#">Franchise</a>
<a href="#">Contribute</a>
<a href="#">Network</a>
</div>
<div class="footer-col-main">
<h4 class="h46">About Us</h4>
<a href="#">Blogs</a>
<a href="#">Security</a>
<a href="#">Careers</a>
<a href="#">FAQS</a>
</div>
<div class="footer-col-main">
<h4 class="h46">Contact</h4>
<a href="#">Terms & Conditions</a>
<a href="#">Contact Us</a>
<a href="#">Privacy Policy</a>
<a href="#">Feedback</a>
</div>
</div>
<div class="footer-bar">
Copyright &copy; 2024 <a href="https://github.com/recodehive">Recodehive</a>. All rights reserved.

</div>



<script>
const year = new Date().getFullYear();
document.getElementById("year").textContent = year;
</script>

<script src="js/script.js"></script>

<script>
function changeImage(image) {
document.getElementById('repoImage').src = image;
}
</script>
</body>
</html>
Loading

0 comments on commit e5c39f4

Please sign in to comment.