Hugging Face's logo

Spaces:
acecalisto3
/
wallapi
Running

App Files Community
Ig0tU commited on
Commit
632cfb8
·
1 Parent(s): cde9d2f

Update index to display all 4 live forms in a grid

Browse files
Files changed (1) hide show
  1. public/index.html +206 -24
public/index.html CHANGED
@@ -1,49 +1,231 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Embeddable Form Demo</title>
7
  <style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  body {
9
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
10
- background-color: #f7f9fc;
11
- display: flex;
12
- flex-direction: column;
13
- align-items: center;
 
 
 
 
14
  padding: 40px 20px;
15
- margin: 0;
 
 
 
 
 
 
 
16
  }
17
- .demo-header {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  margin-bottom: 40px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  text-align: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  }
21
- .demo-header h1 {
22
- color: #333;
 
23
  }
24
- .demo-header p {
25
- color: #666;
26
- max-width: 600px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  }
28
- /* This empty container is where the embed script will inject the form */
29
- #wallapi-form-container {
30
  width: 100%;
31
- max-width: 400px;
 
 
 
 
 
 
 
 
 
 
 
 
32
  }
33
  </style>
34
  </head>
 
35
  <body>
36
 
37
- <div class="demo-header">
38
- <h1>WallAPI Embed Demo</h1>
39
- <p>This page demonstrates how the embeddable form looks when injected into a website. Simply create a <code>&lt;div id="wallapi-form-container"&gt;&lt;/div&gt;</code> and include the <code>embed.js</code> script.</p>
40
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
 
42
- <!-- The form will be injected here -->
43
- <div id="wallapi-form-container"></div>
 
 
 
 
 
 
44
 
45
- <!-- Include the embed widget script -->
46
- <script src="/embed.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
 
48
  </body>
49
- </html>
 
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>WallAPI - Live Forms</title>
8
  <style>
9
+ :root {
10
+ --primary: #1a365d;
11
+ --secondary: #2c5282;
12
+ --bg: #f8fafc;
13
+ --card-bg: #ffffff;
14
+ --text: #334155;
15
+ --text-light: #64748b;
16
+ }
17
+
18
+ * {
19
+ box-sizing: border-box;
20
+ margin: 0;
21
+ padding: 0;
22
+ }
23
+
24
  body {
25
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
26
+ background-color: var(--bg);
27
+ color: var(--text);
28
+ line-height: 1.6;
29
+ }
30
+
31
+ .header {
32
+ background-color: var(--primary);
33
+ color: white;
34
  padding: 40px 20px;
35
+ text-align: center;
36
+ margin-bottom: 40px;
37
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
38
+ }
39
+
40
+ .header h1 {
41
+ margin-bottom: 10px;
42
+ font-size: 2.5rem;
43
  }
44
+
45
+ .header p {
46
+ color: #e2e8f0;
47
+ font-size: 1.1rem;
48
+ max-width: 600px;
49
+ margin: 0 auto;
50
+ }
51
+
52
+ .container {
53
+ max-width: 1400px;
54
+ margin: 0 auto;
55
+ padding: 0 20px;
56
+ }
57
+
58
+ .controls {
59
+ display: flex;
60
+ justify-content: center;
61
+ gap: 15px;
62
  margin-bottom: 40px;
63
+ }
64
+
65
+ .btn {
66
+ padding: 10px 20px;
67
+ border: 2px solid var(--primary);
68
+ background: transparent;
69
+ color: var(--primary);
70
+ border-radius: 8px;
71
+ font-weight: 600;
72
+ cursor: pointer;
73
+ transition: all 0.2s;
74
+ }
75
+
76
+ .btn:hover,
77
+ .btn.active {
78
+ background: var(--primary);
79
+ color: white;
80
+ }
81
+
82
+ .dashboard-link {
83
+ display: block;
84
  text-align: center;
85
+ margin-top: -20px;
86
+ margin-bottom: 40px;
87
+ }
88
+
89
+ .dashboard-link a {
90
+ display: inline-flex;
91
+ align-items: center;
92
+ gap: 8px;
93
+ background: #10b981;
94
+ color: white;
95
+ text-decoration: none;
96
+ padding: 12px 24px;
97
+ border-radius: 8px;
98
+ font-weight: bold;
99
+ transition: background 0.2s;
100
  }
