Hugging Face's logo

Spaces:
olimpa
/
Celdas2celdas
Running

App Files Community
olimpa commited on
Commit
6cca0e0
•
1 Parent(s): 97b88ec

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +85 -61
index.html CHANGED
@@ -58,7 +58,7 @@
58
  flex-wrap: wrap;
59
  margin: -1px;
60
  }
61
- .cell {
62
  flex-basis: calc(100% / 7);
63
  height: 50px;
64
  border: 1px solid #ccc;
@@ -69,7 +69,6 @@
69
  font-size: 16px;
70
  padding: 10px;
71
  box-sizing: border-box;
72
- text-align: center;
73
  }
74
  .cell-header {
75
  background-color: #eee;
@@ -103,6 +102,18 @@
103
  font-size: 14px;
104
  text-align: center;
105
  }
 
 
 
 
 
 
 
 
 
 
 
 
106
  </style>
107
  </head>
108
  <body>
@@ -117,59 +128,67 @@
117
  <div class="tab" data-month="julio">Julio</div>
118
  <div class="tab" data-month="agosto">Agosto</div>
119
  </div>
120
- <div class="row junio active">
121
- <div class="cell cell-header">Lunes</div>
122
- <div class="cell cell-header">Martes</div>
123
- <div class="cell cell-header">Miércoles</div>
124
- <div class="cell cell-header">Jueves</div>
125
- <div class="cell cell-header">Viernes</div>
126
- <div class="cell cell-header">Sábado</div>
127
- <div class="cell cell-header">Domingo</div>
128
- </div>
129
- <div class="row junio active">
130
- <div class="cell cell-day cell-odd">1</div>
131
- <div class="cell cell-day cell-even">2</div>
132
- <div class="cell cell-day cell-odd">3</div>
133
- <div class="cell cell-day cell-even">4</div>
134
- <div class="cell cell-day cell-odd">5</div>
135
- <div class="cell cell-day cell-even">6</div>
136
- <div class="cell cell-day cell-odd">7</div>
137
- </div>
138
- <div class="row junio active">
139
- <div class="cell cell-day cell-even">8</div>
140
- <div class="cell cell-day cell-odd">9</div>
141
- <div class="cell cell-day cell-even">10</div>
142
- <div class="cell cell-day cell-odd">11</div>
143
- <div class="cell cell-day cell-even">12</div>
144
- <div class="cell cell-day cell-odd">13</div>
145
- <div class="cell cell-day cell-even">14</div>
146
- </div>
147
- <div class="row junio active">
148
- <div class="cell cell-day cell-odd">15</div>
149
- <div class="cell cell-day cell-even">16</div>
150
- <div class="cell cell-day cell-odd">17</div>
151
- <div class="cell cell-day cell-even">18</div>
152
- <div class="cell cell-day cell-odd">19</div>
153
- <div class="cell cell-day cell-even">20</div>
154
- <div class="cell cell-day cell-odd">21</div>
155
- </div>
156
- <div class="row junio active">
157
- <div class="cell cell-day cell-even">22</div>
158
- <div class="cell cell-day cell-odd">23</div>
159
- <div class="cell cell-day cell-even">24</div>
160
- <div class="cell cell-day cell-odd">25</div>
161
- <div class="cell cell-day cell-even">26</div>
162
- <div class="cell cell-day cell-odd">27</div>
163
- <div class="cell cell-day cell-even">28</div>
164
- </div>
165
- <div class="row junio active">
166
- <div class="cell cell-day cell-odd">29</div>
167
- <div class="cell cell-day cell-even">30</div>
168
- <div class="cell"></div>
169
- <div class="cell"></div>
170
- <div class="cell"></div>
171
- <div class="cell"></div>
172
- <div class="cell"></div>
 
 
 
 
 
 
 
 
173
  </div>
174
  <div class="footer">
175
  <p>Lo que es, ya ha sido, y lo que será, ya fue, y Dios busca lo que ha pasado.</p>
@@ -178,25 +197,28 @@
178
  </div>
179
  <script>
180
  const tabs = document.querySelectorAll('.tab');
181
- const rows = document.querySelectorAll('.row');
 
182
  function showTab(event) {
183
  tabs.forEach(tab => {
184
  tab.classList.remove('active');
185
  });
186
- rows.forEach(row => {
187
- row.classList.remove('active');
188
- });
189
  const month = event.target.dataset.month;
190
  event.target.classList.add('active');
191
  document.querySelector('.title').innerHTML = 'Agenda de líderes';
192
  document.querySelector('.subtitle').innerHTML = `${month.charAt(0).toUpperCase() + month.slice(1)} 2023`;
193
  document.querySelector('.date').innerHTML = `Lunes 1 de ${month.charAt(0).toUpperCase() + month.slice(1)}`;
194
- document.querySelector(`.row.${month}`).classList.add('active');
195
  }
 
196
  tabs.forEach(tab => {
197
  tab.addEventListener('click', showTab);
198
  });
 
199
  const cells = document.querySelectorAll('.cell-day');
 
200
  function showInput(event) {
201
  const input = document.createElement('input');
202
  input.value = event.target.innerHTML;
@@ -206,14 +228,16 @@
206
  input.focus();
207
  input.addEventListener('blur', saveInput);
208
  }
 
209
  function saveInput(event) {
210
  const value = event.target.value;
211
  event.target.parentNode.innerHTML = value;
212
  event.target.parentNode.classList.remove('cell-edit');
213
  }
 
214
  cells.forEach(cell => {
215
  cell.addEventListener('click', showInput);
216
  });
217
  </script>
218
  </body>
