Embed

<div class="uwcc-reload">
  <div class="uwcc-reload-text">
    If the upload does not work the first time,<br>
    please click the button below to reactivate the app.
  </div>

  <button type="button" class="uwcc-reload-btn" onclick="location.reload()">
    Reactivate Color Correction App
  </button>
</div>

<style>
  /* Fully scoped – will NOT affect other buttons */
  .uwcc-reload{
    margin:16px 0;
    padding:14px;
    border:1px dashed rgba(0,0,0,.25);
    border-radius:10px;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
    text-align:center;
  }
  .uwcc-reload-text{
    font-size:13px;
    opacity:.8;
    margin-bottom:8px;
    line-height:1.4;
  }
  .uwcc-reload-btn{
    padding:8px 14px;
    cursor:pointer;
  }
</style>


<div class="uwcc-simple" data-uwcc-simple>
  <div class="uwcc-head">
    <strong>Underwater Photo Color Correction</strong>
    <div class="uwcc-sub">Pattaya green-water tuned</div>
  </div>

  <div class="uwcc-row">
    <button type="button" class="uwcc-btn" data-action="upload">Upload Photo</button>
    <button type="button" class="uwcc-btn" data-action="before" disabled>Hold Before</button>
    <button type="button" class="uwcc-btn" data-action="auto" disabled>Auto</button>
    <button type="button" class="uwcc-btn" data-action="reset" disabled>Reset</button>
    <button type="button" class="uwcc-btn" data-action="download" disabled>Download</button>

    <input type="file" accept="image/*" data-file style="display:none">
  </div>

  <div class="uwcc-canvasWrap">
    <canvas data-cv></canvas>
    <div class="uwcc-hint" data-hint>
      Press <b>Upload Photo</b> to start
    </div>
  </div>

  <div class="uwcc-controls">
    <div class="uwcc-control">
      <label>Auto Strength</label>
      <input type="range" min="0" max="100" value="6" data-s="strength">
      <span data-v="strength">6%</span>
    </div>

    <div class="uwcc-control">
      <label>Red Recovery</label>
      <input type="range" min="0" max="100" value="26" data-s="red">
      <span data-v="red">26</span>
    </div>

    <div class="uwcc-control">
      <label>Green Reduce</label>
      <input type="range" min="0" max="100" value="35" data-s="green">
      <span data-v="green">35</span>
    </div>

    <div class="uwcc-control">
      <label>Contrast</label>
      <input type="range" min="-30" max="50" value="10" data-s="contrast">
      <span data-v="contrast">10</span>
    </div>

    <div class="uwcc-control">
      <label>Vibrance</label>
      <input type="range" min="0" max="60" value="18" data-s="vib">
      <span data-v="vib">18</span>
    </div>
  </div>

  <div class="uwcc-msg" data-msg></div>
</div>

