digital-image-process_zhy/firstapp/templates/index.html

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>数字图像处理</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">

    <!-- Favicon -->
    <link href="{% static 'img/favicon.ico' %}" rel="icon">


    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="{% static 'plugins/template/bootstrap5暗色调后台管理模板-DarkPan/DarkPan/lib/owlcarousel/assets/owl.carousel.min.css' %}"
          rel="stylesheet">

    <link href="{% static 'plugins/template/bootstrap5暗色调后台管理模板-DarkPan/DarkPan/lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css' %}"
          rel="stylesheet">

    <!-- Customized Bootstrap Stylesheet -->
    <link href="../static/plugins/template/bootstrap5暗色调后台管理模板-DarkPan/DarkPan/css/bootstrap.min.css" rel="stylesheet">
    <link href="{% static 'plugins/template/bootstrap5暗色调后台管理模板-DarkPan/DarkPan/css/bootstrap.min.css' %}"
          rel="stylesheet">

    <!-- Template Stylesheet -->
    <link href="../static/plugins/template/bootstrap5暗色调后台管理模板-DarkPan/DarkPan/css/style.css" rel="stylesheet">
    <link href="{% static 'plugins/template/bootstrap5暗色调后台管理模板-DarkPan/DarkPan/css/style.css' %}"
          rel="stylesheet">
    <style>
        ::-webkit-scrollbar {
            width: 5px; /* 纵向滚动条*/
            height: 5px; /* 横向滚动条 */
            background-color: #fff;
        }

        /*定义滚动条轨道 内阴影*/
        ::-webkit-scrollbar-track {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
            background-color: #ccc;
        }

        /*定义滑块 内阴影*/
        ::-webkit-scrollbar-thumb {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
            background-color: #1890ff;
            border-radius: 10px;
        }

    </style>
</head>

