dj7nt/chromes_hammer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Doc

Browse Source
This commit is contained in:
Joerg Dorgeist
2026-01-14 11:07:37 +01:00
parent 4ccfd2add9
commit 99abe31306
9 changed files with 221 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
icon.html Normal file
View File

@@ -0,0 +1,114 @@
<!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>