This is my index.html code "<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Windows Dynamic Island</title>
    <style>
        /* General Styles */
        * {
            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;
            background: transparent;
            margin: 0;
        }
        /* Dynamic Island Styles */
        .dynamic-island {
            position: relative;
            width: 95px;
            height: 35px;
            border-radius: 30px;
            cursor: pointer;
            overflow: visible;
            z-index: 1;
            -webkit-app-region: drag;
        }

        .dynamic-island-content {
            position: relative;
            background: #000;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .dynamic-island-content::before {
            content: '';
            position: absolute;
            top: -6px;
            left: -6px;
            right: -6px;
            bottom: -6px;
            border-radius: inherit;
            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); }
        }

        .dynamic-island.expanded {
            width: 380px;
            height: 180px;
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .dynamic-island.expanded .dynamic-island-content {
            border-radius: 15px;
        }

        .dynamic-island:not(.expanded):hover {
            width: 380px;
            height: 180px;
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .dynamic-island:not(.expanded):hover .dynamic-island-content {
            border-radius: 30px;
        }

        /* Minimized Content (Three Dots) */
        .minimized-content {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 4px;
            padding-left: 10px;
            height: 100%;
        }

        .minimized-content .dot {
            width: 3px;
            height: 3px;
            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); }
        }

        /* Hide minimized content when expanded or hovered */
        .dynamic-island.expanded .minimized-content,
        .dynamic-island:not(.expanded):hover .minimized-content {
            display: none;
        }

        /* Island Camera */
        .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%;
        }

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

        .dynamic-island.expanded .island-content,
        .dynamic-island:hover .island-content {
            opacity: 1;
            pointer-events: auto;
            display: block;
        }

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

        .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;
        }

        .progress-ring {
            transform: rotate(-90deg);
        }

        .progress-ring-circle {
            stroke: #4D96FF;
            stroke-width: 4;
            fill: transparent;
        }

        .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;
        }

        /* Close Button */
        .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;
        }

        .dynamic-island.expanded .close-button,
        .dynamic-island:hover .close-button {
            opacity: 1;
        }

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

        /* Time Display */
        .time-display {
            position: absolute;
            top: 10px;
            left: 20px;
            font-size: 14px;
            color: #aaa;
        }

        /* Music Info */
        .music-info {
            position: absolute;
            bottom: 20px;
            left: 20px;
            display: flex;
            align-items: center;
        }

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

        .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="dynamic-island-content">
            <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" id="timeDisplay">12:34 PM</div>
                    <div class="music-info">
                        <div class="music-cover" id="musicCover"></div>
                        <div>
                            <div class="music-title" id="musicTitle">Song Title</div>
                            <div class="music-artist" id="musicArtist">Artist Name</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="close-button">×</div>
        </div>
    </div>

    <script>
        const { ipcRenderer } = require('electron');
        const dynamicIsland = document.querySelector('.dynamic-island');
        const dynamicIslandContent = document.querySelector('.dynamic-island-content');
        const minimizedContent = document.querySelector('.minimized-content');
        const islandContent = document.querySelector('.island-content');
        const closeButton = document.querySelector('.close-button');
        const progressRing = document.querySelector('.progress-ring-circle');
        const timeDisplay = document.getElementById('timeDisplay');
        const musicCover = document.getElementById('musicCover');
        const musicTitle = document.getElementById('musicTitle');
        const musicArtist = document.getElementById('musicArtist');
        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);
            }
        });

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

        updateTimeDisplay();
        setInterval(updateTimeDisplay, 1000);

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

        // Close application
        closeButton.addEventListener('click', () => {
            window.close();
        });
    </script>
</body>
</html>" , this is my index.js code "// index.js (Main Process)
const { app, BrowserWindow, ipcMain } = require('electron');
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 { screen } = require('electron');
    const display = screen.getPrimaryDisplay();
    const { width } = display.workAreaSize;
    mainWindow.setPosition(
        Math.floor(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 an actual temp monitoring library)
            uptime: os.sysUptime()
        };
        mainWindow.webContents.send('system-stats', stats);
    });
}

// Update stats every 2 seconds
setInterval(sendSystemStats, 2000);" and this is my package.json "{
  "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"
    }
  }
}" This is looks so ugly and so make it ui more beautiful like real dynamic island and make on hover animation smoother and and make it ui more beautiful with minimal design and add more features in this and give me complete new code for all the files make sure that now this time it is perfectly working and viewing