<body>
<div class="container-fluid position-relative d-flex p-0">
    <!-- Spinner Start -->
    <div id="spinner"
         class="show bg-dark position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <!-- Spinner End -->


    <!-- Sidebar Start -->
    <div class="sidebar pe-4 pb-3">
        <nav class="navbar bg-secondary navbar-dark">
            <a href="#" class="navbar-brand mx-4 mb-3">
                <h3 class="text-primary"><i class="fa fa-user-edit me-2" style="color: #ECAD9E"></i><span
                        style="color: #F4606C">数字图像</span></h3>
            </a>
            <div class="d-flex align-items-center ms-4 mb-4">
                <div class="position-relative">
                    <img class="rounded-circle"
                         src="{% static 'img/avatar.jpg' %}" alt=""
                         style="width: 40px; height: 40px;">
                    <div class="bg-success rounded-circle border border-2 border-white position-absolute end-0 bottom-0 p-1"></div>
                </div>
                <div class="ms-3">
                    <h6 class="mb-0">赵晗瑜</h6>
                    <span>管理员</span>
                </div>
            </div>
            <div class="navbar-nav w-100">
                <a href="/canny/style/" class="nav-item nav-link">首页</a>
                <a href="/base/draw/" class="nav-item nav-link">opencv基本绘图</a>
                <a href="/small/wave/" class="nav-link nav-item">小波变换</a>
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">色彩空间</a>
                    <div class="dropdown-menu bg-transparent border-0">
                        <a href="/RGB/draw/" class="dropdown-item">RGB色彩空间</a>
                        <a href="/HSV/draw/" class="dropdown-item">HSV色彩空间</a>
                    </div>
                </div>
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">逻辑运算</a>
                    <div class="dropdown-menu bg-transparent border-0">
                        <a href="/and/logic/" class="dropdown-item">与运算</a>
                        <a href="/or/logic/" class="dropdown-item">或运算</a>
                        <a href="/not/logic/" class="dropdown-item">非运算</a>
                    </div>
                </div>
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">算数运算</a>
                    <div class="dropdown-menu bg-transparent border-0">
                        <a href="/add/logic/" class="dropdown-item">加法运算</a>
                        <a href="/sub/logic/" class="dropdown-item">减法运算</a>
                        <a href="/multi/logic/" class="dropdown-item">乘法运算</a>
                        <a href="/divide/logic/" class="dropdown-item">除法运算</a>
                    </div>
                </div>

                <a href="/low/filter/" class="nav-link nav-item">频域的平滑-低通滤波器</a>
                <a href="/high/filter/" class="nav-link nav-item">频域的锐化-高通滤波器</a>
                <a href="/blank/smooth/" class="nav-link nav-item">空域的平滑</a>


                <a href="/blank/sharp/" class="nav-link nav-item">空域的锐化</a>

                <a href="/expend/" class="nav-item nav-link">图形扩展缩放、平移、旋转</a>
                <a href="/turn/" class="nav-item nav-link">翻转</a>
                <a href="/affine/" class="nav-item nav-link">仿射变换</a>
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">直方图</a>
                    <div class="dropdown-menu bg-transparent border-0">
                        <a href="/gray/histogram/" class="dropdown-item">灰度直方图计算</a>
                        <a href="/draw/gray/" class="dropdown-item">绘制直方图（r，g，b）</a>
                        <a href="/diff/gray/" class="dropdown-item">分段线性变换对直方图修改</a>
                        <a href="/color/histogram/" class="dropdown-item">彩色直方图计算</a>
                    </div>
                </div>
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">边缘检测</a>
                    <div class="dropdown-menu bg-transparent border-0">
                        <a href="/edge/detect/" class="dropdown-item">边缘检测的基本原理与图像增强</a>
                        <a href="/roberts/" class="dropdown-item">Roberts算子</a>
                        <a href="/prewitt/" class="dropdown-item">Prewitt算子与Sobel算子</a>
                        <a href="/laplacian/" class="dropdown-item">Laplacian算子</a>
                        <a href="/log/" class="dropdown-item">LoG边缘算子</a>
                        <a href="/canny/" class="dropdown-item">Canny边缘检测</a>
                    </div>
                </div>
                <a href="/hough/" class="nav-item nav-link">使用Hough变换实现线条变化检测</a>


                <a href="/morphology/" class="nav-item nav-link"> 图像形态学操作</a>
                <a href="/erode/" class="nav-item nav-link"> 腐蚀</a>
                <a href="/swell/" class="nav-item nav-link"> 膨胀</a>
                <a href="/open/" class="nav-item nav-link"> 开运算</a>
                <a href="/close/" class="nav-item nav-link"> 闭运算</a>
                <a href="/noise/" class="nav-item nav-link"> 噪声描述器：添加椒盐噪声</a>
                <a href="/mean/filter/" class="nav-item nav-link">均值类滤波器</a>
                <a href="/sort/filter/" class="nav-item nav-link"> 排序统计类滤波器</a>
                <a href="/choose/filter/" class="nav-item nav-link"> 选择性滤波器</a>
                <a href="/fourier/" class="nav-item nav-link">
                    傅里叶变换
                </a>


            </div>
        </nav>
    </div>
    <!-- Sidebar End -->


    <!-- Content Start -->
    <div class="content">
        <!-- Navbar Start -->
        <nav class="navbar navbar-expand bg-secondary navbar-dark sticky-top px-4 py-0">
            <a href="#" class="navbar-brand d-flex d-lg-none me-4">
                <h2 class="text-primary mb-0"><i class="fa fa-user-edit"></i></h2>
            </a>
            <a href="#" class="sidebar-toggler flex-shrink-0">
                <i class="fa fa-bars"></i>
            </a>
            <div class="navbar-nav align-items-center ms-auto" style="font-weight: bold;">
                <div class="nav-item">
                    <a href="/index/" class="nav-link ">
                        <span class="d-none d-lg-inline-flex" style="color: #bfe2e9;font-weight: bold">图像风格迁移：</span>
                    </a>
                </div>
                <div class="nav-item">
                    <a href="/canny/style/" class="nav-link ">
                        <span class="d-none d-lg-inline-flex">Candy风格</span>
                    </a>
                </div>
                <div class="nav-item">
                    <a href="/feather/style/" class="nav-link ">
                        <span class="d-none d-lg-inline-flex">feathers风格</span>
                    </a>
                </div>
                <div class="nav-item">
                    <a href="/la/muse/style/" class="nav-link ">
                        <span class="d-none d-lg-inline-flex">la_muse风格</span>
                    </a>
                </div>
                <div class="nav-item">
                    <a href="/mosaic/style/" class="nav-link ">
                        <span class="d-none d-lg-inline-flex">mosaic风格</span>
                    </a>
                </div>
                <div class="nav-item">
                    <a href="/starry/style/" class="nav-link ">
                        <span class="d-none d-lg-inline-flex">starry_night风格</span>
                    </a>
                </div>
                <div class="nav-item">
                    <a href="/the/scream/" class="nav-link ">
                        <span class="d-none d-lg-inline-flex">the_scream风格</span>
                    </a>
                </div>
                <div class="nav-item">
                    <a href="/index/" class="nav-link ">
                        <span class="d-none d-lg-inline-flex">人脸识别</span>
                    </a>
                </div>

                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
                        <img class="rounded-circle me-lg-2"
                             src="{% static 'img/avatar.jpg' %}" alt=""
                             style="width: 40px; height: 40px;">
                        <span class="d-none d-lg-inline-flex">赵晗瑜</span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end bg-secondary border-0 rounded-0 rounded-bottom m-0">
                        <a href="#" class="dropdown-item">我的资料</a>
                        <a href="#" class="dropdown-item">个人设置</a>
                        <a href="#" class="dropdown-item">退出登录</a>
                    </div>
                </div>
            </div>
        </nav>
        <!-- Navbar End -->
        {% block content %}

        {% endblock %}


        {#        <!-- Footer Start -->#}
        {#        <ddiv class="container-fluid pt-4 px-4" style="bottom: 0;position: absolute">#}
        {#            <div class="bg-secondary rounded-top p-4">#}
        {#                <div class="row">#}
        {#                    <div class="col-12 col-sm-6 text-center text-sm-start">#}
        {#                        &copy; <a href="#">赵晗瑜</a>, All Right Reserved.#}
        {#                    </div>#}
        {#                    <div class="col-12 col-sm-6 text-center text-sm-end">#}
        {##}
        {##}
        {#                    </div>#}
        {#                </div>#}
        {#            </div>#}
        {#        </div>#}
        {#        <!-- Footer End -->#}
    </div>
    <!-- Content End -->


</div>

<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="{% static 'plugins/template/bootstrap5暗色调后台管理模板-DarkPan/DarkPan/lib/chart/chart.min.js' %}"></script>


<script src="{% static 'plugins/template/bootstrap5暗色调后台管理模板-DarkPan/DarkPan/lib/easing/easing.min.js' %}"></script>

<script src="{% static 'plugins/template/bootstrap5暗色调后台管理模板-DarkPan/DarkPan/lib/waypoints/waypoints.min.js' %}"></script>


<script src="{% static 'plugins/template/bootstrap5暗色调后台管理模板-DarkPan/DarkPan/lib/owlcarousel/owl.carousel.min.js' %}"></script>

<script src="{% static 'plugins/template/bootstrap5暗色调后台管理模板-DarkPan/DarkPan/lib/tempusdominus/js/moment.min.js' %}"></script>

<script src="{% static 'plugins/template/bootstrap5暗色调后台管理模板-DarkPan/DarkPan/lib/tempusdominus/js/moment-timezone.min.js' %}"></script>

<script src="{% static 'plugins/template/bootstrap5暗色调后台管理模板-DarkPan/DarkPan/lib/tempusdominus/js/tempusdominus-bootstrap-4.min.js' %}"></script>

<script src="{% static 'plugins/template/bootstrap5暗色调后台管理模板-DarkPan/DarkPan/js/main.js' %}"></script>
<script type="text/javascript">
    function getFileUrl(sourceId) {
        var url;
        if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE
            url = document.getElementById(sourceId).value;
        } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        }
        return url;
    }

    function preImg(sourceId, targetId) {
        var url = getFileUrl(sourceId);
        var imgPre = document.getElementById(targetId);
        imgPre.src = url;
    }
</script>

{% block js %}

{% endblock %}
</body>

</html>