<style>
  .uwcc-simple{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
  .uwcc-head{margin-bottom:8px}
  .uwcc-sub{font-size:12px;opacity:.7}
  .uwcc-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
  .uwcc-btn{padding:6px 10px}
  .uwcc-btn:disabled{opacity:.5;cursor:not-allowed}

  .uwcc-canvasWrap{
    position:relative;
    border:1px solid rgba(0,0,0,.15);
    border-radius:10px;
    min-height:320px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .uwcc-canvasWrap canvas{max-width:100%;height:auto;display:block}
  .uwcc-hint{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    opacity:.75;
    pointer-events:none;
    text-align:center;
  }

  .uwcc-controls{display:grid;gap:8px;margin-top:12px}
  .uwcc-control{
    display:grid;
    grid-template-columns:120px 1fr 60px;
    gap:10px;
    align-items:center;
  }
  .uwcc-control label{font-size:12px;opacity:.75}
  .uwcc-control span{font-size:12px;opacity:.75;text-align:right}
  .uwcc-msg{font-size:12px;opacity:.75;margin-top:8px;min-height:16px}
</style>

<script>
(() => {
  const root = document.querySelector('[data-uwcc-simple]');
  if(!root || root.dataset.init) return;
  root.dataset.init = "1";

  const qs = s => root.querySelector(s);
  const qsa = s => Array.from(root.querySelectorAll(s));
  const clamp = v => v<0?0:(v>255?255:v);

  const btnUpload   = qs('[data-action="upload"]');
  const btnBefore   = qs('[data-action="before"]');
  const btnAuto     = qs('[data-action="auto"]');
  const btnReset    = qs('[data-action="reset"]');
  const btnDownload = qs('[data-action="download"]');

  const fileInput = qs('[data-file]');
  const canvas = qs('[data-cv]');
  const ctx = canvas.getContext('2d',{willReadFrequently:true});
  const hint = qs('[data-hint]');
  const msg = qs('[data-msg]');

  const sliders = {};
  const values = {};
  qsa('[data-s]').forEach(el => sliders[el.dataset.s] = el);
  qsa('[data-v]').forEach(el => values[el.dataset.v] = el);

  let originalSource = null;
  let originalType = "image/jpeg";
  let originalName = "photo.jpg";

  let proxyCanvas=null, proxyCtx=null, beforeImg=null;
  let autoWB={r:1,g:1,b:1};
  let showBefore=false;

  function updateVals(){
    values.strength.textContent = sliders.strength.value + "%";
    values.red.textContent = sliders.red.value;
    values.green.textContent = sliders.green.value;
    values.contrast.textContent = sliders.contrast.value;
    values.vib.textContent = sliders.vib.value;
  }
  updateVals();

  function analyzeWB(img){
    const d = img.data;
    let r=0,g=0,b=0,n=0;
    for(let i=0;i<d.length;i+=16){
      const lum = 0.2126*d[i]+0.7152*d[i+1]+0.0722*d[i+2];
      if(lum<25) continue;
      r+=d[i]; g+=d[i+1]; b+=d[i+2]; n++;
    }
    if(!n) return {r:1.18,g:0.98,b:1.04};
    const gray=(r+g+b)/(3*n);
    return {
      r: Math.min(1.55, Math.max(0.95,(gray/(r/n))*1.1)),
      g: Math.min(1.2,  Math.max(0.85,(gray/(g/n))*0.98)),
      b: Math.min(1.3,  Math.max(0.9, (gray/(b/n))*1.02))
    };
  }

  function apply(img){
    const d = img.data;
    const s = sliders.strength.value/100;
    const red = sliders.red.value/100;
    const green = sliders.green.value/100;
    const contrast = sliders.contrast.value/100;
    const vib = sliders.vib.value/60;

    const wbR = 1+(autoWB.r-1)*s;
    const wbG = 1+(autoWB.g-1)*s;
    const wbB = 1+(autoWB.b-1)*s;

    for(let i=0;i<d.length;i+=4){
      let r=d[i]*wbR, g=d[i+1]*wbG, b=d[i+2]*wbB;
      let lum=0.2126*r+0.7152*g+0.0722*b;

      g *= (1-green*0.25)+(lum/255)*green*0.15;
      r *= 1 + red*(1-lum/255);

      r=(r-128)*(1+contrast)+128;
      g=(g-128)*(1+contrast)+128;
      b=(b-128)*(1+contrast)+128;

      const sat=(Math.abs(r-lum)+Math.abs(g-lum)+Math.abs(b-lum))/255;
      const v=vib*(1-Math.min(1,sat));
      r=lum+(r-lum)*(1+v);
      g=lum+(g-lum)*(1+v);
      b=lum+(b-lum)*(1+v);

      d[i]=clamp(r); d[i+1]=clamp(g); d[i+2]=clamp(b);
    }
    return img;
  }

  function render(){
    if(!proxyCanvas) return;
    canvas.width=proxyCanvas.width;
    canvas.height=proxyCanvas.height;

    if(showBefore && beforeImg){
      ctx.drawImage(beforeImg,0,0);
      return;
    }
    const img=proxyCtx.getImageData(0,0,proxyCanvas.width,proxyCanvas.height);
    ctx.putImageData(apply(img),0,0);
  }

  btnUpload.onclick = () => fileInput.click();

  fileInput.onchange = async e => {
    const f=e.target.files[0];
    if(!f) return;

    originalType=f.type||"image/jpeg";
    originalName=f.name||"photo.jpg";

    hint.style.display="none";
    msg.textContent="Loading…";

    const src = await createImageBitmap(f);
    originalSource=src;

    const max=1600;
    const scale=Math.min(1,max/Math.max(src.width,src.height));
    const w=Math.round(src.width*scale);
    const h=Math.round(src.height*scale);

    proxyCanvas=document.createElement("canvas");
    proxyCanvas.width=w; proxyCanvas.height=h;
    proxyCtx=proxyCanvas.getContext("2d",{willReadFrequently:true});
    proxyCtx.drawImage(src,0,0,w,h);

    beforeImg=new Image();
    beforeImg.src=proxyCanvas.toDataURL("image/jpeg",0.95);

    autoWB=analyzeWB(proxyCtx.getImageData(0,0,w,h));

    btnBefore.disabled=false;
    btnAuto.disabled=false;
    btnReset.disabled=false;
    btnDownload.disabled=false;

    msg.textContent="Ready. Hold Before to compare.";
    render();
    fileInput.value="";
  };

  btnBefore.onpointerdown=()=>{showBefore=true;render();};
  btnBefore.onpointerup=()=>{showBefore=false;render();};
  btnAuto.onclick=()=>{autoWB=analyzeWB(proxyCtx.getImageData(0,0,proxyCanvas.width,proxyCanvas.height));render();};

  btnReset.onclick=()=>{
    sliders.strength.value=6;
    sliders.red.value=26;      // ✅ reset to 26% too
    sliders.green.value=35;
    sliders.contrast.value=10;
    sliders.vib.value=18;
    updateVals();
    render();
  };

  btnDownload.onclick=()=>{
    if(!originalSource) return;

    const c=document.createElement("canvas");
    c.width=originalSource.width;
    c.height=originalSource.height;
    const cctx=c.getContext("2d",{willReadFrequently:true});
    cctx.drawImage(originalSource,0,0);

    const img=cctx.getImageData(0,0,c.width,c.height);
    cctx.putImageData(apply(img),0,0);

    const a=document.createElement("a");
    a.download=`uw-corrected-${Date.now()}.jpg`;
    a.href=c.toDataURL("image/jpeg",0.98);
    a.click();
  };

  qsa('[data-s]').forEach(sl=>sl.oninput=()=>{updateVals();render();});
})();
</script>


Dream Team Divers

Dream Team Divers is a boutique dive team led by an experienced PADI Instructor, offering personalized scuba adventures, specialty training, and eco-focused dive trips across Southeast Asia. Whether y