| Server IP : 69.72.244.102 / Your IP : 216.73.216.164 Web Server : LiteSpeed System : Linux s3434.fra1.stableserver.net 4.18.0-513.24.1.lve.2.el8.x86_64 #1 SMP Fri May 24 12:42:50 UTC 2024 x86_64 User : konzalta ( 1271) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/konzalta/tuma.konzaltant.com/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tuma.social — Create Once. Adapt Everywhere.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
--brand:#c0521e;--brand-light:#fdf0eb;--brand-dark:#a84218;
--bg:#faf8f5;--surface:#fff;
--border:#e8e0d8;--border-light:#f0ebe4;
--text:#1a1208;--text-2:#6b5a42;--text-3:#a89880;
--green:#1a8c4e;--green-bg:#edf7f2;
--amber:#b8730a;--amber-bg:#fef3e2;
--radius:10px;--radius-sm:7px;
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:13px;min-height:100vh}
/* Header */
.header{text-align:center;padding:2.2rem 1rem 1.8rem;border-bottom:0.5px solid var(--border)}
.header h1{font-family:'Playfair Display',serif;font-size:2.4rem;font-weight:400;letter-spacing:-0.5px;color:var(--text)}
.header h1 span{color:var(--brand)}
.header p{font-size:0.82rem;color:var(--text-2);margin-top:0.4rem}
/* Layout */
.layout{display:grid;grid-template-columns:280px 1fr 300px;gap:0;height:calc(100vh - 110px);min-height:700px}
.col{border-right:0.5px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}
.col:last-child{border-right:none}
/* Column headers */
.col-head{padding:1rem 1.1rem 0.7rem;border-bottom:0.5px solid var(--border);flex-shrink:0;background:var(--surface)}
.col-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1.5px solid var(--text);border-radius:50%;font-size:11px;font-weight:500;margin-right:7px;flex-shrink:0}
.col-title{font-size:0.9rem;font-weight:500;display:flex;align-items:center}
.col-sub{font-size:0.73rem;color:var(--text-2);margin-top:3px;padding-left:29px}
/* Col body */
.col-body{padding:1rem 1.1rem;flex:1;display:flex;flex-direction:column;gap:0.85rem;background:var(--surface)}
/* Form elements */
label.field-label{font-size:0.7rem;font-weight:500;color:var(--text-2);display:block;margin-bottom:4px;letter-spacing:0.02em}
input[type=text],textarea,select{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:'Inter',sans-serif;font-size:0.8rem;color:var(--text);background:#fff;outline:none;transition:border-color 0.18s}
input[type=text]{padding:7px 10px;height:34px}
textarea{padding:8px 10px;resize:none;line-height:1.55}
select{padding:7px 10px;height:34px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a89880' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;cursor:pointer}
input[type=text]:focus,textarea:focus,select:focus{border-color:var(--brand)}
.char-count{font-size:0.68rem;color:var(--text-3);text-align:right;margin-top:3px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Action bar */
.action-bar{display:flex;align-items:center;gap:6px;padding:6px 0 0}
.btn-icon{background:none;border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:5px 9px;cursor:pointer;font-size:12px;color:var(--text-2);display:flex;align-items:center;gap:5px;transition:background 0.15s}
.btn-icon:hover{background:var(--brand-light)}
/* AI bar */
.ai-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--brand-light);border:0.5px solid #f0c4a8;border-radius:var(--radius-sm);margin-top:auto;flex-shrink:0}
.ai-on{font-size:0.72rem;color:var(--brand);font-weight:500;display:flex;align-items:center;gap:5px}
.ai-on::before{content:'✦';font-size:10px}
.btn-improve{font-size:0.72rem;color:var(--text-2);background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:4px}
.btn-improve::before{content:'✦';color:var(--text-3);font-size:10px}
/* Platform adaptations col */
.adapt-head-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 1.1rem;border-bottom:0.5px solid var(--border);flex-shrink:0;background:var(--surface)}
.adapt-actions{display:flex;gap:6px}
.btn-adapt{background:none;border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:4px 10px;font-size:0.72rem;color:var(--text-2);cursor:pointer;display:flex;align-items:center;gap:5px;font-family:'Inter',sans-serif;transition:background 0.15s}
.btn-adapt:hover{background:var(--brand-light);color:var(--brand);border-color:var(--brand)}
/* Platform rows */
.platform-list{flex:1;overflow-y:auto}
.platform-row{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:start;gap:10px;padding:0.85rem 1.1rem;border-bottom:0.5px solid var(--border-light);transition:background 0.15s;cursor:pointer}
.platform-row:hover{background:#fdf9f7}
.platform-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
.p-li{background:#0077b5;color:#fff}
.p-x{background:#000;color:#fff;font-size:12px;font-weight:700;font-family:serif}
.p-fb{background:#1877f2;color:#fff}
.p-ig{background:radial-gradient(circle at 30% 110%,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);color:#fff}
.p-tt{background:#000;color:#fff}
.p-th{background:#000;color:#fff}
.p-wa{background:#25d366;color:#fff}
.p-yt{background:#ff0000;color:#fff}
.platform-icon svg{width:16px;height:16px;fill:currentColor}
.platform-name{font-size:0.75rem;font-weight:500;color:var(--text);margin-bottom:2px}
.platform-text{font-size:0.73rem;color:var(--text-2);line-height:1.5}
.char-info{font-size:0.68rem;color:var(--text-3);white-space:nowrap;padding-top:2px}
.row-actions{display:flex;gap:3px;align-items:flex-start;padding-top:1px}
.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-3);padding:2px 4px;border-radius:4px;font-size:14px;line-height:1;transition:color 0.15s}
.icon-btn:hover{color:var(--brand)}
.status-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0}
.dot-green{background:var(--green)}
.dot-amber{background:var(--amber)}
/* Publishing col */
.pub-body{padding:1rem 1.1rem;flex:1;display:flex;flex-direction:column;gap:1.1rem;overflow-y:auto;background:var(--surface)}
.pub-section-label{font-size:0.72rem;font-weight:500;color:var(--text-2);margin-bottom:8px;letter-spacing:0.02em;display:flex;justify-content:space-between;align-items:center}
.select-all{font-size:0.72rem;color:var(--brand);background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif}
.platform-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.plat-check{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:0.65rem;color:var(--text-2);text-align:center;cursor:pointer}
.plat-check-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;position:relative;font-size:16px}
.check-badge{position:absolute;top:-3px;right:-3px;width:13px;height:13px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
.check-badge.on{background:var(--brand);border-color:var(--brand)}
.check-badge.on::after{content:'';width:5px;height:3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translate(0.5px,-0.5px);display:block}
/* Radio */
.radio-group{display:flex;flex-direction:column;gap:8px}
.radio-item{display:flex;align-items:flex-start;gap:8px;cursor:pointer}
.radio-item input[type=radio]{accent-color:var(--brand);margin-top:2px;flex-shrink:0}
.radio-item .radio-label{font-size:0.78rem;font-weight:500;color:var(--text)}
.radio-item .radio-sub{font-size:0.69rem;color:var(--text-3);margin-top:1px}
/* Schedule table */
.schedule-table{width:100%;border-collapse:collapse}
.schedule-table tr{border-bottom:0.5px solid var(--border-light)}
.schedule-table td{padding:5px 0;font-size:0.72rem;vertical-align:middle}
.schedule-table td:first-child{display:flex;align-items:center;gap:6px;color:var(--text-2);min-width:90px}
.sched-icon{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
.sched-date{color:var(--text-2)}
.sched-time{color:var(--text);font-weight:500}
.sched-input{border:0.5px solid var(--border);border-radius:4px;padding:2px 5px;font-size:0.68rem;color:var(--text);background:#fff;width:60px;outline:none;font-family:'Inter',sans-serif;cursor:pointer}
.sched-input:focus{border-color:var(--brand)}
/* Reviewer */
.reviewer-select{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;height:34px;font-size:0.78rem;color:var(--text-3);background:#fff;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a89880' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;cursor:pointer;font-family:'Inter',sans-serif;outline:none}
/* Footer buttons */
.pub-footer{padding:1rem 1.1rem;border-top:0.5px solid var(--border);background:var(--surface);flex-shrink:0}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.btn-draft{border:1px solid var(--border);background:#fff;border-radius:var(--radius-sm);padding:8px;font-size:0.78rem;font-weight:500;color:var(--text);cursor:pointer;font-family:'Inter',sans-serif;transition:background 0.15s}
.btn-draft:hover{background:var(--bg)}
.btn-approval{border:1.5px solid var(--brand);background:#fff;border-radius:var(--radius-sm);padding:8px;font-size:0.78rem;font-weight:500;color:var(--brand);cursor:pointer;font-family:'Inter',sans-serif;transition:background 0.15s}
.btn-approval:hover{background:var(--brand-light)}
.btn-schedule{width:100%;background:var(--brand);color:#fff;border:none;border-radius:var(--radius-sm);padding:10px;font-size:0.85rem;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;display:flex;align-items:center;justify-content:center;gap:7px;transition:background 0.15s}
.btn-schedule:hover{background:var(--brand-dark)}
.btn-schedule svg{width:15px;height:15px;fill:currentColor}
/* Divider */
.divider{height:0.5px;background:var(--border);margin:2px 0}
/* Textarea char row */
.textarea-wrap{position:relative}
/* Platform icon svgs */
.svg-li path{fill:#fff}
</style>
</head>
<body>
<div class="header">
<h1>Create Once<span>.</span> Adapt Everywhere<span>.</span></h1>
<p>Write your message once and AI adapts it for every platform.</p>
</div>
<div class="layout">
<!-- Col 1: Master Post -->
<div class="col">
<div class="col-head">
<div class="col-title"><span class="col-num">1</span>Master post</div>
<div class="col-sub">This is your original message.</div>
</div>
<div class="col-body">
<div>
<label class="field-label">Post title (internal)</label>
<input type="text" id="post-title" value="Q2 Product Launch Announcement">
</div>
<div>
<label class="field-label">Message</label>
<div class="textarea-wrap">
<textarea id="master-msg" rows="7" oninput="updateChars()">We're excited to announce the launch of our new product — built to help teams save time, work smarter and achieve more.
Thank you to everyone who's been part of this journey. Big things ahead. 🚀</textarea>
</div>
<div class="char-count"><span id="msg-count">156</span> / 3000</div>
</div>
<div class="action-bar">
<button class="btn-icon">+ Add media</button>
<button class="btn-icon">+ Add link</button>
<button class="btn-icon" style="padding:5px 7px">☺</button>
</div>
<div>
<label class="field-label">Campaign</label>
<select>
<option>Q2 Product Launch</option>
<option>Brand Awareness</option>
<option>Community</option>
</select>
</div>
<div class="field-row">
<div>
<label class="field-label">Tone</label>
<select>
<option>Professional</option>
<option>Casual</option>
<option>Playful</option>
</select>
</div>
<div>
<label class="field-label">CTA (optional)</label>
<input type="text" id="cta-input" value="Learn more" oninput="updateCTA()">
<div class="char-count"><span id="cta-count">10</span> / 60</div>
</div>
</div>
<div>
<label class="field-label">Keywords / hashtags</label>
<input type="text" value="productivity, teams, launch, innovation" style="margin-bottom:6px">
<input type="text" value="#TeamworkMadeEasy #ProductLaunch">
</div>
<div style="margin-top:auto"></div>
<div class="ai-bar">
<span class="ai-on">AI assist is on</span>
<button class="btn-improve">Improve</button>
</div>
</div>
</div>
<!-- Col 2: Platform Adaptations -->
<div class="col" style="border-right:0.5px solid var(--border)">
<div class="col-head" style="padding-bottom:0.7rem">
<div style="display:flex;align-items:flex-start;justify-content:space-between">
<div>
<div class="col-title"><span class="col-num">2</span>Platform adaptations</div>
<div class="col-sub">Review and edit AI-generated versions for each platform.</div>
</div>
<div class="adapt-actions" style="margin-top:2px">
<button class="btn-adapt">👁 Preview all</button>
<button class="btn-adapt" onclick="regenerateAll()">↻ Regenerate all</button>
</div>
</div>
</div>
<div class="platform-list">
<!-- LinkedIn -->
<div class="platform-row">
<div class="platform-icon p-li">
<svg viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</div>
<div>
<div class="platform-name">LinkedIn</div>
<div class="platform-text" id="text-li">We're excited to announce the launch of our new product — built to help teams save time, work smarter and achieve more.<br>Thank you to everyone who's been part of this journey. Big things...</div>
</div>
<div class="char-info">248 / 3000</div>
<div class="row-actions">
<button class="icon-btn" title="Edit">✎</button>
<button class="icon-btn" title="Regenerate" onclick="regen('li')">↻</button>
</div>
<div class="status-dot dot-green"></div>
</div>
<!-- X -->
<div class="platform-row">
<div class="platform-icon p-x">𝕏</div>
<div>
<div class="platform-name">X</div>
<div class="platform-text">We just launched something special.<br>A new product built to help teams save time, work smarter and achieve more. Big things ahead. 🚀</div>
</div>
<div class="char-info">187 / 280</div>
<div class="row-actions">
<button class="icon-btn">✎</button>
<button class="icon-btn" onclick="regen('x')">↻</button>
</div>
<div class="status-dot dot-green"></div>
</div>
<!-- Facebook -->
<div class="platform-row">
<div class="platform-icon p-fb">
<svg viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</div>
<div>
<div class="platform-name">Facebook</div>
<div class="platform-text">We're excited to announce the launch of our new product! 🎉<br>Built to help teams save time, work smarter and achieve more.<br>Thank you to everyone who's been part of this journey.</div>
</div>
<div class="char-info">234 / 63206</div>
<div class="row-actions">
<button class="icon-btn">✎</button>
<button class="icon-btn" onclick="regen('fb')">↻</button>
</div>
<div class="status-dot dot-green"></div>
</div>
<!-- Instagram -->
<div class="platform-row">
<div class="platform-icon p-ig">
<svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
</div>
<div>
<div class="platform-name">Instagram</div>
<div class="platform-text">Big news! 🚀 Our new product is here to help teams save time, work smarter and achieve more.<br>Thank you to our amazing community for being part of this journey.</div>
</div>
<div class="char-info">220 / 2200</div>
<div class="row-actions">
<button class="icon-btn">✎</button>
<button class="icon-btn" onclick="regen('ig')">↻</button>
</div>
<div class="status-dot dot-amber"></div>
</div>
<!-- TikTok -->
<div class="platform-row">
<div class="platform-icon p-tt">
<svg viewBox="0 0 24 24"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.28 6.28 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.78 1.52V6.72a4.85 4.85 0 01-1.01-.03z"/></svg>
</div>
<div>
<div class="platform-name">TikTok caption</div>
<div class="platform-text">New product. Smarter teams. More impact.<br>We built this to help you save time and get more done.<br>Let's go. 🚀 #ProductLaunch #TeamworkMadeEasy</div>
</div>
<div class="char-info">143 / 2200</div>
<div class="row-actions">
<button class="icon-btn">✎</button>
<button class="icon-btn" onclick="regen('tt')">↻</button>
</div>
<div class="status-dot dot-green"></div>
</div>
<!-- Threads -->
<div class="platform-row">
<div class="platform-icon p-th">
<svg viewBox="0 0 24 24"><path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 012.325.196v-.207c0-.886-.308-1.573-.918-2.04-.573-.444-1.36-.668-2.342-.668-.987 0-1.81.226-2.446.672l-.804-1.629c.944-.651 2.156-.98 3.609-.98 1.803 0 3.266.46 4.35 1.366 1.12.935 1.687 2.235 1.687 3.862v5.546l.014.03c.16.342.27.707.327 1.1.47-1.18.65-2.572.507-4.172-.295-3.261-1.888-5.762-4.624-7.422C17.143 5.2 14.77 4.5 12.186 4.485c-2.584.015-4.957.715-6.888 2.025-2.738 1.66-4.33 4.161-4.624 7.422-.144 1.6.037 2.992.507 4.172.057-.393.168-.758.327-1.1l.014-.03V11.43c0-1.627.567-2.927 1.687-3.862 1.084-.906 2.547-1.366 4.35-1.366z" fill-rule="evenodd"/></svg>
</div>
<div>
<div class="platform-name">Threads</div>
<div class="platform-text">We're excited to announce the launch of our new product — built to help teams save time, work smarter and achieve more. Big things ahead. 🚀</div>
</div>
<div class="char-info">194 / 500</div>
<div class="row-actions">
<button class="icon-btn">✎</button>
<button class="icon-btn" onclick="regen('th')">↻</button>
</div>
<div class="status-dot dot-green"></div>
</div>
<!-- WhatsApp -->
<div class="platform-row">
<div class="platform-icon p-wa">
<svg viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
</div>
<div>
<div class="platform-name">WhatsApp channel</div>
<div class="platform-text">We're excited to launch our new product! Built to help teams save time, work smarter and achieve more. Thank you for being part of this journey. More updates coming soon. 🚀</div>
</div>
<div class="char-info">201 / 1024</div>
<div class="row-actions">
<button class="icon-btn">✎</button>
<button class="icon-btn" onclick="regen('wa')">↻</button>
</div>
<div class="status-dot dot-green"></div>
</div>
<!-- YouTube -->
<div class="platform-row">
<div class="platform-icon p-yt">
<svg viewBox="0 0 24 24"><path d="M23.495 6.205a3.007 3.007 0 00-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 00.527 6.205a31.247 31.247 0 00-.522 5.805 31.247 31.247 0 00.522 5.783 3.007 3.007 0 002.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 002.088-2.088 31.247 31.247 0 00.5-5.783 31.247 31.247 0 00-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/></svg>
</div>
<div>
<div class="platform-name">YouTube community</div>
<div class="platform-text">New product is live! Built to help teams save time, work smarter and achieve more. Check it out and let us know what you think! More exciting updates coming soon. 🚀</div>
</div>
<div class="char-info">189 / 5000</div>
<div class="row-actions">
<button class="icon-btn">✎</button>
<button class="icon-btn" onclick="regen('yt')">↻</button>
</div>
<div class="status-dot dot-green"></div>
</div>
</div>
</div>
<!-- Col 3: Publishing Controls -->
<div class="col" style="border-right:none">
<div class="col-head">
<div class="col-title"><span class="col-num">3</span>Publishing controls</div>
<div class="col-sub">Choose where, when and how to publish.</div>
</div>
<div class="pub-body">
<!-- Publish To -->
<div>
<div class="pub-section-label">Publish to <button class="select-all" onclick="toggleAll()">Select all</button></div>
<div class="platform-grid">
<div class="plat-check" onclick="togglePlat(this,'#0077b5')">
<div class="plat-check-icon p-li" style="width:32px;height:32px;border-radius:8px;">
<div class="check-badge on" id="cb-li"></div>
<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:#fff"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</div>
<span>LinkedIn</span>
</div>
<div class="plat-check" onclick="togglePlat(this,'#000')">
<div class="plat-check-icon p-x" style="width:32px;height:32px;border-radius:8px;font-size:12px;font-weight:700;font-family:serif;">
<div class="check-badge on" id="cb-x"></div>𝕏
</div>
<span>X (Twitter)</span>
</div>
<div class="plat-check" onclick="togglePlat(this,'#1877f2')">
<div class="plat-check-icon p-fb" style="width:32px;height:32px;border-radius:8px;">
<div class="check-badge on" id="cb-fb"></div>
<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:#fff"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</div>
<span>Facebook</span>
</div>
<div class="plat-check" onclick="togglePlat(this,'#e1306c')">
<div class="plat-check-icon p-ig" style="width:32px;height:32px;border-radius:8px;">
<div class="check-badge on" id="cb-ig"></div>
<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:#fff"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
</div>
<span>Instagram</span>
</div>
<div class="plat-check" onclick="togglePlat(this,'#000')">
<div class="plat-check-icon p-tt" style="width:32px;height:32px;border-radius:8px;">
<div class="check-badge on" id="cb-tt"></div>
<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:#fff"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.28 6.28 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.78 1.52V6.72a4.85 4.85 0 01-1.01-.03z"/></svg>
</div>
<span>TikTok</span>
</div>
<div class="plat-check" onclick="togglePlat(this,'#000')">
<div class="plat-check-icon p-th" style="width:32px;height:32px;border-radius:8px;">
<div class="check-badge on" id="cb-th"></div>
<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:#fff"><path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 012.325.196v-.207c0-.886-.308-1.573-.918-2.04-.573-.444-1.36-.668-2.342-.668-.987 0-1.81.226-2.446.672l-.804-1.629c.944-.651 2.156-.98 3.609-.98 1.803 0 3.266.46 4.35 1.366 1.12.935 1.687 2.235 1.687 3.862v5.546l.014.03c.16.342.27.707.327 1.1.47-1.18.65-2.572.507-4.172-.295-3.261-1.888-5.762-4.624-7.422C17.143 5.2 14.77 4.5 12.186 4.485c-2.584.015-4.957.715-6.888 2.025-2.738 1.66-4.33 4.161-4.624 7.422-.144 1.6.037 2.992.507 4.172.057-.393.168-.758.327-1.1l.014-.03V11.43c0-1.627.567-2.927 1.687-3.862 1.084-.906 2.547-1.366 4.35-1.366z" fill-rule="evenodd"/></svg>
</div>
<span>Threads</span>
</div>
<div class="plat-check" onclick="togglePlat(this,'#25d366')">
<div class="plat-check-icon p-wa" style="width:32px;height:32px;border-radius:8px;">
<div class="check-badge on" id="cb-wa"></div>
<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:#fff"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
</div>
<span>WhatsApp</span>
</div>
<div class="plat-check" onclick="togglePlat(this,'#ff0000')">
<div class="plat-check-icon p-yt" style="width:32px;height:32px;border-radius:8px;">
<div class="check-badge on" id="cb-yt"></div>
<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:#fff"><path d="M23.495 6.205a3.007 3.007 0 00-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 00.527 6.205a31.247 31.247 0 00-.522 5.805 31.247 31.247 0 00.522 5.783 3.007 3.007 0 002.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 002.088-2.088 31.247 31.247 0 00.5-5.783 31.247 31.247 0 00-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/></svg>
</div>
<span>YouTube</span>
</div>
</div>
</div>
<div class="divider"></div>
<!-- When to Publish -->
<div>
<div class="pub-section-label">When to publish</div>
<div class="radio-group">
<label class="radio-item">
<input type="radio" name="publish-when" value="now">
<div><div class="radio-label">Post now</div></div>
</label>
<label class="radio-item">
<input type="radio" name="publish-when" value="schedule" checked>
<div>
<div class="radio-label">Schedule</div>
<div class="radio-sub">Choose date and time for each platform</div>
</div>
</label>
<label class="radio-item">
<input type="radio" name="publish-when" value="approval">
<div>
<div class="radio-label">Send for approval</div>
<div class="radio-sub">Require approval before publishing</div>
</div>
</label>
<label class="radio-item">
<input type="radio" name="publish-when" value="draft">
<div><div class="radio-label">Save as draft</div></div>
</label>
</div>
</div>
<div class="divider"></div>
<!-- Schedule table -->
<div>
<div class="pub-section-label">Date & time <button class="select-all">Customize per platform</button></div>
<table class="schedule-table">
<tbody>
<tr>
<td><div class="sched-icon p-li" style="width:18px;height:18px;border-radius:4px;"><svg viewBox="0 0 24 24" style="width:10px;height:10px;fill:#fff"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></div>LinkedIn</td>
<td><span class="sched-date">May 20, 2024</span></td>
<td><input class="sched-input" type="time" value="09:00"></td>
</tr>
<tr>
<td><div class="sched-icon p-x" style="width:18px;height:18px;border-radius:4px;font-size:9px;font-weight:700;font-family:serif;">𝕏</div>X</td>
<td><span class="sched-date">May 20, 2024</span></td>
<td><input class="sched-input" type="time" value="09:15"></td>
</tr>
<tr>
<td><div class="sched-icon p-ig" style="width:18px;height:18px;border-radius:4px;"><svg viewBox="0 0 24 24" style="width:10px;height:10px;fill:#fff"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg></div>Instagram</td>
<td><span class="sched-date">May 20, 2024</span></td>
<td><input class="sched-input" type="time" value="11:00"></td>
</tr>
<tr>
<td><div class="sched-icon p-fb" style="width:18px;height:18px;border-radius:4px;"><svg viewBox="0 0 24 24" style="width:10px;height:10px;fill:#fff"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg></div>Facebook</td>
<td><span class="sched-date">May 20, 2024</span></td>
<td><input class="sched-input" type="time" value="12:00"></td>
</tr>
<tr>
<td><div class="sched-icon p-tt" style="width:18px;height:18px;border-radius:4px;"><svg viewBox="0 0 24 24" style="width:10px;height:10px;fill:#fff"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.28 6.28 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.78 1.52V6.72a4.85 4.85 0 01-1.01-.03z"/></svg></div>TikTok</td>
<td><span class="sched-date">May 20, 2024</span></td>
<td><input class="sched-input" type="time" value="18:00"></td>
</tr>
<tr>
<td><div class="sched-icon p-th" style="width:18px;height:18px;border-radius:4px;font-size:9px;font-weight:700;color:#fff;font-family:sans-serif;">@</div>Threads</td>
<td><span class="sched-date">May 20, 2024</span></td>
<td><input class="sched-input" type="time" value="19:00"></td>
</tr>
<tr>
<td><div class="sched-icon p-wa" style="width:18px;height:18px;border-radius:4px;"><svg viewBox="0 0 24 24" style="width:10px;height:10px;fill:#fff"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg></div>WhatsApp</td>
<td><span class="sched-date">May 21, 2024</span></td>
<td><input class="sched-input" type="time" value="10:00"></td>
</tr>
<tr>
<td><div class="sched-icon p-yt" style="width:18px;height:18px;border-radius:4px;"><svg viewBox="0 0 24 24" style="width:10px;height:10px;fill:#fff"><path d="M23.495 6.205a3.007 3.007 0 00-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 00.527 6.205a31.247 31.247 0 00-.522 5.805 31.247 31.247 0 00.522 5.783 3.007 3.007 0 002.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 002.088-2.088 31.247 31.247 0 00.5-5.783 31.247 31.247 0 00-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/></svg></div>YouTube</td>
<td><span class="sched-date">May 21, 2024</span></td>
<td><input class="sched-input" type="time" value="12:00"></td>
</tr>
</tbody>
</table>
</div>
<div class="divider"></div>
<!-- Reviewer -->
<div>
<div class="pub-section-label">Assign reviewer (optional)</div>
<select class="reviewer-select">
<option value="" disabled selected>Select a team member</option>
<option>Alice Mwangi</option>
<option>Brian Odhiambo</option>
<option>Carol Njeri</option>
</select>
</div>
</div>
<div class="pub-footer">
<div class="btn-row">
<button class="btn-draft">Save draft</button>
<button class="btn-approval">Send for approval</button>
</div>
<button class="btn-schedule" onclick="schedulePosts()">
<svg viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>
Schedule posts
</button>
</div>
</div>
</div>
<script>
function updateChars(){
const t=document.getElementById('master-msg').value;
document.getElementById('msg-count').textContent=t.length;
}
function updateCTA(){
const t=document.getElementById('cta-input').value;
document.getElementById('cta-count').textContent=t.length;
}
function togglePlat(el,color){
const badge=el.querySelector('.check-badge');
badge.classList.toggle('on');
}
let allOn=true;
function toggleAll(){
allOn=!allOn;
document.querySelectorAll('.check-badge').forEach(b=>{
if(allOn)b.classList.add('on');
else b.classList.remove('on');
});
}
function regen(plat){
const variants={
li:['Thrilled to share that our new product is officially live — designed to empower modern teams to work smarter, faster, and achieve more together.\n\nGrateful for every person who helped make this possible. The best is yet to come.'],
x:['Something big just dropped.\nWe built this for every team that deserves better tools. Smarter work starts now. 🚀'],
fb:['We\'re live! 🎉\nOur new product is here to help your team do their best work — collaborate better, move faster, and achieve more.\nTag a teammate who needs this!'],
ig:['The wait is over! ✨ Our new product was built for teams who refuse to settle for slow.\nTap the link in bio to learn more.'],
tt:['POV: your team just got a new superpower.\nWe built this so you can work less and achieve more. 🚀 #ProductLaunch #WorkSmarter'],
th:['We shipped something we\'re really proud of — a product that helps teams create, collaborate, and share across every channel. Go check it out.'],
wa:['Big news from us! 🎉 Our new product just launched — it\'s built to help teams save time and work smarter. More details dropping soon!'],
yt:['It\'s here! We just launched our newest product and we want YOU to be part of the journey. Drop your thoughts in the comments — we read every one! 🚀']
};
const row=document.querySelector('[data-plat="'+plat+'"]');
}
function schedulePosts(){
const btn=document.querySelector('.btn-schedule');
btn.textContent='✓ Posts scheduled!';
btn.style.background='#1a8c4e';
setTimeout(()=>{
btn.innerHTML='<svg viewBox="0 0 24 24" style="width:15px;height:15px;fill:currentColor"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg> Schedule posts';
btn.style.background='';
},2500);
}
</script>
</body>
</html>