-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
158 lines (137 loc) · 8.35 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<div class="flex flex-wrap justify-center items-start lg:items-center lg:min-h-screen pt-4">
<!-- First column -->
<div class="w-full lg:w-2/3 px-4 lg:px-16 md:pt-6">
<!-- Block 1 -->
<button id="block1" class="mb-4 p-3 border-solid border-2 border-gray-300 rounded-md hover:border-blue-400 hover-outline" onclick="toggleSelection(1)">
<h2 class="text-xl font-bold mb-2 text-gray-800 text-left xl:text-xl">What is Dermafy?</h2>
<p class="text-justify text-gray-600 sm:text-sm xl:text-xl">
Dermafy is an innovative AI skin disease diagnosis application that allows users to scan images of various skin conditions.
Leveraging a vast dataset and advanced CNN algorithms, it facilitates the identification and classification of skin diseases,
bridging individuals and dermatologists for quick insights and informed diagnoses.
</p>
</button>
<!-- Block 2 -->
<button id="block2" class="mb-4 p-3 border-solid border-2 border-gray-300 rounded-md hover:border-blue-400 hover-outline" onclick="toggleSelection(2)">
<h2 class="text-xl font-bold mb-2 text-gray-800 text-left xl:text-xl">What is the intent of Dermafy?</h2>
<p class="text-justify text-gray-600 sm:text-sm xl:text-xl">
Dermafy innovatively aims to revolutionize the identification and diagnosis of skin diseases,
serving as a valuable tool for users and dermatologists.
It provides a user-friendly platform for swift and accurate determination of specific skin conditions.
</p>
</button>
<!-- Block 3 -->
<button id="block3" class="mb-4 p-3 border-solid border-2 border-gray-300 rounded-md hover:border-blue-400 hover-outline" onclick="toggleSelection(3)">
<h2 class="text-xl font-bold mb-2 text-gray-800 text-left xl:text-xl">How Does it Work?</h2>
<p class="text-justify text-gray-600 sm:text-sm xl:text-xl">
Dermafy simplifies skin disease identification with a user-friendly interface,
allowing users to submit photos for analysis. Powered by a robust CNN algorithm,
it compares images to its extensive dataset, offering quick and accurate diagnoses to users and dermatologists,
showcasing technology's role in enhancing skin health assessments.
</p>
</button>
</div>
<!-- Second column - Carousel images (hidden in mobile view) -->
<div class="lg:block lg:w-1/3 flex justify-center items-center">
<div id="carousel" class="max-w-full relative overflow-hidden">
<!-- Images -->
<img src="{{ url_for('static', path='/asset/About_1.png') }}" alt="Image 1" class="w-full absolute transition-opacity duration-300">
<img src="{{ url_for('static', path='asset/About_2.png') }}" alt="Image 2" class="w-full absolute transition-opacity duration-300">
<img src="{{ url_for('static', path='asset/About_3.png') }}" alt="Image 3" class="w-full absolute transition-opacity duration-300">
</div>
</div>
</div>
<script>
// Function to toggle selection
function toggleSelection(blockNumber) {
var button = document.getElementById('block' + blockNumber);
var isSelected = button.classList.contains('border-blue-700');
// Remove 'border' class from all buttons
var buttons = document.querySelectorAll('[id^=block]');
buttons.forEach(btn => btn.classList.remove('border-blue-700'));
// Toggle 'border' class for the clicked button
if (!isSelected) {
button.classList.add('border-blue-700');
}
// Call the showImages function to display corresponding images
showImages(blockNumber);
}
// Trigger click event on the button with blockNumber 1 when the section loads
window.onload = function() {
var button1 = document.getElementById('block1');
button1.click();
};
</script>
<script>
function showImages(blockNumber) {
// Hide all images
var images = document.querySelectorAll('#carousel img');
images.forEach(image => image.classList.add('opacity-0'));
// Show images based on block number
switch (blockNumber) {
case 1:
document.querySelector('#carousel img:nth-child(1)').classList.remove('opacity-0');
break;
case 2:
document.querySelector('#carousel img:nth-child(2)').classList.remove('opacity-0');
break;
case 3:
document.querySelector('#carousel img:nth-child(3)').classList.remove('opacity-0');
break;
default:
break;
}
// Adjust parent container height based on the height of the visible image
var visibleImage = document.querySelector('#carousel img:not(.opacity-0)');
var carousel = document.getElementById('carousel');
carousel.style.height = visibleImage.clientHeight + 'px';
}
</script>
<!-- <script>
// Carousel effect
var index = 0;
var images = document.querySelectorAll('#carousel img');
setInterval(function() {
images.forEach(image => image.classList.add('hidden'));
images[index].classList.remove('hidden');
index = (index + 1) % images.length;
}, 3000); // Change image every 3 seconds (adjust as needed)
</script> -->
<!-- ORIGINAL: Uncomment If Shit Falls Apart -->
<!-- <section class="container mx-auto mt-8 py-32">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-24 px-12">
<div class="col-span-1 md:col-span-1 lg:col-span-1 rounded">
<div class="container mx-auto mt-1">
<h1 class="text-3xl md:text-4xl font-bold text-blue-500 pb-2">What is Dermafy?</h1>
</div>
<p class="text-base md:text-md font-semibold mb-6 text-gray-800 text-justify px-3">
Dermafy, at its core, is a comprehensive skin health application that enables users to scan or submit images of different types of skin issues.
By leveraging a vast dataset and employing an advanced Convolutional Neural Network (CNN) algorithm,
Dermafy facilitates the identification and classification of various skin diseases.
This application acts as a bridge between individuals and dermatologists,
offering quick insights into skin health and supporting professionals in making more informed diagnoses.
</p>
</div>
<div class="col-span-1 md:col-span-1 lg:col-span-1 rounded">
<div class="container mx-auto mt-1 ">
<h1 class="text-3xl md:text-4xl font-bold text-blue-500 pb-2">What is the intent of Dermafy?</h1>
</div>
<p class="text-base md:text-md font-semibold mb-6 text-gray-800 text-justify px-3">
Dermafy is an innovative skin health application designed with the primary intent of revolutionizing the identification and diagnosis of
various skin diseases. The application serves as a valuable tool to aid and assist both users and dermatologists,
aiming to provide a user-friendly platform for swift and accurate determination of specific skin conditions.
</p>
</div>
<div class="col-span-1 md:col-span-1 lg:col-span-1 rounded">
<div class="container mx-auto mt-1 ">
<h1 class="text-3xl md:text-4xl font-bold text-blue-500 pb-2">How Does it Work?</h1>
</div>
<p class="text-base md:text-md font-semibold mb-6 text-gray-800 text-justify px-3">
Dermafy operates by simplifying the process of identifying skin diseases through a user-friendly interface.
Users can take a photo of their skin concern and submit it through the application.
The power lies in Dermafy's robust CNN algorithm, which analyzes the submitted images and compares them to its extensive dataset of skin diseases.
By picking the closest match within the dataset, Dermafy provides users and dermatologists alike with a quick and accurate diagnosis,
showcasing the potential of modern technology in enhancing skin health assessments.
</p>
</div>
</div>
</section> -->