Skip to content

Commit

Permalink
Added Rate Us Page (#1623)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sailaja-adapa
sailaja-adapa authored Aug 10, 2024
1 parent 160d174 commit e5a5dd0
Show file tree
Hide file tree
Showing 5 changed files with 302 additions and 145 deletions.
135 changes: 135 additions & 0 deletions assets/RateUs/RateUs.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: flex-start;
height: 100vh;
margin: 0;
padding-top: 100px;
}

.rate-us-container {
background-color: white;
border: 2px solid black;
border-radius: 10px;
padding: 20px;
width: 350px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}

.rate-us-container h2 {
margin-bottom: 20px;
font-size: 24px;
color: #333;
}

.stars {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.star {
font-size: 30px;
cursor: pointer;
transition: color 0.3s;
}

.star:hover,
.star.selected {
color: gold;
}

.feedback {
width: 100%;
height: 100px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 20px;
font-size: 16px;
color: #333;
}

.submit-btn {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

.submit-btn:hover {
background-color: #45a049;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 10px;
color: white;
width: 100%;
position: fixed;
top: 0;
left: 0;
}

.image-logo {
display: flex;
align-items: center;
}

.image-logo img {
margin-right: 10px;
}

.logo {
font-size: 1.5rem;
}

.nav-menu {
list-style: none;
display: flex;
gap: 15px;
}

.nav-item {
margin: 0;
}

.nav-link {
color: white;
text-decoration: none;
font-size: 1rem;
display: flex;
align-items: center;
}

.nav-link i {
margin-right: 5px;
}

.hamburger {
display: none;
}

@media (max-width: 768px) {
.nav-menu {
display: none;
}

.hamburger {
display: block;
}
}
136 changes: 136 additions & 0 deletions assets/RateUs/RateUs.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rate Us</title>
<link rel="stylesheet" href="https://cdn-uicons.flaticon.com/2.1.0/uicons-regular-straight/css/uicons-regular-straight.css">
<link rel="icon" href="../../favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
<link rel="stylesheet" type="text/css" href="../../style.css" />
<link rel="stylesheet" href="RateUs.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<style>
.navbar .nav-menu .nav-link {
font-size: 16px; /* Increase font size for nav items */
}
.navbar .logo {
font-size: 24px; /* Increase font size for logo */
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<div class="image-logo">
<a href="../../index.html">
<img src="../../assets/images/logo.png" height="36px" width="36px">
</a>
<a href="../../index.html">
<span class="logo">CalcDiverse</span>
</a>
</div>

<ul class="nav-menu">
<li class="nav-item">
<a href="../../index.html" class="nav-link"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
</li>
<li class="nav-item">
<a href="./assets/about/about.html" class="nav-link"><i class="fa-solid fa-circle-info" aria-hidden="true"></i> About</a>
</li>
<li class="nav-item">
<a href="../../index.html#calculators" class="nav-link"><i class="fa fa-calculator" aria-hidden="true"></i> Calculators</a>
</li>
<li class="nav-item">
<a href="./assets/contributors/contributor.html" class="nav-link"><i class="fa fa-users" aria-hidden="true"></i> Contributors</a>
</li>
<li class="nav-item">
<a href="./assets/faq/faq.html" class="nav-link"><i class="fa fa-question-circle" aria-hidden="true"></i> FAQ</a>
</li>
<li class="nav-item">
<a href="./assets/contact/contact.html" class="nav-link"><i class="fa fa-phone" aria-hidden="true"></i> Contact</a>
</li>
<li class="nav-item">
<a href="./assets/RateUs/RateUs.html" class="nav-link"><i class="fa fa-star" aria-hidden="true"></i>Rate Us</a>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>
<div class="rate-us-container">
<h2>Rate Us</h2>
<div class="stars" id="star-rating">
<i class="fa fa-star star" data-index="1" aria-hidden="true"></i>
<i class="fa fa-star star" data-index="2" aria-hidden="true"></i>
<i class="fa fa-star star" data-index="3" aria-hidden="true"></i>
<i class="fa fa-star star" data-index="4" aria-hidden="true"></i>
<i class="fa fa-star star" data-index="5" aria-hidden="true"></i>
</div>
<textarea class="feedback" id="feedback" placeholder="Leave your feedback here :)"></textarea>
<button class="submit-btn" onclick="submitRating()">Submit</button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const stars = document.querySelectorAll('.star');

stars.forEach(star => {
star.addEventListener('click', function() {
const clickedIndex = parseInt(star.getAttribute('data-index'));

stars.forEach(star => {
star.classList.remove('selected');
});

for (let i = 0; i < clickedIndex; i++) {
stars[i].classList.add('selected');
}
});
});
});

function submitRating() {
const stars = document.querySelectorAll('.star');
let rating = 0;

stars.forEach(star => {
if (star.classList.contains('selected')) {
rating = star.getAttribute('data-index');
}
});

const feedback = document.getElementById('feedback').value.trim();

if (rating > 0 && feedback !== '') {
Toastify({
text: 'Thanks for your feedback :)',
duration: 3000,
close: true,
gravity: 'top',
position: 'center',
}).showToast();
} else {
Toastify({
text: 'Please enter all your details :(',
duration: 3000,
close: true,
gravity: 'top',
position: 'center',
}).showToast();
}

stars.forEach(star => {
star.classList.remove('selected');
});
document.getElementById('feedback').value = '';
}
</script>
</body>
</html>
Loading

0 comments on commit e5a5dd0

Please sign in to comment.