98 lines
3.7 KiB
HTML
98 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="h-100">
|
|
<head>
|
|
<!-- set the encoding of your site -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>Edit thumbnail | Variance</title>
|
|
<meta name="description" content="A demo showcasing useful tech.">
|
|
|
|
|
|
<!-- Bootstrap 5 style css-->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
|
|
crossorigin="anonymous">
|
|
|
|
<!-- Bootstrap 5 icons font-->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="/css/style.css" rel="stylesheet">
|
|
|
|
</head>
|
|
<body class="d-flex flex-column h-100">
|
|
|
|
<header id="pageHeader" class="position-absolute w-100 bg-white">
|
|
<!-- Navbar -->
|
|
<!-- Fixed navbar -->
|
|
</header>
|
|
|
|
<main class="flex-shrink-0">
|
|
<!-- Start Main content -->
|
|
|
|
<div class="container">
|
|
<div>
|
|
<ol class="breadcrumb small">
|
|
<li class="breadcrumb-item"><a href="/">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="/bo/listuploads">List of uploads</a></li>
|
|
<li class="breadcrumb-item" aria-current="page">Thhumbnail selection test</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="row mb-4 justify-content-center">
|
|
<div class="col-md-8">
|
|
<img id="full-image" src="https://variance-fl-media.s3.eu-west-3.amazonaws.com/taupiboxed.jpg" class="card-img-top" alt="Pi and Tau: one each" style="position:relative">
|
|
<canvas id="canvas" style="position:absolute; left: 0px; top: 0px; overflow:auto;"></canvas>
|
|
</div>
|
|
<div class="col-md-4 mt-3 mt-md-0">
|
|
<h2>Thumbnail selection (test)</h2>
|
|
<p>This demo page shows how the thumbnail's squared interactive selection works.</p>
|
|
<p>The square "follows" the image even when the image size changes (resize the browser's window to see the outcomes).</p>
|
|
|
|
<p>The coordinates of the selection change dynamically.</p>
|
|
<div class="mb-1 row">
|
|
<label for="thb_left" class="col-sm-4 col-form-label">Left</label>
|
|
<div class="col-sm-8">
|
|
<input class="form-control" type="text" id="thb_left" name="thb_left" value="0" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="mb-1 row">
|
|
<label for="thb_top" class="col-sm-4 col-form-label">Top</label>
|
|
<div class="col-sm-8">
|
|
<input class="form-control" type="text" id="thb_top" name="thb_top" value="0" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="mb-1 row">
|
|
<label for="thb_right" class="col-sm-4 col-form-label">Right</label>
|
|
<div class="col-sm-8">
|
|
<input class="form-control" type="text" id="thb_right" name="thb_right" value="0" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label for="thb_bottom" class="col-sm-4 col-form-label">Bottom</label>
|
|
<div class="col-sm-8">
|
|
<input class="form-control" type="text" id="thb_bottom" name="thb_bottom" value="0" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 text-center">
|
|
<a href="/bo/listuploads" class="btn btn-primary">Go to the list of uploads</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="js/select.js"></script>
|
|
|
|
<!-- End Main content -->
|
|
</main>
|
|
|
|
<!-- Bootstrap 5 JavaScript -->
|
|
<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>
|
|
|
|
</body>
|
|
</html>
|