81 lines
3.7 KiB
HTML
81 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/global.css') }}">
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}">
|
|
<title>Penulisan Silabel</title>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
|
<script src="{{ url_for('static', filename='js/loadCanvas.js') }}" defer></script>
|
|
</head>
|
|
|
|
<body class="bgcolor">
|
|
<nav class="navbar-float">
|
|
<section class="nav-item mx-auto tsize">
|
|
<a href="/" class="nav-text-active mx-2">TUTORIAL</a>
|
|
<div class="dropdown mx-2">
|
|
<button class="nav-text-active dropdown-toggle" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
|
|
BELAJAR
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
|
<li><a class="dropdown-item" href="huruf-konsonan">Huruf Konsonan</a></li>
|
|
<li><a class="dropdown-item" href="huruf-vokal">Huruf Vokal</a></li>
|
|
<li><a class="dropdown-item" href="penulisan-silabel">Penulisan Silabel</a></li>
|
|
</ul>
|
|
</div>
|
|
<a href="#" class="nav-text-active mx-2">LATIHAN</a>
|
|
</section>
|
|
</nav>
|
|
|
|
<!-- Page Content -->
|
|
<div class="content container-fluid">
|
|
<div class="row">
|
|
<!-- KIRI -->
|
|
<div class="col-lg-6">
|
|
<div class="row">
|
|
<canvas id="myCanvas" width="680" height="400" style="border:1px solid black"></canvas>
|
|
</div>
|
|
<div class="row my-3">
|
|
<div class="col-lg-4 col-6 text-center">
|
|
<button type="button" class="button1 tsize" id="deleteButton">Refresh Canvas</button>
|
|
</div>
|
|
<div class="col-lg-4 col-6 text-center">
|
|
<button id="processAndSaveButton" class="button1 tsize">Proses Gambar</button>
|
|
</div>
|
|
<div class="col-lg-4 col-12 pt-2" id="tool">
|
|
<input type="radio" class="form-check-input" id="brush" name="option" value="brush" checked="checked">
|
|
<label class="form-check-label tsize mx-1" for="brush" >Kuas</label>
|
|
<input type="radio" class="form-check-input mx-1" id="eraser" name="option" value="eraser">
|
|
<label class="form-check-label tsize mx-4" for="eraser">Penghapus</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KANAN -->
|
|
<div class="col-lg-6">
|
|
<div class="row mx-4 mt-3 mb-4 line-red">
|
|
<div class="form-control">
|
|
<h5 class="predict">Romanisasi : <span id="predictedClass"></span></h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col mt-3">
|
|
<div id="resizedbox">
|
|
<p class="center tsize">Resized Image</p>
|
|
<img class="img box" id="resizedImage" src="">
|
|
</div>
|
|
</div>
|
|
<div class="col card-container line-red p-3">
|
|
<p class="bold center p-1">Cara Penggunaan</p>
|
|
<p>1. Arahkan kursor pada canvas hitam. </p>
|
|
<p>2. Tulis satu suku kata <b>di dalam kotak merah</b></p>
|
|
<p>3. Tulis suku kata yang terdiri dari <b>1 Konsonan + 1 Vokal</b></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |