Skip to content

Commit

Permalink
feedback page
Browse files Browse the repository at this point in the history
  • Loading branch information
@sau-mili
sau-mili committed Jun 16, 2024
1 parent 130330f commit 7a542ab
Show file tree
Hide file tree
Showing 4 changed files with 241 additions and 1 deletion.
123 changes: 123 additions & 0 deletions new-website/feedback.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
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; }

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
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<br>reach out to us.</h2>
<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
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
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);
}
});
});

0 comments on commit 7a542ab

Please sign in to comment.