帮我写一个不需要进行任何修改上传服务器就直接可用的图片在线压缩网页源码并且用CSS美化一下

以下是一个简单的图片在线压缩网页源码，同时使用了CSS进行美化。你可以直接复制以下代码，并上传到服务器上使用。

<!DOCTYPE html>
<html>
<head>
    <title>图片在线压缩</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 20px;
        }
        
        h1 {
            text-align: center;
            color: #333;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        
        form {
            text-align: center;
        }
        
        label {
            display: block;
            margin-bottom: 10px;
        }
        
        input[type=file] {
            display: none;
        }
        
        .btn {
            background-color: #4CAF50;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        .btn:hover {
            background-color: #45a049;
        }
        
        .compressed-image {
            text-align: center;
            margin-top: 20px;
        }
        
        .compressed-image img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>图片在线压缩</h1>
        <form id="compress-form">
            <label for="image">选择图片:</label>
            <input type="file" id="image" accept="image/*" required>
            <button type="submit" class="btn">压缩</button>
        </form>
        <div id="compressed-image" class="compressed-image">
            <!-- 压缩后的图片将显示在这里 -->
        </div>
    </div>
    
    <script>
        document.getElementById('compress-form').addEventListener('submit', function(e) {
            e.preventDefault();
            var input = document.getElementById('image');
            var file = input.files[0];
            var reader = new FileReader();
            
            reader.onload = function(e) {
                var img = new Image();
                img.src = e.target.result;
                
                img.onload = function() {
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    var maxWidth = 800; // 设置最大宽度
                    var maxHeight = 600; // 设置最大高度
                    var width = img.width;
                    var height = img.height;
                    
                    if (width > height) {
                        if (width > maxWidth) {
                            height *= maxWidth / width;
                            width = maxWidth;
                        }
                    } else {
                        if (height > maxHeight) {
                            width *= maxHeight / height;
                            height = maxHeight;
                        }
                    }
                    
                    canvas.width = width;
                    canvas.height = height;
                    ctx.drawImage(img, 0, 0, width, height);
                    
                    var compressedDataUrl = canvas.toDataURL(file.type);
                    
                    var compressedImage = document.createElement('img');
                    compressedImage.src = compressedDataUrl;
                    
                    document.getElementById('compressed-image').innerHTML = '';
                    document.getElementById('compressed-image').appendChild(compressedImage);
                };
            };
            
            reader.readAsDataURL(file);
        });
    </script>
</body>
</html>

这段代码创建了一个简单的图片在线压缩网页。用户可以选择上传图片，然后通过JavaScript将其压缩并显示在页面上。CSS样式用于美化页面，使其看起来更加漂亮

帮我写一个不需要进行任何修改上传服务器就直接可用的图片在线压缩网页源码并且用CSS美化一下