Apq
/
FeHelper
mirror of https://github.com/zxlie/FeHelper.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
							<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <title>颜色转换工具</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../static/img/favicon.ico">
    <!-- Remove Color Picker CSS -->
    <!-- <link rel="stylesheet" href="../static/vendor/a-color-picker/acolorpicker.min.css"> -->
    <link rel="stylesheet" href="index.css" />
    <script type="text/javascript" src="../static/vendor/evalCore.min.js"></script>
    <script type="text/javascript" src="../static/vendor/vue/vue.js"></script>
</head>
<body>

<div class="wrapper" id="pageContainer">
    <div class="panel panel-default" style="margin-bottom: 0px;">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a href="https://www.baidufe.com/fehelper/index/index.html" target="_blank" class="x-a-high">
                    <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：颜色转换工具
                
                    <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
                    <a class="x-other-tools" @click="openOptionsPage($event)"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
                </h3>
        </div>
    </div>
    <div class="panel-body"> <!-- Remove main-content-area -->
        <!-- Remove colorPickerContainer -->

        <div class="row x-tips ui-mt-10">
             // 支持颜色值的RGB/RGBA、HEX、HSL/HSLA、HSV/HSVA互转。
        </div>

        <!-- Move Alpha Slider Row to the top -->
        <div class="row ui-mt-20 alpha-slider-row global-alpha-slider">
            <label for="alphaSlider">全局透明度 (Alpha):</label>
            <input type="range" id="alphaSlider" class="alpha-slider" min="0" max="100" step="1" v-model.number="alphaPercent" @input="updateAlphaFromSlider">
            <span class="alpha-value">{{ (alphaPercent / 100).toFixed(2).replace(/\.0+$/,'') }}</span>
       </div>

        <!-- Reintroduce modules grid -->
        <div class="modules-grid ui-mt-20">
            <!-- HEX Module -->
            <div class="color-module module-hex">
                <h4>HEX 输入</h4>
                <div class="input-group primary-input">
                    <label for="fromHEX">HEX</label>
                    <input type="text" class="form-control col-input" id="fromHEX" placeholder="如: #F2C68580"
                           maxlength="9" v-model="fromHEX" @input="updateFromHEX">
                    <label>预览</label><div class="demo-color" :style="{background: safeBgColor(fromHEX)}">&nbsp;</div>
                </div>
                <h5>输出:</h5>
                <div class="output-group">
                    <label>RGB</label>
                    <input type="text" class="form-control col-output" readonly :value="toRGB">
                    <button class="btn-copy" title="复制" @click="copyToClipboard(toRGB)"> C </button>
                </div>
                <div class="output-group">
                    <label>HSL</label>
                    <input type="text" class="form-control col-output" readonly :value="toHSL">
                    <button class="btn-copy" title="复制" @click="copyToClipboard(toHSL)"> C </button>
                </div>
                <div class="output-group">
                    <label>HSV</label>
                    <input type="text" class="form-control col-output" readonly :value="toHSV">
                    <button class="btn-copy" title="复制" @click="copyToClipboard(toHSV)"> C </button>
                </div>
            </div>

            <!-- RGB Module -->
            <div class="color-module module-rgb">
                <h4>RGB 输入</h4>
                <div class="input-group primary-input">
                    <label for="fromRGB">RGB</label>
                    <input type="text" class="form-control col-input" id="fromRGB" placeholder="如: rgba(67,173,127,0.5)"
                           maxlength="35" v-model="fromRGB" @input="updateFromRGB">
                     <label>预览</label><div class="demo-color" :style="{background: safeBgColor(fromRGB)}">&nbsp;</div>
                </div>
                 <h5>输出:</h5>
                 <div class="output-group">
                     <label>HEX</label>
                     <input type="text" class="form-control col-output" readonly :value="toHEX">
                     <button class="btn-copy" title="复制" @click="copyToClipboard(toHEX)"> C </button>
                 </div>
                 <div class="output-group">
                     <label>HSL</label>
                     <input type="text" class="form-control col-output" readonly :value="toHSL">
                     <button class="btn-copy" title="复制" @click="copyToClipboard(toHSL)"> C </button>
                 </div>
                 <div class="output-group">
                     <label>HSV</label>
                     <input type="text" class="form-control col-output" readonly :value="toHSV">
                     <button class="btn-copy" title="复制" @click="copyToClipboard(toHSV)"> C </button>
                 </div>
            </div>

            <!-- HSL Module -->
            <div class="color-module module-hsl">
                 <h4>HSL 输入</h4>
                 <div class="input-group primary-input">
                     <label for="fromHSL">HSL</label>
                     <input type="text" class="form-control col-input" id="fromHSL" placeholder="如: hsla(154, 44%, 47%, 0.5)"
                            maxlength="45" v-model="fromHSL" @input="updateFromHSL">
                     <label>预览</label><div class="demo-color" :style="{background: safeBgColor(fromHSL)}">&nbsp;</div>
                 </div>
                 <h5>输出:</h5>
                  <div class="output-group">
                      <label>HEX</label>
                      <input type="text" class="form-control col-output" readonly :value="toHEX">
                      <button class="btn-copy" title="复制" @click="copyToClipboard(toHEX)"> C </button>
                  </div>
                  <div class="output-group">
                      <label>RGB</label>
                      <input type="text" class="form-control col-output" readonly :value="toRGB">
                      <button class="btn-copy" title="复制" @click="copyToClipboard(toRGB)"> C </button>
                  </div>
                  <div class="output-group">
                      <label>HSV</label>
                      <input type="text" class="form-control col-output" readonly :value="toHSV">
                      <button class="btn-copy" title="复制" @click="copyToClipboard(toHSV)"> C </button>
                  </div>
            </div>

            <!-- HSV Module -->
             <div class="color-module module-hsv">
                 <h4>HSV 输入</h4>
                 <div class="input-group primary-input">
                     <label for="fromHSV">HSV</label>
                     <input type="text" class="form-control col-input" id="fromHSV" placeholder="如: hsva(154, 61%, 68%, 0.5)"
                            maxlength="45" v-model="fromHSV" @input="updateFromHSV">
                     <label>预览</label><div class="demo-color" :style="{background: safeBgColor(fromHSV)}">&nbsp;</div>
                 </div>
                  <h5>输出:</h5>
                  <div class="output-group">
                      <label>HEX</label>
                      <input type="text" class="form-control col-output" readonly :value="toHEX">
                      <button class="btn-copy" title="复制" @click="copyToClipboard(toHEX)"> C </button>
                  </div>
                  <div class="output-group">
                      <label>RGB</label>
                      <input type="text" class="form-control col-output" readonly :value="toRGB">
                      <button class="btn-copy" title="复制" @click="copyToClipboard(toRGB)"> C </button>
                  </div>
                  <div class="output-group">
                      <label>HSL</label>
                      <input type="text" class="form-control col-output" readonly :value="toHSL">
                      <button class="btn-copy" title="复制" @click="copyToClipboard(toHSL)"> C </button>
                  </div>
             </div>
        </div> <!-- Close .modules-grid -->

        <!-- Remove Alpha slider from here -->
        <!--
        <div class="row ui-mt-20 alpha-slider-row">
             <label for="alphaSlider">透明度 (Alpha):</label>
             <input type="range" id="alphaSlider" class="alpha-slider" min="0" max="100" step="1" v-model.number="alphaPercent" @input="updateAlphaFromSlider">
             <span class="alpha-value">{{ (alphaPercent / 100).toFixed(2).replace(/\.0+$/,'') }}</span>
        </div>
        -->
    </div>
</div>
<script src="../static/vendor/jquery/jquery-3.3.1.min.js"></script>
<!-- Remove Color Picker JS -->
<!-- <script src="../static/vendor/a-color-picker/acolorpicker.js"></script> -->
<script type="text/javascript" src="index.js"></script>
</body>
</html>