flclash-resolver.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>FlClash Macro Resolver</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#EEF2F7;color:#1A1A2E;font-family:'Roboto',sans-serif;padding:20px 16px 52px;min-height:100vh}
.wrap{max-width:680px;margin:0 auto}

.header{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.hicon{width:46px;height:46px;background:linear-gradient(145deg,#1565C0,#64B5F6);border-radius:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(21,101,192,.35);flex-shrink:0}
.hicon svg{width:26px;height:26px;fill:#fff}
.hsub{font-size:10px;font-weight:700;color:#1565C0;letter-spacing:.16em;margin-bottom:2px}
.htitle{font-size:23px;font-weight:700;color:#1A237E}

.card{background:#fff;border-radius:18px;box-shadow:0 2px 12px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.04);padding:20px;margin-bottom:16px}

.clock-flex{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.ck-label{font-size:10px;font-family:'Roboto Mono',monospace;color:#BDBDBD;letter-spacing:.08em;margin-bottom:4px}
.ck-val{font-family:'Roboto Mono',monospace;font-size:32px;font-weight:700;line-height:1}
.ck-red{color:#E53935}.ck-org{color:#F4511E}
.offset-badge{font-size:11px;font-weight:600;color:#1565C0;background:#E3F2FD;border-radius:12px;padding:4px 11px;display:none;align-self:center;margin-left:auto}
.auto-txt{font-size:10px;color:#BDBDBD;align-self:center;margin-left:auto;line-height:1.5;text-align:right}

.adj-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.adj-sep{width:1px;height:22px;background:#E0E0E0;margin:0 2px}
.chip{display:inline-flex;align-items:center;border-radius:22px;padding:8px 16px;font-size:13px;font-weight:500;cursor:pointer;font-family:'Roboto',sans-serif;border:none;transition:all .15s;-webkit-tap-highlight-color:transparent;user-select:none}
.chip:active{transform:scale(.96)}
.csub{background:#FCE4EC;color:#C62828}.csub:hover{background:#F8BBD0}
.cadd{background:#E8F5E9;color:#2E7D32}.cadd:hover{background:#C8E6C9}
.crst{background:#F5F5F5;color:#757575;font-size:12px;padding:7px 13px}.crst:hover{background:#EEEEEE}

.sect-label{font-size:10px;font-weight:700;color:#BDBDBD;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}

.upload-wrap{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ulabel{display:inline-flex;align-items:center;gap:7px;background:#F3E5F5;border:1.5px dashed #CE93D8;border-radius:11px;padding:9px 16px;font-size:12px;font-weight:500;color:#6A1B9A;cursor:pointer;transition:all .15s;flex-shrink:0}
.ulabel:hover{background:#E1BEE7;border-style:solid}
.ulabel svg{width:14px;height:14px;flex-shrink:0}
input[type="file"]{display:none}
.file-chip{font-size:11px;color:#616161;font-family:'Roboto Mono',monospace;background:#F5F5F5;padding:5px 12px;border-radius:20px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

textarea{width:100%;background:#FAFAFA;border:1.5px solid #EEEEEE;color:#212121;font-family:'Roboto Mono',monospace;font-size:12px;padding:14px;border-radius:11px;resize:vertical;outline:none;line-height:1.75;transition:border-color .2s,box-shadow .2s}
textarea:focus{border-color:#1976D2;box-shadow:0 0 0 3px rgba(25,118,210,.1)}
.out-ta{background:#F9FBE7;border-color:#E6EE9C;color:#33691E}
.out-ta:focus{border-color:#C0CA33;box-shadow:0 0 0 3px rgba(192,202,51,.1)}

.out-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.btn-row{display:flex;gap:8px}

.bcopy{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1.5px solid #E0E0E0;border-radius:22px;padding:7px 16px;font-size:12px;font-weight:500;color:#616161;cursor:pointer;font-family:'Roboto',sans-serif;transition:all .15s}
.bcopy:hover{background:#F5F5F5}
.bcopy.ok{background:#E8F5E9;border-color:#A5D6A7;color:#2E7D32}

.bdl{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#1565C0,#42A5F5);color:#fff;border-radius:22px;padding:8px 18px;font-size:12px;font-weight:600;text-decoration:none;font-family:'Roboto',sans-serif;transition:all .2s;box-shadow:0 3px 10px rgba(21,101,192,.3)}
.bdl:hover{box-shadow:0 5px 16px rgba(21,101,192,.4);transform:translateY(-1px)}
.bdl:active{transform:none}

@media(max-width:460px){.ck-val{font-size:26px}.clock-flex{gap:16px}.auto-txt{display:none}}
</style>
</head>
<body>
<div class="wrap">

  <div class="header">
    <div class="hicon">
      <svg viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>
    </div>
    <div>
      <div class="hsub">FLCLASH</div>
      <div class="htitle">Macro Resolver</div>
    </div>
  </div>

  <div class="card">
    <div class="clock-flex">
      <div>
        <div class="ck-label">[@TIME]</div>
        <div class="ck-val ck-red" id="ctime">--:--</div>
      </div>
      <div>
        <div class="ck-label" id="macroLabel">[@HH+3:dd+9]</div>
        <div class="ck-val ck-org" id="cbnet">--:--</div>
      </div>
      <span class="offset-badge" id="offsetBadge"></span>
      <span class="auto-txt">auto-refreshes<br>every 1 min</span>
    </div>
    <div class="adj-row">
      <button class="chip csub" onclick="adjustMin(-1)">−1 min</button>
      <div class="adj-sep"></div>
      <button class="chip cadd" onclick="adjustMin(+1)">+1 min</button>
      <button class="chip crst" id="resetBtn" onclick="resetOffset()" style="display:none">↺ Reset</button>
    </div>
  </div>

  <div class="card">
    <div class="sect-label">Raw Config</div>
    <div class="upload-wrap">
      <label class="ulabel" for="fileInput">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
          <polyline points="17 8 12 3 7 8"/>
          <line x1="12" y1="3" x2="12" y2="15"/>
        </svg>
        Upload .txt / .yaml
      </label>
      <input type="file" id="fileInput" accept=".txt,.yaml,.yml" onchange="loadFile(event)">
      <span class="file-chip" id="fileName">No file selected</span>
    </div>
    <textarea id="input" rows="10" placeholder="Or paste YAML / JSON with [@TIME] / [@HH+3] / [@HH+3:dd+9] / [@dd-1] macros here…" oninput="run()"></textarea>
  </div>

  <div class="card" id="outbox" style="display:none">
    <div class="out-head">
      <div class="sect-label" style="margin:0">Output</div>
      <div class="btn-row">
        <button class="bcopy" id="copybtn" onclick="doCopy()">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
          COPY
        </button>
        <a class="bdl" id="dlbtn" href="#" download="flclash-config.yaml">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          DOWNLOAD
        </a>
      </div>
    </div>
    <textarea class="out-ta" id="output" rows="14" readonly></textarea>
  </div>

</div>
<script>
let offset=0;
const pad=n=>String(n).padStart(2,'0');

function now(){
  const utc=Date.now()+offset*60000+(new Date().getTimezoneOffset()*60000);
  const bd=new Date(utc+6*3600000);
  return{hh:bd.getHours(),mm:bd.getMinutes(),dd:bd.getDate()};
}

// Supports any combo/order of HH, mm, dd tokens with optional +/- offset,
// joined by ':' inside [@ ... ]. e.g. [@HH+1] [@dd-1] [@HH+3:dd+9] [@mm+15:HH+1]
const MACRO_RE=/\[@((?:HH|mm|dd)(?:[+-]\d+)?(?::(?:HH|mm|dd)(?:[+-]\d+)?)*)\]/g;

function resolveMacro(inner){
  const{hh,mm,dd}=now();
  return inner.split(':').map(tok=>{
    const m=tok.match(/^(HH|mm|dd)([+-]\d+)?$/);
    const unit=m[1],off=m[2]?parseInt(m[2]):0;
    if(unit==='HH')return pad(((hh+off)%24+24)%24);
    if(unit==='mm')return pad(((mm+off)%60+60)%60);
    return dd+off;
  }).join(':');
}

function resolve(raw){
  const{hh,mm}=now();
  return raw
    .replace(/\[@TIME\]/g,`${pad(hh)}:${pad(mm)}`)
    .replace(MACRO_RE,(_,inner)=>resolveMacro(inner));
}

function updateClock(){
  const{hh,mm,dd}=now();
  document.getElementById('ctime').textContent=`${pad(hh)}:${pad(mm)}`;
  document.getElementById('cbnet').textContent=resolveMacro('HH+3:dd+9');
}

function run(){
  const raw=document.getElementById('input').value;
  if(!raw.trim()){document.getElementById('outbox').style.display='none';return;}
  const out=resolve(raw);
  document.getElementById('output').value=out;
  document.getElementById('outbox').style.display='block';
  document.getElementById('dlbtn').href='data:text/yaml;charset=utf-8,'+encodeURIComponent(out);
}

function adjustMin(d){
  offset+=d;
  const badge=document.getElementById('offsetBadge');
  const rst=document.getElementById('resetBtn');
  if(offset!==0){
    badge.style.display='inline';
    badge.textContent=(offset>0?'+':'')+offset+' min';
    rst.style.display='';
  }else{
    badge.style.display='none';
    rst.style.display='none';
  }
  updateClock();run();
}

function resetOffset(){
  offset=0;
  document.getElementById('offsetBadge').style.display='none';
  document.getElementById('resetBtn').style.display='none';
  updateClock();run();
}

function loadFile(e){
  const file=e.target.files[0];
  if(!file)return;
  document.getElementById('fileName').textContent=file.name;
  const r=new FileReader();
  r.onload=ev=>{document.getElementById('input').value=ev.target.result;run();};
  r.readAsText(file);
}

const COPY_SVG=`<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>`;
const CHECK_SVG=`<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>`;

function doCopy(){
  const text=document.getElementById('output').value;
  const b=document.getElementById('copybtn');
  const done=()=>{
    b.innerHTML=CHECK_SVG+' COPIED';b.classList.add('ok');
    setTimeout(()=>{b.innerHTML=COPY_SVG+' COPY';b.classList.remove('ok');},1500);
  };
  if(navigator.clipboard){navigator.clipboard.writeText(text).then(done);}
  else{const ta=document.getElementById('output');ta.select();document.execCommand('copy');done();}
}

updateClock();run();
setInterval(()=>{updateClock();run();},60000);
</script>
</body>
</html>