pinokiod 3.9.2 → 3.9.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -144,15 +144,16 @@ body.dark .badge {
144
144
  margin-right: 10px;
145
145
  border-radius: 10px;
146
146
  }
147
+ body.dark .prototype-header {
148
+ color: white;
149
+ }
147
150
  .prototype-header .btn {
148
151
  border: 1px solid rgba(255,255,255,0.3);
149
152
  }
150
153
  .prototype-header {
151
154
  align-items: center;
152
155
  display: flex;
153
- padding: 40px;
154
- background: black;
155
- color: white;
156
+ padding: 40px 20px;
156
157
  }
157
158
  .prototype-header h1 {
158
159
  letter-spacing: -1px;
@@ -196,6 +197,324 @@ body.dark .browser-options-row {
196
197
  padding: 0;
197
198
  }
198
199
  }
200
+
201
+
202
+
203
+
204
+
205
+
206
+ .online {
207
+ width: 10px;
208
+ height: 10px;
209
+ background: yellowgreen;
210
+ border-radius: 10px;
211
+ }
212
+ #menu {
213
+ display: flex;
214
+ }
215
+ #menu i {
216
+ display: block;
217
+ }
218
+ #menu img {
219
+ display: none;
220
+ height: 30px;
221
+ object-fit: contain;
222
+ /*
223
+ border-radius: 20px
224
+ */
225
+ }
226
+ #menu.margin {
227
+ /*
228
+ padding: 5px;
229
+ */
230
+ }
231
+ #menu.margin i {
232
+ display: none;
233
+ }
234
+ #menu.margin img {
235
+ display: block;
236
+ }
237
+ html, body {
238
+ width: 100%;
239
+ height: 100%;
240
+ margin: 0;
241
+ }
242
+ body {
243
+ display: flex;
244
+ flex-direction: column;
245
+ }
246
+ .menu {
247
+ overflow: auto;
248
+ }
249
+ body.dark .m {
250
+ border-top: 1px solid rgba(255,255,255,0.04);
251
+ }
252
+ .m {
253
+ border-top: 1px solid rgba(0,0,0,0.04);
254
+ }
255
+ .container {
256
+ position: relative;
257
+ display: flex;
258
+ flex-direction: column;
259
+ flex-grow: 1;
260
+ }
261
+ body aside {
262
+ /*
263
+ background: var(--light-bg);
264
+ */
265
+ border-right: 1px solid rgba(0,0,0,0.04);
266
+ height: 100%;
267
+ }
268
+ body.dark aside {
269
+ background: var(--dark-bg);
270
+ border-right: 1px solid rgba(255,255,255,0.04);
271
+ }
272
+ aside {
273
+ display: flex;
274
+ flex-direction: column;
275
+ width: 200px;
276
+ overflow: auto;
277
+ box-sizing: border-box;
278
+ flex-shrink: 0;
279
+ }
280
+ main {
281
+ flex-grow: 1;
282
+ min-height: 0;
283
+ /*
284
+ height: 100%;
285
+ */
286
+ }
287
+ main iframe[name^=http] {
288
+ background: white;
289
+ }
290
+ main iframe {
291
+ width: 100%;
292
+ height: 100%;
293
+ border: none;
294
+ }
295
+ .header-item {
296
+ /*
297
+ display: block;
298
+ */
299
+ display: flex;
300
+ font-size: 12px;
301
+ text-decoration: none;
302
+ align-items: center;
303
+ border-radius: 0;
304
+ cursor: pointer;
305
+ }
306
+ .header-item.selected {
307
+ }
308
+ .header-item .btn2 {
309
+ margin: 0;
310
+ border: none;
311
+ padding: 5px;
312
+ /*
313
+ color: var(--light-color);
314
+ */
315
+ }
316
+ body.dark .header-item .btn2 {
317
+ /*
318
+ color: var(--darkt-color);
319
+ */
320
+ }
321
+ .bar .btn2 i {
322
+ display: block;
323
+ margin-right: 5px;
324
+ }
325
+ .header-item > * {
326
+ display: block;
327
+ }
328
+ .header-item img {
329
+ /*
330
+ width: 60px;
331
+ */
332
+ height: 80px;
333
+ width: 80px;
334
+ /*
335
+ border-radius: 10px;
336
+ */
337
+ object-fit: contain;
338
+ display: inline-block;
339
+ /*
340
+ border-radius: 30px;
341
+ */
342
+ }
343
+ body.dark .header-item.btn {
344
+ /*
345
+ color: white;
346
+ */
347
+ color: var(--dark-color);
348
+ }
349
+ .header-item.btn {
350
+ padding: 10px;
351
+ background: none !important;
352
+ color: var(--light-color);
353
+ }
354
+ .logo {
355
+ font-size: 20px;
356
+ padding: 20px;
357
+ }
358
+ body .logo {
359
+ color: var(--light-color);
360
+ }
361
+ body.dark .logo {
362
+ color: var(--dark-btn-color);
363
+ /*
364
+ color: white;
365
+ */
366
+ }
367
+ body #new-window {
368
+ color: var(--light-color);
369
+ }
370
+ body.dark #new-window {
371
+ color: var(--dark-btn-color);
372
+ /*
373
+ color: white;
374
+ */
375
+ }
376
+ /*
377
+ .dark .app-info {
378
+ background: rgba(255,255,255,0.04);
379
+ }
380
+ */
381
+ .app-info {
382
+
383
+ /*
384
+ display: flex;
385
+ */
386
+ box-sizing: border-box;
387
+ text-align: center;;
388
+ font-weight: bold;
389
+ align-items: center;
390
+ /*
391
+ background: rgba(0,0,0,0.04);
392
+ */
393
+ }
394
+ .folderbuttons {
395
+ display: grid;
396
+ grid-template-columns: repeat(4, 1fr);
397
+ gap: 0px;
398
+ }
399
+ .header-btns {
400
+ padding: 0 !important;
401
+ }
402
+ body.dark .header-btns {
403
+ border-top: 1px solid rgba(255,255,255,0.04);
404
+ }
405
+ .app-info-edit {
406
+ text-decoration: none;
407
+ color: black;
408
+ border-bottom: 1px solid rgba(255,255,255,0.1);
409
+ }
410
+ /*
411
+ .dark .app-info-edit {
412
+ border-top: 1px solid rgba(255,255,255,0.2);
413
+ border-bottom: 1px solid rgba(255,255,255,0.2);
414
+ }
415
+ */
416
+ .dark .app-info-edit:hover {
417
+ background: rgba(0,0,0,0.2);
418
+ }
419
+ .app-info-edit:hover{
420
+ background: rgba(0,0,0,0.05);
421
+ }
422
+ .app-info-edit i{
423
+ display: block;
424
+ }
425
+ .app-info-edit, .app-info-copy {
426
+ font-weight: normal;
427
+
428
+ /*
429
+ border-radius: 20px;
430
+ */
431
+ font-size: 12px;
432
+ padding: 15px 5px;
433
+ /*
434
+ margin: 10px 20px 0;
435
+ */
436
+ }
437
+ .app-info-card {
438
+ padding: 10px !important;
439
+ }
440
+ .app-info .btn {
441
+ width: 100%;
442
+ }
443
+ .app-info-card > * {
444
+ padding: 5px;
445
+ color: var(--light-color);
446
+ text-decoration: none;
447
+ box-sizing: border-box;
448
+ }
449
+ body.dark .app-info-card > * {
450
+ color: var(--dark-color);
451
+ }
452
+ .appcanvas {
453
+ display: flex;
454
+ flex-grow: 1;
455
+ border-top: 1px solid rgba(0, 0,0 ,0.04);
456
+ }
457
+ body.dark .appcanvas {
458
+ border-top: 1px solid rgba(255,255,255,0.04);
459
+ }
460
+
461
+ @media only screen and (max-width: 480px) {
462
+ nav .btn2 {
463
+ width: auto !important;
464
+ min-width: 40px;
465
+ border-right: none;
466
+ flex-direction: column;
467
+ }
468
+ .app-info {
469
+ display: flex;
470
+ padding: 10px;
471
+ }
472
+ .app-info img {
473
+ width: 60px;
474
+ height: 60px;
475
+ }
476
+
477
+ .header-item {
478
+ font-size: 16px;
479
+ }
480
+ aside.active {
481
+ width: 100%;
482
+ z-index: 10000000;
483
+ }
484
+ aside:not(.active) {
485
+ display: none;
486
+ }
487
+ .container {
488
+ display: none;
489
+ }
490
+ .container.active {
491
+ display: block;
492
+ position: absolute;
493
+ z-index: 10000000;
494
+ width: 100%;
495
+ height: 100%;
496
+ }
497
+ /*
498
+ .grid-btns {
499
+ display: none;
500
+ }
501
+ */
502
+ #menu {
503
+ display: none;
504
+ }
505
+ #menu-mobile {
506
+ display: flex;
507
+ }
508
+ }
509
+ body.dark .header-item.cursor.header-top {
510
+ background: none !important;
511
+ }
512
+ .header-item.cursor.header-top {
513
+ background: none !important;
514
+ }
515
+ .header-item.header-top {
516
+ display: block;
517
+ }
199
518
  </style>
