Spaces:
Running
Running
File size: 3,432 Bytes
57ff115 e726de0 57ff115 e726de0 57ff115 e726de0 57ff115 e726de0 57ff115 e726de0 57ff115 e726de0 57ff115 e726de0 57ff115 e726de0 57ff115 e726de0 57ff115 e726de0 57ff115 e726de0 57ff115 e726de0 57ff115 e726de0 57ff115 e726de0 57ff115 e726de0 57ff115 e726de0 57ff115 e726de0 57ff115 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Mood Palette Explorer</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #f8fafc;
color: #1e293b;
line-height: 1.6;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}
header {
text-align: center;
margin-bottom: 2rem;
padding: 2rem 0;
}
h1 {
color: #6366f1;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.intro {
font-size: 1.1rem;
color: #475569;
max-width: 800px;
margin: 0 auto;
}
.iframe-wrapper {
width: 100%;
height: calc(100vh - 300px);
min-height: 600px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid #e2e8f0;
}
iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
footer {
text-align: center;
padding: 2rem 0;
color: #64748b;
font-size: 0.9rem;
}
a {
color: #6366f1;
text-decoration: none;
font-weight: 600;
}
a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
.container {
padding: 1rem;
}
.iframe-wrapper {
min-height: 500px;
height: calc(100vh - 250px);
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>🎨 Google Mood Palette Explorer</h1>
<p class="intro">
Welcome! This page is your gateway to exploring <strong>Google's Mood Palette</strong> on Hugging Face.
Discover how colors influence emotions and interact with the embedded application below.
This is a great example of how Hugging Face Spaces can be used to host and share interactive AI and creative demos.
</p>
</header>
<div class="iframe-wrapper">
<!-- Use the .hf.space subdomain instead of huggingface.co/spaces/ -->
<iframe
src="https://google-mood-palette.hf.space"
title="Google Mood Palette"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<footer>
<p>Embedded from <a href="https://huggingface.co/spaces/google/mood-palette" target="_blank">huggingface.co/spaces/google/mood-palette</a></p>
<p>Built with ❤️ on Hugging Face Static Spaces</p>
</footer>
</div>
</body>
</html> |