This is my DynamicIsland app for windows so index.js code is "// index.js (Main Process)
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const os = require('os-utils');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 400,
        height: 200,
        frame: false,
        transparent: true,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        },
        alwaysOnTop: true,
        skipTaskbar: true
    });

    mainWindow.loadFile('index.html');
    
    // Position window at the top center of the screen
    const screenBounds = require('electron').screen.getPrimaryDisplay().workAreaSize;
    mainWindow.setPosition(
        Math.floor(screenBounds.width / 2 - 200),
        10
    );
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

// Send system stats to renderer
function sendSystemStats() {
    os.cpuUsage((cpuUsage) => {
        const stats = {
            cpu: (cpuUsage * 100).toFixed(1),
            memory: ((os.totalmem() - os.freemem()) / os.totalmem() * 100).toFixed(1),
            temp: Math.random() * 20 + 40, // Simulated temperature (you can use actual temp monitoring library)
            uptime: os.sysUptime()
        };
        mainWindow.webContents.send('system-stats', stats);
    });
}

// Update stats every 2 seconds
setInterval(sendSystemStats, 2000);" my index.html code is "<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Windows Dynamic Island</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            user-select: none;
        }

        body {
            display: flex;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }

        .dynamic-island {
            background: #000;
            width: 95px;
            height: 35px;
            border-radius: 30px;
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            -webkit-app-region: drag;
        }

        .dynamic-island.expanded {
            width: 380px;
            height: 180px;
            border-radius: 30px;
        }

        .island-content {
            color: white;
            opacity: 0;
            width: 100%;
            height: 100%;
            padding: 20px;
            transition: opacity 0.3s ease-in-out;
            pointer-events: none;
        }

        .expanded .island-content {
            opacity: 1;
            pointer-events: auto;
        }

        .activity-container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .activity-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .activity-icon {
            width: 32px;
            height: 32px;
            background: #2c2c2c;
            border-radius: 8px;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .activity-details {
            flex-grow: 1;
        }

        .activity-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .activity-subtitle {
            font-size: 13px;
            color: #aaa;
        }

        .activity-stats {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            background: #1a1a1a;
            padding: 15px;
            border-radius: 15px;
        }

        .stat-item {
            text-align: center;
            flex: 1;
        }

        .stat-value {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .stat-label {
            font-size: 12px;
            color: #aaa;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .minimized-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            height: 100%;
        }

        .minimized-content .dot {
            width: 4px;
            height: 4px;
            background: #fff;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 0.3; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1); }
            100% { opacity: 0.3; transform: scale(0.8); }
        }

        .island-camera {
            width: 8px;
            height: 8px;
            background: #1a1a1a;
            border-radius: 50%;
            position: absolute;
            right: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .island-camera::after {
            content: '';
            width: 4px;
            height: 4px;
            background: #2a2a2a;
            border-radius: 50%;
        }

        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #ff3b30;
            opacity: 0;
            transition: opacity 0.3s ease;
            -webkit-app-region: no-drag;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #000;
            font-size: 14px;
            font-weight: bold;
        }

        .expanded .close-button {
            opacity: 1;
        }

        .close-button:hover {
            background: #ff1f1f;
        }

        .color-ring {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 30px;
            border: 2px solid transparent;
            background: conic-gradient(
                #FF6B6B, #FFC93C, #6BCB77, #4D96FF, #9B59B6, #E056FD, #FF6B6B
            );
            animation: rotate 10s linear infinite;
            z-index: -1;
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .time-display {
            position: absolute;
            top: 50%;
            left: 15px;
            transform: translateY(-50%);
            font-size: 14px;
            color: #aaa;
        }

        .music-info {
            position: absolute;
            top: 50%;
            left: 50px;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
        }

        .music-cover {
            width: 32px;
            height: 32px;
            border-radius: 4px;
            margin-right: 12px;
        }

        .music-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .music-artist {
            font-size: 12px;
            color: #aaa;
        }
    </style>
</head>
<body>
    <div class="dynamic-island">
        <div class="color-ring"></div>
        <div class="minimized-content">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="island-camera"></div>
        <div class="island-content">
            <div class="activity-container">
                <div class="activity-header">
                    <div class="activity-icon">
                        <svg class="progress-ring" width="32" height="32">
                            <circle class="progress-ring-circle" r="14" cx="16" cy="16" 
                                   stroke-dasharray="87.96" stroke-dashoffset="0"/>
                        </svg>
                    </div>
                    <div class="activity-details">
                        <div class="activity-title">System Monitor</div>
                        <div class="activity-subtitle">Real-time Performance</div>
                    </div>
                </div>
                <div class="activity-stats">
                    <div class="stat-item">
                        <div class="stat-value" id="cpuUsage">0%</div>
                        <div class="stat-label">CPU</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="memoryUsage">0%</div>
                        <div class="stat-label">RAM</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="temperature">0°C</div>
                        <div class="stat-label">TEMP</div>
                    </div>
                </div>
                <div class="time-display">12:34 PM</div>
                <div class="music-info">
                    <img src="/api/placeholder/32/32" alt="Music Cover" class="music-cover">
                    <div>
                        <div class="music-title">Song Title</div>
                        <div class="music-artist">Artist Name</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="close-button">×</div>
    </div>

    <script>
        const { ipcRenderer } = require('electron');
        const dynamicIsland = document.querySelector('.dynamic-island');
        const minimizedContent = document.querySelector('.minimized-content');
        const closeButton = document.querySelector('.close-button');
        const progressRing = document.querySelector('.progress-ring-circle');
        const timeDisplay = document.querySelector('.time-display');
        const musicCover = document.querySelector('.music-cover');
        const musicTitle = document.querySelector('.music-title');
        const musicArtist = document.querySelector('.music-artist');
        let isExpanded = false;

        // Update progress ring
        function updateProgressRing(percentage) {
            const radius = progressRing.r.baseVal.value;
            const circumference = radius * 2 * Math.PI;
            const offset = circumference - (percentage / 100 * circumference);
            progressRing.style.strokeDasharray = `${circumference} ${circumference}`;
            progressRing.style.strokeDashoffset = offset;
        }

        // Receive system stats from main process
        ipcRenderer.on('system-stats', (event, stats) => {
            document.getElementById('cpuUsage').textContent = `${stats.cpu}%`;
            document.getElementById('memoryUsage').textContent = `${stats.memory}%`;
            document.getElementById('temperature').textContent = `${Math.round(stats.temp)}°C`;
            
            if (isExpanded) {
                updateProgressRing(stats.cpu);
            }
        });

        // Receive music info from main process
        ipcRenderer.on('music-info', (event, info) => {
            musicCover.src = info.cover;
            musicTitle.textContent = info.title;
            musicArtist.textContent = info.artist;
        });

        // Toggle expansion
        dynamicIsland.addEventListener('click', (e) => {
            if (e.target !== closeButton) {
                isExpanded = !isExpanded;
                dynamicIsland.classList.toggle('expanded');
                minimizedContent.style.display = isExpanded ? 'none' : 'flex';
            }
        });

        // Close application
        closeButton.addEventListener('click', () => {
            window.close();
        });

        // Hover effect
        dynamicIsland.addEventListener('mouseenter', () => {
            dynamicIsland.style.width = '105px';
            dynamicIsland.style.height = '40px';
        });

        dynamicIsland.addEventListener('mouseleave', () => {
            if (!isExpanded) {
                dynamicIsland.style.width = '95px';
                dynamicIsland.style.height = '35px';
            }
        });

        // Simulate notifications
        function simulateNotification() {
            if (!isExpanded) {
                dynamicIsland.style.width = '120px';
                setTimeout(() => {
                    if (!isExpanded) {
                        dynamicIsland.style.width = '95px';
                    }
                }, 1500);
            }
        }

        setInterval(simulateNotification, 5000);

        // Update time display
        function updateTimeDisplay() {
            const currentTime = new Date();
            const hours = currentTime.getHours();
            const minutes = currentTime.getMinutes();
            const ampm = hours >= 12 ? 'PM' : 'AM';
            timeDisplay.textContent = `${hours % 12 || 12}:${minutes.toString().padStart(2, '0')} ${ampm}`;
        }

        setInterval(updateTimeDisplay, 1000);
    </script>
</body>
</html>" and package.json code is "{
  "name": "Dynamic_claude",
  "version": "1.0.0",
  "description": "Windows Dynamic Island",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "author": "Your Name",
  "license": "MIT",
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.9.1"
  },
  "dependencies": {
    "os-utils": "^0.0.14"
  },
  "build": {
    "appId": "com.windows.dynamicisland",
    "win": {
      "target": "nsis",
      "icon": "icon.ico"
    }
  }
}" don't display colorful behind dynamic island make it border seven colored in which colors are constantly changed and one thing more dynamic island hover automaically so stop it and hover only when i hover on it and when i click on dynamic island it become rectangular box with rounded corners all the things show inside this