<commit_before><h1 class="title">Minimalin Configuration</h1>
<svg version="1.1" id="preview" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 288 336" enable-background="new 0 0 288 336" xml:space="preserve">
  <rect x="0" y="0" width="288" height="336"/>
  <g class="{{ date_displayed ? '' : 'hidden'}}">
    <path fill="#555555" d="M140.3,204.2v1.9h1.9v1.9v9.5h-1.9v3.8h1.9v11.4v1.9h-1.9v1.9h-9.5v-1.9h-1.9v-5.7h3.8v3.8h5.7v-11.4h-5.7
                            v-3.8h5.7V208h-5.7v3.8h-3.8v-5.7h1.9v-1.9H140.3z"/>
    <path fill="#555555" d="M147.7,204.2h7.6v32.2h-3.8V208h-3.8V204.2z"/>
  </g>
  <path class="bluetooth {{ bluetooth_displayed ? '' : 'hidden' }}" fill="#FF0000" d="M156.7,99.1l-11.4-11.4h-2v15.2l-9.2-9.2l-2.8,2.8l11.2,11.2l-11.2,11.2l2.8,2.8l9.2-9.2v15.2h2l11.4-11.4
                                                                                      l-8.6-8.6L156.7,99.1z M147.3,95.3l3.8,3.8l-3.8,3.8V95.3z M151,116.2l-3.8,3.8v-7.5L151,116.2z"/>
  <path class="{{ rainbow_mode ? 'hidden' : ''}}" fill="{{ minute_hand_color }}" d="M144,173.5c-1.5,0-3.1-0.6-4.2-1.8c-2.3-2.3-2.3-6.1,0-8.5l73.5-73.5c2.3-2.3,6.1-2.3,8.5,0
                                                                                    c2.3,2.3,2.3,6.1,0,8.5l-73.5,73.5C147.1,172.9,145.5,173.5,144,173.5z"/>
  <g class="{{ rainbow_mode ? '' : 'hidden' }}">
    <path style="fill:#FF0000;" d="M207.68,109.82c-1.535,0-3.071-0.586-4.242-1.758c-2.344-2.343-2.344-6.142,0-8.484l9.86-9.86
                                   c2.342-2.344,6.143-2.344,8.484,0c2.344,2.343,2.344,6.142,0,8.484l-9.86,9.86C210.751,109.234,209.215,109.82,207.68,109.82z"/>
    <rect x="194.587" y="100.91" transform="matrix(0.7071 0.7071 -0.7071 0.7071 137.1781 -109.3502)" style="fill:#FF5500;" width="11.999" height="20.008"/>
    <rect x="180.327" y="114.993" transform="matrix(0.7071 0.7071 -0.7071 0.7071 143.0847 -95.0904)" style="fill:#FFAA00;" width="11.999" height="20.361"/>
    <rect x="165.606" y="129.256" transform="matrix(0.7071 0.7071 -0.7071 0.7071 149.1824 -80.3692)" style="fill:#00AA00;" width="11.999" height="21.277"/>
    <rect x="148.846" y="143.591" transform="matrix(0.7071 0.7071 -0.7071 0.7071 156.1248 -63.609)" style="fill:#0055FF;" width="11.999" height="26.128"/>
  </g>
  <path class="hour_hand" fill="{{hour_hand_color}}" d="M144,157.5c-0.5,0-0.9,0-1.4,0.1l-49.5-49.5c-2.3-2.3-6.1-2.3-8.5,0c-2.3,2.3-2.3,6.1,0,8.5l49.5,49.5
                                                        c-0.1,0.5-0.1,0.9-0.1,1.4c0,5.5,4.5,10,10,10s10-4.5,10-10C154,162,149.5,157.5,144,157.5z"/>
  <circle fill="{{ rainbow_mode ? '#AA00FF' : hour_hand_color }}" cx="144" cy="167.5" r="10"/>
  <path class="time" fill="#AAAAAA" d="M218.9,16.4v1.9h1.9v28.4h-1.9v1.9h-9.5v-1.9h-1.9V20.1v-1.9h1.9v-1.9H218.9z M217.1,44.8V20.2h-5.7v24.6
                                       H217.1z"/>
  <path class="time" fill="#AAAAAA" d="M235.9,16.4v1.9h1.9v28.4h-1.9v1.9h-9.5v-1.9h-1.9V41h3.8v3.8h5.7v-9.5h-7.6v-1.9h-1.9V18.2h1.9v-1.9
                                       H235.9z M228.3,31.5h5.7V20.1h-5.7V31.5z"/>
  <path class="time" fill="#AAAAAA" d="M18.6,83.7h7.6v32.2h-3.8V87.5h-3.8V83.7z"/>
  <path class="time" fill="#AAAAAA" d="M45,83.7v1.9h1.9V114H45v1.9h-9.5V114h-1.9V87.5v-1.9h1.9v-1.9H45z M43.2,112.1V87.5h-5.7v24.6H43.2z"/>
  <path class="tick" fill="#AAAAAA" d="M12.3,89.2L0,82.1v4.6l10.3,5.9c0.3,0.2,0.7,0.3,1,0.3c0.7,0,1.4-0.4,1.7-1C13.5,91,13.2,89.7,12.3,89.2z"/>
  <path class="tick" fill="#AAAAAA" d="M238.3,0l-5.9,10.3c-0.6,1-0.2,2.2,0.7,2.7c0.3,0.2,0.7,0.3,1,0.3c0.7,0,1.4-0.4,1.7-1L242.9,0H238.3z"/>