200
519
  <script src="/hotkeys.min.js"></script>
201
520
  <script src="/sweetalert2.js"></script>
@@ -248,38 +567,54 @@ body.dark .browser-options-row {
248
567
  </div>
249
568
  </h1>
250
569
  </header>
251
- <main>
252
- <div id='terminal' class='hidden'></div>
253
- <div class='container'>
254
- <div class='prototype-header'>
255
- <div>
256
- <h1>Create a new project</h1>
257
- <div class='desc'>Select an option to set up a new folder</div>
258
- </div>
259
- <div class='flexible'></div>
260
- <a class='btn' id='download'><i class='fa-solid fa-download'></i> Download a custom prototype script</a>
261
- </div>
262
- <div class='folder-templates drawer'>
263
- <% items.forEach((folder, i) => { %>
264
- <a class='line folder' href="/prototype/show/<%=folder.id%>">
265
- <% if (folder.icon) { %>
266
- <img src="<%=folder.icon%>">
267
- <% } else { %>
268
- <% if (theme === 'dark') { %>
269
- <img src="/pinokio-white.png">
570
+ <div class='appcanvas'>
571
+ <aside class='active'>
572
+ <div class='header-top header-item'>
573
+ <div class='app-info'>
574
+ <div class='app-info-card'>
575
+ <% if (config.icon) { %>
576
+ <img src="<%=config.icon%>"/>
270
577
  <% } else { %>
271
- <img src="/pinokio-black.png">
578
+ <i class="fa-regular fa-circle-dot"></i>
272
579
  <% } %>
273
- <% } %>
274
- <div class='col flexible'>
275
- <div class='title'><%=folder.title%></div>
276
- <div class='description'><%=folder.description%></div>
580
+ <div><%=config.title%></div>
581
+ <div class="folderpath"><%=config.web_path%></div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </aside>
586
+ <main>
587
+ <div class='container'>
588
+ <div class='prototype-header'>
589
+ <div>
590
+ <h1><%=title%></h1>
591
+ <div class='desc'><%=description%></div>
277
592
  </div>
278
- </a>
279
- <% }) %>
280
- </div>
593
+ <div class='flexible'></div>
594
+ <a class='btn' id='download'><i class='fa-solid fa-download'></i> Download a custom prototype script</a>
595
+ </div>
596
+ <div class='folder-templates drawer'>
597
+ <% items.forEach((folder, i) => { %>
598
+ <a class='line folder' href="/prototype/show/<%=folder.id%>?path=<%=path%>">
599
+ <% if (folder.icon) { %>
600
+ <img src="<%=folder.icon%>">
601
+ <% } else { %>
602
+ <% if (theme === 'dark') { %>
603
+ <img src="/pinokio-white.png">
604
+ <% } else { %>
605
+ <img src="/pinokio-black.png">
606
+ <% } %>
607
+ <% } %>
608
+ <div class='col flexible'>
609
+ <div class='title'><%=folder.title%></div>
610
+ <div class='description'><%=folder.description%></div>
611
+ </div>
612
+ </a>
613
+ <% }) %>
614
+ </div>
615
+ </div>
616
+ </main>
281
617
  </div>
282
- </main>
283
618
  <script>
284
619
  let paths = location.pathname.split("/").filter(x=>x)
285
620
  var term