请写一个超级好看的菱形百度搜索栏可以实现搜索的代码并且搜索栏上面要有很大一个实时时间的显示

以下是一个示例代码，实现了一个超级好看的菱形百度搜索栏，包括搜索功能和实时时间显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Super Cool Baidu Search Bar</title>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
        }

        .search-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 400px;
            background-color: #fff;
            border-radius: 50%;
            border: 5px solid #eee;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            padding-top: 100px;
        }

        .search-container input[type="text"] {
            width: 300px;
            height: 40px;
            padding: 5px;
            font-size: 16px;
            border: none;
            outline: none;
            border-radius: 20px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .search-container input[type="submit"] {
            width: 100px;
            height: 40px;
            background-color: #3385ff;
            color: #fff;
            font-size: 16px;
            border: none;
            outline: none;
            border-radius: 20px;
            cursor: pointer;
        }

        .time-display {
            font-size: 36px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="search-container">
        <form action="https://www.baidu.com/s" method="get" target="_blank">
            <input type="text" name="wd" placeholder="请输入搜索内容" autocomplete="off">
            <br>
            <input type="submit" value="搜索">
        </form>
        <div class="time-display" id="timeDisplay"></div>
    </div>

    <script>
        function updateTime() {
            var timeDisplay = document.getElementById("timeDisplay");
            var currentTime = new Date();
            var hours = currentTime.getHours();
            var minutes = currentTime.getMinutes();
            var seconds = currentTime.getSeconds();
            var timeString = hours.toString().padStart(2, '0') + ":" +
                             minutes.toString().padStart(2, '0') + ":" +
                             seconds.toString().padStart(2, '0');
            timeDisplay.textContent = timeString;
        }

        updateTime();
        setInterval(updateTime, 1000);
    </script>
</body>
</html>

这段代码通过使用HTML和CSS创建了一个圆形的搜索栏，搜索栏内部包含一个输入框和一个搜索按钮。搜索栏的样式通过CSS进行设置，使其看起来非常好看。搜索功能由form标签和input标签的type为"submit"来实现，点击搜索按钮时会跳转到百度搜索页面并显示搜索结果。实时时间的显示通过JavaScript的Date对象和定时器实现，每秒更新一次时间并显示在页面上。

请写一个超级好看的菱形百度搜索栏可以实现搜索的代码并且搜索栏上面要有很大一个实时时间的显示