2023-09-26 09:02:09 +00:00
<!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 >
2023-09-27 13:42:54 +00:00
< script src = "js/select.js" > < / script >
2023-09-26 09:02:09 +00:00
<!-- 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 >