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

Add social media links redirection to the footer of all pages #1553

Merged
merged 3 commits into from
Oct 24, 2024
Merged

Add social media links redirection to the footer of all pages #1553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e5c39f4
The feedback page now looks a lot more professional and coherent with…
JomanaMahmoud Oct 24, 2024
be69efc
Merge pull request #1 from JomanaMahmoud/add-ui-to-feedback-page
JomanaMahmoud Oct 24, 2024
1758237
added the social media redirection links to about, feedback, index, o…
JomanaMahmoud Oct 24, 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
380 changes: 321 additions & 59 deletions Website/Feedback.html
View file
Open in desktop
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="https://www.facebook.com/recodehive"><i class="fa-brands fa-facebook"></i></a>
<a href="https://instagram.com"><i class="fa-brands fa-instagram"></i></a>
<a href="https://twitter.com/sanjay_kv"><i class="fa-brands fa-square-x-twitter"></i></a>
<a href="https://www.linkedin.com/in/sanjay-k-v/"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://github.com/recodehive"><i class="fa-brands fa-github"></i></a>
<a href="https://youtube.com"><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
Loading