114 lines
3.8 KiB
HTML
114 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Chrome's Hammer Icon</title>
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 40px;
|
|
background: #f0f0f0;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
.icon-container {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
svg {
|
|
display: block;
|
|
}
|
|
.instructions {
|
|
max-width: 600px;
|
|
background: #e3f2fd;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
}
|
|
h2 { margin-top: 0; }
|
|
code {
|
|
background: #f5f5f5;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Chrome's Hammer - Icon Generator</h1>
|
|
|
|
<div class="instructions">
|
|
<h2>How to save the icon:</h2>
|
|
<ol>
|
|
<li>Right-click on one of the icons below</li>
|
|
<li>Select "Save image as..." or take a screenshot</li>
|
|
<li>Save as <code>icon.png</code> in the chrome_hammer folder</li>
|
|
<li>For best quality, use the 256x256 size and let Chrome resize it</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="icon-container">
|
|
<h3>128x128 (Standard)</h3>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128">
|
|
<circle cx="64" cy="64" r="60" fill="#4285f4"/>
|
|
<g fill="#ffffff">
|
|
<ellipse cx="64" cy="72" rx="35" ry="20"/>
|
|
<ellipse cx="45" cy="70" rx="20" ry="16"/>
|
|
<ellipse cx="83" cy="70" rx="20" ry="16"/>
|
|
<ellipse cx="64" cy="58" rx="25" ry="18"/>
|
|
<ellipse cx="50" cy="60" rx="15" ry="12"/>
|
|
<ellipse cx="78" cy="60" rx="15" ry="12"/>
|
|
</g>
|
|
<g transform="translate(64, 50) rotate(-30)">
|
|
<rect x="-4" y="0" width="8" height="35" rx="2" fill="#5f6368"/>
|
|
<rect x="-12" y="-12" width="24" height="14" rx="2" fill="#ea4335"/>
|
|
<rect x="-12" y="-12" width="24" height="4" fill="#c5221f"/>
|
|
<path d="M -8 -12 Q -12 -18 -8 -22 L -4 -18 Z" fill="#ea4335"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="icon-container">
|
|
<h3>256x256 (High Quality)</h3>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="256" height="256">
|
|
<circle cx="64" cy="64" r="60" fill="#4285f4"/>
|
|
<g fill="#ffffff">
|
|
<ellipse cx="64" cy="72" rx="35" ry="20"/>
|
|
<ellipse cx="45" cy="70" rx="20" ry="16"/>
|
|
<ellipse cx="83" cy="70" rx="20" ry="16"/>
|
|
<ellipse cx="64" cy="58" rx="25" ry="18"/>
|
|
<ellipse cx="50" cy="60" rx="15" ry="12"/>
|
|
<ellipse cx="78" cy="60" rx="15" ry="12"/>
|
|
</g>
|
|
<g transform="translate(64, 50) rotate(-30)">
|
|
<rect x="-4" y="0" width="8" height="35" rx="2" fill="#5f6368"/>
|
|
<rect x="-12" y="-12" width="24" height="14" rx="2" fill="#ea4335"/>
|
|
<rect x="-12" y="-12" width="24" height="4" fill="#c5221f"/>
|
|
<path d="M -8 -12 Q -12 -18 -8 -22 L -4 -18 Z" fill="#ea4335"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="icon-container">
|
|
<h3>48x48 (Small)</h3>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="48" height="48">
|
|
<circle cx="64" cy="64" r="60" fill="#4285f4"/>
|
|
<g fill="#ffffff">
|
|
<ellipse cx="64" cy="72" rx="35" ry="20"/>
|
|
<ellipse cx="45" cy="70" rx="20" ry="16"/>
|
|
<ellipse cx="83" cy="70" rx="20" ry="16"/>
|
|
<ellipse cx="64" cy="58" rx="25" ry="18"/>
|
|
<ellipse cx="50" cy="60" rx="15" ry="12"/>
|
|
<ellipse cx="78" cy="60" rx="15" ry="12"/>
|
|
</g>
|
|
<g transform="translate(64, 50) rotate(-30)">
|
|
<rect x="-4" y="0" width="8" height="35" rx="2" fill="#5f6368"/>
|
|
<rect x="-12" y="-12" width="24" height="14" rx="2" fill="#ea4335"/>
|
|
<rect x="-12" y="-12" width="24" height="4" fill="#c5221f"/>
|
|
<path d="M -8 -12 Q -12 -18 -8 -22 L -4 -18 Z" fill="#ea4335"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</body>
|
|
</html> |