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

Feedback page added #1248

Merged
merged 2 commits into from
Jun 17, 2024
Merged

Feedback page added #1248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7a542ab
feedback page
sau-mili Jun 16, 2024
644f578
text format
sau-mili Jun 16, 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
125 changes: 125 additions & 0 deletions new-website/feedback.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
body {
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
background-color: #fff;
color: #000;

}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "Poppins", sans-serif; }

a {
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease; }
a, a:hover {
text-decoration: none !important; }

/* Positioning the arrow link */
.home-link {
position: absolute;
top: 20px;
left: 20px;
font-size: 24px;
color: #111210;
text-decoration: none;
}
.content {
padding: 7rem 0; }
.content h3{
color:#737171;
}
h2 {
font-size: 3.5rem;
font-weight: 700; }

h3 {
font-size: 2rem;
font-weight: 700; }

.form-control {
border: none;
border-bottom: 1px solid #d9d9d9;
padding-left: 0;
padding-right: 0;
border-radius: 0;
}

.form-control:active, .form-control:focus {
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
border-color: #111210;
}

.form-control {
height: 55px;
}

.btn{
background-color: #262925;
border-color: #181818;
height: 45px;
}

.btn:hover{
background-color: #e6e2e3;
color:#181818;
}

form.border-right {
padding-right: 6rem !important; }
@media (max-width: 991.98px) {
form.border-right {
padding-right: 0 !important;
border-right: none !important; } }

label.error {
font-size: 12px;
color: red; }

#message {
resize: vertical; }

#form-message-warning, #form-message-success {
display: none; }

#form-message-warning {
color: #B90B0B; }

#form-message-success {
color: #2a2a2a;
font-size: 18px;
font-weight: bold; }

.submitting {
float: left;
width: 100%;
padding: 10px 0;
display: none;
font-weight: bold;
font-size: 12px;
color: #000;
}

/* Dark Mode */
.dark body{
background-color: #333 !important; /* Dark background color */
color: #fff; /* Light text color */
}

body.dark .form-control,
body.dark .btn {
background-color: #555; /* Darker background color */
color: #fff; /* Light text color */
border-color: #555; /* Darker border color */
}

/* Example: Inverted styles for the success and warning messages */
body.dark #form-messages .alert-success,
body.dark #form-messages .alert-danger {
background-color: #333; /* Darker background color for messages */
color: #fff; /* Light text color for messages */
border-color: #333; /* Darker border color for messages */
}
84 changes: 84 additions & 0 deletions new-website/feedback.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2" defer></script>
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">


<link rel="icon" href="assets/logo.png">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="feedback.css">
<!-- <link rel="stylesheet" href="style.css"> -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ResourceHub</title>
</head>
<body>
<div class="col-md-10">
<a href="index.html" class="home-link"><i class="fas fa-arrow-left"> </i></a>
</div>

<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="row align-items-center">
<div class="col-lg-7 mb-5 mb-lg-0">
<h2 class="mb-5">Fill this feedback form</h2><h3>Reach out to us.</h3>
<form action="" class="border-right pr-5 mb-5" method="post" id="contactForm" name="contactForm">
<!-- replace email id accordingly -->
<div class="row">
<div class="col-md-6 form-group">
<input type="text" class="form-control" name="fname" id="fname" placeholder="First name">
</div>
<div class="col-md-6 form-group">
<input type="text" class="form-control" name="lname" id="lname" placeholder="Last name">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<input type="text" class="form-control" name="email" id="email" placeholder="youremail@somemail.com">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<textarea class="form-control" name="message" id="message" cols="30" rows="7" placeholder="Write your message"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" value="Send Message" class="btn btn-primary rounded-0 px-2">
<span class="submitting"></span>
</div>
</div>
<p>Created by <a href="index.html" target="_blank">ResourceHub</a></p>
</form>
<div id="form-message-warning mt-4"></div>
<div id="form-message-success" style="display: none;">
Your message was sent, thank you!
</div>
</div>
<div class="col-lg-4 ml-auto">
<h3 class="mb-4">We value your feedback</h3>
<p>Your feedback is important to us. It helps us improve and provide better services. We appreciate your thoughts and suggestions!</p>
<p><a href="#">Read more</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="scripts.js"></script>
<script src="home.js"></script>


</body>
</html>
3 changes: 2 additions & 1 deletion new-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="loading.css">

<link rel="icon" href="assets/logo.png">


Expand Down Expand Up @@ -229,7 +230,7 @@ <h2 class="footer-title">ResourceHub</h2>
<li><a href="https://github.com/jfmartinz/ResourceHub/stargazers" target="_blank">Star on GitHub</a></li>
<li><a href="https://github.com/jfmartinz/ResourceHub/blob/main/CONTRIBUTING.md" target="_blank">How to Contribute</a></li>
<li><a href="https://github.com/jfmartinz/ResourceHub/edit/main/README.md" target="_blank">Edit on GitHub</a></li>
<li><a href="https://github.com/jfmartinz/ResourceHub/issues" target="_blank">Feedback</a></li>
<li><a href="feedback.html">Feedback</a></li>
</ul>
</div>
</div>
Expand Down
32 changes: 32 additions & 0 deletions new-website/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault();

// Reset messages
document.getElementById('form-message-warning').innerText = '';
document.getElementById('form-message-warning').style.display = 'none';
document.getElementById('form-message-success').style.display = 'none';

// Check if all fields are filled
let fname = document.getElementById('fname').value.trim();
let lname = document.getElementById('lname').value.trim();
let email = document.getElementById('email').value.trim();
let message = document.getElementById('message').value.trim();

if (fname === '' || lname === '' || email === '' || message === '') {
// Display warning for missing inputs
document.getElementById('form-message-warning').innerText = 'Missing inputs';
document.getElementById('form-message-warning').style.display = 'block';
} else {
// Simulate form submission (replace with actual submission logic)
// For demo purposes, always show success message after 1 second
setTimeout(function() {
// Display success message
document.getElementById('form-message-success').style.display = 'block';

// Optionally, reset the form
document.getElementById('contactForm').reset();
}, 10000);
}
});
});
Loading