91 lines
4.7 KiB
HTML
91 lines
4.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}TOMATO AI{% endblock %}
|
|
|
|
{% block content %}
|
|
<head>
|
|
<style>
|
|
.header-wide {
|
|
width: 100vw;
|
|
margin-left: calc(-50vw + 50%);
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<header class="bg-primary text-white py-5 header-wide">
|
|
<div class="container">
|
|
<div class="row gx-5 align-items-center justify-content-center">
|
|
<div class="col-lg-8 col-xl-7 col-xxl-6">
|
|
<div class="my-5 text-center text-xl-start">
|
|
<h1 class="display-4 fw-bold mb-3 animate__animated animate__fadeInLeft">
|
|
Deteksi Tingkat Kematangan dan Kualitas Tomat
|
|
</h1>
|
|
<p class="lead fw-normal mb-4 animate__animated animate__fadeInRight">
|
|
Sistem berbasis Artificial Intelligence untuk mendeteksi tingkat kematangan dan kualitas tomat
|
|
dengan akurasi tinggi.
|
|
</p>
|
|
<div class="d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xl-start">
|
|
<a class="btn btn-light btn-lg px-4 me-sm-3 shadow animate__animated animate__zoomIn animate__delay-1s" href="{{ url_for('predict') }}">
|
|
<i class="bi bi-gear-fill me-2"></i>Prediksi AI
|
|
</a>
|
|
<a class="btn btn-outline-light btn-lg px-4 shadow animate__animated animate__zoomIn animate__delay-1.2s" href="{{ url_for('more') }}" >
|
|
<i class="bi bi-info-circle-fill me-2"></i>Penjelasan Lebih Detail
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-5 col-xxl-6 d-none d-xl-block text-center">
|
|
<img class="img-fluid rounded shadow-lg animate__animated animate__fadeInUp"
|
|
src="/static/image/tomato.png" alt="Tomato AI">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="py-5 bg-light">
|
|
<div class="container px-5">
|
|
<div class="row gx-5 justify-content-center">
|
|
<div class="col-lg-8 col-xl-6 text-center">
|
|
<h2 class="text-muted mb-5 animate__animated animate__fadeIn">
|
|
Kelas Prediksi Kematangan dan Kualitas Tomat
|
|
</h2>
|
|
<p class="text-muted mb-5 animate__animated animate__fadeIn">
|
|
Dataset berisi lebih dari 4000 gambar tomat yang diklasifikasikan menjadi 4 kelas dengan kategori
|
|
matang busuk, matang segar, mentah busuk, dan mentah segar.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row gx-4 gy-5">
|
|
{% set categories = [
|
|
{ "title": "Matang Busuk", "img": "/static/image/tomatBusuk.jpg", "desc": "Tomat yang sudah matang namun mengalami pembusukan, biasanya berwarna merah, lembek, berair, dan dapat mengeluarkan bau tidak sedap." },
|
|
{ "title": "Matang Segar", "img": "/static/image/tomat_matang.jpg", "desc": "Tomat matang berwarna merah cerah, memiliki rasa manis, tekstur lembut, dan masih dalam kondisi segar tanpa tanda-tanda busuk." },
|
|
{ "title": "Mentah Busuk", "img": "/static/image/mentah_busuk.jpg", "desc": "Tomat masih mentah namun sudah mengalami pembusukan, biasanya berwarna hijau pucat, mulai lembek, dan berbau tidak sedap." },
|
|
{ "title": "Mentah Segar", "img": "/static/image/Tomat_hijo.jpg", "desc": "Tomat mentah yang masih segar, berwarna hijau, teksturnya keras, dan belum menunjukkan tanda-tanda pembusukan." }
|
|
] %}
|
|
{% for category in categories %}
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="card h-100 shadow-sm border-0 text-center animate__animated animate__fadeInUp animate__delay-{{ loop.index * 0.3 }}s">
|
|
<div class="overflow-hidden">
|
|
<img class="card-img-top rounded-top animate__animated animate__zoomIn animate__delay-{{ loop.index * 0.4 }}s"
|
|
src="{{ category.img }}" alt="{{ category.title }}">
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title text-primary fw-bold animate__animated animate__fadeIn animate__delay-{{ loop.index * 0.5 }}s">
|
|
{{ category.title }}
|
|
</h5>
|
|
<p class="card-text text-muted animate__animated animate__fadeIn animate__delay-{{ loop.index * 0.6 }}s">
|
|
{{ category.desc }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|