<div class="mdui-row mdui-row-gapless">
    <div class="mdui-col-xs-3">{{ adminList }}</div>
    <div class="mdui-col-xs-1"></div>
    <div class="mdui-col-xs-7">
        <div class="mdui-typo-headline">样式</div>
        <br>
        <br>
        <form action="/adminwait/style" method="POST">
            <div class="mdui-textfield">
                <i class="mdui-icon material-icons">style</i>
                <label class="mdui-textfield-label">主题色</label>
                <!--<script>
        document.getElementById('sel-primary')['blue'].selected=true;
        </script>
        <select class="mdui-select" name="sel-primary" id="sel-primary">
        <option value="blue" selected=false> Blue</option>
        <option value="red" selected=false> Red</option>
        <option value="orange" selected=false> Orange </option>
        <option value="green" selected=false> Green</option>
        <option value="yellow" selected=false> Yellow</option>
        <option value="lime" selected=false> Lime</option>
        <option value="teal" selected=false> Teal</option>
        <option value="brown" selected=false> Brown</option>
        <option value="grey" selected=false> Grey</option>
        <option value="pink" selected=false> Pink</option>
        <option value="indigo" selected=false> Indigo</option>
        <option value="purple" selected=false> Purple</option>
        <option value="amber" selected=false> Amber</option>
        <option value="light-green" selected=false> Light-green</option>
        <option value="light-blue" selected=false> Light-blue</option>
        <option value="deep-purple" selected=false> Deep-purple</option>
        <option value="deep-orange" selected=false> Deep-orange</option>
        <option value="blue-grey"> Blue-grey</option></select>-->
                <input name="colorPrimary" value="{{ serverconf['colorPrimary'] }}" type="text"
                    class="mdui-textfield-input" placeholder="论坛的主题色" />
            </div>
            <br>
            <button type="submit" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">保存并应用</button>

            <div class="mdui-typo">
                <h4 class="doc-article-title">主色
                    <a class="doc-anchor" id="color-primary"></a></h4>
                <p>主色共有 19 种颜色，包括：</p>
                <div class="mdui-row-xs-2 mdui-row-sm-3 mdui-row-md-4 mdui-row-lg-6">
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-red mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-red">red</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-pink mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-pink">pink</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-purple mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-purple">purple</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-deep-purple mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-deep-purple">deep-purple</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-indigo mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-indigo">indigo</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-blue mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-blue">blue</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-light-blue mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-light-blue">light-blue</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-cyan mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-cyan">cyan</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-teal mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-teal">teal</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-green mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-green">green</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-light-green mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-light-green">light-green</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-lime mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-lime">lime</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-yellow mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-yellow">yellow</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-amber mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-amber">amber</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-orange mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-orange">orange</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-deep-orange mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-deep-orange">deep-orange</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-brown mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-brown">brown</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-grey mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-grey">grey</a></div>
                    <div class="mdui-col">
                        <span class="doc-color-circle mdui-color-blue-grey mdui-m-r-1"></span>
                        <a data-scroll="" href="#primary-color-blue-grey">blue-grey</a></div>
                </div>
                <p>
                </p>
                <br>
                <div class="mdui-textfield">
                    <i class="mdui-icon material-icons">short_text</i>
                    <label class="mdui-textfield-label">Robots.txt</label>
                    <textarea name="robotstxt" class="mdui-textfield-input" placeholder="爬虫限制"
                        maxlength="2000">{{ serverconf['robots.txt'] }}</textarea></div>
                <button type="submit"
                    class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">保存并应用</button>
                <div class="mdui-textfield">
                    <i class="mdui-icon material-icons">web</i>
                    <label class="mdui-textfield-label">插入JavaScript</label>
                    <textarea name="js" class="mdui-textfield-input" placeholder="插入JavaScript"
                        maxlength="2000">{{ serverconf['js'] }}</textarea></div>
                <button type="submit"
                    class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">保存并应用</button>
                <br>
                <br>
                <br>
        </form>
    </div>
