From 2d0b713737dbe981101e556c99c5e24f74ec3523 Mon Sep 17 00:00:00 2001
From: azizatulmashwafah <zizahchaca@gmail.com>
Date: Wed, 29 May 2024 08:57:48 +0700
Subject: [PATCH] upload home.html

---
 home.html | 216 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 216 insertions(+)
 create mode 100644 home.html

diff --git a/home.html b/home.html
new file mode 100644
index 0000000..4fdab3a
--- /dev/null
+++ b/home.html
@@ -0,0 +1,216 @@
+{% extends "base.html" %}
+{% block contentcarousel %}
+<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
+    <div class="carousel-indicators">
+        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
+    </div>
+    <div class="carousel-inner">
+        <div class="carousel-item active">
+            <img src="{{ url_for('static', filename='img/background.png') }}" class="d-block w-100" height="0%" alt="carouselbg">
+            <div class="carousel-caption text-start">
+                <h1>EARLY DETECTION OF PARKINSON'S</h1>
+                <p>Early Detection of Parkinson's Disease Through Spiral and Wave Images Helps Early Identification of Parkinson's Symptoms</p>
+                <p>Click the button below to continue</p>
+                <a href="{{ url_for('klasifikasi') }}" type="button" class="btn me-md-2 mb-4" style="background: #00A9A7; color: white; border-radius: 10px;">Classification</a>
+            </div>
+        </div>
+        <div class="carousel-item">
+            <img src="{{ url_for('static', filename='img/background.png') }}" class="d-block w-100" height="0%" alt="carouselbg">
+            <div class="carousel-caption text-start">
+                <h1>Guide</h1>
+                <p>Parkinson's Spiral & Wave Handwriting Classification Guide</p>
+                <p>Click the button below to view</p>
+                <button type="button" class="btn mb-4" style="background: #00A9A7; color: white; border-radius: 10px;" data-bs-toggle="modal" data-bs-target="#exampleModal">Guide</button>
+            </div>
+        </div>
+    </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Next</span>
+    </button>
+</div>
+<!-- Modal -->
+<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-scrollable">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title" id="exampleModalLabel">Parkinson's Spiral & Wave Handwriting Classification Guide</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <h6>Step 1 : Select Spiral or Wave Handwriting Image</h6>
+                <ol>
+                    <li>Make writing in the form of a spiral or wave image like the example below.</li>
+                    <img src="{{ url_for('static', filename='img/langkah0.jpg') }}" alt="langkah-1" style="width: 65%;">
+                    <li>After that, take a photo of the image and save it in the form of an image file.</li>
+                </ol>
+                <h6>Step 2 : Select Spiral or Wave Handwriting Image</h6>
+                <ol>
+                    <li>Click the “Choose File” button in the “Insert Image” section to select the spiral or wave handwriting image that you want to classify.</li>
+                    <img src="{{ url_for('static', filename='img/langkah1.png') }}" alt="langkah-2" style="width: 65%;">
+                    <li>Select the handwriting image from your device storage. Make sure the image must exceed 
+                        <b>the minimum limit of 20 kb and below the maximum limit of 5 MB</b>.</li>
+                </ol>
+                <h6>Step 3 : Classifying the Image</h6>
+                <ol>
+                    <li>After selecting the handwriting image, click the “Classification” button to start the classification process.</li>
+                    <img src="{{ url_for('static', filename='img/langkah2.png') }}" alt="langkah-3" style="width: 40%;">
+                    <li>Wait for some time for the classification process to complete.</li>
+                </ol>
+                <h6>Step 4 : Classification Results</h6>
+                <ol>
+                    <li>Once the classification process is complete, the classification results will be displayed in the “Classification Results” section.</li>
+                    <li>You will see the classification result whether the handwriting is indicated as Tremor or Non Tremor.</li>
+                    <img src="{{ url_for('static', filename='img/langkah3.png') }}" alt="langkah-4" style="width: 60%;">
+                </ol>
+                <h6>Step 5 : Interpretation of Results</h6>
+                <ol>
+                    <li>If the classification result shows that your handwriting is indicated as Tremor or Non Tremor, you can also see the confidence level of the classification result.</li>
+                    <img src="{{ url_for('static', filename='img/langkah4-1.png') }}" alt="langkah-5" style="width: 14%;">
+                    <li>Read the advice given for further action based on the classification result.</li>
+                    <img src="{{ url_for('static', filename='img/langkah4-2.png') }}" alt="langkah-5" style="width: 45%;">
+                </ol>
+                <h6>Step 6 : Refresh or Repeat Process</h6>
+                <ol>
+                    <li>If you want to reclassify with a different handwriting image, click the “Refresh” button.</li>
+                    <img src="{{ url_for('static', filename='img/langkah5.png') }}" alt="langkah-6" style="width: 20%;">
+                    <li>Repeat the steps from the beginning to perform classification with a new handwriting image.</li>
+                </ol>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+{% block content %}
+<div class="container px-4 py-4" id="featured-3">
+    <h2 class="pb-2 border-bottom text-center" style="color: #00A9A7; font-weight: bolder;">Parkinson</h2>
+    <div class="row g-4 py-5 row-cols-1 row-cols-lg-2">
+        <div class="feature col text-center">
+            <div class="feature-icon">
+                <img src="{{ url_for('static', filename='img/logo.png') }}" alt="parkinson" style="height: 365px; width: 365px;">
+            </div>
+        </div>
+        <div class="feature col">
+            <p style="font-size: 16px; text-align: justify;">Parkinson's disease (PD) is a neurodegenerative disease that affects body movement. 
+                Symptoms include tremors, muscle stiffness and difficulty moving. The Parkinson's early detection website app helps users conduct 
+                an initial screening through the spiral and wave patterns of their handwriting. By uploading an image of the handwriting pattern, 
+                users can see the results of tremor or non-tremor classification. The website also provides information and advice on a good 
+                lifestyle for people with Parkinson's.<br>
+                The data used is secondary data obtained on the <a href="https://www.kaggle.com/datasets/kmader/parkinsons-drawings" style="font-weight: bold;">Kaggle.com</a> 
+                site from the account name  <b>K Scott Mader</b>. The dataset used shows journals that can be used as references to prove 
+                that the data was indeed obtained from Parkinson's patients and has been validated by the RMIT University Human Research 
+                Ethics Committee and in accordance with the Declaration of Helsinki.
+            </p>
+        </div>
+    </div>
+</div>
+<div class="text-center">
+    <div class="container px-4 py-4" id="featured-3">
+        <h2 class="pb-2 border-bottom" style="color: #00A9A7; font-weight: bolder;">Spiral</h2>
+        <div class="row g-4 py-5 row-cols-1 row-cols-lg-2">
+            <div class="feature col">
+                <div class="feature-icon">
+                    <img src="{{ url_for('static', filename='img/spiral-t.png') }}" alt="picdataset" style="height: 150px;">
+                </div>
+                <h3 class="mt-2">Tremor</h3>
+                <p>In spiral images, tremors tend to have irregular lines, vibrations, or “tremors”, which are clearly visible in the spiral pattern.</p>
+            </div>
+            <div class="feature col">
+                <div class="feature-icon">
+                    <img src="{{ url_for('static', filename='img/spiral-nt.png') }}" alt="picdataset" style="height: 150px;">
+                </div>
+                <h3 class="mt-2">Non Tremor</h3>
+                <p>In non tremor spiral images, the spiral circles tend to be neat and have no significant tremors.</p>
+            </div>
+        </div>
+    </div>
+    <div class="container px-4 py-4" id="featured-3">
+        <h2 class="pb-2 border-bottom" style="color: #00A9A7; font-weight: bolder;">Waves</h2>
+        <div class="row g-4 py-5 row-cols-1 row-cols-lg-2">
+            <div class="feature col">
+                <div class="feature-icon">
+                    <img src="{{ url_for('static', filename='img/gelombang-t.png') }}" alt="picdataset" style="height: 150px;">
+                </div>
+                <h3 class="mt-2">Tremor</h3>
+                <p>Tremor wave images tend to have irregular lines, vibrations, or “tremors” evident in the wave pattern.</p>
+            </div>
+            <div class="feature col">
+                <div class="feature-icon">
+                    <img src="{{ url_for('static', filename='img/gelombang-nt.png') }}" alt="picdataset" style="height: 150px;">
+                </div>
+                <h3 class="mt-2">Non Tremor</h3>
+                <p>In non tremor wave images, the wave lines tend to be neat and have no significant vibrations.</p>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="container px-4 py-4" id="featured-3">
+    <h2 class="pb-2 border-bottom text-center" style="color: #00A9A7; font-weight: bolder;">The Development Team</h2>
+    <div class="row g-4 py-5 row-cols-1 row-cols-lg-2">
+        <div class="feature col">
+            <div class="row">
+                <div class="col-md-4">
+                    <div class="feature-icon">
+                        <img src="{{ url_for('static', filename='img/team1.jpg') }}" alt="team" style="width: 150px; height: 180px; border-radius: 20px; object-fit: cover;">
+                    </div>
+                </div>
+                <div class="col-md-8">
+                    <h5 class="mt-2">Azizatul Mashwafah</h5>
+                    <p>Mahasiswa D4 TI<br>
+                        Politeknik Negeri Jember</p>
+                </div>
+            </div>
+        </div>
+        <div class="feature col">
+            <div class="row">
+                <div class="col-md-4">
+                    <div class="feature-icon">
+                        <img src="{{ url_for('static', filename='img/team2.jpg') }}" alt="team" style="width: 150px; height: 180px; border-radius: 20px; object-fit: cover;">
+                    </div>
+                </div>
+                <div class="col-md-8">
+                    <h5 class="mt-2">Zilvanhisna Emka Fitri, ST., MT</h5>
+                    <p>Dosen D4 Teknik Informatika<br>
+                        Politeknik Negeri Jember</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row g-4 py-5 row-cols-1 row-cols-lg-2">
+        <div class="feature col">
+            <div class="row">
+                <div class="col-md-4">
+                    <div class="feature-icon">
+                        <img src="{{ url_for('static', filename='img/team3.jpeg') }}" alt="team" style="width: 150px; height: 180px; border-radius: 20px; object-fit: cover;">
+                    </div>
+                </div>
+                <div class="col-md-8">
+                    <h5 class="mt-2">Ir. Arizal Mujibtamala Nanda Imron, ST., MT</h5>
+                    <p>Dosen D4 Teknologi Rekayasa Elektronika<br>
+                        Universitas Negeri Jember</p>
+                </div>
+            </div>
+        </div>
+        <div class="feature col">
+            <div class="row">
+                <div class="col-md-4">
+                    <div class="feature-icon">
+                        <img src="{{ url_for('static', filename='img/team4.jpg') }}" alt="team" style="width: 150px; height: 180px; border-radius: 20px; object-fit: cover;">
+                    </div>
+                </div>
+                <div class="col-md-8">
+                    <h5 class="mt-2">dr. Ahdinar Rosdiana Dewi Sp. N</h5>
+                    <p>Dokter Spesialis Neurologi<br>
+                        RSUD Johar Baru, Jakarta</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}