Skip to content

Commit e5c39f4

Browse files
JomanaMahmoudJomanaMahmoud
committed
The feedback page now looks a lot more professional and coherent with the website.
1 parent 375477a commit e5c39f4

File tree

3 files changed

+2464
-114
lines changed

3 files changed

+2464
-114
lines changed

‎Website/Feedback.html

Lines changed: 321 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -3,73 +3,335 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Feedback Form</title>
7-
<link rel="stylesheet" href="css/feedback.css" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<meta name="title" content="Machine Learning Repositories">
8+
<meta name="description"
9+
content="A curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community">
10+
<meta name="keywords"
11+
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">
12+
<meta name="robots" content="index, follow">
13+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
14+
<meta name="language" content="English">
15+
<meta name="revisit-after" content="1 days">
16+
<meta name="author" content="Recode Hive">
17+
<meta property="og:type" content="website" />
18+
<!-- <meta property="og:url" content="url" /> define URL when deployed -->
19+
<meta property="og:description"
20+
content="A curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community" />
21+
<title>Feedback</title>
22+
<!-- <link rel="canonical" href="url-here" /> define base(root) link of deployment here -->
23+
<link rel="stylesheet" href="css/Feedback.css" />
24+
<link rel="icon" href="/assets/recode-hive.png" type="image/png"> <!-- Added favicon -->
25+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
26+
<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" />
27+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
28+
29+
30+
<style>
31+
#progress-container {
32+
position: fixed ;
33+
top: 0px;
34+
left: 0;
35+
width: 100%;
36+
height: 15px;
37+
z-index: 99990;
38+
/* background: #f3f3f3; */
39+
}
40+
41+
#progress-bar {
42+
height: 53%;
43+
width: 0;
44+
background: linear-gradient(90deg, rgb(0, 72, 255) 0%, rgb(58, 114, 227) 50%, rgb(22, 121, 250) 100%);
45+
box-shadow: 0 0 4px rgba(0, 166, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
46+
transition: width 0.09s ease-in-out;
47+
border-radius: 10px;
48+
}
49+
.repo {
50+
background-color: #f9f9f9;
51+
padding: 20px;
52+
margin: 15px;
53+
border-radius: 12px;
54+
width: 250px;
55+
text-align: center;
56+
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
57+
transition: transform 0.3s ease, box-shadow 0.3s ease;
58+
animation: fadeInUp 1.2s ease-in-out;
59+
}
60+
.repo a {
61+
text-decoration: none;
62+
}
63+
.repo:hover {
64+
transform: translateY(-10px);
65+
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
66+
}
67+
.repo img {
68+
max-width: 100%;
69+
border-radius: 8px;
70+
transition: transform 0.3s ease;
71+
}
72+
.repo:hover img {
73+
transform: scale(1.05);
74+
}
75+
.repo-title {
76+
font-size: 1.4em;
77+
margin-top: 15px;
78+
margin-bottom: 10px;
79+
color: #333;
80+
}
81+
.repo-description {
82+
font-size: 1em;
83+
color: #777;
84+
}
85+
.paragraph {
86+
font-size: 1.2em;
87+
line-height: 1.8em;
88+
margin-bottom: 30px;
89+
color: #ffffff;
90+
text-align: center;
91+
animation: fadeInUp 1.2s ease-in-out;
92+
}
93+
.repo-section {
94+
display: flex;
95+
flex-wrap: wrap;
96+
justify-content: space-around;
97+
margin-bottom: 30px;
98+
}
99+
.dark-mode .content{
100+
background-color: white;
101+
}
102+
.dark-mode .title{
103+
color: #333;
104+
}
105+
.dark-mode .paragraph{
106+
color: #555;
107+
}
108+
109+
</style>
8110
</head>
9-
<body>
10-
11-
<div class="feedback-container">
12-
<h2>Feedback Form</h2>
13-
<p>We appreciate your feedback! Please rate us and leave a comment.</p>
14-
15-
<form id="feedbackForm" action="#" method="post" onsubmit="return handleSubmit(event);">
16-
<label for="name">Name</label>
17-
<input type="text" id="name" name="name" required>
18-
19-
<label for="email">Email</label>
20-
<input type="email" id="email" name="email" required>
21-
22-
<label for="message">Message</label>
23-
<textarea id="message" name="message" rows="5" required></textarea>
24-
25-
<label class="rate-label">Rate Us:</label>
26-
<div class="star-rating">
27-
<input type="radio" id="star1" name="rating" value="1" />
28-
<label for="star1" title="1 star">★</label>
29-
<input type="radio" id="star2" name="rating" value="2" />
30-
<label for="star2" title="2 stars">★</label>
31-
<input type="radio" id="star3" name="rating" value="3" />
32-
<label for="star3" title="3 stars">★</label>
33-
<input type="radio" id="star4" name="rating" value="4" />
34-
<label for="star4" title="4 stars">★</label>
35-
<input type="radio" id="star5" name="rating" value="5" />
36-
<label for="star5" title="5 stars">★</label>
37-
</div>
111+
<body class="dark-mode">
112+
<div id="progress-container">
113+
<div id="progress-bar"></div>
114+
</div>
115+
116+
<script>
38117