219
- </html>
 
58
  flex-wrap: wrap;
59
  margin: -1px;
60
  }
61
+ .cell {
62
  flex-basis: calc(100% / 7);
63
  height: 50px;
64
  border: 1px solid #ccc;
 
69
  font-size: 16px;
70
  padding: 10px;
71
  box-sizing: border-box;
 
72
  }
73
  .cell-header {
74
  background-color: #eee;
 
102
  font-size: 14px;
103
  text-align: center;
104
  }
105
+ .row-shading:nth-child(odd) .cell {
106
+ background-color: #f0f0f0;
107
+ }
108
+ .row-shading:nth-child(even) .cell {
109
+ background-color: #fff;
110
+ }
111
+ .table-container {
112
+ overflow: scroll;
113
+ }
114
+ .table-container table {
115
+ table-layout: fixed;
116
+ }
117
  </style>
118
  </head>
119
  <body>
 
128
  <div class="tab" data-month="julio">Julio</div>
129
  <div class="tab" data-month="agosto">Agosto</div>
130
  </div>
131
+ <div class="table-container">
132
+ <table>
133
+ <thead>
134
+ <tr>
135
+ <th>Lunes</th>
136
+ <th>Martes</th>
137
+ <th>Miércoles</th>
138
+ <th>Jueves</th>
139
+ <th>Viernes</th>
140
+ <th>Sábado</th>
141
+ <th>Domingo</th>
142
+ </tr>
143
+ </thead>
144
+ <tbody class="row-shading junio active">
145
+ <tr>
146
+ <td class="cell cell-day cell-odd">1</td>
147
+ <td class="cell cell-day cell-even">2</td>
148
+ <td class="cell cell-day cell-odd">3</td>
149
+ <td class="cell cell-day cell-even">4</td>
150
+ <td class="cell cell-day cell-odd">5</td>
151
+ <td class="cell cell-day cell-even">6</td>
152
+ <td class="cell cell-day cell-odd">7</td>
153
+ </tr>
154
+ <tr>
155
+ <td class="cell cell-day cell-even">8</td>
156
+ <td class="cell cell-day cell-odd">9</td>
157
+ <td class="cell cell-day cell-even">10</td>
158
+ <td class="cell cell-day cell-odd">11</td>
159
+ <td class="cell cell-day cell-even">12</td>
160
+ <td class="cell cell-day cell-odd">13</td>
161
+ <td class="cell cell-day cell-even">14</td>
162
+ </tr>
163
+ <tr>
164
+ <td class="cell cell-day cell-odd">15</td>
165
+ <td class="cell cell-day cell-even">16</td>
166
+ <td class="cell cell-day cell-odd">17</td>
167
+ <td class="cell cell-day cell-even">18</td>
168
+ <td class="cell cell-day cell-odd">19</td>
169
+ <td class="cell cell-day cell-even">20</td>
170
+ <td class="cell cell-day cell-odd">21</td>
171
+ </tr>
172
+ <tr>
173
+ <td class="cell cell-day cell-even">22</td>
174
+ <td class="cell cell-day cell-odd">23</td>
175
+ <td class="cell cell-day cell-even">24</td>
176
+ <td class="cell cell-day cell-odd">25</td>
177
+ <td class="cell cell-day cell-even">26</td>
178
+ <td class="cell cell-day cell-odd">27</td>
179
+ <td class="cell cell-day cell-even">28</td>
180
+ </tr>
181
+ <tr>
182
+ <td class="cell cell-day cell-odd">29</td>
183
+ <td class="cell cell-day cell-even">30</td>
184
+ <td class="cell"></td>
185
+ <td class="cell"></td>
186
+ <td class="cell"></td>
187
+ <td class="cell"></td>
188
+ <td class="cell"></td>
189
+ </tr>
190
+ </tbody>
191
+ </table>
192
  </div>
193
  <div class="footer">
194
  <p>Lo que es, ya ha sido, y lo que será, ya fue, y Dios busca lo que ha pasado.</p>
 
197
  </div>
198
  <script>
199
  const tabs = document.querySelectorAll('.tab');
200
+ const rowShading = document.querySelector('.row-shading');
201
+
202
  function showTab(event) {
203
  tabs.forEach(tab => {
204
  tab.classList.remove('active');
205
  });
206
+ rowShading.classList.remove('active');
207
+
 
208
  const month = event.target.dataset.month;
209
  event.target.classList.add('active');
210
  document.querySelector('.title').innerHTML = 'Agenda de líderes';
211
  document.querySelector('.subtitle').innerHTML = `${month.charAt(0).toUpperCase() + month.slice(1)} 2023`;
212
  document.querySelector('.date').innerHTML = `Lunes 1 de ${month.charAt(0).toUpperCase() + month.slice(1)}`;
213
+ document.querySelector(`.row-shading.${month}`).classList.add('active');
214
  }
215
+
216
  tabs.forEach(tab => {
217
  tab.addEventListener('click', showTab);
218
  });
219
+
220
  const cells = document.querySelectorAll('.cell-day');
221
+
222
  function showInput(event) {
223
  const input = document.createElement('input');
224
  input.value = event.target.innerHTML;
 
228
  input.focus();
229
  input.addEventListener('blur', saveInput);
230
  }
231
+
232
  function saveInput(event) {
233
  const value = event.target.value;
234
  event.target.parentNode.innerHTML = value;
235
  event.target.parentNode.classList.remove('cell-edit');
236
  }
237
+
238
  cells.forEach(cell => {
239
  cell.addEventListener('click', showInput);
240
  });
241
  </script>
242
  </body>
243
+ </html>