</svg>
<div class="item-container">
  <div class="item-container-content">
    <label class="item">
      Hour hand color
      <input id="hour_hand_color_picker" type="text" class="item-color item-color-normal" value="{{hour_hand_color}}">
    </label>
  </div>
</div>
<div class="item-container">
  <div class="item-container-content">
    <label class="item {{ rainbow_mode ? 'disabled' : ''}}">
      Minute hand color
      <input id="minute_hand_color_picker" type="text" class="item-color item-color-normal" value="{{minute_hand_color}}">
    </label>
  </div>
</div>
<div class="item-container" id="rainbow_container">
  <div class="item-container-content">
    <label class="item">
      Use rainbow minute hand
      <input id="rainbow_mode_checkbox" type="checkbox" class="item-toggle" checked="{{rainbow_mode}}">
    </label>
  </div>
  <div class="item-container-footer">
    Overrides color selection for the minute hand
  </div>
</div>
<div class="item-container">
  <div class="item-container-content">
    <label class="item">
      Show date
      <input id="display_date_checkbox" type="checkbox" class="item-toggle" checked="{{date_displayed}}">
    </label>
  </div>
</div>
<div class="item-container">
  <div class="item-container-content">
    <label class="item">
      Show Bluetooth disconnected icon
      <input id="display_bluetooth_checkbox" type="checkbox" class="item-toggle" checked="{{bluetooth_displayed}}">
    </label>
  </div>
</div>
<div class="donation">
  Minimalin is open source software. If you want, you can easily make a <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ZJYBKJHT2EXT4">donation here</a>.
</div>
<div class="item-container">
  <div class="button-container">
    <input id="submit_button" type="button" class="item-button" value="SAVE" on-tap="save">
  </div>
</div>

<style>
 .title {
   padding: 15px 10px;
   font-family: 'PT Sans', sans-serif;
   font-size: 1.2em;
   font-weight: 500;
   color: #888888;
   text-align: center;
 }

 .donation {
   padding: 3px 10px;
   font-size: 0.7em;
 }

 #preview {
   display:      block;
   margin-left:  auto;
   margin-right: auto;
   width:        40%;
   max-width:    400px;
 }

 .disabled {
   color: lightgray;
 }

 .hidden {
   visibility: hidden;
 }

 @keyframes buzz {
   0%, 100% {
     transform: translate(0, 0);
   }

   10%, 30%, 50%, 70%, 90% {
     transform: translate(-3px, 0);
   }

   20%, 40%, 60%, 80% {
     transform: translate(3px, 0);
   }
 }
</style>

