Hugging Face's logo

Spaces:
danhtran8989
/
test_iframe
Running

App Files Community
danhtran8989 commited on
Commit
e726de0
·
verified ·
1 Parent(s): b65a2d3

Update index.html

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