📱

You're Offline

It looks like you've lost your internet connection. Some features may not be available, but you can still browse previously visited content.

margin: 0 auto var(--space-xl); background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: pulse 2s ease-in-out infinite; } .offline-icon svg { width: 60px; height: 60px; fill: var(--text-inverse); } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .offline-title { font-size: 2.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-lg); background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; } .offline-message { font-size: 1.125rem; color: var(--text-secondary); margin-bottom: var(--space-xl); line-height: 1.8; } .offline-features { background: var(--bg-primary); border-radius: var(--radius-lg); padding: var(--space-xl); margin-bottom: var(--space-xl); border: 1px solid var(--border-color); } .offline-features h3 { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-lg); } .feature-list { display: grid; gap: var(--space-md); text-align: left; } .feature-item { display: flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary); } .feature-item::before { content: '✓'; background: var(--secondary-color); color: var(--text-inverse); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; } .offline-actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-xl); } .btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-lg); font-weight: 600; text-decoration: none; transition: all var(--transition-base); border: none; cursor: pointer; font-size: 1rem; min-width: 150px; justify-content: center; } .btn-primary { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); color: var(--text-inverse); box-shadow: var(--shadow-lg); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .btn-secondary { background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); } .btn-secondary:hover { background: var(--primary-color); color: var(--text-inverse); transform: translateY(-2px); } .theme-toggle { position: fixed; top: 20px; right: 20px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-base); box-shadow: var(--shadow-lg); } .theme-toggle:hover { transform: scale(1.1); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } .connection-status { padding: var(--space-md); border-radius: var(--radius-lg); font-weight: 500; margin-bottom: var(--space-lg); } .status-offline { background: rgba(239, 68, 68, 0.1); color: #DC2626; border: 1px solid rgba(239, 68, 68, 0.2); } .status-online { background: rgba(16, 185, 129, 0.1); color: var(--secondary-color); border: 1px solid rgba(16, 185, 129, 0.2); } .hidden { display: none; } .contact-info { color: var(--text-light); font-size: 0.875rem; margin-top: var(--space-lg); } @media (max-width: 768px) { .offline-container { margin: var(--space-lg); padding: var(--space-xl); } .offline-title { font-size: 2rem; } .offline-actions { flex-direction: column; align-items: center; } .btn { width: 100%; max-width: 300px; } } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .offline-title { background: var(--primary-color) !important; background-clip: unset !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; color: var(--primary-color) !important; } }
📡 You're currently offline

You're Offline

Don't worry! You can still browse cached content from Thanatsitt's portfolio. Some features may be limited while offline.

Available Offline Features:

View cached portfolio content
Browse project gallery
Read about experience & skills
Access contact information
Listen to voice demos (if cached)
Switch between light/dark themes
Go to Portfolio

Thanatsitt Santisamranwilai

AI Creative Designer & Digital Innovator

📧 thanattsitt.info@yahoo.co.uk

🌐 https://pegearts.com