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

Added Rate Us Option #554

Closed
wants to merge 3 commits into from
Closed

Added Rate Us Option #554

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
8874701
Alligned Navbar
sailaja-adapa Jun 13, 2024
d883a09
Added Icons
sailaja-adapa Jun 13, 2024
c8aa0e7
Added Rate Us Option
sailaja-adapa Jun 13, 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
27 changes: 12 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<meta content="width=device-width, initial-scale=1.0" name="viewport">

<link rel="icon" type="image/x-icon" href="favicon.png">


<!-- Bootstrap Icons CDN link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./style.css" />
<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>
Expand Down Expand Up @@ -277,23 +277,20 @@

</div>
<nav class="nav_menu">

<ul class="nav_link">
<li><a href="index.html">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="Html-Files/news.html">News</a></li>
<a href="dex.html">Service</a>
<li><a href="#patient-portal">Patient Portal</a></li>
<li><a href="#doctors">Doctor</a></li>
<li><a href="Html-Files/contact.html">Contact us</a></li>
<li >
<div id="google_element" class="myclass" style="color: #ffffff; display: flex;" ></div> </li>
<a href="login.html">Sign in/Sign up</a>
<li><a href="index.html"><i class="bi bi-house-door-fill"></i> Home</a></li>
<li><a href="#about"><i class="bi bi-info-circle-fill"></i> About</a></li>
<li><a href="Html-Files/news.html"><i class="bi bi-newspaper"></i> News</a></li>
<li><a href="dex.html"><i class="bi bi-gear"></i> Service</a></li>
<li><a href="#patient-portal"><i class="bi bi-person"></i> Patient Portal</a></li>
<li><a href="#doctors"><i class="bi bi-person-circle"></i> Doctor</a></li>
<li><a href="Html-Files/contact.html"><i class="bi bi-telephone"></i>Contact us</a></li>
<li><a href="rateus.html"><i class="bi bi-star"></i>Rate Us</a></li>
<li><a href="login.html"><i class="bi bi-box-arrow-right"></i> Sign in/Sign up</a></li>
<a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a>

</ul>
</nav>
</div>

</header>

<!-- ############# Header ############# -->
Expand Down
107 changes: 107 additions & 0 deletions rateus.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
body {
font-family: Arial, sans-serif;
background-color: black; /* Set the entire page background to black */
color: #fff; /* Set default text color to white */
margin: 0; /* Remove default body margin */
padding: 0; /* Remove default body padding */
}

.header_container {
background-color: #022a2d;
opacity: 0.9;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 85px;
margin: auto;
margin-top: 5px; /* Adjust this value to move the header down */
}

.img {
flex: 0 0 auto; /* Ensures the logo doesn't grow */
}

.nav_link li {
margin-right: 1px; /* Add space between items */
padding: 4px 6px;
display: inline-block;
}

.nav_link li a {
transition: all 0.3s ease 0s;
color: white;
text-decoration: none; /* Remove underline from nav links */
}

.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 450px;
margin: 20px auto; /* Center the container horizontally */
transition: box-shadow 0.3s, transform 0.3s;
position: relative; /* Ensure relative positioning for absolute child */
}

.container:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}

.container h2 {
color: #333;
}

.rating {
margin: 20px 0;
}

.rating .star {
cursor: pointer;
font-size: 30px;
color: #ccc;
transition: color 0.3s; /* Smooth transition for color change */
}

.rating .star.selected {
color: #f7d32e; /* Yellow color for selected stars */
}

.rating .star:hover,
.rating .star:hover ~ .star {
color: #f7d32e; /* Yellow color on hover */
}

textarea {
width: 90%;
height: 110px;
margin: 20px auto; /* Center the textarea vertically */
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
transition: box-shadow 0.3s, transform 0.3s;
background-color: #fff; /* Set textarea background color to white */
color: #333; /* Set textarea text color to default */
}

textarea:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transform: scale(1.02);
}

button {
background-color: #4bb6b7;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s; /* Smooth transition for background-color */
}

button:hover {
background-color: #4bb6b7; /* Darker shade of green on hover */
}
72 changes: 72 additions & 0 deletions rateus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!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="rateus.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
</head>
<body>
<header class="header_container">
<div class="img">
<img id="rd-logo" style="width: 90px; height: auto;" src="images/rd.png">
</div>
<nav class="nav_menu">
<ul class="nav_link">
<li><a href="index.html"><i class="bi bi-house-door-fill"></i> Home</a></li>
<li><a href="#about"><i class="bi bi-info-circle-fill"></i> About</a></li>
<li><a href="Html-Files/news.html"><i class="bi bi-newspaper"></i> News</a></li>
<li><a href="dex.html"><i class="bi bi-gear"></i> Service</a></li>
<li><a href="#patient-portal"><i class="bi bi-person"></i> Patient Portal</a></li>
<li><a href="#doctors"><i class="bi bi-person-circle"></i> Doctor</a></li>
<li><a href="Html-Files/contact.html"><i class="bi bi-telephone"></i> Contact us</a></li>
<li><a href="Html-Files/rateus.html"><i class="bi bi-star"></i> Rate Us</a></li>
<li><a href="login.html"><i class="bi bi-box-arrow-right"></i> Sign in/Sign up</a></li>
<li><a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a></li>
</ul>
</nav>
</header>

<div class="container">
<h2>Rate Us</h2>
<div class="rating">
<span class="star" data-value="1">&#9733;</span>
<span class="star" data-value="2">&#9733;</span>
<span class="star" data-value="3">&#9733;</span>
<span class="star" data-value="4">&#9733;</span>
<span class="star" data-value="5">&#9733;</span>
</div>
<textarea id="comment" placeholder="Enter your comments"></textarea>
<button onclick="submitRating()">Submit</button>
</div>

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

stars.forEach(star => {
star.addEventListener('click', () => {
const value = star.getAttribute('data-value');
highlightStars(value);
});
});

function highlightStars(value) {
stars.forEach((star, index) => {
if (index < value) {
star.classList.add('selected');
} else {
star.classList.remove('selected');
}
});
}
});

function submitRating() {
const rating = document.querySelector('.star.selected:last-of-type');
const comment = document.getElementById('comment').value;
}
</script>
</body>
</html>
13 changes: 7 additions & 6 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ h6 {
}

.nav_link li {
padding: 5px 20px;
margin-right: 1px; /* Add space between items */
padding: 2px 10px;
display: inline-block;
color: white;
}
Expand All @@ -35,11 +36,11 @@ h6 {
}
button {
position: relative;
border-radius: 10px;
border-radius: 0px;
border: 1px solid #4bb6b7;
background-color: #4bb6b7;
color: #fff;
font-size: 15px;
font-size: 12px;
font-weight: 700;
margin: 8px;
padding: 8px 50px;
Expand All @@ -50,8 +51,6 @@ button {

.nav_link li a:hover {
color: #55a5ea;

/* text-decoration: underline 2.5px rgb(3, 3, 94); */
}

.header_container {
Expand All @@ -63,10 +62,12 @@ button {
/* justify-content: space-evenly; */
justify-content: space-between;
align-items: center;
height: 60px;
height: 85px;
margin: auto;
margin-top: 15px; /* Adjust this value to move the header down */
}


.container {
/* display: ; */
font-family: sans-serif;
Expand Down