File size: 6,347 Bytes
93cf0be 4cc1d22 93cf0be 4cc1d22 93cf0be |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
document.addEventListener('DOMContentLoaded', () => {
// Initialize desktop apps
const desktop = document.querySelector('desktop-shell');
// Create default windows
desktop.createWindow({
id: 'about',
title: 'About Me.txt',
content: `
<div class="p-4">
<h2 class="text-xl font-bold mb-4 text-primary-500">Creative Technologist</h2>
<p class="mb-4">Hello! I'm a creative technologist blending art, design, and technology to create immersive experiences.</p>
<div class="grid grid-cols-2 gap-4">
<div>
<h3 class="font-bold mb-2">Skills</h3>
<ul class="list-disc pl-5">
<li>Interactive Installations</li>
<li>Creative Coding</li>
<li>WebGL & Three.js</li>
<li>Physical Computing</li>
</ul>
</div>
<div>
<h3 class="font-bold mb-2">Tools</h3>
<ul class="list-disc pl-5">
<li>TouchDesigner</li>
<li>Processing</li>
<li>Arduino</li>
<li>p5.js</li>
</ul>
</div>
</div>
</div>
`,
icon: 'user',
initialPosition: { x: 100, y: 100 }
});
desktop.createWindow({
id: 'projects',
title: 'Projects Explorer',
content: `
<div class="p-4">
<h2 class="text-xl font-bold mb-4 text-primary-500">Featured Projects</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer">
<h3 class="font-bold">Interactive Light Sculpture</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Kinetic installation responding to sound</p>
</div>
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer">
<h3 class="font-bold">Generative Art Platform</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Web-based tool for creating algorithmic art</p>
</div>
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer">
<h3 class="font-bold">AR Museum Experience</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Augmented reality for cultural heritage</p>
</div>
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer">
<h3 class="font-bold">Data Visualization Suite</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Interactive tools for complex datasets</p>
</div>
</div>
</div>
`,
icon: 'folder',
initialPosition: { x: 300, y: 150 }
});
// Theme toggle
const themeToggle = document.getElementById('theme-toggle');
if (themeToggle) {
themeToggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
});
}
});
class WindowManager {
constructor() {
this.windows = [];
this.zIndexCounter = 10;
}
createWindow(options) {
const existingWindow = document.querySelector(`custom-window[id="${options.id}"]`);
if (existingWindow) {
this.bringToFront(existingWindow);
return;
}
const windowElement = document.createElement('custom-window');
windowElement.setAttribute('id', options.id);
windowElement.setAttribute('title', options.title);
windowElement.setAttribute('icon', options.icon);
windowElement.setAttribute('initial-x', options.initialPosition.x);
windowElement.setAttribute('initial-y', options.initialPosition.y);
if (options.width) {
windowElement.style.width = `${options.width}px`;
}
if (options.height) {
windowElement.style.minHeight = `${options.height}px`;
}
windowElement.innerHTML = options.content;
document.querySelector('desktop-shell').appendChild(windowElement);
this.windows.push({
id: options.id,
element: windowElement,
minimized: false
});
this.bringToFront(windowElement);
}
bringToFront(windowElement) {
this.zIndexCounter += 1;
windowElement.style.zIndex = this.zIndexCounter;
}
minimizeWindow(windowId) {
const window = this.windows.find(w => w.id === windowId);
if (window) {
window.minimized = true;
window.element.classList.add('window-minimize');
setTimeout(() => {
window.element.style.display = 'none';
}, 300);
}
}
restoreWindow(windowId) {
const window = this.windows.find(w => w.id === windowId);
if (window) {
window.minimized = false;
window.element.style.display = 'block';
window.element.classList.add('window-restore');
setTimeout(() => {
window.element.classList.remove('window-restore');
}, 300);
this.bringToFront(window.element);
}
}
closeWindow(windowId) {
const windowIndex = this.windows.findIndex(w => w.id === windowId);
if (windowIndex !== -1) {
this.windows[windowIndex].element.remove();
this.windows.splice(windowIndex, 1);
}
}
}
window.windowManager = new WindowManager(); |