Skip to content

revised frontend #1

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
Riya0305 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

revised frontend #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
243 changes: 158 additions & 85 deletions public/SkinAI.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,171 +1,244 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkinAi</title>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">

<title>SkAI</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@400;600;700&family=Special+Gothic+Expanded+One&display=swap" rel="stylesheet">

<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: #416f7e;
color: #000000;
font-family: 'Lato', sans-serif;
min-height: 100vh;
font-family: "Special Gothic Expanded One", sans-serif;
background: rgb(245, 245, 237);
background-size: cover; /* Ensures the image covers the entire section */
background-repeat: no-repeat; /* Prevents the image from repeating */
background-position: center; /* Centers the image within the section */
color: #333;
height: 100%;
display: flex;
flex-direction: column;
}

header {
background-color: #515255;
padding: 20px;
background-color: #333;
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

header .logo {
font-size: 36px;
font-weight: bold;
color: white;
text-decoration: overline;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
}

nav a {
color: white;
color: #fff;
margin-left: 20px;
text-decoration: none;
font-size: 16px;
font-size: 18px;
transition: color 0.3s;
}

nav a:hover {
color: #6e4b3a;
}

.main-content {
max-width: 800px;
margin: 60px auto;
padding: 40px;
background-color: #4ea196;
border-radius: 10px;
.section {
text-align: center;
padding: 80px 40px;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.main-content h1 {
.section h1 {
font-size: 60px;
margin-bottom: 20px;
font-size: 36px;
}

.main-content p {
margin-bottom: 12px;
font-size: 16px;
.section p {
font-size: 28px;
line-height: 1.6;
color: #555;
}

form {
margin-top: 30px;
.button {
background-color: #6e4b3a;
color: white;
padding: 12px 30px;
border: none;
border-radius: 30px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}

.button:hover {
background-color: #5c3e2a;
transform: scale(1.05);
}

.form-group {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-top: 20px;
gap: 20px;
}

input[type="file"] {
color: white;
background-color: #ffffff20;
color: #333;
padding: 12px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
width: 250px;
}

input[type="file"]:focus {
outline: none;
background-color: #ffffff40;
}

button {
background-color: #10173f;
background-color: #6e4b3a;
color: white;
padding: 10px 20px;
padding: 12px 30px;
border: none;
border-radius: 5px;
font-size: 16px;
border-radius: 30px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}

button:hover {
background-color: #0b08ac;
background-color: #5c3e2a;
transform: scale(1.05);
}

.divider {
margin: 40px auto;
width: 60%;
border: 0;
height: 64px;
opacity: 0;
background: #ffffff50; /* semi-transparent white */
border-radius: 5px;
}
.faq-item button {
color: white;
padding: 12px 30px;
border: none;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
width: 100%;
text-align: left;
}

.faq-item button:hover {
background-color: #5c3e2a;
}

@media (max-width: 600px) {
.form-group {
flex-direction: column;
}
.answer {
display: none;
margin-top: 10px;
font-size: 16px;
color: #555;
}

nav a {
margin-left: 10px;
}
.divider {
margin-top: 50px;
border-top: 2px solid #ddd;
}
</style>
</head>

<body>

<header>
<a href="#" class="logo">SkinAi</a>
<a href="#" class="logo">SkAI</a>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#faq">FAQ</a>
</nav>
</header>

<div class="main-content">
<h1>SkinAi</h1>
<p><em>Analyze your skin condition with AI</em></p>
<p>Upload an image of your skin and get instant analysis.</p>
<p>Our AI model will analyze the image and provide feedback on your skin condition.</p>
<p>Please ensure the image is clear and well-lit for best results.</p>
<!-- Home Section -->
<div id="home" class="section">
<div class="main-content">
<h1>SkAI</h1>
<p>AI-powered Skin Analysis for a Healthier You.</p>
</div>
</div>

<hr class="divider">
<!-- About Section -->
<div id="about" class="section" style="background-color: #f0ece2;">
<h1>About SkAI</h1>
<p>SkAI is an advanced AI model designed to analyze your skin condition by analyzing images. It helps you monitor skin health by providing insightful feedback, from detecting acne to offering advice on hydration and skincare routines. Upload a clear image of your skin, and our AI will give you valuable insights.</p>

<form id="uploadForm" action="/upload" method="POST" enctype="multipart/form-data">
<div class="form-group">
<input type="file" name="image" accept="image/*" required>
<button type="submit">Upload</button>
<button type="submit">Upload Image for Analysis</button>
</div>
</form>
</div>

<!-- FAQ Section -->
<div id="faq" class="section">
<h1>Frequently Asked Questions</h1>

<div class="faq-container">
<div class="faq-item">
<button onclick="toggleAnswer(1)">How does SkAI analyze my skin?</button>
<div id="answer1" class="answer">
<p>SkAI uses AI algorithms to process the image of your skin and identify conditions such as acne, dryness, or inflammation.</p>
</div>
</div>

<div class="faq-item">
<button onclick="toggleAnswer(2)">What type of images are best for analysis?</button>
<div id="answer2" class="answer">
<p>Clear, well-lit images taken in natural light work best. Avoid using filters or overly close-up shots.</p>
</div>
</div>

<div class="faq-item">
<button onclick="toggleAnswer(3)">What is SkAI?</button>
<div id="answer3" class="answer">
<p>SkAI is an AI-powered website that takes pictures uploaded by users to analyze skin and inform the users weather it is a rash, pimple or clear skin. Using this information, it will make it easier for the students to get their skincare based on their skin type.</p>
</div>
</div>

<!-- <div class="faq-item">
<button onclick="toggleAnswer(4)">What type of images are best for analysis?</button>
<div id="answer4" class="answer">
<p>.</p>
</div>
</div> -->
</div>
</div>

<script>
const form = document.getElementById('uploadForm');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const formData = new FormData(form);

try {
const response = await fetch('/upload', {
method: 'POST',
body: formData
});

if (response.ok) {
const result = await response.json();
alert('Analysis Result: ' + result.message);
} else {
alert('Error uploading image.');
}
} catch (error) {
alert('An error occurred: ' + error.message);
}
});
function toggleAnswer(id) {
var answer = document.getElementById("answer" + id);
answer.style.display = (answer.style.display === "block") ? "none" : "block";
}
</script>

</body>

</html>
Binary file added public/src/beach for 481.jpg
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.
Binary file added public/src/beach2 - 481.jpg
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.
Binary file added public/src/img2 for 481.webp
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.
Binary file added public/src/pic for background- skin ai.jpg
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.