340 lines
11 KiB
HTML
340 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
||
|
|
<title>Kalei — Share Pattern</title>
|
||
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
|
|
<style>
|
||
|
|
/* Blurred gallery background */
|
||
|
|
.bg-content {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
filter: blur(3px);
|
||
|
|
opacity: 0.35;
|
||
|
|
}
|
||
|
|
.bg-status {
|
||
|
|
height: 54px;
|
||
|
|
padding: 14px 28px 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.bg-header {
|
||
|
|
height: 56px;
|
||
|
|
background: rgba(28,34,64,0.3);
|
||
|
|
}
|
||
|
|
.bg-pattern-card {
|
||
|
|
margin: 16px;
|
||
|
|
height: 260px;
|
||
|
|
background: var(--kalei-navy);
|
||
|
|
border: 1px solid var(--twilight);
|
||
|
|
border-radius: var(--radius-2xl);
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-overlay {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
background: rgba(5,5,8,0.7);
|
||
|
|
backdrop-filter: blur(8px);
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
z-index: 50;
|
||
|
|
}
|
||
|
|
.share-sheet {
|
||
|
|
width: 100%;
|
||
|
|
background: var(--kalei-navy);
|
||
|
|
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
|
||
|
|
padding: 0 0 32px;
|
||
|
|
border-top: 1px solid var(--twilight);
|
||
|
|
}
|
||
|
|
.sheet-handle {
|
||
|
|
width: 36px;
|
||
|
|
height: 4px;
|
||
|
|
background: var(--twilight);
|
||
|
|
border-radius: var(--radius-full);
|
||
|
|
margin: 14px auto 18px;
|
||
|
|
}
|
||
|
|
.sheet-title {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--pure-light);
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Pattern card preview */
|
||
|
|
.pattern-preview {
|
||
|
|
margin: 0 16px 20px;
|
||
|
|
background: var(--void);
|
||
|
|
border-radius: var(--radius-xl);
|
||
|
|
border: 1px solid var(--twilight);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.pattern-visual-area {
|
||
|
|
height: 120px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background: var(--void);
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.pattern-aura {
|
||
|
|
position: absolute;
|
||
|
|
width: 120px;
|
||
|
|
height: 120px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%);
|
||
|
|
filter: blur(30px);
|
||
|
|
animation: breathing 6s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
.pattern-content-area {
|
||
|
|
padding: 12px 14px;
|
||
|
|
border-top: 1px solid var(--twilight);
|
||
|
|
}
|
||
|
|
.pattern-thought {
|
||
|
|
font-size: 13px;
|
||
|
|
color: var(--soft-light);
|
||
|
|
line-height: 1.4;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
.pattern-reframe {
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--amethyst-light);
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
.pattern-branding {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
}
|
||
|
|
.branding-logo {
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
}
|
||
|
|
.branding-text {
|
||
|
|
font-size: 10px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--faint-light);
|
||
|
|
letter-spacing: 0.04em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Share targets */
|
||
|
|
.share-targets {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
padding: 0 20px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
.share-target {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
cursor: pointer;
|
||
|
|
background: transparent;
|
||
|
|
border: none;
|
||
|
|
padding: 8px;
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
transition: background 0.15s;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.share-target:hover { background: rgba(28,34,64,0.5); }
|
||
|
|
.share-target-icon {
|
||
|
|
width: 52px;
|
||
|
|
height: 52px;
|
||
|
|
border-radius: 14px;
|
||
|
|
background: var(--deep-glass);
|
||
|
|
border: 1px solid var(--twilight);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.share-target-label {
|
||
|
|
font-size: 11px;
|
||
|
|
color: var(--dim-light);
|
||
|
|
font-family: var(--font-primary);
|
||
|
|
}
|
||
|
|
.close-row {
|
||
|
|
padding: 0 16px;
|
||
|
|
}
|
||
|
|
.close-btn {
|
||
|
|
width: 100%;
|
||
|
|
height: 48px;
|
||
|
|
background: var(--deep-glass);
|
||
|
|
border: 1px solid var(--twilight);
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
color: var(--soft-light);
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: 500;
|
||
|
|
font-family: var(--font-primary);
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: background 0.15s;
|
||
|
|
}
|
||
|
|
.close-btn:hover { background: var(--twilight); }
|
||
|
|
.copied-toast {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 320px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
background: var(--deep-glass);
|
||
|
|
border: 1px solid var(--emerald);
|
||
|
|
border-radius: var(--radius-full);
|
||
|
|
padding: 8px 20px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
box-shadow: 0 0 16px rgba(16,185,129,0.2);
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 0.3s;
|
||
|
|
pointer-events: none;
|
||
|
|
white-space: nowrap;
|
||
|
|
z-index: 60;
|
||
|
|
}
|
||
|
|
.copied-toast.visible { opacity: 1; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="device-frame">
|
||
|
|
<!-- Blurred gallery background -->
|
||
|
|
<div class="bg-content" aria-hidden="true">
|
||
|
|
<div class="bg-status">
|
||
|
|
<span style="font-size:15px; font-weight:600; color:var(--pure-light);">9:41</span>
|
||
|
|
</div>
|
||
|
|
<div class="bg-header"></div>
|
||
|
|
<div class="bg-pattern-card"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Copied toast -->
|
||
|
|
<div class="copied-toast" id="copiedToast">
|
||
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||
|
|
<path d="M2 7L5.5 10.5L12 3" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
|
|
</svg>
|
||
|
|
<span style="font-size:13px; color:var(--soft-light); font-weight:500;">Link copied</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Share sheet modal -->
|
||
|
|
<div class="modal-overlay">
|
||
|
|
<div class="share-sheet">
|
||
|
|
<div class="sheet-handle"></div>
|
||
|
|
<div class="sheet-title">Share Pattern</div>
|
||
|
|
|
||
|
|
<!-- Pattern card preview -->
|
||
|
|
<div class="pattern-preview">
|
||
|
|
<div class="pattern-visual-area">
|
||
|
|
<div class="pattern-aura"></div>
|
||
|
|
<svg width="100" height="100" viewBox="0 0 100 100" style="mix-blend-mode: screen; position:relative; z-index:1;">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="sb1" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.8"/>
|
||
|
|
<stop offset="100%" stop-color="#7C3AED" stop-opacity="0.3"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="sb2" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#6EE7B7" stop-opacity="0.7"/>
|
||
|
|
<stop offset="100%" stop-color="#059669" stop-opacity="0.2"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="sb3" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#FDE68A" stop-opacity="0.6"/>
|
||
|
|
<stop offset="100%" stop-color="#D97706" stop-opacity="0.2"/>
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<g transform="translate(50,50)">
|
||
|
|
<g><path d="M0,0 L6,-32 L0,-38 L-6,-32Z" fill="url(#sb1)"/></g>
|
||
|
|
<g transform="rotate(60)"><path d="M0,0 L6,-32 L0,-38 L-6,-32Z" fill="url(#sb2)"/></g>
|
||
|
|
<g transform="rotate(120)"><path d="M0,0 L6,-32 L0,-38 L-6,-32Z" fill="url(#sb3)"/></g>
|
||
|
|
<g transform="rotate(180)"><path d="M0,0 L6,-32 L0,-38 L-6,-32Z" fill="url(#sb1)"/></g>
|
||
|
|
<g transform="rotate(240)"><path d="M0,0 L6,-32 L0,-38 L-6,-32Z" fill="url(#sb2)"/></g>
|
||
|
|
<g transform="rotate(300)"><path d="M0,0 L6,-32 L0,-38 L-6,-32Z" fill="url(#sb3)"/></g>
|
||
|
|
<circle r="8" fill="white" opacity="0.12"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="pattern-content-area">
|
||
|
|
<div class="pattern-thought">"I completely bombed my presentation today..."</div>
|
||
|
|
<div class="pattern-reframe">One hard moment doesn't define the arc. What's one thing you learned that you couldn't have without this?</div>
|
||
|
|
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;">
|
||
|
|
<span style="font-size:10px; color:var(--faint-light);">Feb 22, 2026 · Catastrophizing</span>
|
||
|
|
<span style="font-size:10px; color:var(--emerald-light); font-weight:600;">+52% lift</span>
|
||
|
|
</div>
|
||
|
|
<div class="pattern-branding">
|
||
|
|
<svg class="branding-logo" width="16" height="16" viewBox="0 0 16 16">
|
||
|
|
<g transform="translate(8,8)">
|
||
|
|
<path d="M0,0 L2,-6 L0,-8 L-2,-6Z" fill="#8B5CF6" opacity="0.7"/>
|
||
|
|
<path d="M0,0 L2,-6 L0,-8 L-2,-6Z" fill="#3B82F6" opacity="0.5" transform="rotate(120)"/>
|
||
|
|
<path d="M0,0 L2,-6 L0,-8 L-2,-6Z" fill="#10B981" opacity="0.5" transform="rotate(240)"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
<span class="branding-text">Made with Kalei</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Share targets -->
|
||
|
|
<div class="share-targets">
|
||
|
|
<button class="share-target" onclick="copyLink()">
|
||
|
|
<div class="share-target-icon">
|
||
|
|
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||
|
|
<path d="M9 13L13 9M8 10L6 12C5 13 5 15 6 16C7 17 9 17 10 16L12 14" stroke="#E2E8F0" stroke-width="1.4" stroke-linecap="round"/>
|
||
|
|
<path d="M14 12L16 10C17 9 17 7 16 6C15 5 13 5 12 6L10 8" stroke="#E2E8F0" stroke-width="1.4" stroke-linecap="round"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<span class="share-target-label">Copy Link</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button class="share-target" onclick="shareMessages()">
|
||
|
|
<div class="share-target-icon">
|
||
|
|
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||
|
|
<rect x="3" y="5" width="16" height="12" rx="3" stroke="#E2E8F0" stroke-width="1.4"/>
|
||
|
|
<path d="M3 17L7 14" stroke="#E2E8F0" stroke-width="1.4" stroke-linecap="round"/>
|
||
|
|
<path d="M7 10H15M7 13H12" stroke="#E2E8F0" stroke-width="1" stroke-linecap="round"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<span class="share-target-label">Messages</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button class="share-target" onclick="shareMore()">
|
||
|
|
<div class="share-target-icon">
|
||
|
|
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||
|
|
<circle cx="7" cy="11" r="1.5" fill="#E2E8F0"/>
|
||
|
|
<circle cx="11" cy="11" r="1.5" fill="#E2E8F0"/>
|
||
|
|
<circle cx="15" cy="11" r="1.5" fill="#E2E8F0"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<span class="share-target-label">More...</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Close -->
|
||
|
|
<div class="close-row">
|
||
|
|
<a class="close-btn" href="../gallery/33-gallery-detail.html">Close</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function copyLink() {
|
||
|
|
const toast = document.getElementById('copiedToast');
|
||
|
|
toast.classList.add('visible');
|
||
|
|
setTimeout(() => toast.classList.remove('visible'), 2000);
|
||
|
|
}
|
||
|
|
|
||
|
|
function shareMessages() {
|
||
|
|
// Simulated share action
|
||
|
|
alert('Opening Messages...');
|
||
|
|
}
|
||
|
|
|
||
|
|
function shareMore() {
|
||
|
|
// Simulated share sheet
|
||
|
|
alert('Opening share sheet...');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|