<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Emoji App</title>
<!-- Favicon (shows emoji in tab / home screen shortcut) -->
<link rel="icon" href="data:image/svg+xml,
<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>
<text y=%22.9em%22 font-size=%2290%22>🌈</text>
</svg>">
<!-- Manifest for Add to Home Screen -->
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#ffffff">
<style>
body {
margin: 0;
font-family: system-ui, sans-serif;
text-align: center;
background: #f5f5f5;
}
header {
font-size: 80px;
padding: 40px 0;
background: #ffffff;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
main {
padding: 30px;
font-size: 18px;
}
</style>
</head>
<body>
<header>
🌈
</header>
<main>
<h1>Welcome to my Emoji App</h1>
<p>Save this site to your home screen and the 🌈 will be your icon.</p>
</main>
<!-- Inline manifest file created dynamically -->
<script>
const manifest = {
"name": "Emoji App",
"short_name": "Emoji",
"start_url": ".",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌈</text></svg>",
"sizes": "512x512",
"type": "image/svg+xml"
}
]
};
// Generate manifest.json on the fly
const blob = new Blob([JSON.stringify(manifest)], { type: "application/json" });
const manifestURL = URL.createObjectURL(blob);
document.querySelector("link[rel=manifest]").setAttribute("href", manifestURL);
</script>
</body>
</html>