<script>
 function query(variable, defaultValue) {
   var query = location.search.substring(1);
   var vars = query.split('&');
   for (var i = 0; i < vars.length; i++) {
     var pair = vars[i].split('=');
     if (pair[0] === variable) {
       var val = decodeURIComponent(pair[1]);
       if(val.toLowerCase() === 'true'){
         val = true;
       }else if(val.toLowerCase() === 'false'){         
         val = false;
       }
       return val;
     }
   }
   return defaultValue || null;
 }

 var svg_color = function(color){
   return color.replace(/^0x/, '#');
 };

 component.exports = {
   data: {
     minute_hand_color: query('minute_hand_color', '#FFFFFF'),
     hour_hand_color:  query('hour_hand_color', '#FF0000'),
     date_displayed:  query('date_displayed', true),
     bluetooth_displayed: query('bluetooth_displayed', true),
     rainbow_mode: query('rainbow_mode', false),
   },
   onrender: function(){
     $('.item-toggle').itemToggle();
     $('.item-color-normal').itemColor({sunny: false});
     this.on('save', function() {<commit_msg>Updated config page to display background color selection<commit_after><h1 class="title">Minimalin Configuration</h1>
<svg id="preview" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 288 336" enable-background="new 0 0 288 336" xml:space="preserve">
  <rect fill="{{background_color}}" x="0" y="0" width="288" height="336"/>
  <g class="{{ date_displayed ? '' : 'hidden'}}">
    <path fill="#555555" d="M140.3,204.2v1.9h1.9v1.9v9.5h-1.9v3.8h1.9v11.4v1.9h-1.9v1.9h-9.5v-1.9h-1.9v-5.7h3.8v3.8h5.7v-11.4h-5.7
                            v-3.8h5.7V208h-5.7v3.8h-3.8v-5.7h1.9v-1.9H140.3z"/>
    <path fill="#555555" d="M147.7,204.2h7.6v32.2h-3.8V208h-3.8V204.2z"/>
  </g>
  <path class="bluetooth {{ bluetooth_displayed ? '' : 'hidden' }}" fill="#FF0000" d="M156.7,99.1l-11.4-11.4h-2v15.2l-9.2-9.2l-2.8,2.8l11.2,11.2l-11.2,11.2l2.8,2.8l9.2-9.2v15.2h2l11.4-11.4
                                                                                      l-8.6-8.6L156.7,99.1z M147.3,95.3l3.8,3.8l-3.8,3.8V95.3z M151,116.2l-3.8,3.8v-7.5L151,116.2z"/>
  <path class="{{ rainbow_mode ? 'hidden' : ''}}" fill="{{ minute_hand_color }}" d="M144,173.5c-1.5,0-3.1-0.6-4.2-1.8c-2.3-2.3-2.3-6.1,0-8.5l73.5-73.5c2.3-2.3,6.1-2.3,8.5,0
                                                                                    c2.3,2.3,2.3,6.1,0,8.5l-73.5,73.5C147.1,172.9,145.5,173.5,144,173.5z"/>
  <g class="{{ rainbow_mode ? '' : 'hidden' }}">
    <path style="fill:#FF0000;" d="M207.68,109.82c-1.535,0-3.071-0.586-4.242-1.758c-2.344-2.343-2.344-6.142,0-8.484l9.86-9.86
                                   c2.342-2.344,6.143-2.344,8.484,0c2.344,2.343,2.344,6.142,0,8.484l-9.86,9.86C210.751,109.234,209.215,109.82,207.68,109.82z"/>
    <rect x="194.587" y="100.91" transform="matrix(0.7071 0.7071 -0.7071 0.7071 137.1781 -109.3502)" style="fill:#FF5500;" width="11.999" height="20.008"/>
    <rect x="180.327" y="114.993" transform="matrix(0.7071 0.7071 -0.7071 0.7071 143.0847 -95.0904)" style="fill:#FFAA00;" width="11.999" height="20.361"/>
    <rect x="165.606" y="129.256" transform="matrix(0.7071 0.7071 -0.7071 0.7071 149.1824 -80.3692)" style="fill:#00AA00;" width="11.999" height="21.277"/>
    <rect x="148.846" y="143.591" transform="matrix(0.7071 0.7071 -0.7071 0.7071 156.1248 -63.609)" style="fill:#0055FF;" width="11.999" height="26.128"/>
  </g>
  <path class="hour_hand" fill="{{hour_hand_color}}" d="M144,157.5c-0.5,0-0.9,0-1.4,0.1l-49.5-49.5c-2.3-2.3-6.1-2.3-8.5,0c-2.3,2.3-2.3,6.1,0,8.5l49.5,49.5
                                                        c-0.1,0.5-0.1,0.9-0.1,1.4c0,5.5,4.5,10,10,10s10-4.5,10-10C154,162,149.5,157.5,144,157.5z"/>
  <circle fill="{{ rainbow_mode ? '#AA00FF' : hour_hand_color }}" cx="144" cy="167.5" r="10"/>
  <path class="time" fill="#AAAAAA" d="M218.9,16.4v1.9h1.9v28.4h-1.9v1.9h-9.5v-1.9h-1.9V20.1v-1.9h1.9v-1.9H218.9z M217.1,44.8V20.2h-5.7v24.6
                                       H217.1z"/>
  <path class="time" fill="#AAAAAA" d="M235.9,16.4v1.9h1.9v28.4h-1.9v1.9h-9.5v-1.9h-1.9V41h3.8v3.8h5.7v-9.5h-7.6v-1.9h-1.9V18.2h1.9v-1.9
                                       H235.9z M228.3,31.5h5.7V20.1h-5.7V31.5z"/>
  <path class="time" fill="#AAAAAA" d="M18.6,83.7h7.6v32.2h-3.8V87.5h-3.8V83.7z"/>
  <path class="time" fill="#AAAAAA" d="M45,83.7v1.9h1.9V114H45v1.9h-9.5V114h-1.9V87.5v-1.9h1.9v-1.9H45z M43.2,112.1V87.5h-5.7v24.6H43.2z"/>
  <path class="tick" fill="#AAAAAA" d="M12.3,89.2L0,82.1v4.6l10.3,5.9c0.3,0.2,0.7,0.3,1,0.3c0.7,0,1.4-0.4,1.7-1C13.5,91,13.2,89.7,12.3,89.2z"/>
  <path class="tick" fill="#AAAAAA" d="M238.3,0l-5.9,10.3c-0.6,1-0.2,2.2,0.7,2.7c0.3,0.2,0.7,0.3,1,0.3c0.7,0,1.4-0.4,1.7-1L242.9,0H238.3z"/>
</svg>
<div class="item-container">
  <div class="item-container-content">
    <label class="item">
      Hour hand color
      <input id="hour_hand_color_picker" type="text" class="item-color item-color-normal" value="{{hour_hand_color}}">
    </label>
  </div>
</div>
<div class="item-container">
  <div class="item-container-content">
    <label class="item {{ rainbow_mode ? 'disabled' : ''}}">
      Minute hand color
      <input id="minute_hand_color_picker" type="text" class="item-color item-color-normal" value="{{minute_hand_color}}">
    </label>
  </div>
</div>
<div class="item-container" id="rainbow_container">
  <div class="item-container-content">
    <label class="item">
      Use rainbow minute hand
      <input id="rainbow_mode_checkbox" type="checkbox" class="item-toggle" checked="{{rainbow_mode}}">
    </label>
  </div>
  <div class="item-container-footer">
    Overrides color selection for the minute hand
  </div>
</div>
<div class="item-container">
  <div class="item-container-content">
    <label class="item">
      Background color
      <input id="backgroun_color_picker" type="text" class="item-color item-color-normal" value="{{background_color}}">
    </label>
  </div>
</div>

<div class="item-container">
  <div class="item-container-content">
    <label class="item">
      Show date
      <input id="display_date_checkbox" type="checkbox" class="item-toggle" checked="{{date_displayed}}">
    </label>
  </div>
</div>
<div class="item-container">
  <div class="item-container-content">
    <label class="item">
      Show Bluetooth disconnected icon
      <input id="display_bluetooth_checkbox" type="checkbox" class="item-toggle" checked="{{bluetooth_displayed}}">
    </label>
  </div>
</div>
<div class="donation">
  Minimalin is open source software. If you want, you can easily make a <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ZJYBKJHT2EXT4">donation here</a>.
</div>
<div class="item-container">
  <div class="button-container">
    <input id="submit_button" type="button" class="item-button" value="SAVE" on-tap="save">
  </div>
</div>

<style>
 .title {
   padding: 15px 10px;
   font-family: 'PT Sans', sans-serif;
   font-size: 1.2em;
   font-weight: 500;
   color: #888888;
   text-align: center;
 }

 .donation {
   padding: 3px 10px;
   font-size: 0.7em;
 }

 #preview {
   display:      block;
   margin:       0px;
   margin-left:  auto;
   margin-right: auto;
   width:        50%;
   max-width:    288px;
   max-height:   336px;
 }

 .disabled {
   color: lightgray;
 }

 .hidden {
   visibility: hidden;
 }

 @keyframes buzz {
   0%, 100% {
     transform: translate(0, 0);
   }

   10%, 30%, 50%, 70%, 90% {
     transform: translate(-3px, 0);
   }

   20%, 40%, 60%, 80% {
     transform: translate(3px, 0);
   }
 }
</style>

<script>
 function query(variable, defaultValue) {
   var query = location.search.substring(1);
   var vars = query.split('&');
   for (var i = 0; i < vars.length; i++) {
     var pair = vars[i].split('=');
     if (pair[0] === variable) {
       var val = decodeURIComponent(pair[1]);
       if(val.toLowerCase() === 'true'){
         val = true;
       }else if(val.toLowerCase() === 'false'){         
         val = false;
       }
       return val;
     }
   }
   return defaultValue || null;
 }

 var svg_color = function(color){
   return color.replace(/^0x/, '#');
 };

 component.exports = {
   data: {
     minute_hand_color: query('minute_hand_color', '#FFFFFF'),
     hour_hand_color:  query('hour_hand_color', '#FF0000'),
     background_color:  query('background_color', '#000000'),
     date_displayed:  query('date_displayed', true),
     bluetooth_displayed: query('bluetooth_displayed', true),
     rainbow_mode: query('rainbow_mode', false),
   },
   onrender: function(){
     $('.item-toggle').itemToggle();
     $('.item-color-normal').itemColor({sunny: false});
     this.on('save', function() {
{'fraction_non_alphanumeric': 0.21750805585392052, 'fraction_numerical': 0.16178839957035446, 'mean_word_length': 2.86132711249352, 'pattern_counts': {'":': 0, '<': 162, '<?xml version=': 0, '>': 160, 'https://': 2, 'lorem ipsum': 0, 'www.': 6, 'xml': 6}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 24, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2206840', 'n_tokens_mistral': 7483, 'n_tokens_neox': 6512, 'n_words': 868}