Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="it">
- <head>
- <meta charset="UTF-8">
- <title>GG Home — Reorder Tool</title>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.2/Sortable.min.js"></script>
- <style>
- :root {
- --bg: #07080f;
- --card-bg: rgba(255,255,255,0.06);
- --card-hover: rgba(255,255,255,0.13);
- --label: #9ba8c0;
- --accent: #3a6fff;
- }
- * { box-sizing: border-box; margin: 0; padding: 0; }
- body {
- background: var(--bg);
- min-height: 100vh;
- padding: 30px;
- font-family: 'Segoe UI', system-ui, sans-serif;
- color: #c8d4f0;
- }
- header {
- display: flex;
- align-items: center;
- gap: 12px;
- margin-bottom: 8px;
- }
- header h1 {
- font-size: 20px;
- font-weight: 300;
- letter-spacing: 3px;
- text-transform: uppercase;
- }
- .note {
- font-size: 12px;
- color: #5a6a8a;
- margin-bottom: 24px;
- }
- #grid {
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- align-items: flex-start;
- max-width: 1000px;
- }
- .item {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 8px;
- padding: 14px 10px;
- border-radius: 12px;
- background: var(--card-bg);
- border: 1px solid rgba(255,255,255,0.05);
- cursor: grab;
- width: 95px;
- user-select: none;
- transition: background 0.15s, border-color 0.15s;
- }
- .item:hover {
- background: var(--card-hover);
- border-color: rgba(58,111,255,0.25);
- }
- .item:active { cursor: grabbing; }
- .item.sortable-ghost { opacity: 0.25; }
- .item.sortable-chosen {
- border-color: var(--accent);
- box-shadow: 0 4px 18px rgba(58,111,255,0.3);
- }
- .icon-wrap {
- width: 50px; height: 50px;
- border-radius: 10px;
- background: rgba(255,255,255,0.08);
- display: flex; align-items: center; justify-content: center;
- overflow: hidden;
- flex-shrink: 0;
- }
- .icon-wrap img { width: 42px; height: 42px; object-fit: contain; }
- .icon-wrap.local { font-size: 22px; background: #1a2a1a; }
- .label {
- font-size: 11px;
- color: var(--label);
- text-align: center;
- width: 100%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 600;
- }
- .sep {
- width: 100%;
- display: flex;
- align-items: center;
- gap: 10px;
- padding: 4px 0;
- cursor: grab;
- color: #4a5a7a;
- font-size: 10px;
- letter-spacing: 2px;
- text-transform: uppercase;
- user-select: none;
- transition: color 0.15s;
- }
- .sep:hover { color: #7a8ab0; }
- .sep::before, .sep::after {
- content: '';
- flex: 1;
- height: 1px;
- background: rgba(255,255,255,0.06);
- }
- .sep.sortable-chosen { color: var(--accent); }
- .controls {
- margin-top: 28px;
- display: flex;
- gap: 12px;
- align-items: center;
- flex-wrap: wrap;
- }
- button {
- background: var(--accent);
- color: white;
- border: none;
- padding: 10px 22px;
- border-radius: 8px;
- font-size: 13px;
- cursor: pointer;
- font-family: inherit;
- font-weight: 500;
- transition: opacity 0.15s;
- }
- button:hover { opacity: 0.82; }
- button.sec {
- background: rgba(255,255,255,0.07);
- border: 1px solid rgba(255,255,255,0.1);
- }
- #copymsg { font-size: 12px; color: #3aff8a; }
- #output {
- margin-top: 20px;
- width: 100%;
- max-width: 900px;
- height: 280px;
- background: rgba(255,255,255,0.03);
- border: 1px solid rgba(255,255,255,0.08);
- border-radius: 10px;
- color: #8a9fcc;
- font-family: 'Consolas', 'Courier New', monospace;
- font-size: 11.5px;
- padding: 14px;
- resize: vertical;
- display: none;
- line-height: 1.5;
- }
- </style>
- </head>
- <body>
- <header>
- <span style="font-size:24px">🐟</span>
- <h1>GG Home — Riordina</h1>
- </header>
- <p class="note">Trascina le card e i separatori di sezione per riordinarli, poi genera l'HTML da incollare nel file.</p>
- <div id="grid">
- <!-- ═══════════════ RIGA 1 — News & Social ═══════════════ -->
- <a class="item" href="https://www.meteoam.it/it/meteo-citta/ravenna" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=meteoam.it"
- onerror="this.src='https://www.google.com/s2/favicons?domain=meteoam.it&sz=32'"
- alt="">
- </div>
- <span class="label">Meteo RA</span>
- </a>
- <a class="item" href="https://www.ilfattoquotidiano.it/" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=ilfattoquotidiano.it" alt="">
- </div>
- <span class="label">Il Fatto Q.</span>
- </a>
- <a class="item" href="https://www.facebook.com/" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=facebook.com" alt="">
- </div>
- <span class="label">Facebook</span>
- </a>
- <a class="item" href="https://mastodon.social/@GGfrancison" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=mastodon.social" alt="">
- </div>
- <span class="label">Mastodon</span>
- </a>
- <a class="item" href="https://web.telegram.org" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=web.telegram.org" alt="">
- </div>
- <span class="label">Telegram</span>
- </a>
- <a class="item" href="https://web.whatsapp.com/" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://e7.pngegg.com/pngimages/132/965/png-clipart-whatsapp-email-web-design-message-icon-whatsapp-whatsapp-logo-text-logo-thumbnail.png" alt="">
- </div>
- <span class="label">WazApp</span>
- </a>
- <a class="item" href="https://bsky.app" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=bsky.app" alt="">
- </div>
- <span class="label">Bluesky</span>
- </a>
- <a class="item" href="https://account.ring.com/account/dashboard" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=ring.com" alt="">
- </div>
- <span class="label">Ring</span>
- </a>
- <!-- ═══════════════ RIGA 2 — Google & Shopping ═══════════════ -->
- <a class="item" href="https://mail.google.com" >
- <div class="icon-wrap">
- <img class="iconsize" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAdVBMVEVHcEznQDPFIh/8vwP7vAT8vATFIh/FIR77vAP8vQPGIBnsRDbqNTf8wwDrQzXqQzXqQzXqQzWTVZHLFwX/vQCwszFBhfVedtZdq0kyqFM4iPo+hfStPV3xPSnTtx8eqFUzqFNChfSIXJ+dsTfpQzRChfQ0qFPrNgnEAAAAJ3RSTlMAJl0FXB6x//+vuPT///9x+sGw//+ot///sf///7P///////8IfXUnM3N5AAAAzElEQVR4Ac3NRRbCUBBE0Yr7F9wd9r9EUjHiI+xN+55q/EmGib4s2wGY63me2XP2fT9AmumxEK0Cn9n5AIsM1DLixGecCHMghESVFH1AaRRpUQeTaQ7S8jeGEiWYzQEslh6JYEpynhHM/NWaYLPdpULk7feiBLPD8ZSB83lzmZZAiRLMrsdTAVKxLIGowOp4KgHFZt8Ee54rwCBFLYlTB8AQZcpAHwB0ftfAAIDM54cBDM6PAdxuGAPsA+A+Bh6gWDC0WjPeh7IsWPiTnqu9I/fRLtEVAAAAAElFTkSuQmCC" alt="">
- </div>
- <span class="label">Gmail</span>
- </a>
- <a class="item" href="https://contacts.google.com" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.gstatic.com/images/branding/product/2x/contacts_2022_48dp.png" alt="">
- </div>
- <span class="label">Contacts</span>
- </a>
- <a class="item" href="https://keep.google.com" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.gstatic.com/images/branding/product/1x/keep_2020q4_48dp.png" alt="">
- </div>
- <span class="label">G Keep</span>
- </a>
- <a class="item" href="https://maps.google.com" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=maps.google.com" alt="">
- </div>
- <span class="label">Maps</span>
- </a>
- <a class="item" href="https://photos.google.com" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=photos.google.com" alt="">
- </div>
- <span class="label">G Foto</span>
- </a>
- <a class="item" href="https://www.amazon.it" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=amazon.it" alt="">
- </div>
- <span class="label">Amazon</span>
- </a>
- <a class="item" href="https://www.zooplus.it" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=zooplus.it" alt="">
- </div>
- <span class="label">Zooplus</span>
- </a>
- <a class="item" href="https://www.ebay.it" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=ebay.it" alt="">
- </div>
- <span class="label">eBay</span>
- </a>
- <a class="item" href="https://www.temu.com" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=temu.com" alt="">
- </div>
- <span class="label">Temu</span>
- </a>
- <a class="item" href="https://www.aliexpress.com" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=aliexpress.com" alt="">
- </div>
- <span class="label">AliExpress</span>
- </a>
- <a class="item" href="https://my.conad.it/login" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=conad.it" alt="">
- </div>
- <span class="label">My Conad</span>
- </a>
- <!-- ═══════════════ RIGA 3 — Banche & Retraite ═══════════════ -->
- <a class="item" href="https://clients.boursobank.com/connexion/" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=boursobank.com" alt="">
- </div>
- <span class="label">Boursobank</span>
- </a>
- <a class="item" href="https://nowbanking.credit-agricole.it" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=credit-agricole.it" alt="">
- </div>
- <span class="label">C.A. Bank</span>
- </a>
- <a class="item" href="https://www.lassuranceretraite.fr/portail-info/home.html" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=lassuranceretraite.fr" alt="">
- </div>
- <span class="label">Ass.Retraite</span>
- </a>
- <a class="item" href="https://www.info-retraite.fr/portail-services/login" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=info-retraite.fr" alt="">
- </div>
- <span class="label">Info Retraite</span>
- </a>
- <a class="item" href="https://www.inps.it/" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=inps.it" alt="">
- </div>
- <span class="label">INPS</span>
- </a>
- <!-- ═══════════════ RIGA 3 cont. — Servizi ═══════════════ -->
- <a class="item" href="https://www.fascicolo-sanitario.it" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=fascicolo-sanitario.it" alt="">
- </div>
- <span class="label">Fasc. Sanitario</span>
- </a>
- <a class="item" href="https://servizionline.gruppohera.it/auth/hera/login" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=gruppohera.it" alt="">
- </div>
- <span class="label">HERA</span>
- </a>
- <a class="item" href="https://www.enel.it/it-it/login" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=enel.it" alt="">
- </div>
- <span class="label">ENEL</span>
- </a>
- <a class="item" href="https://claude.ai/" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=claude.ai" alt="">
- </div>
- <span class="label">Claude AI</span>
- </a>
- <a class="item" href="https://github.com" >
- <div class="icon-wrap">
- <img class="iconsize" src="https://www.google.com/s2/favicons?domain=github.com" alt="">
- </div>
- <span class="label">GitHub</span>
- </a>
- <!-- ═══════════════ RIGA 4 — Locale ═══════════════ -->
- <a class="item" href="http://127.0.0.1:9117/UI/Dashboard" >
- <div class="icon-wrap icon-local">🧲</div>
- <span class="label">Jackett</span>
- </a>
- <a class="item" href="http://localhost:8080" >
- <div class="icon-wrap icon-local">⬇️</div>
- <span class="label">qBittorrent</span>
- </a>
- </div>
- <div class="controls">
- <button onclick="generateHTML()">Genera HTML</button>
- <button class="sec" onclick="copyHTML()">Copia negli appunti</button>
- <span id="copymsg"></span>
- </div>
- <textarea id="output" readonly spellcheck="false"></textarea>
- <script>
- const GMAIL_B64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAdVBMVEVHcEznQDPFIh/8vwP7vAT8vATFIh/FIR77vAP8vQPGIBnsRDbqNTf8wwDrQzXqQzXqQzXqQzWTVZHLFwX/vQCwszFBhfVedtZdq0kyqFM4iPo+hfStPV3xPSnTtx8eqFUzqFNChfSIXJ+dsTfpQzRChfQ0qFPrNgnEAAAAJ3RSTlMAJl0FXB6x//+vuPT///9x+sGw//+ot///sf///7P///////8IfXUnM3N5AAAAzElEQVR4Ac3NRRbCUBBE0Yr7F9wd9r9EUjHiI+xN+55q/EmGib4s2wGY63me2XP2fT9AmumxEK0Cn9n5AIsM1DLixGecCHMghESVFH1AaRRpUQeTaQ7S8jeGEiWYzQEslh6JYEpynhHM/NWaYLPdpULk7feiBLPD8ZSB83lzmZZAiRLMrsdTAVKxLIGowOp4KgHFZt8Ee54rwCBFLYlTB8AQZcpAHwB0ftfAAIDM54cBDM6PAdxuGAPsA+A+Bh6gWDC0WjPeh7IsWPiTnqu9I/fRLtEVAAAAAElFTkSuQmCC';
- const data = [
- { type:'sep', label:'RIGA 1 — News & Social' },
- { type:'link', label:'Meteo RA', href:'https://www.meteoam.it/it/meteo-citta/ravenna', icon:'https://www.google.com/s2/favicons?domain=meteoam.it', fallback:'https://www.google.com/s2/favicons?domain=meteoam.it&sz=32' },
- { type:'link', label:'Il Fatto Q.', href:'https://www.ilfattoquotidiano.it/', icon:'https://www.google.com/s2/favicons?domain=ilfattoquotidiano.it' },
- { type:'link', label:'Facebook', href:'https://www.facebook.com/', icon:'https://www.google.com/s2/favicons?domain=facebook.com' },
- { type:'link', label:'Gmail', href:'https://mail.google.com', icon:GMAIL_B64, b64:true },
- { type:'link', label:'Mastodon', href:'https://mastodon.social/@GGfrancison', icon:'https://www.google.com/s2/favicons?domain=mastodon.social' },
- { type:'link', label:'Contacts', href:'https://contacts.google.com', icon:'https://www.gstatic.com/images/branding/product/2x/contacts_2022_48dp.png' },
- { type:'link', label:'Telegram', href:'https://web.telegram.org', icon:'https://www.google.com/s2/favicons?domain=web.telegram.org' },
- { type:'link', label:'WazApp', href:'https://web.whatsapp.com/', icon:'https://e7.pngegg.com/pngimages/132/965/png-clipart-whatsapp-email-web-design-message-icon-whatsapp-whatsapp-logo-text-logo-thumbnail.png' },
- { type:'link', label:'Bluesky', href:'https://bsky.app', icon:'https://www.google.com/s2/favicons?domain=bsky.app' },
- { type:'link', label:'Ring', href:'https://account.ring.com/account/dashboard', icon:'https://www.google.com/s2/favicons?domain=ring.com' },
- { type:'sep', label:'RIGA 2 — Google & Shopping' },
- { type:'link', label:'G Keep', href:'https://keep.google.com', icon:'https://www.gstatic.com/images/branding/product/1x/keep_2020q4_48dp.png' },
- { type:'link', label:'Maps', href:'https://maps.google.com', icon:'https://www.google.com/s2/favicons?domain=maps.google.com' },
- { type:'link', label:'G Foto', href:'https://photos.google.com', icon:'https://www.google.com/s2/favicons?domain=photos.google.com' },
- { type:'link', label:'Amazon', href:'https://www.amazon.it', icon:'https://www.google.com/s2/favicons?domain=amazon.it' },
- { type:'link', label:'eBay', href:'https://www.ebay.it', icon:'https://www.google.com/s2/favicons?domain=ebay.it' },
- { type:'link', label:'Temu', href:'https://www.temu.com', icon:'https://www.google.com/s2/favicons?domain=temu.com' },
- { type:'link', label:'AliExpress', href:'https://www.aliexpress.com', icon:'https://www.google.com/s2/favicons?domain=aliexpress.com' },
- { type:'link', label:'Zooplus', href:'https://www.zooplus.it', icon:'https://www.google.com/s2/favicons?domain=zooplus.it' },
- { type:'link', label:'My Conad', href:'https://my.conad.it/login', icon:'https://www.google.com/s2/favicons?domain=conad.it' },
- { type:'link', label:'GitHub', href:'https://github.com', icon:'https://www.google.com/s2/favicons?domain=github.com' },
- { type:'sep', label:'RIGA 3 — Banche & Retraite' },
- { type:'link', label:'Boursobank', href:'https://clients.boursobank.com/connexion/', icon:'https://www.google.com/s2/favicons?domain=boursobank.com' },
- { type:'link', label:'C.A. Bank', href:'https://nowbanking.credit-agricole.it', icon:'https://www.google.com/s2/favicons?domain=credit-agricole.it' },
- { type:'link', label:'Ass.Retraite', href:'https://www.lassuranceretraite.fr/portail-info/home.html', icon:'https://www.google.com/s2/favicons?domain=lassuranceretraite.fr' },
- { type:'link', label:'Info Retraite',href:'https://www.info-retraite.fr/portail-services/login', icon:'https://www.google.com/s2/favicons?domain=info-retraite.fr' },
- { type:'link', label:'INPS', href:'https://www.inps.it/', icon:'https://www.google.com/s2/favicons?domain=inps.it' },
- { type:'sep', label:'RIGA 3 cont. — Servizi' },
- { type:'link', label:'Fasc. Sanitario', href:'https://www.fascicolo-sanitario.it', icon:'https://www.google.com/s2/favicons?domain=fascicolo-sanitario.it' },
- { type:'link', label:'HERA', href:'https://servizionline.gruppohera.it/auth/hera/login', icon:'https://www.google.com/s2/favicons?domain=gruppohera.it' },
- { type:'link', label:'ENEL', href:'https://www.enel.it/it-it/login', icon:'https://www.google.com/s2/favicons?domain=enel.it' },
- { type:'link', label:'Claude AI', href:'https://claude.ai/', icon:'https://www.google.com/s2/favicons?domain=claude.ai' },
- { type:'sep', label:'RIGA 4 — Locale' },
- { type:'link', label:'Jackett', href:'http://127.0.0.1:9117/UI/Dashboard', emoji:'🧲', local:true },
- { type:'link', label:'qBittorrent', href:'http://localhost:8080', emoji:'⬇️', local:true },
- ];
- const grid = document.getElementById('grid');
- function renderEl(d, idx) {
- const el = document.createElement('div');
- el.dataset.idx = idx;
- if (d.type === 'sep') {
- el.className = 'sep';
- el.innerHTML = `<span>${d.label}</span>`;
- } else {
- el.className = 'item';
- let iconH;
- if (d.local) iconH = `<div class="icon-wrap local">${d.emoji}</div>`;
- else if (d.fallback) iconH = `<div class="icon-wrap"><img src="${d.icon}" onerror="this.src='${d.fallback}'" alt=""></div>`;
- else iconH = `<div class="icon-wrap"><img src="${d.icon}" alt=""></div>`;
- el.innerHTML = `${iconH}<span class="label">${d.label}</span>`;
- }
- return el;
- }
- data.forEach((d, i) => grid.appendChild(renderEl(d, i)));
- Sortable.create(grid, {
- animation: 140,
- ghostClass: 'sortable-ghost',
- chosenClass: 'sortable-chosen',
- dragClass: 'sortable-drag',
- });
- function getOrder() {
- return [...grid.querySelectorAll('[data-idx]')].map(el => data[+el.dataset.idx]);
- }
- function itemHTML(d) {
- if (d.type === 'sep') {
- return `\n <!-- ═══════════════ ${d.label} ═══════════════ -->\n`;
- }
- if (d.local) {
- return (
- ` <a class="item" href="${d.href}" >\n` +
- ` <div class="icon-wrap icon-local">${d.emoji}</div>\n` +
- ` <span class="label">${d.label}</span>\n` +
- ` </a>\n`
- );
- }
- if (d.fallback) {
- return (
- ` <a class="item" href="${d.href}" >\n` +
- ` <div class="icon-wrap">\n` +
- ` \t<img class="iconsize" src="${d.icon}"\n` +
- ` \t\tonerror="this.src='${d.fallback}'"\n` +
- ` \t\talt="">\n` +
- ` </div>\n` +
- ` <span class="label">${d.label}</span>\n` +
- ` </a>\n`
- );
- }
- return (
- ` <a class="item" href="${d.href}" >\n` +
- ` <div class="icon-wrap">\n` +
- `\t<img class="iconsize" src="${d.icon}" alt="">\n` +
- `\t</div>\n` +
- ` <span class="label">${d.label}</span>\n` +
- ` </a>\n`
- );
- }
- function generateHTML() {
- const html = getOrder().map(itemHTML).join('');
- const out = document.getElementById('output');
- out.value = html;
- out.style.display = 'block';
- return html;
- }
- function copyHTML() {
- const html = generateHTML();
- navigator.clipboard.writeText(html).then(() => {
- const msg = document.getElementById('copymsg');
- msg.textContent = '✓ Copiato!';
- setTimeout(() => msg.textContent = '', 2500);
- });
- }
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment