Screenshot Paste - wiki-sp-demo-empty.html

Overview Files Skills Packages Releases Dependencies Issues Breadcrumbs Pull Requests Activity

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

<!DOCTYPE html>
<html lang="en">
<head><script>(function(){var n=0;function show(p,m){var el=document.createElement('div');el.style.cssText='position:fixed;left:0;right:0;background:#e04040;color:#fff;padding:6px 12px;z-index:'+(99999-n)+';font:13px/1.4 monospace;white-space:pre-wrap;border-bottom:1px solid #b02020;top:'+n*30+'px';el.textContent=p+m;document.body.appendChild(el);n++}window.onerror=function(msg,src,line){show('ERROR '+(src||'').split('/').pop()+':'+line+' \u2014 ',msg)};window.addEventListener('unhandledrejection',function(e){show('REJECT \u2014 ',e.reason&&e.reason.message||e.reason||'unknown')})})()</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screenshot Paste - Ready State</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: #0d1117;
    color: #e6edf3;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid #30363d;
    flex-shrink: 0;
  }
  .header h1 { font-size: 16px; color: #00b8b0; font-weight: 600; margin-bottom: 4px; }
  .header .subtitle { font-size: 12px; color: #8b949e; }
  .paste-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 16px;
    border: 2px solid #00b8b0;
    background: rgba(0, 184, 176, 0.04);
  }
  .prompt { text-align: center; user-select: none; }
  .prompt .icon { font-size: 48px; color: #30363d; margin-bottom: 12px; }
  .prompt .text { font-size: 14px; color: #484f58; margin-bottom: 4px; }
  .prompt .hint { font-size: 11px; color: #484f58; opacity: 0.7; }
  .focus-label {
    font-size: 10px; color: #00b8b0; margin-top: 12px;
    letter-spacing: 0.5px; text-transform: uppercase;
  }
  .status-bar {
    padding: 8px 20px;
    border-top: 1px solid #30363d;
    font-size: 11px;
    color: #484f58;
    flex-shrink: 0;
    text-align: center;
  }
  .demo-badge {
    position: fixed; bottom: 36px; right: 12px;
    font-size: 10px; color: #484f58; opacity: 0.6;
  }
</style>
</head>
<body>
  <div class="header">
    <h1>Screenshot Paste</h1>
    <div class="subtitle">Paste from clipboard to save screenshots to your project</div>
  </div>
  <div class="paste-zone">
    <div class="prompt">
      <div class="icon">&#128247;</div>
      <div class="text">Paste a screenshot here</div>
      <div class="hint">Ctrl+V / Cmd+V &mdash; take a screenshot first with Win+Shift+S or Cmd+Shift+4</div>
      <div class="focus-label">Ready for paste</div>
    </div>
  </div>
  <div class="status-bar">Ready &mdash; paste an image from your clipboard</div>
  <div class="demo-badge">Demo &mdash; simulated data</div>
</body>
</html>