Screenshot Paste - wiki-sp-demo-rightclick.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 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
<!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 - Right-Click Copy</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;
  }
  .preview-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.92);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
  }
  .preview-close {
    position: absolute; top: 12px; right: 16px;
    font-size: 24px; color: #484f58; cursor: pointer; line-height: 1;
  }
  .preview-close:hover { color: #e6edf3; }
  .mock-preview {
    width: 80vw; max-width: 700px; height: 50vh;
    border: 1px solid #30363d; border-radius: 4px;
    background: linear-gradient(135deg, #1a2332 0%, #1e3a5f 20%, #1a3350 40%, #162d44 60%, #1e3a5f 80%, #1a2332 100%);
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
  }
  .mock-preview::before {
    content: ''; position: absolute; top: 20px; left: 24px;
    width: 45%; height: 20px; background: #00b8b018; border-radius: 4px;
  }
  .mock-preview::after {
    content: ''; position: absolute; bottom: 30px; left: 24px; right: 24px;
    height: 10px; background: #30363d33; border-radius: 3px;
  }
  .mock-content-lines {
    position: absolute; top: 56px; left: 24px; right: 24px;
  }
  .mock-line {
    height: 6px; background: #30363d22; border-radius: 2px; margin-bottom: 8px;
  }
  .mock-line:nth-child(1) { width: 80%; }
  .mock-line:nth-child(2) { width: 65%; }
  .mock-line:nth-child(3) { width: 90%; }
  .mock-line:nth-child(4) { width: 50%; }
  .mock-line:nth-child(5) { width: 75%; }
  .preview-info {
    margin-top: 12px; text-align: center;
    font-size: 12px; color: #8b949e; line-height: 1.6; max-width: 90vw;
  }
  .preview-info .pv-label { color: #484f58; }
  .preview-info .pv-val { color: #00b8b0; }
  .preview-hint {
    margin-top: 10px; padding: 8px 16px;
    background: rgba(0, 184, 176, 0.12);
    border: 1px solid rgba(0, 184, 176, 0.3);
    border-radius: 6px; color: #00b8b0;
    font-size: 13px; font-weight: 500; text-align: center;
    animation: hintPulse 2s ease-in-out infinite;
  }
  @keyframes hintPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
  .demo-badge {
    position: fixed; bottom: 12px; right: 12px;
    font-size: 10px; color: #484f58; opacity: 0.6; z-index: 1001;
  }
</style>
</head>
<body>
  <div class="preview-overlay">
    <span class="preview-close">&times;</span>
    <div class="mock-preview">
      <div class="mock-content-lines">
        <div class="mock-line"></div>
        <div class="mock-line"></div>
        <div class="mock-line"></div>
        <div class="mock-line"></div>
        <div class="mock-line"></div>
      </div>
    </div>
    <div class="preview-info">
      <span class="pv-label">Name:</span> <span class="pv-val">dart-green-line-route-editor-1568x975.png</span><br>
      <span class="pv-label">Size:</span> <span class="pv-val">1568 x 975</span><br>
      <span class="pv-label">File:</span> <span class="pv-val">187.3 KB</span>
    </div>
    <div class="preview-hint">Right-click image above &rarr; Copy image</div>
  </div>
  <div class="demo-badge">Demo &mdash; simulated data</div>
</body>
</html>