</div>
</div>
</div>
<br>
<br>
<br>
<style>
    /* 鏂囨。鏈€澶栧眰 */
    .doc-container {
        padding-top: 40px;
        padding-bottom: 40px;
        position: relative;
    }

    @media (min-width: 480px) {
        .doc-container {
            padding-top: 60px;
            padding-bottom: 70px;
        }
    }

    @media (min-width: 840px) {
        .doc-container {
            padding-top: 80px;
            padding-bottom: 100px;
        }
    }

    /* 椤甸潰鏍囬 */
    h1.doc-title {
        font-size: 24px;
        line-height: 32px;
        font-weight: 400;
        margin: 0 0 20px 0;
    }

    @media (min-width: 480px) {
        h1.doc-title {
            font-size: 28px;
            line-height: 36px;
            margin: 0 0 25px 0;
        }
    }

    @media (min-width: 840px) {
        h1.doc-title {
            font-size: 34px;
            line-height: 40px;
            margin: 0 400px 30px 0;
        }
    }

    /* 缁勪欢浠嬬粛 */
    .doc-intro {
        font-size: 16px;
        margin-bottom: 0;
        padding: 0 0 48px 0;
    }

    @media (min-width: 480px) {
        .doc-intro {
            padding: 0 0 54px 0;
        }
    }

    @media (min-width: 840px) {
        .doc-intro {
            padding: 0 0 60px 0;
            margin-right: 400px;
        }
    }

    .doc-no-cover .doc-intro {
        margin-right: 0;
    }

    .doc-intro p:last-child {
        margin-bottom: 0;
    }

    /* 缁勪欢浠嬬粛涓殑瀛愭ā鍧� */
    .doc-intro-module {
        font-size: 14px;
        margin-top: 40px;
    }

    .doc-intro-module h3 {
        font-size: 14px;
        font-weight: bold;
        margin: 0 0 20px 0;
    }

    .doc-intro-module p {
        margin-bottom: 1em;
    }

    /* 鐩綍 */
    .doc-toc {
        margin: 0;
        font-size: 16px;
        position: relative;
        border-left: 3px solid;
    }

    .doc-toc a {
        text-decoration: none;
        color: inherit;
    }

    .doc-toc:before {
        content: 'Contents';
        font-size: 15px;
        line-height: 16px;
        font-weight: 400;
        color: #757575;
    }

    .doc-toc ul,
    .doc-toc:before {
        padding-left: 16px;
    }

    .doc-toc ul {
        list-style: none;
        margin: 0;
    }

    .doc-toc ul li {
        margin: 1em 0;
    }

    .doc-toc ul li:first-child {
        margin-top: 0;
    }

    .doc-toc ul li:last-child {
        margin-bottom: 0;
    }

    .doc-toc ul li ul {
        margin: 1em 0;
        font-size: 0.83em;
    }

    .doc-toc>ul {
        margin-top: 1em;
    }

    @media (min-width: 480px) {
        .doc-toc {
            font-size: 17px;
            border-left-width: 4px;
        }

        .doc-toc ul,
        .doc-toc:before {
            padding-left: 18px;
        }
    }

    @media (min-width: 840px) {
        .doc-toc {
            font-size: 18px;
            border-left-width: 5px;
            margin-right: 400px;
        }

        .doc-toc ul,
        .doc-toc:before {
            padding-left: 20px;
        }
    }

    .doc-no-cover .doc-toc {
        margin-right: 0;
    }

    /* 灏侀潰鍥� */
    .doc-cover {
        display: none;
    }

    @media (min-width: 840px) {
        .doc-cover {
            display: block;
            position: absolute;
            right: 8px;
            top: 80px;
        }

        .doc-cover img {
            width: 360px;
            height: 360px;
        }
    }

    /* 姝ｆ枃绔犺妭 */
    .doc-chapter {
        margin: 20px 0 0 0;
        padding: 0 0 80px 0;
    }

    .doc-chapter-title {
        margin-top: 2em !important;
        position: relative;
        padding: 80px 0 0 0;
        border-top: 1px solid rgba(0, 0, 0, 0.12);
    }

    .mdui-theme-layout-dark .doc-chapter-title {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .doc-chapter-title .doc-anchor {
        position: absolute;
        top: -40px;
    }

    .doc-chapter-title-first {
        border-top: none !important;
        margin-top: 0 !important;
    }

    /* 姝ｆ枃灏忕珷鑺傛爣棰� */
    .doc-article-title {
        position: relative;
        margin: 84px 0 30px 0 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    .doc-article-title .doc-anchor {
        position: absolute;
        top: -100px;
    }

    /** * ============================================================== * ======================================================= 搴曢儴缈婚〉 */
    /* 搴曢儴缈婚〉 */
    .doc-footer-nav {
        height: 96px;
    }

    .doc-footer-nav-left,
    .doc-footer-nav-right {
        height: 96px;
    }

    .doc-footer-nav-left {
        text-align: left;
    }

    .doc-footer-nav-right {
        text-align: right;
    }

    .doc-footer-nav-text {
        box-sizing: border-box;
        display: inline-block;
        font-size: 20px;
        font-weight: 500;
        -webkit-font-smoothing: antialiased;
        height: 100%;
        line-height: 24px;
        padding-top: 24px;
        width: 100%;
    }

    .doc-footer-nav-text .mdui-icon {
        padding-top: 23px;
        width: 24px;
    }

    .doc-footer-nav-text .doc-footer-nav-direction {
        font-size: 15px;
        line-height: 18px;
        margin-bottom: 1px;
        opacity: 0.55;
    }

    .doc-footer-nav-left .mdui-icon {
        float: left;
        margin-right: 10px;
    }

    .doc-footer-nav-right .mdui-icon {
        float: right;
        margin-left: 10px;
    }

    .doc-footer-nav-left .doc-footer-nav-chapter {
        margin-left: 34px;
    }

    .doc-footer-nav-right .doc-footer-nav-chapter {
        margin-right: 34px;
    }

    .mdui-theme-layout-dark .doc-footer-nav {
        background-color: #212121 !important;
    }

    .mdui-theme-layout-dark .doc-footer-nav-left,
    .mdui-theme-layout-dark .doc-footer-nav-right {
        background-color: #212121 !important;
    }

    .mdui-theme-layout-dark .doc-footer-nav-text {
        color: #fff;
    }

    /** * =============================================================== * =========================================================== 婕旂ず */
    .doc-example {
        position: relative;
        margin-bottom: 2.6em;
    }

    /* 瀹炰緥婕旂ず */
    .doc-example-demo {
        padding: 0;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        -ms-transition: padding .3s;
        -o-transition: padding .3s;
        transition: padding .3s;
    }

    .doc-example-demo:after {
        clear: both;
        display: table;
        content: ' ';
    }

    /* Example 鏂囧瓧 */
    .doc-example-demo-label {
        display: none;
        box-sizing: border-box;
        width: 100%;
        line-height: 1;
        padding: 9px 14px;
        color: rgba(0, 0, 0, 0.38);
        font-weight: 700;
        font-size: 12px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 3px 3px 0 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .mdui-theme-layout-dark .doc-example-demo-label {
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.5);
    }

    /* 瀹炰緥浠ｇ爜 */
    .doc-example-code {
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-top: none;
        border-radius: 0 0 3px 3px;
        padding: 14px !important;
        margin: 0;
        display: none;
    }

    .mdui-theme-layout-dark .doc-example-code {
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .doc-example-code code {
        font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
        line-height: 1.7;
        padding: 0;
    }

    /* 浠ｇ爜涓叧閿被鍚嶉珮浜� */
    .doc-example-code-required {
        padding: 2px;
        background-color: #E8EAF6;
    }

    .doc-example-code-required * {
        color: #FF4081;
    }

    /* 浠ｇ爜涓坊鍔犻摼鎺� */
    .doc-example-code a {
        text-decoration: none;
    }

    .doc-example-tools {
        position: absolute;
        right: 0;
        top: -20px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transition: top .3s;
        -moz-transition: top .3s;
        -ms-transition: top .3s;
        -o-transition: top .3s;
        transition: top .3s;
    }

    .doc-example-tools a {
        color: rgba(0, 0, 0, 0.54);
        margin: 0 8px;
    }

    .doc-example-tools a:hover {
        color: rgba(0, 0, 0, 0.87);
    }

    .mdui-theme-layout-dark .doc-example-tools a {
        color: rgba(255, 255, 255, 0.7);
    }

    .mdui-theme-layout-dark .doc-example-tools a:hover {
        color: #ffffff;
    }

    .doc-example-showcode .doc-example-demo {
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-top: none;
        padding: 14px;
    }

    .mdui-theme-layout-dark .doc-example-showcode .doc-example-demo {
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .doc-example-showcode .doc-example-demo-label {
        display: block;
    }

    .doc-example-showcode .doc-example-code {
        display: block;
    }

    .doc-example-showcode .doc-example-tools {
        top: 4px;
    }

    /** * ============================================================ * =================================================== 甯哥敤宸ュ叿绫� */
    /* 灏忓瀷鐨勫渾褰� */
    .doc-color-circle {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    /** * =========================================================
    * ======================================== 鏍规嵁涓婚璁剧疆鍙鐘舵€� */
</style>