aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
6 <title>AC Notification Overlay</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 width: 100vw;
16 height: 100vh;
17 background: rgba(0, 0, 0, 0.9);
18 color: white;
19 font-family: 'Courier New', 'Monaco', 'Menlo', 'Consolas', monospace;
20 display: flex;
21 align-items: center;
22 justify-content: center;
23 text-align: center;
24 overflow: hidden;
25 cursor: none;
26 user-select: none;
27 }
28
29 .overlay-content {
30 display: flex;
31 flex-direction: column;
32 align-items: center;
33 justify-content: center;
34 animation: slideIn 0.4s ease-out;
35 }
36
37 .notification-word {
38 font-size: 12rem;
39 font-weight: 900;
40 letter-spacing: 0.05em;
41 text-shadow:
42 0 0 30px currentColor,
43 0 0 60px currentColor,
44 6px 6px 12px rgba(0,0,0,0.9);
45 margin: 0;
46 line-height: 1;
47 animation: glow 2s ease-in-out infinite alternate;
48 min-height: 12rem;
49 display: flex;
50 align-items: center;
51 justify-content: center;
52 }
53
54 .notification-icon {
55 font-size: 8rem;
56 margin-bottom: 3rem;
57 animation: float 3s ease-in-out infinite;
58 }
59
60 /* Success styling */
61 .success {
62 color: #00ff88;
63 background: radial-gradient(circle, rgba(0,255,136,0.2) 0%, rgba(0,0,0,0.9) 60%);
64 }
65
66 /* Error styling */
67 .error {
68 color: #ff4444;
69 background: radial-gradient(circle, rgba(255,68,68,0.2) 0%, rgba(0,0,0,0.9) 60%);
70 }
71
72 /* Info styling */
73 .info {
74 color: #44aaff;
75 background: radial-gradient(circle, rgba(68,170,255,0.2) 0%, rgba(0,0,0,0.9) 60%);
76 }
77
78 /* Warning styling */
79 .warning {
80 color: #ffaa44;
81 background: radial-gradient(circle, rgba(255,170,68,0.2) 0%, rgba(0,0,0,0.9) 60%);
82 }
83
84 @keyframes slideIn {
85 from {
86 opacity: 0;
87 transform: scale(0.5) translateY(50px);
88 }
89 to {
90 opacity: 1;
91 transform: scale(1) translateY(0);
92 }
93 }
94
95 @keyframes glow {
96 0% {
97 text-shadow:
98 0 0 20px currentColor,
99 0 0 40px currentColor,
100 6px 6px 12px rgba(0,0,0,0.9);
101 transform: scale(1);
102 }
103 100% {
104 text-shadow:
105 0 0 40px currentColor,
106 0 0 80px currentColor,
107 6px 6px 12px rgba(0,0,0,0.9);
108 transform: scale(1.02);
109 }
110 }
111
112 @keyframes float {
113 0%, 100% {
114 transform: translateY(0px);
115 }
116 50% {
117 transform: translateY(-20px);
118 }
119 }
120
121 /* Responsive scaling */
122 @media (max-width: 1920px) {
123 .notification-word {
124 font-size: 10rem;
125 min-height: 10rem;
126 }
127 .notification-icon {
128 font-size: 6rem;
129 }
130 }
131
132 @media (max-width: 1366px) {
133 .notification-word {
134 font-size: 8rem;
135 min-height: 8rem;
136 }
137 .notification-icon {
138 font-size: 5rem;
139 }
140 }
141
142 @media (max-width: 1024px) {
143 .notification-word {
144 font-size: 6rem;
145 min-height: 6rem;
146 }
147 .notification-icon {
148 font-size: 4rem;
149 }
150 }
151 </style>
152</head>
153<body>
154 <div class="overlay-content">
155 <div class="notification-icon" id="icon">🔔</div>
156 <div class="notification-word" id="word">LOADING</div>
157 </div>
158
159 <script>
160 console.log('AC Overlay loading...');
161
162 // Parse URL parameters
163 const urlParams = new URLSearchParams(window.location.search);
164 const type = urlParams.get('type') || 'info';
165 const word = urlParams.get('word') || 'NOTIFICATION';
166 const duration = parseInt(urlParams.get('duration')) || 2500;
167
168 console.log('Overlay params:', { type, word, duration });
169
170 // Icon mapping
171 const icons = {
172 success: '✨',
173 error: '❌',
174 info: 'ℹ️',
175 warning: '⚠️',
176 default: '🔔'
177 };
178
179 // Update content immediately
180 const wordElement = document.getElementById('word');
181 const iconElement = document.getElementById('icon');
182
183 wordElement.textContent = word.toUpperCase();
184 iconElement.textContent = icons[type] || icons.default;
185 document.body.className = type;
186
187 console.log('Updated overlay:', wordElement.textContent, iconElement.textContent);
188
189 // Auto-close functionality
190 const closeOverlay = () => {
191 console.log('Closing overlay...');
192 document.body.style.transition = 'opacity 0.3s ease-out';
193 document.body.style.opacity = '0';
194 setTimeout(() => {
195 try {
196 window.close();
197 } catch(e) {
198 console.log('Could not close window, hiding instead');
199 document.body.style.display = 'none';
200 if (window.parent !== window) {
201 window.parent.postMessage('close-overlay', '*');
202 }
203 }
204 }, 300);
205 };
206
207 // Auto-close timer
208 console.log(`Auto-close in ${duration}ms`);
209 setTimeout(closeOverlay, duration);
210
211 // Close on interaction
212 document.addEventListener('click', closeOverlay);
213 document.addEventListener('keydown', closeOverlay);
214 document.addEventListener('touchstart', closeOverlay);
215
216 // Prevent context menu
217 document.addEventListener('contextmenu', e => e.preventDefault());
218
219 // Handle escape key specifically
220 document.addEventListener('keydown', (e) => {
221 if (e.key === 'Escape') {
222 closeOverlay();
223 }
224 });
225
226 // Focus the window to ensure it's on top
227 window.focus();
228
229 console.log(`AC Overlay ready: ${type.toUpperCase()} - ${word.toUpperCase()}`);
230 </script>
231</body>
232</html>