Hugging Face's logo

Spaces:
ipepe
/
simplespreadsheet
Running

App Files Community
ipepe commited on
Commit
aa3adfe
·
verified ·
1 Parent(s): 17f10ea

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +346 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Simplespreadsheet
3
- emoji: 🔥
4
- colorFrom: purple
5
  colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: simplespreadsheet
3
+ emoji: 🐳
4
+ colorFrom: green
5
  colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,346 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Simple Spreadsheet</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .cell:focus {
11
+ outline: 2px solid #3b82f6;
12
+ z-index: 10;
13
+ }
14
+ .selected {
15
+ background-color: #bfdbfe;
16
+ }
17
+ .col-header, .row-header {
18
+ background-color: #f3f4f6;
19
+ font-weight: 500;
20
+ text-align: center;
21
+ user-select: none;
22
+ }
23
+ .col-header {
24
+ border-bottom: 1px solid #d1d5db;
25
+ }
26
+ .row-header {
27
+ border-right: 1px solid #d1d5db;
28
+ }
29
+ .toolbar-button.active {
30
+ background-color: #e5e7eb;
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-50">
35
+ <div class="container mx-auto p-4 max-w-6xl">
36
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
37
+ <!-- Toolbar -->
38
+ <div class="bg-gray-100 p-2 border-b border-gray-200 flex flex-wrap gap-2">
39
+ <div class="flex items-center space-x-1">
40
+ <button id="bold-btn" class="toolbar-button p-2 rounded hover:bg-gray-200" title="Bold">
41
+ <i class="fas fa-bold"></i>
42
+ </button>
43
+ <button id="italic-btn" class="toolbar-button p-2 rounded hover:bg-gray-200" title="Italic">
44
+ <i class="fas fa-italic"></i>
45
+ </button>
46
+ <button id="underline-btn" class="toolbar-button p-2 rounded hover:bg-gray-200" title="Underline">
47
+ <i class="fas fa-underline"></i>
48
+ </button>
49
+ </div>
50
+ <div class="flex items-center space-x-1">
51
+ <button id="align-left-btn" class="toolbar-button p-2 rounded hover:bg-gray-200" title="Align Left">
52
+ <i class="fas fa-align-left"></i>
53
+ </button>
54
+ <button id="align-center-btn" class="toolbar-button p-2 rounded hover:bg-gray-200" title="Align Center">
55
+ <i class="fas fa-align-center"></i>
56
+ </button>
57
+ <button id="align-right-btn" class="toolbar-button p-2 rounded hover:bg-gray-200" title="Align Right">
58
+ <i class="fas fa-align-right"></i>
59
+ </button>
60
+ </div>
61
+ <div class="flex items-center space-x-1">
62
+ <select id="font-family" class="p-2 border rounded text-sm">
63
+ <option value="Arial">Arial</option>
64
+ <option value="Courier New">Courier New</option>
65
+ <option value="Georgia">Georgia</option>
66
+ <option value="Times New Roman">Times New Roman</option>
67
+ <option value="Verdana">Verdana</option>
68
+ </select>
69
+ <select id="font-size" class="p-2 border rounded text-sm">
70
+ <option value="10">10</option>
71
+ <option value="12" selected>12</option>
72
+ <option value="14">14</option>
73
+ <option value="16">16</option>
74
+ <option value="18">18</option>
75
+ <option value="20">20</option>
76
+ </select>
77
+ </div>
78
+ <div class="flex items-center space-x-1">
79
+ <input type="color" id="text-color" class="w-8 h-8" value="#000000" title="Text Color">
80
+ <input type="color" id="bg-color" class="w-8 h-8" value="#ffffff" title="Background Color">
81
+ </div>
82
+ <div class="flex items-center space-x-1 ml-auto">
83
+ <button id="clear-btn" class="p-2 bg-red-100 text-red-700 rounded hover:bg-red-200 text-sm">
84
+ Clear
85
+ </button>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Spreadsheet -->
90
+ <div class="overflow-auto max-h-[70vh]">
91
+ <table id="spreadsheet" class="border-collapse w-full">
92
+ <thead>
93
+ <tr>
94
+ <th class="w-10 h-10 border col-header"></th>
95
+ <!-- Column headers (A, B, C, ...) -->
96
+ <script>
97
+ document.write(
98
+ Array.from({ length: 26 }, (_, i) =>
99
+ `<th class="w-24 h-10 border col-header">${String.fromCharCode(65 + i)}</th>`
100
+ ).join('')
101
+ );
102
+ </script>
103
+ </tr>
104
+ </thead>
105
+ <tbody>
106
+ <!-- Rows with row headers (1, 2, 3, ...) and cells -->
107
+ <script>
108
+ document.write(
109
+ Array.from({ length: 50 }, (_, row) => {
110
+ return `
111
+ <tr>
112
+ <td class="w-10 h-8 border row-header">${row + 1}</td>
113
+ ${Array.from({ length: 26 }, (_, col) =>
114
+ `<td class="border">
115
+ <div
116
+ id="cell-${String.fromCharCode(65 + col)}${row + 1}"
117
+ class="cell w-full h-8 p-1 overflow-hidden whitespace-nowrap"
118
+ contenteditable="true"
119
+ data-row="${row + 1}"
120
+ data-col="${String.fromCharCode(65 + col)}"
121
+ ></div>
122
+ </td>`
123
+ ).join('')}
124
+ </tr>
125
+ `;
126
+ }).join('')
127
+ );
128
+ </script>
129
+ </tbody>
130
+ </table>
131
+ </div>
132
+
133
+ <!-- Status bar -->
134
+ <div class="bg-gray-100 p-2 border-t border-gray-200 text-sm text-gray-600 flex justify-between">
135
+ <div id="selected-cell">A1</div>
136
+ <div id="cell-formula"></div>
137
+ <div id="zoom-level">100%</div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <script>
143
+ document.addEventListener('DOMContentLoaded', function() {
144
+ const spreadsheet = document.getElementById('spreadsheet');
145
+ const cells = document.querySelectorAll('.cell');
146
+ const selectedCellDisplay = document.getElementById('selected-cell');
147
+ const cellFormulaDisplay = document.getElementById('cell-formula');
148
+ let activeCell = null;
149
+
150
+ // Initialize cells with empty data
151
+ cells.forEach(cell => {
152
+ cell.dataset.value = '';
153
+ cell.dataset.formula = '';
154
+ cell.dataset.bold = 'false';
155
+ cell.dataset.italic = 'false';
156
+ cell.dataset.underline = 'false';
157
+ cell.dataset.align = 'left';
158
+ cell.dataset.fontFamily = 'Arial';
159
+ cell.dataset.fontSize = '12';
160
+ cell.dataset.textColor = '#000000';
161
+ cell.dataset.bgColor = '#ffffff';
162
+ });
163
+
164
+ // Cell selection
165
+ cells.forEach(cell => {
166
+ cell.addEventListener('click', function() {
167
+ // Remove selection from all cells
168
+ cells.forEach(c => c.classList.remove('selected'));
169
+
170
+ // Select current cell
171
+ this.classList.add('selected');
172
+ activeCell = this;
173
+
174
+ // Update status bar
175
+ const col = this.dataset.col;
176
+ const row = this.dataset.row;
177
+ selectedCellDisplay.textContent = `${col}${row}`;
178
+ cellFormulaDisplay.textContent = this.dataset.formula ? `=${this.dataset.formula}` : '';
179
+
180
+ // Update toolbar to reflect cell formatting
181
+ updateToolbar(this);
182
+ });
183
+
184
+ cell.addEventListener('input', function() {
185
+ this.dataset.value = this.textContent;
186
+ });
187
+
188
+ cell.addEventListener('keydown', function(e) {
189
+ if (e.key === 'Enter') {
190
+ e.preventDefault();
191
+ moveToAdjacentCell(this, 'down');
192
+ } else if (e.key === 'Tab') {
193
+ e.preventDefault();
194
+ moveToAdjacentCell(this, e.shiftKey ? 'left' : 'right');
195
+ }
196
+ });
197
+ });
198
+
199
+ // Move to adjacent cell
200
+ function moveToAdjacentCell(currentCell, direction) {
201
+ const col = currentCell.dataset.col;
202
+ const row = parseInt(currentCell.dataset.row);
203
+ let nextCellId = '';
204
+
205
+ if (direction === 'right') {
206
+ const nextCol = String.fromCharCode(col.charCodeAt(0) + 1);
207
+ if (nextCol <= 'Z') {
208
+ nextCellId = `cell-${nextCol}${row}`;
209
+ }
210
+ } else if (direction === 'left') {
211
+ const prevCol = String.fromCharCode(col.charCodeAt(0) - 1);
212
+ if (prevCol >= 'A') {
213
+ nextCellId = `cell-${prevCol}${row}`;
214
+ }
215
+ } else if (direction === 'up' && row > 1) {
216
+ nextCellId = `cell-${col}${row - 1}`;
217
+ } else if (direction === 'down' && row < 50) {
218
+ nextCellId = `cell-${col}${row + 1}`;
219
+ }
220
+
221
+ if (nextCellId) {
222
+ const nextCell = document.getElementById(nextCellId);
223
+ nextCell.focus();
224
+ nextCell.click();
225
+ }
226
+ }
227
+
228
+ // Update toolbar buttons based on cell formatting
229
+ function updateToolbar(cell) {
230
+ document.getElementById('bold-btn').classList.toggle('active', cell.dataset.bold === 'true');
231
+ document.getElementById('italic-btn').classList.toggle('active', cell.dataset.italic === 'true');
232
+ document.getElementById('underline-btn').classList.toggle('active', cell.dataset.underline === 'true');
233
+
234
+ const alignButtons = ['align-left-btn', 'align-center-btn', 'align-right-btn'];
235
+ alignButtons.forEach(btn => document.getElementById(btn).classList.remove('active'));
236
+ document.getElementById(`align-${cell.dataset.align}-btn`).classList.add('active');
237
+
238
+ document.getElementById('font-family').value = cell.dataset.fontFamily;
239
+ document.getElementById('font-size').value = cell.dataset.fontSize;
240
+ document.getElementById('text-color').value = cell.dataset.textColor;
241
+ document.getElementById('bg-color').value = cell.dataset.bgColor;
242
+ }
243
+
244
+ // Apply formatting to active cell
245
+ function applyFormatting(property, value) {
246
+ if (activeCell) {
247
+ activeCell.dataset[property] = value;
248
+ updateCellStyle(activeCell);
249
+ }
250
+ }
251
+
252
+ // Update cell style based on data attributes
253
+ function updateCellStyle(cell) {
254
+ cell.style.fontWeight = cell.dataset.bold === 'true' ? 'bold' : 'normal';
255
+ cell.style.fontStyle = cell.dataset.italic === 'true' ? 'italic' : 'normal';
256
+ cell.style.textDecoration = cell.dataset.underline === 'true' ? 'underline' : 'none';
257
+ cell.style.textAlign = cell.dataset.align;
258
+ cell.style.fontFamily = cell.dataset.fontFamily;
259
+ cell.style.fontSize = `${cell.dataset.fontSize}px`;
260
+ cell.style.color = cell.dataset.textColor;
261
+ cell.style.backgroundColor = cell.dataset.bgColor;
262
+ }
263
+
264
+ // Toolbar event listeners
265
+ document.getElementById('bold-btn').addEventListener('click', () => {
266
+ if (activeCell) {
267
+ const newValue = activeCell.dataset.bold === 'true' ? 'false' : 'true';
268
+ applyFormatting('bold', newValue);
269
+ document.getElementById('bold-btn').classList.toggle('active');
270
+ }
271
+ });
272
+
273
+ document.getElementById('italic-btn').addEventListener('click', () => {
274
+ if (activeCell) {
275
+ const newValue = activeCell.dataset.italic === 'true' ? 'false' : 'true';
276
+ applyFormatting('italic', newValue);
277
+ document.getElementById('italic-btn').classList.toggle('active');
278
+ }
279
+ });
280
+
281
+ document.getElementById('underline-btn').addEventListener('click', () => {
282
+ if (activeCell) {
283
+ const newValue = activeCell.dataset.underline === 'true' ? 'false' : 'true';
284
+ applyFormatting('underline', newValue);
285
+ document.getElementById('underline-btn').classList.toggle('active');
286
+ }
287
+ });
288
+
289
+ document.getElementById('align-left-btn').addEventListener('click', () => {
290
+ applyFormatting('align', 'left');
291
+ document.querySelectorAll('.align-btn').forEach(btn => btn.classList.remove('active'));
292
+ document.getElementById('align-left-btn').classList.add('active');
293
+ });
294
+
295
+ document.getElementById('align-center-btn').addEventListener('click', () => {
296
+ applyFormatting('align', 'center');
297
+ document.querySelectorAll('.align-btn').forEach(btn => btn.classList.remove('active'));
298
+ document.getElementById('align-center-btn').classList.add('active');
299
+ });
300
+
301
+ document.getElementById('align-right-btn').addEventListener('click', () => {
302
+ applyFormatting('align', 'right');
303
+ document.querySelectorAll('.align-btn').forEach(btn => btn.classList.remove('active'));
304
+ document.getElementById('align-right-btn').classList.add('active');
305
+ });
306
+
307
+ document.getElementById('font-family').addEventListener('change', (e) => {
308
+ applyFormatting('fontFamily', e.target.value);
309
+ });
310
+
311
+ document.getElementById('font-size').addEventListener('change', (e) => {
312
+ applyFormatting('fontSize', e.target.value);
313
+ });
314
+
315
+ document.getElementById('text-color').addEventListener('input', (e) => {
316
+ applyFormatting('textColor', e.target.value);
317
+ });
318
+
319
+ document.getElementById('bg-color').addEventListener('input', (e) => {
320
+ applyFormatting('bgColor', e.target.value);
321
+ });
322
+
323
+ document.getElementById('clear-btn').addEventListener('click', () => {
324
+ if (activeCell) {
325
+ activeCell.textContent = '';
326
+ activeCell.dataset.value = '';
327
+ activeCell.dataset.formula = '';
328
+ activeCell.dataset.bold = 'false';
329
+ activeCell.dataset.italic = 'false';
330
+ activeCell.dataset.underline = 'false';
331
+ activeCell.dataset.align = 'left';
332
+ activeCell.dataset.fontFamily = 'Arial';
333
+ activeCell.dataset.fontSize = '12';
334
+ activeCell.dataset.textColor = '#000000';
335
+ activeCell.dataset.bgColor = '#ffffff';
336
+ updateCellStyle(activeCell);
337
+ updateToolbar(activeCell);
338
+ }
339
+ });
340
+
341
+ // Select first cell by default
342
+ document.getElementById('cell-A1').click();
343
+ });
344
+ </script>
345
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ipepe/simplespreadsheet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
346
+ </html>