101
+
102
+ .dashboard-link a:hover {
103
+ background: #059669;
104
  }
105
+
106
+ /* Grid for forms */
107
+ .forms-grid {
108
+ display: grid;
109
+ grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
110
+ gap: 30px;
111
+ margin-bottom: 60px;
112
+ }
113
+
114
+ .form-card {
115
+ background: var(--card-bg);
116
+ border-radius: 12px;
117
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
118
+ overflow: hidden;
119
+ display: flex;
120
+ flex-direction: column;
121
+ }
122
+
123
+ .form-header {
124
+ background: var(--primary);
125
+ color: white;
126
+ padding: 15px 20px;
127
+ display: flex;
128
+ justify-content: space-between;
129
+ align-items: center;
130
+ }
131
+
132
+ .form-header h2 {
133
+ font-size: 1.2rem;
134
+ margin: 0;
135
+ }
136
+
137
+ .form-link {
138
+ color: #cbd5e1;
139
+ text-decoration: none;
140
+ font-size: 0.9rem;
141
+ }
142
+
143
+ .form-link:hover {
144
+ text-decoration: underline;
145
+ color: white;
146
  }
147
+
148
+ .form-iframe {
149
  width: 100%;
150
+ height: 600px;
151
+ border: none;
152
+ background: #fff;
153
+ }
154
+
155
+ @media (max-width: 768px) {
156
+ .forms-grid {
157
+ grid-template-columns: 1fr;
158
+ }
159
+
160
+ .form-iframe {
161
+ height: 500px;
162
+ }
163
  }
164
  </style>
165
  </head>
166
+
167
  <body>
168
 
169
+ <header class="header">
170
+ <h1>WallAPI Live Forms</h1>
171
+ <p>These four forms have been extracted directly from your website and are hosted here on Hugging Face. Submitting
172
+ any of these will instantly send data to your Google Sheet and to the Real-Time Dashboard.</p>
173
+ </header>
174
+
175
+ <div class="container">
176
+ <div class="dashboard-link">
177
+ <a href="/dashboard.html">
178
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
179
+ stroke-linecap="round" stroke-linejoin="round">
180
+ <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
181
+ <line x1="3" y1="9" x2="21" y2="9"></line>
182
+ <line x1="9" y1="21" x2="9" y2="9"></line>
183
+ </svg>
184
+ Open Live Dashboard
185
+ </a>
186
+ </div>
187
+
188
+ <div class="forms-grid">
189
+
190
+ <!-- Contact Form -->
191
+ <div class="form-card">
192
+ <div class="form-header">
193
+ <h2>Contact Form</h2>
194
+ <a href="/contact.html" target="_blank" class="form-link">Open in new tab ↗</a>
195
+ </div>
196
+ <iframe src="/contact.html" class="form-iframe" title="Contact Form"></iframe>
197
+ </div>
198
 
199
+ <!-- Tours Form -->
200
+ <div class="form-card">
201
+ <div class="form-header">
202
+ <h2>Tours Form</h2>
203
+ <a href="/tours.html" target="_blank" class="form-link">Open in new tab ↗</a>
204
+ </div>
205
+ <iframe src="/tours.html" class="form-iframe" title="Tours Form"></iframe>
206
+ </div>
207
 
208
+ <!-- Escort Form -->
209
+ <div class="form-card">
210
+ <div class="form-header">
211
+ <h2>Escort Form</h2>
212
+ <a href="/escort.html" target="_blank" class="form-link">Open in new tab ↗</a>
213
+ </div>
214
+ <iframe src="/escort.html" class="form-iframe" title="Escort Form"></iframe>
215
+ </div>
216
+
217
+ <!-- Honor Form -->
218
+ <div class="form-card">
219
+ <div class="form-header">
220
+ <h2>Honor Form</h2>
221
+ <a href="/honor.html" target="_blank" class="form-link">Open in new tab ↗</a>
222
+ </div>
223
+ <iframe src="/honor.html" class="form-iframe" title="Honor Form"></iframe>
224
+ </div>
225
+
226
+ </div>
227
+ </div>
228
 
229
  </body>
230
+
231
+ </html>