Skip to content

updated Ui design #70

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

updated Ui design #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
32569e9
fully functional website :
snpathaks Aug 31, 2025
8ece7e4
Add background image and enhance UI with modal for about section
snpathaks Sep 23, 2025
69adb0f
Remove commented-out HTML structure and clean up index.html
snpathaks Sep 23, 2025
dba1260
Fix formatting in login.html and style.css for improved readability
snpathaks Sep 23, 2025
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
4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,4 +96,6 @@ frontend/

Built with ❤️ for healthcare innovation.

> Let’s build the backend next and connect the pages!
> Let’s build the backend next and connect the pages!.

fully functional website :
1 change: 1 addition & 0 deletions SkinSense
Open in desktop
Submodule SkinSense added at 67304c
Binary file added background.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 32 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,49 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkinSense – Home</title>

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="welcome-container">
<a href="#" class="question-mark-icon" data-bs-toggle="modal" data-bs-target="#aboutModal">
<i class="fas fa-question"></i>
</a>
<div class="welcome-container text-center">
<img src="logo.jpg" alt="SkinSense Logo" class="logo-img">
<h1>Welcome to <span>SkinSense</span></h1>

<div class="d-flex justify-content-center btn-group-custom flex-wrap">
<a href="login.html" class="btn btn-primary">Login</a>
<a href="register.html" class="btn btn-outline-primary">Register</a>
<a href="login.html" class="btn btn-outline-primary">Register</a>
</div>
</div>
<div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="aboutModalLabel">What is SkinSense?</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="modal-item"><strong>✨ AI-Powered Analysis</strong><br>
Advanced skin analysis using artificial intelligence to identify your unique skin needs.</p>
<p class="modal-item"><strong>📸 Photo Tracking</strong><br>
Capture and track your skin progress with detailed photo analysis over time.</p>
<p class="modal-item"><strong>🗓️ Personalized Routines</strong><br>
Custom skincare routines tailored to your skin type, concerns, and goals.</p>
<p class="modal-item"><strong>📈 Progress Insights</strong><br>
Detailed analytics and insights to help you achieve your skin goals.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary w-100" data-bs-dismiss="modal">Got it!</button>
</div>
</div>
</div>
</div>

<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<script src="script.js"></script>
</body>
</html>
</html>
72 changes: 26 additions & 46 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login – SkinSense</title>

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css" />
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkinSense – Login</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="form-container d-flex justify-content-center align-items-center vh-100">
<div class="card p-4 shadow-sm" style="width: 100%; max-width: 400px;">
<div class="text-center mb-4">

<h4 class="fw-bold">Login to <span class="text-primary">SkinSense</span></h4>
<div class="welcome-container text-center">
<a href="index.html"><img src="logo.jpg" alt="SkinSense Logo" class="logo-img"></a>
<h1>Get Started</h1>
<p class="text-white-50 mb-4">Enter your details to login or register.</p>

<form id="login-form" novalidate>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="emailInput" placeholder="[email protected]" required>
<label for="emailInput">Email address</label>
</div>

<!-- Temporary Redirect to Dashboard -->
<form onsubmit="return validateLogin(event);">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" id="email" class="form-control" placeholder="Enter your email" required />
</div>

<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" id="password" class="form-control" placeholder="Enter password" required />
</div>

<div class="d-grid">
<button type="submit" class="btn btn-primary">Login</button>
</div>

<p class="text-center mt-3 small">
Don't have an account? <a href="register.html">Register here</a>
</p>
</form>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="passwordInput" placeholder="Password" required>
<label for="passwordInput">Password</label>
</div>

<div class="d-grid gap-2 mt-4">
<button type="submit" class="btn btn-primary btn-lg">Continue</button>
</div>
</form>
</div>


<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS for validation -->
<script src="script.js"></script>

</body>
</html>
</html>
124 changes: 110 additions & 14 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,43 @@
body {
font-family: 'Inter', sans-serif;
background: radial-gradient(circle at top left, #e0f7fa, #ffffff);
/* Updated background to use the image */
background: url('background.png') no-repeat center center fixed;
background-size: cover;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
padding: 1rem;
/* Added a dark overlay for text readability on other pages */
position: relative;
}

.welcome-container {
background: #ffffff;
/* This overlay is optional but recommended for readability */
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: -1; /* Puts it behind the content */
}

.welcome-container, .card {
background: #180000;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
max-width: 450px;
width: 100%;
border: 2px solid #0d6efd;
border: 2px solid#825303;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.welcome-container:hover {
.welcome-container:hover, .card:hover {
transform: translateY(-6px);
box-shadow: 0 14px 45px rgba(0, 0, 0, 0.2);
}
Expand All @@ -37,11 +53,11 @@ h1 {
font-size: 2.1rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: #222;
color: #e6a653;
}

h1 span {
color: #0d6efd;
color: #e6a653;
}

.lead {
Expand All @@ -60,21 +76,27 @@ h1 span {
}

.btn-primary {
background-color: #0d6efd;
border: none;
box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
border: 2px solid #825303;
color:#825303;
background-color: transparent;
box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2);

}

.btn-outline-primary {
border: 2px solid #0d6efd;
color: #0d6efd;
border: 2px solid #825303;
color:#825303;
background-color: transparent;
box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2);
}

.btn-outline-primary:hover {
background-color: #0d6efd;
color: white;
background-color: #825303;
color: rgb(19, 0, 0);
}
.btn-primary:hover {
background-color: #825303;
color: rgb(19, 0, 0);
}

.btn:hover {
Expand All @@ -93,4 +115,78 @@ h1 span {
width: 100%;
}
}
/* --- Custom Modal Styles --- */
/* Question Mark Icon Styles - Updated for Bottom Right */
.question-mark-icon {
position: fixed;
bottom: 25px; /* Changed from 'top' */
right: 25px;
width: 50px;
height: 50px;
background-color: rgba(62, 58, 47, 0.9);
color: rgba(201, 179, 128, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
text-decoration: none;
box-shadow: 0 4px 12px rgba(80, 76, 76, 0.2);
z-index: 1050;
transition: transform 0.3s ease, background-color 0.3s ease;
}

.question-mark-icon:hover {
transform: scale(1.1);
background-color: rgba(201, 179, 128, 0.9);
color: #594802;
}

#aboutModal .modal-content {
/* --- Custom Modal Styles --- */
background-color:#b6a176; /* Light brown background */
border-radius: 15px;
border: none;
color: #0e0502; /* Darker text for better contrast */
}
/* Sets text color for the modal */


#aboutModal .modal-header {
border-bottom: 1px solid #a06e04;
padding: 1rem 1.5rem;
}

#aboutModal .modal-title {
font-weight: 700;
}

#aboutModal .modal-body {
padding: 1rem 1.5rem 0.5rem 1.5rem;
}

#aboutModal .modal-item {
margin-bottom: 1.5rem;
text-align: left;
color: #555;
font-size: 0.95rem;
}

#aboutModal .modal-item strong {
display: block;
margin-bottom: 5px;
color: #000;
font-size: 1rem;
}

#aboutModal .modal-footer {
border-top: 1px solid #6c4e33;
padding: 0.5rem 1.5rem 1.5rem 1.5rem;
}

#aboutModal .modal-footer .btn-primary {
padding: 12px;
font-weight: 600;
font-size: 1rem;
border-radius: 10px;
}