Toolvana: production-ready media tools platform (CodeIgniter 4)
- 134-tool registry with programmatic SEO (unique titles/H1/descriptions, JSON-LD graphs, sitemap index, canonical 301 enforcement via required filter) - DB-backed job queue (SKIP LOCKED) with drivers: Ffmpeg, Images (GD), Pdf (qpdf/gs/poppler), Youtube (thumbnails), Qr (server-side PNG) - Security: SSRF guard, MIME validation, rate limits, API-key auth, bcrypt admin login, security headers - Admin panel: dashboard, tools/categories/guides CRUD, SEO audit, analytics, job inspector with retry, system health, feature flags - Docker deployment (nginx + web/api FPM pools + scalable workers), PHPUnit suite (19 tests / 1139 assertions), PWA manifest + service worker
This commit is contained in:
deepseek
@@ -0,0 +1,49 @@
|
||||
# Disable directory browsing
|
||||
Options -Indexes
|
||||
|
||||
# ----------------------------------------------------------------------
|
||||
# Rewrite engine
|
||||
# ----------------------------------------------------------------------
|
||||
|
||||
# Turning on the rewrite engine is necessary for the following rules and features.
|
||||
# FollowSymLinks must be enabled for this to work.
|
||||
<IfModule mod_rewrite.c>
|
||||
Options +FollowSymlinks
|
||||
RewriteEngine On
|
||||
|
||||
# If you installed CodeIgniter in a subfolder, you will need to
|
||||
# change the following line to match the subfolder you need.
|
||||
# http://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase
|
||||
# RewriteBase /
|
||||
|
||||
# Redirect Trailing Slashes...
|
||||
RewriteCond %{REQUEST_FILENAME} !-d
|
||||
RewriteCond %{REQUEST_URI} (.+)/$
|
||||
RewriteRule ^ %1 [L,R=301]
|
||||
|
||||
# Rewrite "www.example.com -> example.com"
|
||||
RewriteCond %{HTTPS} !=on
|
||||
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
|
||||
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
|
||||
|
||||
# Checks to see if the user is attempting to access a valid file,
|
||||
# such as an image or css document, if this isn't true it sends the
|
||||
# request to the front controller, index.php
|
||||
RewriteCond %{REQUEST_FILENAME} !-f
|
||||
RewriteCond %{REQUEST_FILENAME} !-d
|
||||
RewriteRule ^([\s\S]*)$ index.php/$1 [L,NC,QSA]
|
||||
|
||||
# Ensure Authorization header is passed along
|
||||
RewriteCond %{HTTP:Authorization} .
|
||||
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
|
||||
</IfModule>
|
||||
|
||||
<IfModule !mod_rewrite.c>
|
||||
# If we don't have mod_rewrite installed, all 404's
|
||||
# can be sent to index.php, and everything works as normal.
|
||||
ErrorDocument 404 index.php
|
||||
</IfModule>
|
||||
|
||||
# Disable server signature start
|
||||
ServerSignature Off
|
||||
# Disable server signature end
|
||||
@@ -0,0 +1,196 @@
|
||||
/* ==========================================================================
|
||||
Toolvana design system — single stylesheet, no framework, no webfonts.
|
||||
System font stack keeps LCP fast and CLS at zero.
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
--brand-50:#f5f3ff; --brand-100:#ede9fe; --brand-500:#7c3aed; --brand-600:#6d28d9;
|
||||
--brand-700:#5b21b6; --brand-900:#2e1065;
|
||||
--ink-900:#111827; --ink-700:#374151; --ink-500:#6b7280; --ink-300:#d1d5db;
|
||||
--paper:#ffffff; --bg:#fafafa; --ok:#059669; --err:#dc2626; --warn:#d97706;
|
||||
--radius:14px; --radius-sm:9px;
|
||||
--shadow-sm:0 1px 2px rgb(17 24 39 / .06),0 1px 3px rgb(17 24 39 / .08);
|
||||
--shadow-md:0 4px 12px rgb(17 24 39 / .10);
|
||||
--maxw:1080px;
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
* { box-sizing:border-box; }
|
||||
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
|
||||
body {
|
||||
margin:0; background:var(--bg); color:var(--ink-900);
|
||||
font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
||||
line-height:1.6; text-rendering:optimizeLegibility;
|
||||
}
|
||||
img,svg,video { max-width:100%; height:auto; }
|
||||
|
||||
.icon { width:1.25em; height:1.25em; vertical-align:-.22em; flex:none; }
|
||||
|
||||
a { color:var(--brand-600); text-decoration:none; }
|
||||
a:hover { text-decoration:underline; }
|
||||
|
||||
:focus-visible { outline:3px solid var(--brand-500); outline-offset:2px; border-radius:4px; }
|
||||
|
||||
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:.6rem 1rem;z-index:99;border-radius:0 0 var(--radius-sm) 0}
|
||||
.skip-link:focus{left:0}
|
||||
|
||||
/* ---------- header ---------- */
|
||||
.site-header{background:var(--paper);border-bottom:1px solid #eee;position:sticky;top:0;z-index:40}
|
||||
.site-header .inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:1.2rem;padding:.65rem 1.25rem}
|
||||
.logo{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.18rem;color:var(--ink-900);letter-spacing:-.02em}
|
||||
.logo:hover{text-decoration:none}
|
||||
.logo-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand-600),#a855f7);display:inline-flex;align-items:center;justify-content:center;color:#fff}
|
||||
.main-nav{margin-left:auto;display:flex;align-items:center;gap:1rem}
|
||||
.main-nav a{color:var(--ink-700);font-weight:550;font-size:.95rem;padding:.35rem .15rem}
|
||||
.nav-toggle{display:none;margin-left:auto;background:none;border:0;color:var(--ink-700);padding:.4rem;cursor:pointer}
|
||||
|
||||
/* ---------- hero ---------- */
|
||||
.hero{background:linear-gradient(160deg,var(--brand-700) 0%,#7c3aed 60%,#9333ea 100%);color:#fff;padding:3.4rem 1.25rem 4.2rem;text-align:center}
|
||||
.hero h1{font-size:clamp(1.8rem,4.5vw,2.9rem);line-height:1.15;margin:.4rem auto 0;font-weight:850;letter-spacing:-.03em;max-width:820px}
|
||||
.hero .tagline{font-size:clamp(1rem,2vw,1.2rem);opacity:.93;max-width:600px;margin:1rem auto 1.8rem}
|
||||
.hero-search{display:flex;max-width:560px;margin:0 auto;background:#fff;border-radius:999px;padding:.3rem;box-shadow:var(--shadow-md)}
|
||||
.hero-search input[type=search]{flex:1;border:0;font-size:1.02rem;padding:.72rem .5rem .72rem 1.15rem;min-width:0;background:none;color:var(--ink-900)}
|
||||
.hero-search input:focus{outline:none}
|
||||
.hero-search button{border:0;background:var(--ink-900);color:#fff;border-radius:999px;padding:.68rem 1.5rem;font-weight:650;cursor:pointer;font-size:.97rem}
|
||||
.hero-stats{margin-top:1.6rem;font-size:.92rem;opacity:.85}
|
||||
|
||||
/* ---------- layout blocks ---------- */
|
||||
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}
|
||||
section.block{padding:2.6rem 0}
|
||||
section.block.tight{padding:1.6rem 0}
|
||||
h2.section-title{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;margin:0 0 1.2rem;display:flex;align-items:center;gap:.6rem}
|
||||
h2.section-title .see-all{margin-left:auto;font-size:.9rem;font-weight:600}
|
||||
|
||||
/* ---------- cards ---------- */
|
||||
.grid{display:grid;gap:1rem}
|
||||
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
|
||||
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
|
||||
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
|
||||
|
||||
.card{background:var(--paper);border-radius:var(--radius);padding:1.15rem 1.2rem;box-shadow:var(--shadow-sm);transition:transform .12s ease,box-shadow .12s ease;display:block;color:inherit}
|
||||
a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);text-decoration:none}
|
||||
.card h3,.card h2{margin:0 0 .3rem;font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
|
||||
.card p{margin:0;color:var(--ink-500);font-size:.88rem;line-height:1.5}
|
||||
.card .icon-wrap{width:42px;height:42px;border-radius:11px;background:var(--brand-50);color:var(--brand-600);display:flex;align-items:center;justify-content:center;margin-bottom:.75rem}
|
||||
.card .icon-wrap .icon{width:22px;height:22px}
|
||||
.badge{display:inline-block;font-size:.68rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;background:var(--brand-50);color:var(--brand-700);padding:.18rem .55rem;border-radius:999px}
|
||||
.meta-line{font-size:.78rem;color:var(--ink-500);margin-top:.55rem}
|
||||
|
||||
.cat-card{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
|
||||
.cat-card .count{font-size:.8rem;color:var(--ink-500)}
|
||||
|
||||
/* ---------- tool page ---------- */
|
||||
.tool-head{margin:2.2rem 0 1rem}
|
||||
.tool-head h1{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:830;letter-spacing:-.03em;margin:.35rem 0 .4rem;line-height:1.18}
|
||||
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:1.4rem 0 0;padding:0;font-size:.85rem;color:var(--ink-500)}
|
||||
.breadcrumbs li+li::before{content:"→";margin-right:.45rem;color:var(--ink-300)}
|
||||
.breadcrumbs a{color:var(--ink-500)}
|
||||
.breadcrumbs [aria-current]{color:var(--ink-900);font-weight:600}
|
||||
|
||||
.tool-panel{background:var(--paper);border-radius:18px;box-shadow:var(--shadow-sm);padding:1.8rem;margin-top:1.2rem}
|
||||
.url-form{display:flex;flex-direction:column;gap:.85rem}
|
||||
.url-row{display:flex;gap:.7rem}
|
||||
.input-lg{flex:1;border:2px solid var(--ink-300);border-radius:12px;padding:.95rem 1.05rem;font-size:1.04rem;min-width:0;transition:border-color .15s}
|
||||
.input-lg:focus{outline:none;border-color:var(--brand-500)}
|
||||
.btn-primary{border:0;background:linear-gradient(135deg,var(--brand-600),#9333ea);color:#fff;font-size:1.05rem;font-weight:700;padding:.95rem 2rem;border-radius:12px;cursor:pointer;min-height:54px;white-space:nowrap}
|
||||
.btn-primary:hover{filter:brightness(1.06)}
|
||||
.btn-primary[disabled]{opacity:.6;cursor:not-allowed}
|
||||
.hint{font-size:.83rem;color:var(--ink-500)}
|
||||
|
||||
.dropzone{border:2.5px dashed var(--ink-300);border-radius:16px;padding:2.6rem 1.4rem;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:#fcfcff}
|
||||
.dropzone:hover,.dropzone.dragover{border-color:var(--brand-500);background:var(--brand-50)}
|
||||
.dropzone .icon{width:38px;height:38px;color:var(--brand-600)}
|
||||
.dropzone strong{display:block;font-size:1.05rem;margin:.6rem 0 .2rem}
|
||||
.dropzone span{font-size:.86rem;color:var(--ink-500)}
|
||||
.file-chip{display:flex;align-items:center;gap:.75rem;background:var(--brand-50);border-radius:11px;padding:.7rem .9rem;font-size:.9rem}
|
||||
.file-chip .name{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.file-chip button{margin-left:auto;border:0;background:none;color:var(--err);cursor:pointer;font-size:.82rem;font-weight:650}
|
||||
|
||||
.status-flow{margin-top:1rem}
|
||||
.progress-track{height:9px;border-radius:999px;background:#eceefc;overflow:hidden}
|
||||
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--brand-500),#a855f7);border-radius:999px;transition:width .35s ease}
|
||||
.stages{list-style:none;display:flex;justify-content:space-between;padding:0;margin:.7rem 0 0;font-size:.76rem;color:var(--ink-500)}
|
||||
.stages li.done{color:var(--ok);font-weight:650}
|
||||
.stages li.active{color:var(--brand-700);font-weight:700}
|
||||
|
||||
.result-panel{margin-top:1.1rem;border:1px solid #e5e7eb;border-radius:14px;padding:1.1rem;display:none}
|
||||
.result-panel.show{display:block}
|
||||
.result-meta{display:grid;grid-template-columns:auto 1fr auto auto;gap:.4rem 1.1rem;font-size:.92rem;align-items:center}
|
||||
.result-actions{margin-top:.9rem;display:flex;gap:.7rem;flex-wrap:wrap}
|
||||
.notice{border-left:4px solid var(--warn);background:#fffbeb;padding:.8rem 1rem;border-radius:0 10px 10px 0;font-size:.92rem;margin-top:1rem}
|
||||
.notice.error{border-color:var(--err);background:#fef2f2}
|
||||
|
||||
details.advanced{margin-top:1rem;border:1px solid #e8e8f0;border-radius:11px;padding:.75rem 1rem}
|
||||
details.advanced summary{cursor:pointer;font-weight:650;font-size:.92rem;color:var(--ink-700)}
|
||||
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem;padding-top:.9rem}
|
||||
.opt-grid label{display:block;font-size:.8rem;font-weight:650;color:var(--ink-700);margin-bottom:.25rem}
|
||||
.opt-grid select,.opt-grid input[type=number],.opt-grid input[type=text]{width:100%;border:1.5px solid var(--ink-300);border-radius:9px;padding:.5rem .6rem;font-size:.92rem}
|
||||
|
||||
.faq details{background:var(--paper);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);margin-bottom:.65rem}
|
||||
.faq summary{cursor:pointer;font-weight:650;padding:.9rem 1.1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
|
||||
.faq summary::-webkit-details-marker{display:none}
|
||||
.faq summary::after{content:"+";font-size:1.3rem;color:var(--brand-600);line-height:1}
|
||||
.faq details[open] summary::after{content:"–"}
|
||||
.faq .answer{padding:0 1.1rem .95rem;color:var(--ink-700);font-size:.94rem}
|
||||
|
||||
.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
|
||||
.steps li{counter-increment:step;background:var(--paper);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:1rem 1.1rem 1rem 3.4rem;position:relative;font-size:.94rem}
|
||||
.steps li strong{display:block}
|
||||
.steps li::before{content:counter(step);position:absolute;left:.95rem;top:1rem;width:26px;height:26px;border-radius:50%;background:var(--brand-600);color:#fff;font-weight:750;display:flex;align-items:center;justify-content:center;font-size:.85rem}
|
||||
|
||||
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0}
|
||||
.chip{background:var(--paper);border:1px solid #e5e7eb;border-radius:999px;padding:.28rem .8rem;font-size:.84rem;font-weight:600;color:var(--ink-700)}
|
||||
.chip:hover{border-color:var(--brand-500);color:var(--brand-600);text-decoration:none}
|
||||
|
||||
.prose{max-width:74ch}
|
||||
.prose h2{font-size:1.3rem;margin:2rem 0 .7rem;letter-spacing:-.02em}
|
||||
.prose p,.prose ul,.prose ol{color:var(--ink-700);font-size:.98rem}
|
||||
.prose table{border-collapse:collapse;width:100%;font-size:.9rem;margin:1rem 0}
|
||||
.prose th,.prose td{border:1px solid #e5e7eb;padding:.5rem .7rem;text-align:left}
|
||||
.prose th{background:var(--brand-50)}
|
||||
.prose code{background:#f3f0ff;padding:.1rem .35rem;border-radius:5px;font-size:.88em}
|
||||
|
||||
/* ---------- utility/text tools ---------- */
|
||||
.io-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
|
||||
textarea.tool-area{width:100%;min-height:190px;border:2px solid var(--ink-300);border-radius:12px;padding:.9rem;font:inherit;font-size:.95rem;resize:vertical}
|
||||
textarea.tool-area:focus{outline:none;border-color:var(--brand-500)}
|
||||
|
||||
/* ---------- footer ---------- */
|
||||
.site-footer{background:var(--paper);border-top:1px solid #eee;margin-top:3rem;padding:2.4rem 0 2rem;font-size:.9rem}
|
||||
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
|
||||
.footer-cols h4{margin:.2rem 0 .7rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-500)}
|
||||
.footer-cols ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
|
||||
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--ink-500);font-size:.82rem;margin-top:2rem;padding-top:1.2rem;border-top:1px solid #f0f0f0}
|
||||
|
||||
/* ---------- errors / misc ---------- */
|
||||
.center-page{max-width:640px;margin:4rem auto;padding:0 1.25rem;text-align:left}
|
||||
.error-hero{text-align:center;padding:3.5rem 0 1rem}
|
||||
.error-hero code.big{font-size:3.4rem;font-weight:850;color:var(--brand-200,#ddd6fe);letter-spacing:-.05em}
|
||||
|
||||
@media (max-width:900px){
|
||||
.grid.cols-4{grid-template-columns:repeat(2,1fr)}
|
||||
.grid.cols-3{grid-template-columns:repeat(2,1fr)}
|
||||
.footer-cols{grid-template-columns:1fr 1fr}
|
||||
.io-grid{grid-template-columns:1fr}
|
||||
}
|
||||
@media (max-width:620px){
|
||||
.main-nav{
|
||||
display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
|
||||
flex-direction:column;align-items:flex-start;padding:1rem 1.4rem;border-bottom:1px solid #eee;gap:.8rem;
|
||||
box-shadow:var(--shadow-md)
|
||||
}
|
||||
.main-nav.open{display:flex}
|
||||
.nav-toggle{display:inline-flex}
|
||||
.url-row{flex-direction:column}
|
||||
.btn-primary{width:100%}
|
||||
.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
|
||||
.hero-search{flex-direction:row}
|
||||
.result-meta{grid-template-columns:1fr auto}
|
||||
.stages{flex-wrap:wrap;gap:.3rem;justify-content:flex-start}
|
||||
.tool-panel{padding:1.2rem}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion:no-preference){
|
||||
.progress-fill{animation:pulse 1.4s ease-in-out infinite alternate}
|
||||
@keyframes pulse{from{opacity:1}to{opacity:.75}}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
/* Toolvana global JS — tiny, dependency-free. */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// mobile nav
|
||||
var toggle = document.getElementById('nav-toggle');
|
||||
var nav = document.getElementById('main-nav');
|
||||
if (toggle && nav) {
|
||||
toggle.addEventListener('click', function () {
|
||||
var open = nav.classList.toggle('open');
|
||||
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
});
|
||||
}
|
||||
|
||||
// search suggest (progressive enhancement only)
|
||||
var input = document.querySelector('[data-suggest]');
|
||||
if (input && 'fetch' in window) {
|
||||
var box = null;
|
||||
function closeBox() { if (box) { box.remove(); box = null; } }
|
||||
input.addEventListener('input', function () {
|
||||
var q = input.value.trim();
|
||||
if (q.length < 2) { closeBox(); return; }
|
||||
fetch('/api/suggest?q=' + encodeURIComponent(q))
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (data) {
|
||||
closeBox();
|
||||
if (!data.results || !data.results.length) return;
|
||||
box = document.createElement('div');
|
||||
box.className = 'suggest';
|
||||
box.setAttribute('role', 'listbox');
|
||||
data.results.forEach(function (r) {
|
||||
var a = document.createElement('a');
|
||||
a.href = r.url;
|
||||
a.textContent = r.name;
|
||||
a.setAttribute('role', 'option');
|
||||
a.style.cssText = 'display:block;padding:.55rem 1.1rem;color:var(--ink-900);font-size:.95rem;text-decoration:none';
|
||||
a.onmouseenter = function () { a.style.background = 'var(--brand-50)'; };
|
||||
a.onmouseleave = function () { a.style.background = 'none'; };
|
||||
box.appendChild(a);
|
||||
});
|
||||
Object.assign(box.style, {
|
||||
position: 'absolute', top: '100%', left: 0, right: 0, background: '#fff',
|
||||
borderRadius: '16px', boxShadow: 'var(--shadow-md)', zIndex: 60, overflow: 'hidden'
|
||||
});
|
||||
input.parentElement.style.position = 'relative';
|
||||
input.parentElement.appendChild(box);
|
||||
}).catch(function () {});
|
||||
});
|
||||
document.addEventListener('click', function (e) {
|
||||
if (box && !box.contains(e.target) && e.target !== input) closeBox();
|
||||
});
|
||||
}
|
||||
|
||||
// service worker (PWA shell caching)
|
||||
if ('serviceWorker' in navigator && location.protocol === 'https:') {
|
||||
navigator.serviceWorker.register('/service-worker.js').catch(function () {});
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,214 @@
|
||||
/* Client-side text tools — everything computed locally, zero requests. */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var form = document.getElementById('tool-form');
|
||||
if (!form) return;
|
||||
var op = form.dataset.client;
|
||||
var input = document.getElementById('tool-input');
|
||||
var out = document.getElementById('client-result');
|
||||
|
||||
function render(text, extra) {
|
||||
out.innerHTML = '';
|
||||
var pre = document.createElement('textarea');
|
||||
pre.className = 'tool-area';
|
||||
pre.readOnly = true;
|
||||
pre.value = text;
|
||||
out.appendChild(pre);
|
||||
if (extra) {
|
||||
var p = document.createElement('p');
|
||||
p.className = 'hint';
|
||||
p.textContent = extra;
|
||||
out.appendChild(p);
|
||||
}
|
||||
var copy = document.createElement('button');
|
||||
copy.className = 'btn-primary';
|
||||
copy.type = 'button';
|
||||
copy.style.cssText = 'margin-top:.7rem;padding:.6rem 1.4rem;font-size:.92rem';
|
||||
copy.textContent = 'Copy result';
|
||||
copy.addEventListener('click', function () {
|
||||
navigator.clipboard.writeText(pre.value).then(function () { copy.textContent = 'Copied!'; setTimeout(function(){copy.textContent='Copy result';},1500); });
|
||||
});
|
||||
out.appendChild(copy);
|
||||
out.classList.add('show');
|
||||
}
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
var v = input.value;
|
||||
|
||||
// Server-rendered tools go through the job queue like uploads.
|
||||
if (op === 'qr_generate') {
|
||||
runQrJob(v);
|
||||
return;
|
||||
}
|
||||
|
||||
switch (op) {
|
||||
case 'hash_text': {
|
||||
Promise.all(['SHA-256', 'SHA-512', 'SHA-1'].map(function (alg) {
|
||||
return crypto.subtle.digest(alg, new TextEncoder().encode(v)).then(function (buf) {
|
||||
return [alg, Array.from(new Uint8Array(buf)).map(function (b) { return b.toString(16).padStart(2, '0'); }).join('')];
|
||||
});
|
||||
})).then(function (pairs) {
|
||||
var md5 = sparklessMd5(v);
|
||||
render(pairs.map(function (p) { return p[0] + '\n' + p[1]; }).join('\n\n') + '\n\nMD5\n' + md5);
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'uuid_gen': {
|
||||
var lines = [];
|
||||
for (var i = 0; i < 10; i++) lines.push(crypto.randomUUID());
|
||||
render(lines.join('\n'));
|
||||
break;
|
||||
}
|
||||
case 'json_format': {
|
||||
try {
|
||||
var obj = JSON.parse(v);
|
||||
render(JSON.stringify(obj, null, 2));
|
||||
} catch (err) {
|
||||
render('// JSON error: ' + err.message + '\n\n' + String(err).split('\n')[1] || '');
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'url_encode':
|
||||
try { render(encodeURIComponent(v)); } catch (e) { render(''); }
|
||||
break;
|
||||
case 'url_decode':
|
||||
try { render(decodeURIComponent(v.replace(/\+/g, ' '))); } catch (err) { showErrorBox('Invalid percent-encoding.'); }
|
||||
break;
|
||||
case 'timestamp_convert': {
|
||||
var n = Number(v.trim());
|
||||
var ms = !isNaN(n) && String(Math.trunc(n)).length <= 13 ? n : Date.parse(v);
|
||||
if (isNaN(ms)) { showErrorBox('Could not parse that timestamp.'); break; }
|
||||
var d = new Date(ms < 1e12 ? ms * 1000 : ms);
|
||||
render(
|
||||
'ISO 8601: ' + d.toISOString() + '\nUTC: ' + d.toUTCString() +
|
||||
'\nLocal: ' + d.toLocaleString() + '\nUnix seconds: ' + Math.floor(d.getTime() / 1000)
|
||||
);
|
||||
break;
|
||||
}
|
||||
case 'color_convert': {
|
||||
var hex = v.trim().replace('#', '');
|
||||
if (!/^[0-9a-f]{6}$/i.test(hex)) { showErrorBox('Enter a hex color like #7c3aed'); break; }
|
||||
var r = parseInt(hex.slice(0, 2), 16), g = parseInt(hex.slice(2, 4), 16), b = parseInt(hex.slice(4, 6), 16);
|
||||
var hsl = rgbToHsl(r, g, b);
|
||||
render('HEX: #' + hex.toUpperCase() + '\nRGB: rgb(' + r + ', ' + g + ', ' + b + ')\nHSL: hsl(' + hsl[0] + ', ' + hsl[1] + '%, ' + hsl[2] + '%)');
|
||||
break;
|
||||
}
|
||||
default:
|
||||
render('This tool runs in your browser. Output appears here.');
|
||||
}
|
||||
});
|
||||
|
||||
function showErrorBox(msg) {
|
||||
out.innerHTML = '<p class="notice error">' + msg + '</p>';
|
||||
out.classList.add('show');
|
||||
}
|
||||
|
||||
function rgbToHsl(r, g, b) {
|
||||
r /= 255; g /= 255; b /= 255;
|
||||
var max = Math.max(r, g, b), min = Math.min(r, g, b), h = 0, s = 0, l = (max + min) / 2;
|
||||
if (max !== min) {
|
||||
var dd = max - min;
|
||||
s = l > 0.5 ? dd / (2 - max - min) : dd / (max + min);
|
||||
h = max === r ? ((g - b) / dd + (g < b ? 6 : 0)) : max === g ? (b - r) / dd + 2 : (r - g) / dd + 4;
|
||||
h *= 60;
|
||||
}
|
||||
return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
|
||||
}
|
||||
|
||||
/* compact MD5 implementation (public-domain algorithm, RFC 1321) */
|
||||
function sparklessMd5(str) {
|
||||
function rl(n, c) { return (n << c) | (n >>> (32 - c)); }
|
||||
function add(a, b) { return (((a >> 16) + (b >> 16) + (((a & 65535) + (b & 65535)) >> 16)) << 16) | (((a & 65535) + (b & 65535)) & 65535); }
|
||||
function ff(a, b, c, d, x, s, t) { return add(rl(add(add(a, (b & c) | (~b & d)), add(x, t)), s), b); }
|
||||
function gg(a, b, c, d, x, s, t) { return add(rl(add(add(a, (b & d) | (c & ~d)), add(x, t)), s), b); }
|
||||
function hh(a, b, c, d, x, s, t) { return add(rl(add(add(a, b ^ c ^ d), add(x, t)), s), b); }
|
||||
function ii(a, b, c, d, x, s, t) { return add(rl(add(add(a, c ^ (b | ~d)), add(x, t)), s), b); }
|
||||
|
||||
var utf8 = unescape(encodeURIComponent(str));
|
||||
var n = utf8.length;
|
||||
var words = [];
|
||||
for (var i = 0; i < n; i++) words[i >> 2] = (words[i >> 2] || 0) | (utf8.charCodeAt(i) << ((i % 4) << 3));
|
||||
words[n >> 2] = (words[n >> 2] || 0) | (0x80 << ((n % 4) << 3));
|
||||
var len = (((n + 8) >> 6) + 1) * 16;
|
||||
for (i = n + 8; i < len; i++) words[i] = words[i] || 0;
|
||||
words[len - 2] = n * 8;
|
||||
|
||||
var a = 1732584193, b = -271733879, c = -1732584194, d = 271733878;
|
||||
for (i = 0; i < len; i += 16) {
|
||||
var oa = a, ob = b, oc = c, od = d;
|
||||
a=ff(a,b,c,d,words[i],7,-680876936); d=ff(d,a,b,c,words[i+1],12,-389564586); c=ff(c,d,a,b,words[i+2],17,606105819); b=ff(b,c,d,a,words[i+3],22,-1044525330);
|
||||
a=ff(a,b,c,d,words[i+4],7,-176418897); d=ff(d,a,b,c,words[i+5],12,1200080426); c=ff(c,d,a,b,words[i+6],17,-1473231341); b=ff(b,c,d,a,words[i+7],22,-45705983);
|
||||
a=ff(a,b,c,d,words[i+8],7,1770035416); d=ff(d,a,b,c,words[i+9],12,-1958414417); c=ff(c,d,a,b,words[i+10],17,-42063); b=ff(b,c,d,a,words[i+11],22,-1990404162);
|
||||
a=ff(a,b,c,d,words[i+12],7,1804603682); d=ff(d,a,b,c,words[i+13],12,-40341101); c=ff(c,d,a,b,words[i+14],17,-1502002290); b=ff(b,c,d,a,words[i+15],22,1236535329);
|
||||
a=gg(a,b,c,d,words[i+1],5,-165796510); d=gg(d,a,b,c,words[i+6],9,-1069501632); c=gg(c,d,a,b,words[i+11],14,643717713); b=gg(b,c,d,a,words[i],20,-373897302);
|
||||
a=gg(a,b,c,d,words[i+5],5,-701558691); d=gg(d,a,b,c,words[i+10],9,38016083); c=gg(c,d,a,b,words[i+15],14,-660478335); b=gg(b,c,d,a,words[i+4],20,-405537848);
|
||||
a=gg(a,b,c,d,words[i+9],5,568446438); d=gg(d,a,b,c,words[i+14],9,-1019803690); c=gg(c,d,a,b,words[i+3],14,-187363961); b=gg(b,c,d,a,words[i+8],20,1163531501);
|
||||
a=gg(a,b,c,d,words[i+13],5,-1444681467); d=gg(d,a,b,c,words[i+2],9,-51403784); c=gg(c,d,a,b,words[i+7],14,1735328473); b=gg(b,c,d,a,words[i+12],20,-1926607734);
|
||||
a=hh(a,b,c,d,words[i+5],4,-378558); d=hh(d,a,b,c,words[i+8],11,-2022574463); c=hh(c,d,a,b,words[i+11],16,1839030562); b=hh(b,c,d,a,words[i+14],23,-35309556);
|
||||
a=hh(a,b,c,d,words[i+1],4,-1530992060); d=hh(d,a,b,c,words[i+4],11,1272893353); c=hh(c,d,a,b,words[i+7],16,-155497632); b=hh(b,c,d,a,words[i+10],23,-1094730640);
|
||||
a=hh(a,b,c,d,words[i+13],4,681279174); d=hh(d,a,b,c,words[i],11,-358537222); c=hh(c,d,a,b,words[i+3],16,-722521979); b=hh(b,c,d,a,words[i+6],23,76029189);
|
||||
a=hh(a,b,c,d,words[i+9],4,-640364487); d=hh(d,a,b,c,words[i+12],11,-421815835); c=hh(c,d,a,b,words[i+15],16,530742520); b=hh(b,c,d,a,words[i+2],23,-995338651);
|
||||
a=ii(a,b,c,d,words[i],6,-198630844); d=ii(d,a,b,c,words[i+7],10,1126891415); c=ii(c,d,a,b,words[i+14],15,-1416354905); b=ii(b,c,d,a,words[i+5],21,-57434055);
|
||||
a=ii(a,b,c,d,words[i+12],6,1700485571); d=ii(d,a,b,c,words[i+3],10,-1894986606); c=ii(c,d,a,b,words[i+10],15,-1051523); b=ii(b,c,d,a,words[i+1],21,-2054922799);
|
||||
a=ii(a,b,c,d,words[i+8],6,1873313359); d=ii(d,a,b,c,words[i+15],10,-30611744); c=ii(c,d,a,b,words[i+6],15,-1560198380); b=ii(b,c,d,a,words[i+13],21,1309151649);
|
||||
a=ii(a,b,c,d,words[i+4],6,-145523070); d=ii(d,a,b,c,words[i+11],10,-1120210379); c=ii(c,d,a,b,words[i+2],15,718787259); b=ii(b,c,d,a,words[i+9],21,-343485551);
|
||||
a=add(a,oa); b=add(b,ob); c=add(c,oc); d=add(d,od);
|
||||
}
|
||||
function hex(num) {
|
||||
var s = '';
|
||||
for (var j = 0; j < 4; j++) s += ('0' + ((num >> (j * 8)) & 255).toString(16)).slice(-2);
|
||||
return s;
|
||||
}
|
||||
return hex(a) + hex(b) + hex(c) + hex(d);
|
||||
}
|
||||
/* QR generator: submit to the processing queue, poll, show PNG. */
|
||||
function runQrJob(content) {
|
||||
if (!content.trim()) { return; }
|
||||
var sizeSel = document.getElementById('qr-size');
|
||||
var lvlSel = document.getElementById('qr-level');
|
||||
out.innerHTML = '<p class="hint">Generating…</p>';
|
||||
out.classList.add('show');
|
||||
|
||||
fetch('/jobs/start', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
tool: 'qr-code-generator',
|
||||
content: content,
|
||||
size: sizeSel ? parseInt(sizeSel.value, 10) : 300,
|
||||
level: lvlSel ? lvlSel.value : 'M'
|
||||
})
|
||||
}).then(function (r) { return r.json(); }).then(function (data) {
|
||||
if (!data.ok) { throw new Error(data.error || 'Request failed'); }
|
||||
return pollJob(data.job_id);
|
||||
}).then(function (job) {
|
||||
if (job.status !== 'completed') { throw new Error(job.error || 'Generation failed'); }
|
||||
out.innerHTML = '';
|
||||
var img = document.createElement('img');
|
||||
img.src = '/preview/' + job.id + '.png';
|
||||
img.alt = 'QR code';
|
||||
img.width = 280; img.height = 280;
|
||||
out.appendChild(img);
|
||||
var dl = document.createElement('a');
|
||||
dl.className = 'btn-primary';
|
||||
dl.style.cssText = 'display:inline-block;margin-top:.8rem;padding:.6rem 1.4rem;font-size:.92rem;text-decoration:none';
|
||||
dl.href = '/download/' + job.id;
|
||||
dl.textContent = 'Download PNG';
|
||||
out.appendChild(dl);
|
||||
}).catch(function (err) {
|
||||
out.innerHTML = '<p class="notice error"></p>';
|
||||
out.querySelector('.notice').textContent = err.message;
|
||||
});
|
||||
}
|
||||
|
||||
function pollJob(id) {
|
||||
return fetch('/api/jobs/' + id).then(function (r) { return r.json(); }).then(function (d) {
|
||||
if (d.status === 'queued' || d.status === 'processing') {
|
||||
return new Promise(function (resolve) { setTimeout(resolve, 700); }).then(function () { return pollJob(id); });
|
||||
}
|
||||
return d;
|
||||
});
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,194 @@
|
||||
/* Upload-tool flow: dropzone → upload → job → poll → download. */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var panel = document.getElementById('tool-panel');
|
||||
if (!panel) return;
|
||||
var slug = panel.dataset.tool;
|
||||
|
||||
var form = document.getElementById('tool-form');
|
||||
var zone = document.getElementById('dropzone');
|
||||
var fileInput = document.getElementById('file-input');
|
||||
var chip = document.getElementById('file-chip');
|
||||
var chipName = document.getElementById('chip-name');
|
||||
var chipSize = document.getElementById('chip-size');
|
||||
var chipRemove = document.getElementById('chip-remove');
|
||||
var submitBtn = document.getElementById('convert-btn');
|
||||
var statusFlow = document.getElementById('status-flow');
|
||||
var progressFill = document.getElementById('progress-fill');
|
||||
var resultPanel = document.getElementById('result-panel');
|
||||
var errorBox = document.getElementById('error-box');
|
||||
|
||||
var uploadedFile = null;
|
||||
var pollTimer = null;
|
||||
var currentJobId = null;
|
||||
|
||||
function fmtSize(bytes) {
|
||||
var units = ['B', 'KB', 'MB', 'GB'], i = 0, n = bytes;
|
||||
while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }
|
||||
return (Math.round(n * 10) / 10) + ' ' + units[i];
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
errorBox.textContent = msg;
|
||||
errorBox.hidden = false;
|
||||
track('tool_failure', {});
|
||||
}
|
||||
|
||||
function hideError() { errorBox.hidden = true; }
|
||||
|
||||
function track(name, extra) {
|
||||
try {
|
||||
navigator.sendBeacon &&
|
||||
navigator.sendBeacon('/api/events', new Blob([JSON.stringify(Object.assign({ name: name, tool: slug }, extra))], { type: 'application/json' }));
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function setStage(stage, progress) {
|
||||
if (!statusFlow) return;
|
||||
statusFlow.hidden = false;
|
||||
document.querySelectorAll('.stages li').forEach(function (li) {
|
||||
li.classList.toggle('done', li.dataset.stage !== stage);
|
||||
li.classList.toggle('active', li.dataset.stage === stage);
|
||||
});
|
||||
if (typeof progress === 'number') progressFill.style.width = Math.max(6, progress) + '%';
|
||||
}
|
||||
|
||||
function acceptFile(file) {
|
||||
if (!file) return;
|
||||
hideError();
|
||||
chipName.textContent = file.name;
|
||||
chipSize.textContent = fmtSize(file.size);
|
||||
chip.hidden = false;
|
||||
submitBtn.disabled = false;
|
||||
}
|
||||
|
||||
// ---- dropzone interactions ----
|
||||
['dragover', 'dragenter'].forEach(function (ev) {
|
||||
zone.addEventListener(ev, function (e) { e.preventDefault(); zone.classList.add('dragover'); });
|
||||
});
|
||||
['dragleave', 'drop'].forEach(function (ev) {
|
||||
zone.addEventListener(ev, function (e) { e.preventDefault(); zone.classList.remove('dragover'); });
|
||||
});
|
||||
zone.addEventListener('drop', function (e) {
|
||||
fileInput.files = e.dataTransfer.files;
|
||||
acceptFile(fileInput.files[0]);
|
||||
});
|
||||
zone.addEventListener('click', function () { fileInput.click(); });
|
||||
zone.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') fileInput.click(); });
|
||||
fileInput.addEventListener('change', function () { acceptFile(fileInput.files[0]); });
|
||||
chipRemove.addEventListener('click', function () {
|
||||
fileInput.value = '';
|
||||
chip.hidden = true;
|
||||
submitBtn.disabled = true;
|
||||
});
|
||||
|
||||
// ---- submit → upload → start job ----
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
if (!fileInput.files.length || !submitBtn.disabled === false) {
|
||||
if (!fileInput.files.length) return;
|
||||
}
|
||||
submitBtn.disabled = true;
|
||||
hideError();
|
||||
|
||||
var fd = new FormData();
|
||||
fd.append('tool', slug);
|
||||
fd.append('file', fileInput.files[0]);
|
||||
|
||||
setStage('preparing', 4);
|
||||
|
||||
fetch('/upload', { method: 'POST', body: fd })
|
||||
.then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
|
||||
.then(function (res) {
|
||||
if (!res.ok) throw new Error(res.body.error || 'Upload failed.');
|
||||
uploadedFile = res.body.file;
|
||||
return startJob(res.body);
|
||||
})
|
||||
.catch(function (err) {
|
||||
showError(err.message || 'Upload failed. Please check the file and try again.');
|
||||
submitBtn.disabled = false;
|
||||
});
|
||||
});
|
||||
|
||||
function opt(id) {
|
||||
var el = document.getElementById(id);
|
||||
return el ? el.value : undefined;
|
||||
}
|
||||
|
||||
function startJob(uploadInfo) {
|
||||
var params = {};
|
||||
['format', 'bitrate', 'quality', 'width', 'height', 'start', 'end',
|
||||
'x', 'y', 'crop_width', 'crop_height', 'degrees', 'direction',
|
||||
'factor', 'fps', 'gain_db', 'level', 'preset', 'pages'].forEach(function (k) {
|
||||
var v = opt('opt-' + k);
|
||||
if (v !== undefined && v !== '') params[k] = isNaN(v) || v === '' ? v : Number(v);
|
||||
});
|
||||
|
||||
// map option ids to API param names where they differ
|
||||
if (params.quality !== undefined) params.quality = Number(params.quality); // level select feeds "level"
|
||||
if (opt('opt-level') !== undefined && opt('opt-level') !== '') { params.level = Number(opt('opt-level')); delete params.quality; }
|
||||
if (params.gain_db !== undefined) params.gain_db = Number(params.gain_db);
|
||||
|
||||
var fd = new FormData();
|
||||
fd.append('tool', slug);
|
||||
Object.keys(params).forEach(function (k) { fd.append(k, params[k]); });
|
||||
|
||||
return fetch('/jobs/start', { method: 'POST', body: fd })
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (data) {
|
||||
if (!data.ok) throw new Error(data.error || 'Could not start processing.');
|
||||
currentJobId = data.job_id;
|
||||
track('conversion_format', { format: params.format || (document.getElementById('opt-format') || {}).value || '' });
|
||||
poll();
|
||||
});
|
||||
}
|
||||
|
||||
function poll() {
|
||||
if (!currentJobId) return;
|
||||
fetch('/api/jobs/' + currentJobId)
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (data) {
|
||||
if (!data.ok) throw new Error('lost');
|
||||
var stageMap = { preparing: 'preparing', fetching: 'processing', processing: 'processing', converting: 'converting' };
|
||||
if (data.status === 'completed') {
|
||||
finish(data);
|
||||
return;
|
||||
}
|
||||
if (data.status === 'failed') {
|
||||
showError(data.message || 'Processing failed. Please try again.');
|
||||
submitBtn.disabled = false;
|
||||
return;
|
||||
}
|
||||
setStage(stageMap[data.stage] || 'processing', data.progress);
|
||||
pollTimer = setTimeout(poll, 1500);
|
||||
})
|
||||
.catch(function () { pollTimer = setTimeout(poll, 3000); });
|
||||
}
|
||||
|
||||
function finish(data) {
|
||||
setStage('complete', 100);
|
||||
clearTimeout(pollTimer);
|
||||
var ext = (data.output_name || '').split('.').pop() || 'file';
|
||||
var isMedia = /^(jpg|jpeg|png|webp|gif|mp4|webm|mp3|wav|m4a|pdf)$/.test(ext);
|
||||
|
||||
resultPanel.innerHTML =
|
||||
'<div class="result-meta">' +
|
||||
'<span class="badge">Done</span>' +
|
||||
'<strong>' + escapeHtml(data.output_name || 'result.' + ext) + '</strong>' +
|
||||
'<span class="hint">' + fmtSize(data.output_size || 0) + '</span>' +
|
||||
'<a class="btn-primary" style="text-decoration:none;padding:.55rem 1.3rem;font-size:.95rem" href="' + data.download_url + '" download>Download</a>' +
|
||||
'</div>' +
|
||||
(isMedia ? '<div style="margin-top:.9rem;text-align:center"><img src="' + data.preview_url + '" alt="Result preview" loading="lazy" style="max-height:260px;border-radius:10px"></div>'.replace('<img', ext.match(/^(mp4|webm)$/) ? '<video controls autoplay muted loop><source src="' + data.preview_url + '" type="video/mp4"></video><img style="display:none"' : '<img') : '');
|
||||
|
||||
resultPanel.classList.add('show');
|
||||
submitBtn.disabled = false;
|
||||
track('download', { format: ext });
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
var d = document.createElement('div');
|
||||
d.textContent = s;
|
||||
return d.innerHTML;
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,98 @@
|
||||
/* URL-tool flow: paste link → instant info → job → poll → download. */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var panel = document.getElementById('tool-panel');
|
||||
if (!panel) return;
|
||||
var slug = panel.dataset.tool;
|
||||
|
||||
var form = document.getElementById('tool-form');
|
||||
var urlInput = document.getElementById('url-input');
|
||||
var infoPanel = document.getElementById('info-panel');
|
||||
var statusFlow = document.getElementById('status-flow');
|
||||
var progressFill = document.getElementById('progress-fill');
|
||||
var resultPanel = document.getElementById('result-panel');
|
||||
var errorBox = document.getElementById('error-box');
|
||||
|
||||
var pollTimer = null, currentJobId = null;
|
||||
|
||||
function track(name) {
|
||||
try {
|
||||
navigator.sendBeacon &&
|
||||
navigator.sendBeacon('/api/events', new Blob([JSON.stringify({ name: name, tool: slug })], { type: 'application/json' }));
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function showError(msg) { errorBox.textContent = msg; errorBox.hidden = false; track('tool_failure'); }
|
||||
|
||||
function setStage(stage, progress) {
|
||||
statusFlow.hidden = false;
|
||||
document.querySelectorAll('.stages li').forEach(function (li) {
|
||||
li.classList.toggle('done', li.dataset.stage !== stage);
|
||||
li.classList.toggle('active', li.dataset.stage === stage);
|
||||
});
|
||||
if (typeof progress === 'number') progressFill.style.width = Math.max(6, progress) + '%';
|
||||
}
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
hideError();
|
||||
resultPanel.classList.remove('show');
|
||||
|
||||
fetch('/api/jobs', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ tool: slug, url: urlInput.value })
|
||||
})
|
||||
.then(function (r) { return r.json().then(function (j) { return { status: r.status, body: j }; }); })
|
||||
.then(function (res) {
|
||||
if (!res.ok) throw new Error(res.body.message || res.body.error || 'Request failed.');
|
||||
currentJobId = res.body.job_id;
|
||||
setStage('preparing', 8);
|
||||
poll();
|
||||
})
|
||||
.catch(function (err) { showError(err.message || 'Something went wrong. Please try again.'); });
|
||||
});
|
||||
|
||||
function hideError() { errorBox.hidden = true; }
|
||||
|
||||
function poll() {
|
||||
if (!currentJobId) return;
|
||||
fetch('/api/jobs/' + currentJobId)
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (data) {
|
||||
if (!data.ok) throw new Error('lost');
|
||||
if (data.status === 'completed') { finish(data); return; }
|
||||
if (data.status === 'failed') { showError(data.message || 'This video could not be processed.'); return; }
|
||||
var stageMap = { preparing: 'preparing', fetching: 'fetching', processing: 'processing', converting: 'converting' };
|
||||
setStage(stageMap[data.stage] || 'processing', data.progress);
|
||||
pollTimer = setTimeout(poll, 1600);
|
||||
})
|
||||
.catch(function () { pollTimer = setTimeout(poll, 3200); });
|
||||
}
|
||||
|
||||
function finish(data) {
|
||||
clearTimeout(pollTimer);
|
||||
setStage('complete', 100);
|
||||
resultPanel.innerHTML =
|
||||
'<div class="result-meta">' +
|
||||
'<span class="badge">Done</span>' +
|
||||
'<strong>' + escapeHtml(data.output_name || 'download') + '</strong>' +
|
||||
'<span>' + humanSize(data.output_size || 0) + '</span>' +
|
||||
'<a class="btn-primary" style="text-decoration:none;padding:.55rem 1.3rem;font-size:.95rem" href="' + data.download_url + '" download>Download</a>' +
|
||||
'</div>';
|
||||
resultPanel.classList.add('show');
|
||||
}
|
||||
|
||||
function humanSize(bytes) {
|
||||
var u = ['B', 'KB', 'MB', 'GB'], i = 0;
|
||||
while (bytes >= 1024 && i < u.length - 1) { bytes /= 1024; i++; }
|
||||
return (Math.round(bytes * 10) / 10) + ' ' + u[i];
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
var d = document.createElement('div');
|
||||
d.textContent = s;
|
||||
return d.innerHTML;
|
||||
}
|
||||
})();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||
<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#6d28d9"/><stop offset="1" stop-color="#a855f7"/>
|
||||
</linearGradient></defs>
|
||||
<rect width="64" height="64" rx="14" fill="url(#g)"/>
|
||||
<path d="M32 12 L52 22 L32 32 L12 22 Z" fill="#fff"/>
|
||||
<path d="M16 30 v10 c0 4 7 8 16 8 s16-4 16-8 V30 l-14 7 a6 6 0 0 1-4 0 Z" fill="#fff" opacity=".92"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 454 B |
@@ -0,0 +1,59 @@
|
||||
<?php
|
||||
|
||||
use CodeIgniter\Boot;
|
||||
use Config\Paths;
|
||||
|
||||
/*
|
||||
*---------------------------------------------------------------
|
||||
* CHECK PHP VERSION
|
||||
*---------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$minPhpVersion = '8.2'; // If you update this, don't forget to update `spark`.
|
||||
if (version_compare(PHP_VERSION, $minPhpVersion, '<')) {
|
||||
$message = sprintf(
|
||||
'Your PHP version must be %s or higher to run CodeIgniter. Current version: %s',
|
||||
$minPhpVersion,
|
||||
PHP_VERSION,
|
||||
);
|
||||
|
||||
header('HTTP/1.1 503 Service Unavailable.', true, 503);
|
||||
echo $message;
|
||||
|
||||
exit(1);
|
||||
}
|
||||
|
||||
/*
|
||||
*---------------------------------------------------------------
|
||||
* SET THE CURRENT DIRECTORY
|
||||
*---------------------------------------------------------------
|
||||
*/
|
||||
|
||||
// Path to the front controller (this file)
|
||||
define('FCPATH', __DIR__ . DIRECTORY_SEPARATOR);
|
||||
|
||||
// Ensure the current directory is pointing to the front controller's directory
|
||||
if (getcwd() . DIRECTORY_SEPARATOR !== FCPATH) {
|
||||
chdir(FCPATH);
|
||||
}
|
||||
|
||||
/*
|
||||
*---------------------------------------------------------------
|
||||
* BOOTSTRAP THE APPLICATION
|
||||
*---------------------------------------------------------------
|
||||
* This process sets up the path constants, loads and registers
|
||||
* our autoloader, along with Composer's, loads our constants
|
||||
* and fires up an environment-specific bootstrapping.
|
||||
*/
|
||||
|
||||
// LOAD OUR PATHS CONFIG FILE
|
||||
// This is the line that might need to be changed, depending on your folder structure.
|
||||
require FCPATH . '../app/Config/Paths.php';
|
||||
// ^^^ Change this line if you move your application folder
|
||||
|
||||
$paths = new Paths();
|
||||
|
||||
// LOAD THE FRAMEWORK BOOTSTRAP FILE
|
||||
require $paths->systemDirectory . '/Boot.php';
|
||||
|
||||
exit(Boot::bootWeb($paths));
|
||||
@@ -0,0 +1,9 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Offline — Toolvana</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" href="/assets/css/app.css"></head>
|
||||
<body style="display:grid;place-items:center;min-height:100vh;margin:0;text-align:center;padding:2rem">
|
||||
<div>
|
||||
<h1 style="letter-spacing:-.03em">You're offline</h1>
|
||||
<p style="color:#6b7280">The tool directory is available offline, but media processing needs a connection.<br>Reconnect and pick up where you left off.</p>
|
||||
<a href="/tools" class="btn-primary" style="text-decoration:none;display:inline-block">Open tool directory</a>
|
||||
</div></body></html>
|
||||
@@ -0,0 +1,2 @@
|
||||
User-agent: *
|
||||
Disallow:
|
||||
Reference in New Issue
Block a user