-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
171 lines (165 loc) · 12.4 KB
/
Copy pathindex.html
File metadata and controls
171 lines (165 loc) · 12.4 KB
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Java Notebook</title>
<meta name="description" content="Notebook de Java 100% en el navegador">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="stylesheet" href="css/notebook.css">
<script src="https://cjrtnc.leaningtech.com/4.2/loader.js"></script>
<script>if (new URLSearchParams(location.search).has('eruda')) { document.write('<scr'+'ipt src="https://cdn.jsdelivr.net/npm/eruda"><\/scr'+'ipt>'); }</script>
<script>if (window.eruda) eruda.init();</script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar bg-body-secondary border-bottom">
<div class="container-xxl">
<span class="navbar-brand mb-0 h1 fw-semibold d-flex align-items-center"><img src="/favicon-96x96.png" alt="" width="24" height="24" class="me-2"> <span class="navbar-label">Java Notebook</span></span>
<div class="d-flex ms-auto align-items-center gap-1">
<div class="dropdown">
<button class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-file-earmark" aria-hidden="true"></i> <span class="navbar-label">Archivo</span></button>
<ul class="dropdown-menu dropdown-menu-end" id="archivo-menu">
<li><button class="dropdown-item" id="btn-import"><i class="bi bi-box-arrow-in-down" aria-hidden="true"></i> Importar</button></li>
<li><button class="dropdown-item" id="btn-export"><i class="bi bi-box-arrow-up" aria-hidden="true"></i> Exportar</button></li>
<li id="examples-divider"><hr class="dropdown-divider"></li>
<li id="examples-header" class="dropdown-header">Ejemplos</li>
</ul>
</div>
<button class="btn btn-sm" id="btn-help" aria-label="Atajos de teclado" title="Atajos de teclado (?)">
<i class="bi bi-question-circle" aria-hidden="true"></i>
</button>
<div class="dropdown">
<button class="btn btn-sm" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-label="Configuracion" title="Configuracion" aria-expanded="false">
<i class="bi bi-gear" aria-hidden="true"></i>
</button>
<div class="dropdown-menu dropdown-menu-end p-2" id="settings-menu" style="min-width: 200px;">
<div class="mb-2">
<label class="form-label small fw-semibold text-body-secondary text-uppercase mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Tema</label>
<div class="btn-group btn-group-sm w-100">
<button class="btn btn-outline-secondary settings-theme" data-theme="system">Auto</button>
<button class="btn btn-outline-secondary settings-theme" data-theme="light">Claro</button>
<button class="btn btn-outline-secondary settings-theme" data-theme="dark">Oscuro</button>
</div>
</div>
<div class="mb-2">
<label class="form-label small fw-semibold text-body-secondary text-uppercase mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Identación</label>
<div class="btn-group btn-group-sm w-100">
<button class="btn btn-outline-secondary settings-indent" data-size="2">2</button>
<button class="btn btn-outline-secondary settings-indent" data-size="4">4</button>
</div>
</div>
<div class="mb-2">
<label class="form-label small fw-semibold text-body-secondary text-uppercase mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Modo</label>
<div class="btn-group btn-group-sm w-100">
<button class="btn btn-outline-secondary settings-mode" data-mode="edit"><i class="bi bi-pencil-square" aria-hidden="true"></i> Edición</button>
<button class="btn btn-outline-secondary settings-mode" data-mode="read"><i class="bi bi-eye" aria-hidden="true"></i> Lectura</button>
</div>
</div>
<div>
<label class="form-label small fw-semibold text-body-secondary text-uppercase mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Atajos generales</label>
<div class="btn-group btn-group-sm w-100">
<button class="btn btn-outline-secondary settings-shortcuts" data-enabled="true"><i class="bi bi-keyboard" aria-hidden="true"></i> On</button>
<button class="btn btn-outline-secondary settings-shortcuts" data-enabled="false">Off</button>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- Loading overlay -->
<div id="loading-overlay" class="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center" style="z-index:1055; background:rgba(0,0,0,0.5)">
<div class="bg-body rounded-3 p-5 text-center shadow">
<div class="spinner-border text-primary mb-3" role="status"></div>
<div id="loading-import" class="fs-6 fw-bold mb-3 d-none"></div>
<div id="loading-status" class="fs-6 text-body-secondary">Inicializando Java...</div>
</div>
</div>
<!-- Tab bar + notebook actions (single row) -->
<div id="tab-actions-bar"></div>
<!-- Scrollable notebook content -->
<main id="notebook-container"></main>
<!-- Keyboard shortcuts modal -->
<div class="modal fade" id="shortcuts-modal" tabindex="-1" aria-labelledby="shortcuts-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="shortcuts-modal-label"><i class="bi bi-keyboard" aria-hidden="true"></i> Atajos de teclado</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<h6 class="fw-semibold mb-2">General</h6>
<table class="table table-sm table-borderless mb-3">
<tbody>
<tr><td><kbd>Ctrl</kbd> + <kbd>↑</kbd></td><td>Celda anterior</td></tr>
<tr><td><kbd>Ctrl</kbd> + <kbd>↓</kbd></td><td>Celda siguiente</td></tr>
<tr><td><kbd>Ctrl</kbd> + <kbd>X</kbd></td><td>Cortar celda</td></tr>
<tr><td><kbd>Ctrl</kbd> + <kbd>C</kbd></td><td>Copiar celda</td></tr>
<tr><td><kbd>Ctrl</kbd> + <kbd>V</kbd></td><td>Pegar celda</td></tr>
<tr><td><kbd>Ctrl</kbd> + <kbd>Supr</kbd></td><td>Eliminar celda</td></tr>
<tr><td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td><td>Deshacer eliminar celda</td></tr>
<tr><td><kbd>Ctrl</kbd> + <kbd>S</kbd></td><td>Exportar notebook</td></tr>
<tr><td><kbd>Ctrl</kbd> + <kbd>E</kbd></td><td>Modo lectura/edicion</td></tr>
<tr><td><kbd>?</kbd></td><td>Mostrar/ocultar atajos</td></tr>
</tbody>
</table>
<h6 class="fw-semibold mb-2">Interacciones</h6>
<table class="table table-sm table-borderless">
<tbody>
<tr><td>Doble click en markdown</td><td>Editar celda</td></tr>
<tr><td>Doble click en pestana</td><td>Renombrar notebook</td></tr>
<tr><td>Long-press en pestana</td><td>Renombrar notebook (mobile)</td></tr>
<tr><td>Drag-drop <code>.ipynb</code></td><td>Importar notebook</td></tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<h6 class="fw-semibold mb-2">Celda de codigo</h6>
<table class="table table-sm table-borderless mb-3">
<tbody>
<tr><td><kbd>Shift</kbd> + <kbd>Enter</kbd></td><td>Ejecutar y quedarse</td></tr>
<tr><td><kbd>Ctrl</kbd> + <kbd>Enter</kbd></td><td>Ejecutar y avanzar</td></tr>
<tr><td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd></td><td>Formatear codigo</td></tr>
<tr><td><kbd>Tab</kbd></td><td>Indentar</td></tr>
</tbody>
</table>
<h6 class="fw-semibold mb-2">Celda de markdown</h6>
<table class="table table-sm table-borderless">
<tbody>
<tr><td><kbd>Shift</kbd> + <kbd>Enter</kbd></td><td>Salir del modo edicion</td></tr>
<tr><td><kbd>Ctrl</kbd> + <kbd>Enter</kbd></td><td>Salir y avanzar</td></tr>
</tbody>
</table>
</div>
</div>
<hr class="my-3">
<div class="small text-body-secondary">
<p class="mb-2"><strong>Java Notebook</strong> — Java 17 100% en el navegador, sin servidor.</p>
<p class="mb-2">
<a href="https://github.com/Federico-G/java-notebook" target="_blank" rel="noopener" class="text-body-secondary"><i class="bi bi-github"></i> Codigo fuente en GitHub</a>
</p>
<p class="mb-1"><strong>Tecnologias</strong></p>
<ul class="mb-2" style="padding-left: 1.2rem;">
<li><a href="https://cheerpj.com/" target="_blank" rel="noopener" class="text-body-secondary">CheerpJ</a> — JVM en WebAssembly (<a href="https://labs.leaningtech.com/cheerpj3/licensing" target="_blank" rel="noopener" class="text-body-secondary">Community License</a>)</li>
<li><a href="https://adoptium.net/" target="_blank" rel="noopener" class="text-body-secondary">Eclipse Temurin</a> — JDK 17 (GPLv2 + Classpath Exception)</li>
<li><a href="https://codemirror.net/" target="_blank" rel="noopener" class="text-body-secondary">CodeMirror 6</a> — Editor de codigo (MIT)</li>
<li><a href="https://getbootstrap.com/" target="_blank" rel="noopener" class="text-body-secondary">Bootstrap 5</a> — Framework CSS (MIT)</li>
<li><a href="https://marked.js.org/" target="_blank" rel="noopener" class="text-body-secondary">marked</a> — Renderizado Markdown (MIT)</li>
<li><a href="https://vite.dev/" target="_blank" rel="noopener" class="text-body-secondary">Vite</a> — Build tool (MIT)</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- CheerpJ routes System.out here -->
<pre id="console" style="position:absolute;left:-9999px;top:-9999px;"></pre>
<!-- Main app -->
<script type="module" src="js/app.js"></script>
</body>
</html>