<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
    <!-- <title>Bolt UXP</title> -->
    <link rel="stylesheet" href="index.css">
    <script src="/assets/index-n2Ovm0I5.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-D4nx3y9L.css">
  </head>
  <body>
    <div id="app"></div>
    
    <div id="Preferences">     

        <div id="HeaderLogo" onclick="openDialog()"></div> 
            
        <div id="MainContainer">     
        <div id="SaveCloseCont">     
            <div id="SaveButton">    
            <sp-button id="save" variant="primary">Save</sp-button> 
            </div> 
        
            <div id="CancelButton">    
            <sp-button id="cancel" variant="secondary">Cancel</sp-button> 
            </div>    
        </div>
            
            
        <div id="ReloadButton">    
        <sp-button id="generate" variant="primary">Generate</sp-button> 
        </div> 
        </div>  
            
            
            
          
        <div class="sp-tabs">
              <div class="sp-tab selected" id="GlowTab"><sp-label size="XXS">Glow Effect</sp-label></div>
              <div class="sp-tab" id="AbberrationTab"><sp-label >Chromatic Aberration</sp-label></div>
        </div>
            
            
        <div class="sp-tab-page visible"  id="GlowTab">
        <div id="MainContainer">  
            
            
        <div id="circleArray1"> 
               
        <div class="imgcircle">    
        <label><input type="radio" name="imggrp" id="AImage" value="ImageSel" checked>
        <div id="ImageIcon"></div></label>
        </div> 
              
         <div class="imgcircle">    
        <label><input type="radio" name="imggrp" id="ASampler" value="SamplerSel">
        <div id="SamplerIcon"></div></label>
        </div> 
                
        <div class="imgcircle">    
        <label><input type="checkbox" name="Qimggrp" id="QSelect" value="QSel">
        <div id="QSelectIcon"></div></label>
        </div> 
            
        <div class="imgcircle">    
        <label><input type="checkbox" name="Qimggrp" id="Unmult" value="Unmult">
        <div id="UnmultIcon"></div></label>
        </div>     
          
        </div>     
            
               
        <sp-divider size="small" class="Mdivider"></sp-divider> 
        
              
        <sp-slider variant="filled" fill-offset="left" min="0" max="1000" value="100" id="GlowSize">
            <sp-label slot="label" class="sldr">Radius</sp-label>
        </sp-slider>
            
            
        <sp-slider variant="filled" fill-offset="left" min="1" max="1000" value="22" id="Strength">
            <sp-label slot="label" class="sldr">Strength</sp-label>
        </sp-slider>    
             
            
        <sp-slider variant="filled" fill-offset="left" min="0.01" max="5" value="0.25" step=0.01 id="Threshold">
            <sp-label slot="label" class="sldr">Threshold</sp-label>
        </sp-slider>     
             
        <div id="FalloffGrp">   
        <sp-label class="chckLabel2">Threshold Falloff:</sp-label>      
        <sp-picker id="FalloffdropMenu" size="s" placeholder="Flf" style="width: 98px">
            <sp-menu slot="options">
                <sp-menu-item id="F1" value="1" selected>Hard</sp-menu-item>
                <sp-menu-item id="F2" value="2">Soft</sp-menu-item>
                <sp-menu-item id="F3" value="3">Smooth</sp-menu-item>
            </sp-menu>
        </sp-picker>    
        </div> 
             
              
        <sp-divider size="small" class="Hdivider"></sp-divider> 
             
        <sp-slider variant="filled" fill-offset="left" min="0" max="255" value="0" id="HCut">
            <sp-label slot="label" class="sldr">Highlight Cutoff</sp-label>
        </sp-slider>  
            
            
        <sp-slider variant="filled" fill-offset="left" min="0" max="150" value="0" id="HFade">
            <sp-label slot="label" class="sldr">Highlight Fade</sp-label>
        </sp-slider>    
            
            
        <sp-slider variant="filled" fill-offset="left" min="0.5" max="2.2" value="1.0" step=0.01 id="Gamma">
            <sp-label slot="label" class="sldr">Gamma</sp-label>
        </sp-slider> 
            
        <sp-slider variant="filled" fill-offset="left" min="-100" max="100" value="0" id="Sat">
            <sp-label slot="label" class="sldr">Saturation</sp-label>
        </sp-slider>  
                 
        <sp-divider size="small" class="Hdivider"></sp-divider>
          
        <div id="ColorGrp">   
        <sp-checkbox size="s" id="enableSwatch" ><sp-label class="chckLabel">Color</sp-label></sp-checkbox> 
            
        <div id="swatch"></div> 
        </div>    
            
          
        <div id="IcoEngGrp">
            
        <div id="IcoGrp">
        <label><input type="radio"  id="ResetGlow" value="ResetPrefs">    
        <svg id="ResetIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 12 12"><path d="M6.1,0.9C4.6-0.4,2.3-0.3,0.9,1.2C0.4,1.8,0.1,2.5,0,3.3l0,0c0,0,0,0.1,0.1,0.1l1,0.4c0,0,0,0,0.1,0
            c0.1,0,0.1-0.1,0.1-0.1c0,0,0,0,0,0c0-0.9,0.5-1.7,1.2-2.2l0,0c0.8-0.5,1.8-0.4,2.5,0L4.5,1.8l0,0c-0.1,0-0.1,0.1,0,0.2
            c0,0,0,0,0.1,0l2.1,1c0.1,0,0.1,0,0.2,0c0,0,0,0,0,0L7,0.6l0,0c0,0,0,0,0-0.1c0-0.1-0.1-0.1-0.2,0L6.1,0.9z M1,6.2L0.3,6.7
            c-0.1,0-0.1,0-0.2,0c0,0,0,0,0-0.1l0,0l0.2-2.4c0-0.1,0.1-0.1,0.1-0.1c0,0,0,0,0,0l2.1,1c0.1,0,0.1,0.1,0.1,0.2c0,0,0,0,0,0
            c0,0,0,0,0,0.1L2.1,5.6c1.1,0.9,2.6,0.7,3.5-0.4C6,4.7,6.2,4.1,6.1,3.5c0-0.1,0-0.1,0.1-0.1c0,0,0,0,0.1,0l1,0.5
            c0,0,0.1,0.1,0.1,0.1l0,0c0,0.2-0.1,0.5-0.1,0.7C6.9,5.6,6.3,6.4,5.5,6.9c0,0,0,0,0,0C4,7.7,2.2,7.4,1,6.2L1,6.2z"/>
            </svg><sp-label slot="label" class="sldr">Reset All</sp-label>    
        </label> 
        </div>
            
        <div id="EngineGrp">   
        <sp-picker id="EngdropMenu" size="s" placeholder="Engine" style="width: 98px">
            <sp-menu slot="options">
                <sp-menu-item id="b1" value="1" selected>16bit Engine</sp-menu-item>
                <sp-menu-item id="b2" value="2">HDR Engine</sp-menu-item>        
            </sp-menu>
        </sp-picker>    
        </div>     
            
        </div>       
            
         
        </div>     
        </div> 
            
               
            
        <div class="sp-tab-page" id="AbberrationTab">
        <div id="MainContainer">
            
           
        <div id="ChromaGrp">   
        <sp-checkbox size="s" id="enableRGB" ><sp-label class="EchckLabel">Enable</sp-label></sp-checkbox>     
          
        <sp-dropdown id="RGBdropMenu" size="s" placeholder="Channels" style="width: 98px">
            <sp-menu slot="options">
                <sp-menu-item id="R1" value="1" selected>Red Blue</sp-menu-item>
                <sp-menu-item id="G1" value="2">Red Green</sp-menu-item>
                <sp-menu-item id="B1" value="3">Green Blue</sp-menu-item>
                
                <sp-divider size="small" class="Menudivider"></sp-divider>
                
                <sp-menu-item id="Rsolo" value="4">R Solo</sp-menu-item>
                <sp-menu-item id="Gsolo" value="5">G Solo</sp-menu-item>
                <sp-menu-item id="Bsolo" value="6">B Solo</sp-menu-item>
                
                <sp-divider size="small" class="Menudivider"></sp-divider>
                <sp-menu-item id="ResetSolo" value="7">Reset Solos</sp-menu-item>    
                
                
            </sp-menu>
        </sp-dropdown>    
           
        </div>  
             
        <sp-slider variant="filled" fill-offset="left" min="-150" max="150" value="10" id="DistX">
            <sp-label slot="label" class="sldr">Distance X</sp-label>
        </sp-slider>
            
        <sp-slider variant="filled" fill-offset="left" min="-150" max="150" value="2" id="DistY">
            <sp-label slot="label" class="sldr">Distance Y</sp-label>
        </sp-slider>
             
        <sp-slider variant="filled" fill-offset="left" min="-100" max="100" value="0" id="DistXred">
            <sp-label slot="label" class="sldr">Distance X (Red)</sp-label>
        </sp-slider>
            
        <sp-slider variant="filled" fill-offset="left" min="-100" max="100" value="0" id="DistYred">
            <sp-label slot="label" class="sldr">Distance Y (Red)</sp-label>
        </sp-slider>  
            
        <sp-slider variant="filled" fill-offset="left" min="-100" max="100" value="0" id="DistXgreen">
            <sp-label slot="label" class="sldr">Distance X (Green)</sp-label>
        </sp-slider>
            
        <sp-slider variant="filled" fill-offset="left" min="-100" max="100" value="0" id="DistYgreen">
            <sp-label slot="label" class="sldr">Distance Y (Green)</sp-label>
        </sp-slider> 
            
        <sp-slider variant="filled" fill-offset="left" min="-100" max="100" value="0" id="DistXblue">
            <sp-label slot="label" class="sldr">Distance X (Blue)</sp-label>
        </sp-slider>
            
        <sp-slider variant="filled" fill-offset="left" min="-100" max="100" value="0" id="DistYblue">
            <sp-label slot="label" class="sldr">Distance Y (Blue)</sp-label>
        </sp-slider>     
                   
        <!--<sp-divider size="small" class="Mdivider"></sp-divider>-->
               
        <sp-slider variant="filled" fill-offset="left" min="1" max="12" value="5" id="Iter">
            <sp-label slot="label" class="sldr">Iterations</sp-label>
        </sp-slider>
            
        <sp-slider variant="filled" fill-offset="left" min="0" max="100" value="0" step="0.1" id="Blend">
            <sp-label slot="label" class="sldr">Blend</sp-label>
        </sp-slider> 
            
        <sp-slider variant="filled" fill-offset="left" min="0" max="25" value="0" step="0.1" id="ChannelBlur">
            <sp-label slot="label" class="sldr">Blur</sp-label>
        </sp-slider>     
              
        <sp-slider variant="filled" fill-offset="left" min="0" max="50" value="0" id="AberFalloff">
            <sp-label slot="label" class="sldr">Edge Falloff</sp-label>
        </sp-slider>
            
            
        <sp-divider size="small" class="Mdivider"></sp-divider> 
            
            
        <sp-slider variant="filled" fill-offset="left" min="0" max="100" value="100" id="ChromSat">
            <sp-label slot="label" class="sldr">Opacity</sp-label>
        </sp-slider>    
            
        <sp-slider variant="filled" fill-offset="left" min="-180" max="180" value="0" id="ChromHue">
            <sp-label slot="label" class="sldr">Hue</sp-label>
        </sp-slider>    
            
        <sp-slider variant="filled" fill-offset="left" min="0" max="100" value="0" id="ChromDist">
            <sp-label slot="label" class="sldr">Distortion</sp-label>
        </sp-slider>    
            
        <div id="DistGrp">    
        <sp-label class="chckLabel2">Distortion Type:</sp-label>      
        <sp-picker id="DistdropMenu" size="s" placeholder="Flf" style="width: 98px">
            <sp-menu slot="options">
                <sp-menu-item id="D1" value="zoom" selected>Ray</sp-menu-item>
                <sp-menu-item id="D2" value="spin">Spin</sp-menu-item>
            </sp-menu>
        </sp-picker>    
        </div>  
           
            
        <div id="IcoGrp">
        <label><input type="radio"  id="ResetAbberration" value="ResetPrefs">    
        <svg id="ResetIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 12 12"><path d="M6.1,0.9C4.6-0.4,2.3-0.3,0.9,1.2C0.4,1.8,0.1,2.5,0,3.3l0,0c0,0,0,0.1,0.1,0.1l1,0.4c0,0,0,0,0.1,0
            c0.1,0,0.1-0.1,0.1-0.1c0,0,0,0,0,0c0-0.9,0.5-1.7,1.2-2.2l0,0c0.8-0.5,1.8-0.4,2.5,0L4.5,1.8l0,0c-0.1,0-0.1,0.1,0,0.2
            c0,0,0,0,0.1,0l2.1,1c0.1,0,0.1,0,0.2,0c0,0,0,0,0,0L7,0.6l0,0c0,0,0,0,0-0.1c0-0.1-0.1-0.1-0.2,0L6.1,0.9z M1,6.2L0.3,6.7
            c-0.1,0-0.1,0-0.2,0c0,0,0,0,0-0.1l0,0l0.2-2.4c0-0.1,0.1-0.1,0.1-0.1c0,0,0,0,0,0l2.1,1c0.1,0,0.1,0.1,0.1,0.2c0,0,0,0,0,0
            c0,0,0,0,0,0.1L2.1,5.6c1.1,0.9,2.6,0.7,3.5-0.4C6,4.7,6.2,4.1,6.1,3.5c0-0.1,0-0.1,0.1-0.1c0,0,0,0,0.1,0l1,0.5
            c0,0,0.1,0.1,0.1,0.1l0,0c0,0.2-0.1,0.5-0.1,0.7C6.9,5.6,6.3,6.4,5.5,6.9c0,0,0,0,0,0C4,7.7,2.2,7.4,1,6.2L1,6.2z"/>
        </svg><sp-label slot="label" class="sldr">Reset All</sp-label>    
        </label> 
            
        <label><input type="radio"  id="PointSampler" value="PointSel">    
        <svg id="TargetIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 18 18"><path d="M6.8,4.6c-1.2,0-2.3,1-2.3,2.3c0,1.2,1,2.2,2.3,2.2c1.2,0,2.2-1,2.2-2.2C9.1,5.6,8.1,4.6,6.8,4.6z"/>
            <path d="M13.1,6.3h-0.7c-0.3-2.6-2.4-4.7-5-5V0.6C7.4,0.3,7.1,0,6.8,0C6.5,0,6.3,0.3,6.3,0.6v0.7c-2.6,0.3-4.7,2.4-5,5H0.6
                C0.3,6.3,0,6.5,0,6.8s0.3,0.6,0.6,0.6h0.7c0.3,2.6,2.4,4.7,5,5v0.7c0,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.3,0.6-0.6v-0.7
                c2.6-0.3,4.7-2.4,5-5h0.7c0.3,0,0.6-0.3,0.6-0.6S13.4,6.3,13.1,6.3z M7.4,11.2v-0.6c0-0.3-0.3-0.6-0.6-0.6c-0.3,0-0.6,0.3-0.6,0.6
                v0.6c-2-0.3-3.6-1.8-3.8-3.8H3c0.3,0,0.6-0.3,0.6-0.6S3.4,6.3,3,6.3H2.4c0.3-2,1.8-3.6,3.8-3.8V3c0,0.3,0.3,0.6,0.6,0.6
                c0.3,0,0.6-0.3,0.6-0.6V2.4c2,0.3,3.6,1.8,3.8,3.8h-0.6c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h0.6C11,9.4,9.4,11,7.4,11.2z"/>
        </svg><sp-label slot="label" class="sldr">Center Point</sp-label>   
        </label>     
        </div>     
            
        
        </div>    
        </div>     
            
         
        
               
        <dialog id="dialog" style="background-color:#0a0a0a;">
            
            <div id="LRbox"> 
            <sp-detail size="m">About</sp-detail>
            </div>   
            
            <sp-divider size="medium" class="Mdivider"></sp-divider>
        
            <div id="LRDbox"> 
                <sp-body id="block1" size="xs">Twinzzo&Hatem Glow Plugin
                <br>version 1.0</sp-body>

            </div> 
            
            <sp-detail id="Sett" size="m">Settings</sp-detail>
            <sp-divider size="medium" class="Mdivider"></sp-divider>
            
                <sp-slider variant="filled" fill-offset="left" step="250" min="500" max="2000" value="750" value-label=" msec" id="PrefTime">
                <sp-label slot="label" class="sldr">Interval</sp-label>
                </sp-slider> 
                
                <sp-body id="IntDescr" size="xs">
                Interval: Specifies the required delay before the updating process when using the Sampler Tool.
                <br>Set longer Intervals to offload the CPU.
                </sp-body>

            <br>
            <label><input type="radio"  id="RestartPanel" value="Restarted">    
            <svg id="TargetIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 18 18"><path d="M6.9,12.1L6.9,12.1v1.2c0,0.3,0.3,0.5,0.6,0.3l3.4-2.1c0.2-0.2,0.2-0.5,0-0.7L7.4,8.7C7.2,8.5,6.9,8.7,6.9,9v1.2
            c-0.1,0-0.2,0-0.3,0c-2-0.1-3.7-1.8-3.8-3.8C2.6,3.8,4.8,1.8,7.3,2c1.9,0.2,3.4,1.7,3.6,3.5c0.1,0.8,0,1.5-0.3,2.2
            c-0.1,0.2,0,0.5,0.2,0.6l0.9,0.5c0.2,0.1,0.5,0,0.7-0.2c0.4-0.8,0.6-1.8,0.6-2.8c-0.1-3.1-2.6-5.6-5.7-5.8c-3.4-0.2-6.3,2.6-6.3,6
            C0.8,9.4,3.5,12.1,6.9,12.1z M8.5,6.1c0,0.9-0.7,1.7-1.7,1.7S5.2,7,5.2,6.1s0.7-1.7,1.7-1.7S8.5,5.1,8.5,6.1z"/>
            </svg><sp-label slot="label" class="sldr">Restart Panel</sp-label>   
            </label>  
            
        
          <div class="row" style="justify-content:center; margin-top:30px">
              
            <sp-button id="OkDial" variant="primary" onclick="document.querySelector('#dialog').close('OK')">Ok</sp-button>
          </div>
            
        </dialog>   
            
        
            
        </div>     





        
    
  </body>
</html>
