<commit_before><style>
    .upper-editor {
        font-size: 0;
        height: 50px;
        width: 100%;
        border-bottom: 1px solid #eceff4;
        background-color: #f2f5fe;
        position:relative;
    }

    .upper-editor .upper-editor-left {
        width: 60%;
        margin: 16px 0;
        display: inline-block;
        border-right: 1px solid #cad0dd;
        text-align: right;
        vertical-align: top;
    }

    .upper-editor .upper-editor-right {
        width: 40%;
        height: 50px;
        padding: 15px 20px;
        display: inline-block;
        text-align: left;
    }

    /*#a2adc9*/

    .upper-editor .svg-container {
        margin-right: 20px;
        display: inline-block;
        vertical-align: text-top;
    }

    .upper-editor .upper-editor-right .upper-editor-right-each {
        margin-right: 30px;
        display: inline-block;
        vertical-align: text-top;
    }

    .upper-editor .document-setup-button {
        height: 26px;
        padding: 5px 15px;
        color: #ffffff;
        background-color: #a2adc9;
        border: 0;
        outline: 0;
        vertical-align: text-bottom;
    }

    .editor-body {
        padding: 5em 1em 0 1em;
        position:relative;
        z-index:1;
    }

    .editor-body .canvas {
        margin: 0 auto;
        position: relative;
        box-sizing: content-box;

        background-color: #FFFFFF;
        -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

        width: 595px;
        height: 842px;
    }
</style>
<div class="upper-editor">
    <div class="upper-editor-left">
        <div class="svg-container">
            <img src="./static/images/undo-01.svg" style="height:15px;width:15px;">
        </div>
        <div class="svg-container">
            <img src="./static/images/redo-01.svg" style="height:15px;width:15px;">
        </div>
        <div class="svg-container">
            <img src="./static/images/type-01.svg" style="height:15px;width:15px;">
        </div>
        <div class="svg-container">
            <select>
                <option></option>
                <option></option>
            </select>
        </div>
        <div class="svg-container">
            <img src="./static/images/image-01.svg">
        </div>
        <div class="svg-container">
            <img src="./static/images/link-01.svg" style="width:20px;height:15px;">
        </div>
    </div>


    <div class="upper-editor-right">
        <div class="upper-editor-right-each">
            <select>
                <option value="70%">70%</option>
                <option value="85%">85%</option>
                <option value="100%" selected>100%</option>
                <option value="115%">115%</option>
            </select>
        </div>
        <div class="upper-editor-right-each">
            <button class="document-setup-button">Document Setup</button>
        </div>
    </div>
</div>
<div class="editor-body">
    <div class="canvas">

    </div>
</div><commit_msg>index range js 구동은 아직<commit_after><script src="../../static/bower_components/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="../../static/css/base.min.css">

<style>
    .upper-editor {
        font-size: 0;
        height: 50px;
        width: 100%;
        border-bottom: 1px solid #eceff4;
        background-color: #f2f5fe;
        position:relative;
    }

    .upper-editor .upper-editor-left {
        width: 60%;
        margin: 16px 0;
        display: inline-block;
        border-right: 1px solid #cad0dd;
        text-align: right;
        vertical-align: top;
    }

    .upper-editor .upper-editor-right {
        width: 40%;
        height: 50px;
        padding: 15px 20px;
        display: inline-block;
        text-align: left;
    }

    /*#a2adc9*/

    .upper-editor .svg-container {
        margin-right: 20px;
        display: inline-block;
        vertical-align: text-top;
    }

    .upper-editor .upper-editor-right .upper-editor-right-each {
        margin-right: 30px;
        display: inline-block;
        vertical-align: text-top;
    }

    #canvas-opacity {
      background-color: #f2f5fe;
      border: 1px solid #57617d;
      display: block;
      width: 50px;
      height: 17px;
    }

    input[type=range] {
        /*removes default webkit styles*/
        -webkit-appearance: none;
        /*fix for FF unable to apply focus style bug */
        border: 1px solid white;
        /*required for proper track sizing in FF*/
        width: 170px;
        height: 30px;
        padding: 0 10px;
        background-color: #ffffff;
        margin-left: 490px;
    }
    input[type=range]::-webkit-slider-runnable-track {
        width: 150px;
        height: 6px;
        background: #c1c9db;
        border: 2px solid #a0acc8;
        border-radius: 3px;
    }
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #56607c;
        margin-top: -9px;
    }
    input[type=range]:focus {
        outline: none;
    }
    input[type=range]:focus::-webkit-slider-runnable-track {
        background: #ccc;
    }

    input[type=range]::-moz-range-track {
        width: 150px;
        height: 6px;
        background: #c1c9db;
        border: 2px solid #a0acc8;
        border-radius: 3px;
    }
    input[type=range]::-moz-range-thumb {
        border: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #56607c;
        margin-top: -9px;
    }

