diff --git a/README.md b/README.md index 66024b9..3a1cd77 100644 --- a/README.md +++ b/README.md @@ -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 : diff --git a/SkinSense b/SkinSense new file mode 160000 index 0000000..67304cf --- /dev/null +++ b/SkinSense @@ -0,0 +1 @@ +Subproject commit 67304cf466a3243f0d73c13ed0285229b428d200 diff --git a/background.png b/background.png new file mode 100644 index 0000000..c8822bf Binary files /dev/null and b/background.png differ diff --git a/index.html b/index.html index 52a5875..99e8919 100644 --- a/index.html +++ b/index.html @@ -4,30 +4,49 @@ SkinSense – Home - - - - - - + + + -
+ + + +
SkinSense Logo

Welcome to SkinSense

-
Login - Register + Register +
+
+ - - - - + \ No newline at end of file diff --git a/login.html b/login.html index 91817f6..e3d0b82 100644 --- a/login.html +++ b/login.html @@ -1,56 +1,36 @@ - - - - Login – SkinSense - - - - - - - - - + + + + SkinSense – Login + + + - -
-
-
- -

Login to SkinSense

+
+ SkinSense Logo +

Get Started

+

Enter your details to login or register.

+ +
+
+ +
- - - -
- - -
- -
- - -
- -
- -
- -

- Don't have an account? Register here -

-
-
+
+ + +
+ +
+ +
+
- - - - - + \ No newline at end of file diff --git a/style.css b/style.css index d447d81..36133f2 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,8 @@ 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; @@ -8,20 +10,34 @@ body { 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); } @@ -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 { @@ -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 { @@ -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; +} \ No newline at end of file