542 lines
19 KiB
HTML
542 lines
19 KiB
HTML
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="es">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Vapora Logo - Sistema de Branding</title>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@800&display=swap" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background: #0a0a0a;
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
color: #fff;
|
||
|
|
padding: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
color: #22d3ee;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
font-size: 28px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle {
|
||
|
|
color: #a855f7;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
font-size: 14px;
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
color: #ec4899;
|
||
|
|
margin-top: 50px;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
font-size: 18px;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
border-bottom: 1px solid #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2:first-of-type {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||
|
|
gap: 30px;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview {
|
||
|
|
border: 1px solid #333;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
background: #111;
|
||
|
|
transition: border-color 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview:hover {
|
||
|
|
border-color: #22d3ee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview h3 {
|
||
|
|
color: #a855f7;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
font-size: 12px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview-wrapper {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background: #000;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 20px;
|
||
|
|
min-height: 180px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vertical .preview-wrapper {
|
||
|
|
min-height: 320px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview-wrapper a {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
text-decoration: none;
|
||
|
|
cursor: pointer;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview-wrapper a::after {
|
||
|
|
content: '🔗 Click to open';
|
||
|
|
position: absolute;
|
||
|
|
background: rgba(0, 0, 0, 0.8);
|
||
|
|
color: #22d3ee;
|
||
|
|
padding: 8px 12px;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 10px;
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 0.3s;
|
||
|
|
white-space: nowrap;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview-wrapper a:hover::after {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
img {
|
||
|
|
max-width: 100%;
|
||
|
|
height: auto;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info {
|
||
|
|
margin-top: 12px;
|
||
|
|
padding: 10px;
|
||
|
|
background: #1a1a1a;
|
||
|
|
border-left: 2px solid #22d3ee;
|
||
|
|
font-size: 11px;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.variant-type {
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 10px;
|
||
|
|
padding: 2px 6px;
|
||
|
|
background: #1a1a1a;
|
||
|
|
color: #888;
|
||
|
|
margin-top: 8px;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.specs-container {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
|
|
gap: 30px;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spec-card {
|
||
|
|
border: 1px solid #333;
|
||
|
|
padding: 25px;
|
||
|
|
border-radius: 8px;
|
||
|
|
background: #111;
|
||
|
|
transition: border-color 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spec-card:hover {
|
||
|
|
border-color: #ec4899;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spec-card h3 {
|
||
|
|
color: #ec4899;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
font-size: 14px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spec-content ul {
|
||
|
|
list-style: none;
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spec-content li {
|
||
|
|
padding: 6px 0;
|
||
|
|
font-size: 12px;
|
||
|
|
color: #bbb;
|
||
|
|
border-bottom: 1px solid #1a1a1a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spec-content li:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spec-content p {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #bbb;
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 15px;
|
||
|
|
padding: 12px 0;
|
||
|
|
border-bottom: 1px solid #1a1a1a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-item:last-of-type {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-box {
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
border-radius: 4px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-info {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-info strong {
|
||
|
|
display: block;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 12px;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-values {
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-format {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #aaa;
|
||
|
|
margin: 8px 0;
|
||
|
|
padding: 8px 0;
|
||
|
|
border-bottom: 1px solid #222;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-format:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-format span {
|
||
|
|
color: #666;
|
||
|
|
font-weight: 600;
|
||
|
|
display: inline-block;
|
||
|
|
width: 45px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-format {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-code {
|
||
|
|
flex: 1;
|
||
|
|
color: #fff !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.copy-btn {
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
color: #555;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 12px;
|
||
|
|
padding: 2px 6px;
|
||
|
|
border-radius: 3px;
|
||
|
|
margin-left: 8px;
|
||
|
|
transition: all 0.2s;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.copy-btn:hover {
|
||
|
|
background: #1a1a1a;
|
||
|
|
color: #22d3ee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.copy-btn.copied {
|
||
|
|
color: #4ade80;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>🎨 Vapora Logo System</h1>
|
||
|
|
<p class="subtitle">Complete branding system with horizontal and vertical variations</p>
|
||
|
|
|
||
|
|
<div style="background: #1a1a1a; border-left: 3px solid #22d3ee; padding: 15px; margin-bottom: 30px; border-radius: 4px; font-size: 12px; color: #aaa;">
|
||
|
|
💡 <strong>Tip:</strong> Click on any logo preview to open it in a full-screen view in a new tab
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- HORIZONTAL LOGOS -->
|
||
|
|
<h2>📐 Horizontal Logos</h2>
|
||
|
|
<div class="container horizontal">
|
||
|
|
<!-- Animated -->
|
||
|
|
<div class="preview">
|
||
|
|
<h3>Animated (Color)</h3>
|
||
|
|
<div class="preview-wrapper">
|
||
|
|
<a href="./vapora.svg" target="_blank">
|
||
|
|
<img src="./vapora.svg" alt="Vapora Logo - Animated">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="info">Main version with animations - Black background</div>
|
||
|
|
<span class="variant-type">animated</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- White Background -->
|
||
|
|
<div class="preview">
|
||
|
|
<h3>White Background</h3>
|
||
|
|
<div class="preview-wrapper" style="background: #fff;">
|
||
|
|
<a href="./vapora_white.svg" target="_blank">
|
||
|
|
<img src="./vapora_white.svg" alt="Vapora Logo - White">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="info">For light backgrounds - Static version</div>
|
||
|
|
<span class="variant-type">static</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Monochromatic -->
|
||
|
|
<div class="preview">
|
||
|
|
<h3>Monochromatic</h3>
|
||
|
|
<div class="preview-wrapper">
|
||
|
|
<a href="./vapora_mono.svg" target="_blank">
|
||
|
|
<img src="./vapora_mono.svg" alt="Vapora Logo - Mono">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="info">Grayscale - For printing and B/W applications</div>
|
||
|
|
<span class="variant-type">static</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Favicon -->
|
||
|
|
<div class="preview">
|
||
|
|
<h3>Favicon</h3>
|
||
|
|
<div class="preview-wrapper">
|
||
|
|
<a href="./vapora_favicon.svg" target="_blank">
|
||
|
|
<img src="./vapora_favicon.svg" alt="Vapora Logo - Favicon">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="info">64x64px - For browser tabs and favicons</div>
|
||
|
|
<span class="variant-type">animated</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Static -->
|
||
|
|
<div class="preview">
|
||
|
|
<h3>Static Version</h3>
|
||
|
|
<div class="preview-wrapper">
|
||
|
|
<a href="./vapora_static.svg" target="_blank">
|
||
|
|
<img src="./vapora_static.svg" alt="Vapora Logo - Static">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="info">No animations - For documents and PDFs</div>
|
||
|
|
<span class="variant-type">static</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- VERTICAL LOGOS -->
|
||
|
|
<h2>⬇️ Vertical Logos</h2>
|
||
|
|
<div class="container vertical">
|
||
|
|
<!-- Animated -->
|
||
|
|
<div class="preview">
|
||
|
|
<h3>Animated (Color)</h3>
|
||
|
|
<div class="preview-wrapper">
|
||
|
|
<a href="./vapora_v.svg" target="_blank">
|
||
|
|
<img src="./vapora_v.svg" alt="Vapora Logo Vertical - Animated">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="info">Vertical version with animations - Image on top, text below</div>
|
||
|
|
<span class="variant-type">animated</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- White Background -->
|
||
|
|
<div class="preview">
|
||
|
|
<h3>White Background</h3>
|
||
|
|
<div class="preview-wrapper" style="background: #fff;">
|
||
|
|
<a href="./vapora_v_white.svg" target="_blank">
|
||
|
|
<img src="./vapora_v_white.svg" alt="Vapora Logo Vertical - White">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="info">For light backgrounds - Static version</div>
|
||
|
|
<span class="variant-type">static</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Monochromatic -->
|
||
|
|
<div class="preview">
|
||
|
|
<h3>Monochromatic</h3>
|
||
|
|
<div class="preview-wrapper">
|
||
|
|
<a href="./vapora_v_mono.svg" target="_blank">
|
||
|
|
<img src="./vapora_v_mono.svg" alt="Vapora Logo Vertical - Mono">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="info">Grayscale - For printing</div>
|
||
|
|
<span class="variant-type">static</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Favicon Vertical -->
|
||
|
|
<div class="preview">
|
||
|
|
<h3>Favicon Vertical</h3>
|
||
|
|
<div class="preview-wrapper">
|
||
|
|
<a href="./vapora_v_favicon.svg" target="_blank">
|
||
|
|
<img src="./vapora_v_favicon.svg" alt="Vapora Logo Vertical - Favicon">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="info">64x64px - Compact vertical version</div>
|
||
|
|
<span class="variant-type">animated</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Static Vertical -->
|
||
|
|
<div class="preview">
|
||
|
|
<h3>Static Version</h3>
|
||
|
|
<div class="preview-wrapper">
|
||
|
|
<a href="./vapora_v_static.svg" target="_blank">
|
||
|
|
<img src="./vapora_v_static.svg" alt="Vapora Logo Vertical - Static">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="info">No animations - Vertical version for documents</div>
|
||
|
|
<span class="variant-type">static</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- SPECIFICATIONS -->
|
||
|
|
<h2>🎯 Brand Specifications</h2>
|
||
|
|
<div class="specs-container">
|
||
|
|
<div class="spec-card">
|
||
|
|
<h3>Typography</h3>
|
||
|
|
<div class="spec-content">
|
||
|
|
<p><strong>Main Logo:</strong></p>
|
||
|
|
<ul>
|
||
|
|
<li>Font: JetBrains Mono / Fira Code</li>
|
||
|
|
<li>Style: Monospace</li>
|
||
|
|
<li>Weight: 800 (Bold)</li>
|
||
|
|
<li>Letter Spacing: 2-3px</li>
|
||
|
|
</ul>
|
||
|
|
<p style="margin-top: 15px;"><strong>Tagline:</strong></p>
|
||
|
|
<ul>
|
||
|
|
<li>Font: Inter</li>
|
||
|
|
<li>Style: Sans-serif</li>
|
||
|
|
<li>Size: 8px</li>
|
||
|
|
<li>Letter Spacing: 0.1em</li>
|
||
|
|
<li>Text: "Evaporate complexity"</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="spec-card">
|
||
|
|
<h3>Color Palette</h3>
|
||
|
|
<div class="spec-content">
|
||
|
|
<div class="color-item">
|
||
|
|
<div class="color-box" style="background: #22d3ee;"></div>
|
||
|
|
<div class="color-info">
|
||
|
|
<strong>Cyan</strong>
|
||
|
|
<div class="color-values">
|
||
|
|
<div class="color-format"><span>HTML:</span> <span class="color-code">#22d3ee</span> <button class="copy-btn" onclick="copyToClipboard('#22d3ee', this)">📋</button></div>
|
||
|
|
<div class="color-format"><span>RGB:</span> <span class="color-code">rgb(34, 211, 238)</span> <button class="copy-btn" onclick="copyToClipboard('rgb(34, 211, 238)', this)">📋</button></div>
|
||
|
|
<div class="color-format"><span>CMYK:</span> <span class="color-code">86%, 11%, 0%, 7%</span> <button class="copy-btn" onclick="copyToClipboard('86%, 11%, 0%, 7%', this)">📋</button></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="color-item">
|
||
|
|
<div class="color-box" style="background: #a855f7;"></div>
|
||
|
|
<div class="color-info">
|
||
|
|
<strong>Purple</strong>
|
||
|
|
<div class="color-values">
|
||
|
|
<div class="color-format"><span>HTML:</span> <span class="color-code">#a855f7</span> <button class="copy-btn" onclick="copyToClipboard('#a855f7', this)">📋</button></div>
|
||
|
|
<div class="color-format"><span>RGB:</span> <span class="color-code">rgb(168, 85, 247)</span> <button class="copy-btn" onclick="copyToClipboard('rgb(168, 85, 247)', this)">📋</button></div>
|
||
|
|
<div class="color-format"><span>CMYK:</span> <span class="color-code">32%, 66%, 0%, 3%</span> <button class="copy-btn" onclick="copyToClipboard('32%, 66%, 0%, 3%', this)">📋</button></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="color-item">
|
||
|
|
<div class="color-box" style="background: #ec4899;"></div>
|
||
|
|
<div class="color-info">
|
||
|
|
<strong>Pink</strong>
|
||
|
|
<div class="color-values">
|
||
|
|
<div class="color-format"><span>HTML:</span> <span class="color-code">#ec4899</span> <button class="copy-btn" onclick="copyToClipboard('#ec4899', this)">📋</button></div>
|
||
|
|
<div class="color-format"><span>RGB:</span> <span class="color-code">rgb(236, 72, 153)</span> <button class="copy-btn" onclick="copyToClipboard('rgb(236, 72, 153)', this)">📋</button></div>
|
||
|
|
<div class="color-format"><span>CMYK:</span> <span class="color-code">0%, 70%, 35%, 8%</span> <button class="copy-btn" onclick="copyToClipboard('0%, 70%, 35%, 8%', this)">📋</button></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="color-item">
|
||
|
|
<div class="color-box" style="background: #000000; border: 1px solid #333;"></div>
|
||
|
|
<div class="color-info">
|
||
|
|
<strong>Black Background</strong>
|
||
|
|
<div class="color-values">
|
||
|
|
<div class="color-format"><span>HTML:</span> <span class="color-code">#000000</span> <button class="copy-btn" onclick="copyToClipboard('#000000', this)">📋</button></div>
|
||
|
|
<div class="color-format"><span>RGB:</span> <span class="color-code">rgb(0, 0, 0)</span> <button class="copy-btn" onclick="copyToClipboard('rgb(0, 0, 0)', this)">📋</button></div>
|
||
|
|
<div class="color-format"><span>CMYK:</span> <span class="color-code">0%, 0%, 0%, 100%</span> <button class="copy-btn" onclick="copyToClipboard('0%, 0%, 0%, 100%', this)">📋</button></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="color-item">
|
||
|
|
<div class="color-box" style="background: #ffffff; border: 1px solid #ddd;"></div>
|
||
|
|
<div class="color-info">
|
||
|
|
<strong>White Background</strong>
|
||
|
|
<div class="color-values">
|
||
|
|
<div class="color-format"><span>HTML:</span> <span class="color-code">#ffffff</span> <button class="copy-btn" onclick="copyToClipboard('#ffffff', this)">📋</button></div>
|
||
|
|
<div class="color-format"><span>RGB:</span> <span class="color-code">rgb(255, 255, 255)</span> <button class="copy-btn" onclick="copyToClipboard('rgb(255, 255, 255)', this)">📋</button></div>
|
||
|
|
<div class="color-format"><span>CMYK:</span> <span class="color-code">0%, 0%, 0%, 0%</span> <button class="copy-btn" onclick="copyToClipboard('0%, 0%, 0%, 0%', this)">📋</button></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p style="margin-top: 15px; font-size: 11px; color: #888;"><strong>Gradient:</strong> Cyan → Purple → Pink (horizontal transition)</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function copyToClipboard(text, button) {
|
||
|
|
// Copy to clipboard
|
||
|
|
navigator.clipboard.writeText(text).then(() => {
|
||
|
|
// Add visual feedback
|
||
|
|
const originalText = button.textContent;
|
||
|
|
button.classList.add('copied');
|
||
|
|
button.textContent = '✓';
|
||
|
|
|
||
|
|
// Reset after 2 seconds
|
||
|
|
setTimeout(() => {
|
||
|
|
button.classList.remove('copied');
|
||
|
|
button.textContent = originalText;
|
||
|
|
}, 2000);
|
||
|
|
}).catch(() => {
|
||
|
|
// Fallback for older browsers
|
||
|
|
const textarea = document.createElement('textarea');
|
||
|
|
textarea.value = text;
|
||
|
|
document.body.appendChild(textarea);
|
||
|
|
textarea.select();
|
||
|
|
document.execCommand('copy');
|
||
|
|
document.body.removeChild(textarea);
|
||
|
|
|
||
|
|
// Add visual feedback
|
||
|
|
const originalText = button.textContent;
|
||
|
|
button.classList.add('copied');
|
||
|
|
button.textContent = '✓';
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
button.classList.remove('copied');
|
||
|
|
button.textContent = originalText;
|
||
|
|
}, 2000);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|