/*hide the outline behind the border*/
    input[type=range]:-moz-focusring{
      outline: 1px solid white;
      outline-offset: -1px;
    }

    input[type=range]::-ms-track {
      width: 150px;
      height: 6px;

      /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
      background: transparent;

      /*leave room for the larger thumb to overflow with a transparent border */
      border-color: transparent;
      border-width: 6px 0;

      /*remove default tick marks*/
      color: transparent;
    }
    input[type=range]::-ms-fill-lower {
      background: #56607c;
      border-radius: 10px;
    }
    input[type=range]::-ms-fill-upper {
      background: #c1c9db;
      border-radius: 10px;
    }
    input[type=range]::-ms-thumb {
      border: none;
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background: #56607c;
     }

    .upper-editor .document-setup-button {
        height: 26px;
        padding: 5px 15px;
        color: #ffffff;
        background-color: #a2adc9;
        border: 0;
        outline: 0;
        vertical-align: text-bottom;
    }

    .editor-body {
        padding: 5em 1em 0 1em;
        position:relative;
        z-index:1;
    }

    .editor-body .canvas {
        margin: 0 auto;
        position: relative;
        box-sizing: content-box;

        background-color: #FFFFFF;
        -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

        width: 595px;
        height: 842px;
    }


</style>
<div class="upper-editor">
    <div class="upper-editor-left">
        <div class="svg-container">
            <img src="./static/images/undo-01.svg" style="height:15px;width:15px;">
        </div>
        <div class="svg-container">
            <img src="./static/images/redo-01.svg" style="height:15px;width:15px;">
        </div>
        <div class="svg-container">
            <img src="./static/images/type-01.svg" style="height:15px;width:15px;">
        </div>
        <div class="svg-container">
            <select>
                <option></option>
                <option></option>
            </select>
        </div>
        <div class="svg-container">
            <img src="./static/images/image-01.svg">
        </div>
        <div class="svg-container">
            <img src="./static/images/link-01.svg" style="width:20px;height:15px;">
        </div>
    </div>


    <div class="upper-editor-right">
      <div class="upper-editor-right-each">
        <input type="text" name="chance" id="canvas-opacity" class="text" value="50">
      </div>
      <div class="upper-editor-right-each">
          <button class="document-setup-button">Document Setup</button>
      </div>
    </div>
</div>
<div class="downside-hidden">
  <input type="range" id="canvas-opacity-range" class="vHorizon" min="1" max="100" step="1">
</div>
<div class="editor-body">
    <div class="canvas">

    </div>
</div>

<script type="text/javascript">
  $(document).ready(function() {

    $("#canvas-opacity-range").hide();
    $("#canvas-opacity").click(function () {
      $("#canvas-opacity-range").show();
    });
    $(document).on('click', function(e) {
      if (!(e.target.id == 'canvas-opacity' || e.target.id =='canvas-opacity-range')) {
        $('#canvas-opacity-range').hide();
      }
    });

     $('#canvas-opacity-range').on('change', function(){
      $('#canvas-opacity').val($('#canvas-opacity-range').val());
     });

     $('#canvas-opacity').on('keyup', function(){
      $('#canvas-opacity-range').val($('#canvas-opacity').val());
     });
</script>
{'fraction_non_alphanumeric': 0.1582312200319659, 'fraction_numerical': 0.03633457645178476, 'mean_word_length': 1.9085838239851256, 'pattern_counts': {'":': 0, '<': 104, '<?xml version=': 0, '>': 104, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '124313', 'n_tokens_mistral': 3343, 'n_tokens_neox': 3026, 'n_words': 625}