assets/header.svg

<svg fill="none" viewBox="0 0 800 400" width="800" height="400" xmlns="http://www.w3.org/2000/svg">
	<foreignObject width="100%" height="100%">
		<div xmlns="http://www.w3.org/1999/xhtml">
			<style>
				@keyframes rotate {
					0% {
						transform: rotate(3deg);
					}
					100% {
						transform: rotate(-3deg);
					}
				}

				@keyframes gradientBackground {
					0% {
						background-position: 0% 50%;
					}
					50% {
						background-position: 100% 50%;
					}
					100% {
						background-position: 0% 50%;
					}
				}

				@keyframes fadeIn {
					0% {
						opacity: 0;
					}
					66% {
						opacity: 0;
					}
					100% {
						opacity: 1;
					}
				}
				.container {
					position: relative;
					font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin: 0;
					width: 100%;
					height: 400px;
					background: linear-gradient(-45deg, #fc5c7d, #6a82fb, #05dfd7);
					background-size: 600% 400%;
					animation: gradientBackground 10s ease infinite;
					border-radius: 10px;
					color: white;
					text-align: center;
				}
				.logo {
					position: fixed;
					left: 32px;
					top: 32px;
				}

				h1 {
					font-size: 50px;
					line-height: 1.3;
					letter-spacing: 5px;
					text-shadow:
						0 1px 0 #efefef,
						0 2px 0 #efefef,
						0 3px 0 #efefef,
						0 4px 0 #efefef,
						0 12px 5px rgba(0, 0, 0, 0.1);
					animation: rotate ease-in-out 1s infinite alternate;
				}

                h2 {
                    padding: 32px;
                }

				p {
					font-size: 20px;
					text-shadow: 0 1px 0 #efefef;
					animation: 5s ease 0s normal forwards 1 fadeIn;
				}
			</style>
			<div class="container">
				<div class="logo">
					<svg width="64" height="64" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<defs/>
						<rect id="矩形 13" rx="24.000000" width="160.000000" height="160.000000" fill="#531DAB"/>
						<rect id="矩形 14" x="30.000000" y="30.000000" width="58.000000" height="20.000000" fill="#FFFFFF"/>
						<rect id="矩形 15" x="110.000000" y="30.000000" width="20.000000" height="20.000000" fill="#E9E9E9"/>
						<rect id="矩形 16" x="30.000000" y="70.000000" width="58.000000" height="20.000000" fill="#FFFFFF"/>
						<rect id="矩形 17" x="110.000000" y="70.000000" width="20.000000" height="60.000000" fill="#7C3FDE"/>
						<rect id="矩形 18" x="30.000000" y="110.000000" width="58.000000" height="20.000000" fill="#FFFFFF"/>
					</svg>
				</div>
			    <h1>
					<span>Easy Interceptor👍</span>
				</h1>
				<h2>Easy Interceptor is a Chrome extension that intercepts HTTP requests in the form of XMLHttpRequest data requests</h2>
            </div>
		</div>
	</foreignObject>
</svg>