extremely claude-assisted go game based on atproto! working on cleaning up and giving a more unique design, still has a bit of a slop vibe to it.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142<script lang="ts"> interface Props { isOpen: boolean; onClose: () => void; class?: string; children?: any; }
let { isOpen, onClose, class: className = '', children }: Props = $props();
function handleKeydown(e: KeyboardEvent) { if (e.key === 'Escape') { onClose(); } }</script>
{#if isOpen} <div class="modal-overlay" onclick={onClose} onkeydown={handleKeydown} role="button" tabindex="0" > <div class="modal-content cloud-card {className}" onclick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" > <button class="modal-close" onclick={onClose} aria-label="Close modal"> ✕ </button> {@render children?.()} </div> </div>{/if}
<style> .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(90, 122, 144, 0.3); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fadeIn 0.2s ease-out; }
.modal-content { max-width: 650px; width: 100%; max-height: 90vh; overflow: visible; animation: slideIn 0.3s ease-out; display: flex; flex-direction: column; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 248, 250, 0.9) 50%, rgba(232, 239, 244, 0.85) 100% ); border: none; border-radius: 2rem 2.5rem 2rem 2.2rem; box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.4), 0 8px 32px rgba(90, 122, 144, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); position: relative; }
.modal-content::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.6) 0%, rgba(212, 229, 239, 0.3) 50%, rgba(255, 255, 255, 0.4) 100% ); filter: blur(4px); z-index: -1; }
.modal-close { position: absolute; top: 1rem; right: 1rem; background: transparent; border: none; font-size: 1.5rem; color: var(--sky-slate); cursor: pointer; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; transition: all 0.6s ease; z-index: 10; }
.modal-close:hover { background: var(--sky-apricot-light); color: var(--sky-apricot-dark); transform: rotate(90deg); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }</style>