39-
<button type="submit">Send Feedback</button>
40-
</form>
41-
42-
<!-- Back to Home Button -->
43-
<button onclick="window.location.href='index.html'" class="back-button">Back to Home</button>
118+
window.addEventListener('scroll', function() {
119+
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
120+
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
121+
const scrolled = (winScroll / height) * 100;
122+
document.getElementById('progress-bar').style.width = scrolled + '%';
123+
});
124+
</script>
125+
<div class="loading-container" id="loading-animation">
126+
<div class="loader"></div>
44127
</div>
128+
<header>
129+
<nav class="navbar">
130+
<a class="logo-container" href="/">
131+
<img src="assets/recode-hive.png" alt="Recode Hive Icon" class="logo-icon">
132+
<span class="logo-text">Recode Hive</span>
133+
</a>
134+
<ul class="nav-links">
135+
<li><a href="index.html">Home</a></li>
136+
<li><a href="about.html">About</a></li>
45137

46-
<script>
47-
function handleSubmit(event) {
48-
event.preventDefault(); // Prevent the default form submission
138+
<li><a href="https://recodehive.github.io/awesome-github-profiles/pages/blog.html">Learn</a></li>
139+
<li><a href="organization.html">Organization</a></li>
140+
<li><a href="faq.html">FAQ</a></li>
141+
<li><a href="Feedback.html">Feedback</a></li>
142+
<li><a href="contact.html">Contact</a></li>
143+
<!-- Dropdown on navbar -->
144+
<li class="dropdown">
145+
<button id="dropdownButton" class="dropbtn">Know More</button>
146+
<div id="dropdownMenu" class="dropdown-content">
147+
<a href="https://github.com/recodehive">How we work?</a>
148+
<a href="https://github.com/recodehive">Projects</a>
149+
<a href="https://github.com/recodehive">Team</a>
150+
<a href="https://github.com/recodehive">Code of Conduct</a>
151+
</div>
152+
</li>
153+
<div class="nav-icons">
154+
<li>
155+
<a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
156+
<img src="assets/images.png" alt="GitHub"> <!-- GitHub Icon -->
157+
</a>
158+
</li>
159+
<li>
160+
<button id="toggle-dark-mode" title="Use Ctrl+Q to toggle themes easily">
161+
<i class="fas fa-moon"></i>
162+
</button>
163+
</li>
164+
</div>
165+
</ul>
166+
<div class="line" id="line">
167+
<div class="bar1"></div>
168+
<div class="bar2"></div>
169+
<div class="bar3"></div>
170+
</div>
171+
</nav>
172+
</header>
49173

50-
// You can add logic here to process the form data as needed
51-
// For example, you could send the data to a server using AJAX
174+
<main>
175+
<div class="contact-container">
176+
<h2>Feedback form</h2>
177+
<p>We appreciate your feedback! Please rate us and leave a comment.</p>
178+
179+
<form action="#" method="post">
180+
<label for="name">Name</label>
181+
<input type="text" id="name" name="name" required>
182+
183+
<label for="email">Email</label>
184+
<input type="email" id="email" name="email" required>
185+
186+
<label for="message">Message</label>
187+
<textarea id="message" name="message" rows="5" required></textarea>
188+
<label class="rate-label">Rate Us</label>
189+
<div class="star-rating">
190+
<input type="radio" id="star1" name="rating" value="1" />
191+
<label for="star1" title="1 star">★</label>
192+
<input type="radio" id="star2" name="rating" value="2" />
193+
<label for="star2" title="2 stars">★</label>
194+
<input type="radio" id="star3" name="rating" value="3" />
195+
<label for="star3" title="3 stars">★</label>
196+
<input type="radio" id="star4" name="rating" value="4" />
197+
<label for="star4" title="4 stars">★</label>
198+
<input type="radio" id="star5" name="rating" value="5" />
199+
<label for="star5" title="5 stars">★</label>
200+
</div>
201+
<button type="submit">Send Feedback</button>
202+
</form>
52203

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

58-
// Highlight stars logic
59-
const stars = document.querySelectorAll('.star-rating input');
60-
61-
stars.forEach(star => {
62-
star.addEventListener('change', () => {
63-
// Reset all stars to gray
64-
stars.forEach(s => s.nextElementSibling.style.color = '#ddd');
65-
66-
// Highlight checked star and all stars to the left
67-
for (let i = 0; i < star.value; i++) {
68-
stars[i].nextElementSibling.style.color = 'gold';
69-
}
70-
});
71-
});
214+
<!-- Chatbox -->
215+
<div class="chatbot" id="chatbot">
216+
<div class="chatbot-header">
217+
Recodehive's Chatbot
218+
<span class="close-btn" id="close-chatbot">&times;</span>
219+
</div>
220+
<div class="chatbot-messages" id="chatbot-messages"></div>
221+
<div class="chatbot-questions">
222+
<p>Choose a question:</p>
223+
<ul id="question-list">
224+
<!-- Questions will be populated here -->
225+
</ul>
226+
</div>
227+
<div class="chatbot-input-container">
228+
<input type="text" id="chatbot-input" placeholder="Type your message...">
229+
<button id="chatbot-send">Send</button>
230+
</div>
231+
</div>
232+
233+
<!-- Scroll to Top Button -->
234+
<button id="scroll-top-btn" title="Go to top">
235+
<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">
236+
<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"/>
237+
</svg>
238+
</button>
239+
240+
241+
<!-- Side Icons -->
242+
243+
<div class="side-icons">
244+
<div class="icon-content">
245+
<a href="https://www.facebook.com/recodehive" target="_blank" aria-label="Facebook" data-social="facebook">
246+
<i class="fab fa-facebook-f"></i>
247+
<div class="filled"></div>
248+
</a>
249+
</div>
250+
<div class="icon-content">
251+
<a href="https://www.linkedin.com/in/sanjay-k-v/" target="_blank" aria-label="LinkedIn" data-social="linkedin">
252+
<i class="fab fa-linkedin-in"></i>
253+
<div class="filled"></div>
254+
</a>
255+
</div>
256+
<div class="icon-content">
257+
<a href="https://twitter.com/sanjay_kv" target="_blank" aria-label="Twitter" data-social="twitter">
258+
<i class="fa fa-twitter"></i>
259+
<div class="filled"></div>
260+
</a>
261+
</div>
262+
<div class="icon-content">
263+
<a href="https://youtube.com" target="_blank" aria-label="YouTube" data-social="youtube">
264+
<i class="fab fa-youtube"></i>
265+
<div class="filled"></div>
266+
</a>
267+
</div>
268+
<div class="icon-content">
269+
<a href="https://github.com/recodehive" target="_blank" aria-label="GitHub" data-social="github">
270+
<i class="fab fa-github"></i>
271+
<div class="filled"></div>
272+
</a>
273+
</div>
274+
</div>
275+
276+
277+
<!-- new footer changes -->
278+
<div class="footer">
279+
<div class="footer-col">
280+
<img src="./assets/recode-hive.png" alt="">
281+
<p class="footer-p">
282+
283+
Machine Learning is an exciting and rapidly evolving field that offers endless opportunities for innovation and discovery.
284+
285+
</p>
286+
<div class="footer-social">
287+
<a href="#"><i class="fa-brands fa-facebook"></i></a>
288+
<a href="#"><i class="fa-brands fa-instagram"></i></a>
289+
<a href="#"><i class="fa-brands fa-square-x-twitter"></i></a>
290+
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
291+
<a href="#"><i class="fa-brands fa-github"></i></a>
292+
<a href="#"><i class="fa-brands fa-youtube"></i></a>
293+
</div>
294+
</div>
295+
<div class="footer-col-main">
296+
<h4 class="h46">Company</h4>
297+
<a href="#">Organisation</a>
298+
<a href="#">Franchise</a>
299+
<a href="#">Contribute</a>
300+
<a href="#">Network</a>
301+
</div>
302+
<div class="footer-col-main">
303+
<h4 class="h46">About Us</h4>
304+
<a href="#">Blogs</a>
305+
<a href="#">Security</a>
306+
<a href="#">Careers</a>
307+
<a href="#">FAQS</a>
308+
</div>
309+
<div class="footer-col-main">
310+
<h4 class="h46">Contact</h4>
311+
<a href="#">Terms & Conditions</a>
312+
<a href="#">Contact Us</a>
313+
<a href="#">Privacy Policy</a>
314+
<a href="#">Feedback</a>
315+
</div>
316+
</div>
317+
<div class="footer-bar">
318+
Copyright &copy; 2024 <a href="https://github.com/recodehive">Recodehive</a>. All rights reserved.
319+
320+
</div>
321+
322+
323+
324+
<script>
325+
const year = new Date().getFullYear();
326+
document.getElementById("year").textContent = year;
72327
</script>
73328

329+
<script src="js/script.js"></script>
330+
331+
<script>
332+
function changeImage(image) {
333+
document.getElementById('repoImage').src = image;
334+
}
335+
</script>
74336
</body>
75337
</html>

0 commit comments

Comments
 (0)