···

       
47
       
 
       


     

       
48
       
 
       
            .container {

     

       
49
       
 
       
                display: grid;

     

       
50
       
-
       
                grid-template-columns: 300px 1fr;

     

       
51
       
 
       
                gap: 20px;

     

       
52
       
 
       
                margin-bottom: 20px;

     

       
53
       
 
       
            }

     
···

       
59
       
 
       
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

     

       
60
       
 
       
                height: fit-content;

     

       
61
       
 
       
                overflow-y: auto;

     

       
62
       
-
       
                overflow-x: hidden;

     

       
63
       
 
       
                max-height: 90vh;

     

       
64
       
 
       
                word-wrap: break-word;

     

       
65
       
 
       
                overflow-wrap: break-word;

     
···

       
448
       
 
       
                </div>

     

       
449
       
 
       
            </div>

     

       
450
       
 
       


     

       
451
       
-
       
            <div class="timeline-area">

     

       
452
       
-
       
                <div class="timeline-selector">

     

       
453
       
-
       
                    <h3>Weather Timelines</h3>

     

       
454
       
-
       
                    <div class="timeline-info">

     

       
455
       
-
       
                        Create different timelines for various weather

     

       
456
       
-
       
                        conditions. Each timeline defines how your profile

     

       
457
       
-
       
                        picture should look throughout the day.

     

       
458
       
-
       
                    </div>

     

       
459
       
-
       


     

       
460
       
-
       
                    <div class="new-timeline">

     

       
461
       
-
       
                        <input

     

       
462
       
-
       
                            type="text"

     

       
463
       
-
       
                            id="newTimelineName"

     

       
464
       
-
       
                            placeholder="Timeline name (e.g. sunny, rainy, cloudy)"

     

       
465
       
-
       
                            style="flex: 1; padding: 8px"

     

       
466
       
-
       
                        />

     

       
467
       
-
       
                        <button

     

       
468
       
-
       
                            onclick="createTimeline()"

     

       
469
       
-
       
                            class="btn btn-success"

     

       
470
       
-
       
                        >

     

       
471
       
-
       
                            Create

     

       
472
       
-
       
                        </button>

     

       
473
       
-
       
                    </div>

     

       
474
       
-
       


     

       
475
       
-
       
                    <div class="timeline-tabs" id="timelineTabs">

     

       
476
       
-
       
                        <div class="timeline-tab active" data-timeline="sunny">

     

       
477
       
-
       
                            Sunny

     

       
478
       
 
       
                        </div>

     

       
479
       
-
       
                    </div>

     

       
480
       
 
       


     

       
481
       
-
       
                    <div style="margin: 10px 0">

     

       
482
       
-
       
                        <button

     

       
483
       
-
       
                            onclick="duplicateTimeline()"

     

       
484
       
-
       
                            class="btn btn-secondary"

     

       
485
       
-
       
                        >

     

       
486
       
-
       
                            Duplicate Current

     

       
487
       
-
       
                        </button>

     

       
488
       
-
       
                        <button

     

       
489
       
-
       
                            onclick="deleteTimeline()"

     

       
490
       
-
       
                            class="btn btn-danger"

     

       
491
       
-
       
                        >

     

       
492
       
-
       
                            Delete Current

     

       
493
       
-
       
                        </button>

     

       
494
       
-
       
                    </div>

     

       
495
       
-
       
                </div>

     

       
496
       
-
       


     

       
497
       
-
       
                <div>

     

       
498
       
-
       
                    <h4>

     

       
499
       
-
       
                        24-Hour Timeline:

     

       
500
       
-
       
                        <span id="currentTimelineName">Sunny</span>

     

       
501
       
-
       
                    </h4>

     

       
502
       
-
       
                    <div class="hour-labels">

     

       
503
       
-
       
                        <div class="hour-label">0</div>

     

       
504
       
-
       
                        <div class="hour-label">1</div>

     

       
505
       
-
       
                        <div class="hour-label">2</div>

     

       
506
       
-
       
                        <div class="hour-label">3</div>

     

       
507
       
-
       
                        <div class="hour-label">4</div>

     

       
508
       
-
       
                        <div class="hour-label">5</div>

     

       
509
       
-
       
                        <div class="hour-label">6</div>

     

       
510
       
-
       
                        <div class="hour-label">7</div>

     

       
511
       
-
       
                        <div class="hour-label">8</div>

     

       
512
       
-
       
                        <div class="hour-label">9</div>

     

       
513
       
-
       
                        <div class="hour-label">10</div>

     

       
514
       
-
       
                        <div class="hour-label">11</div>

     

       
515
       
-
       
                        <div class="hour-label">12</div>

     

       
516
       
-
       
                        <div class="hour-label">13</div>

     

       
517
       
-
       
                        <div class="hour-label">14</div>

     

       
518
       
-
       
                        <div class="hour-label">15</div>

     

       
519
       
-
       
                        <div class="hour-label">16</div>

     

       
520
       
-
       
                        <div class="hour-label">17</div>

     

       
521
       
-
       
                        <div class="hour-label">18</div>

     

       
522
       
-
       
                        <div class="hour-label">19</div>

     

       
523
       
-
       
                        <div class="hour-label">20</div>

     

       
524
       
-
       
                        <div class="hour-label">21</div>

     

       
525
       
-
       
                        <div class="hour-label">22</div>

     

       
526
       
-
       
                        <div class="hour-label">23</div>

     

       
527
       
-
       
                    </div>

     

       
528
       
-
       
                    <div class="timeline-grid" id="timelineGrid">

     

       
529
       
-
       
                        <!-- Hours 0-23 will be generated here -->

     

       
530
       
-
       
                    </div>

     

       
531
       
-
       


     

       
532
       
-
       
                    <div style="margin-top: 20px">

     

       
533
       
-
       
                        <h4>Bulk Actions</h4>

     

       
534
       
-
       
                        <div

     

       
535
       
-
       
                            style="

     

       
536
       
-
       
                                display: flex;

     

       
537
       
-
       
                                gap: 10px;

     

       
538
       
-
       
                                flex-wrap: wrap;

     

       
539
       
-
       
                                margin-bottom: 15px;

     

       
540
       
-
       
                            "

     

       
541
       
-
       
                        >

     

       
542
       
 
       
                            <button

     

       
543
       
-
       
                                onclick="loadPreset('dawn', [5,6,7])"

     

       
544
       
-
       
                                class="btn btn-secondary"

     

       
545
       
 
       
                            >

     

       
546
       
-
       
                                Dawn (5-7)

     

       
547
       
 
       
                            </button>

     

       
548
       
-
       
                            <button

     

       
549
       
-
       
                                onclick="loadPreset('morning', [8,9,10,11])"

     

       
550
       
-
       
                                class="btn btn-secondary"

     

       
551
       
-
       
                            >

     

       
552
       
-
       
                                Morning (8-11)

     

       
553
       
-
       
                            </button>

     

       
554
       
-
       
                            <button

     

       
555
       
-
       
                                onclick="loadPreset('afternoon', [12,13,14,15,16])"

     

       
556
       
-
       
                                class="btn btn-secondary"

     

       
557
       
 
       
                            >

     

       
558
       
-
       
                                Afternoon (12-16)

     

       
559
       
-
       
                            </button>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
560
       
 
       
                            <button

     

       
561
       
-
       
                                onclick="loadPreset('sunset', [17,18,19])"

     

       
562
       
 
       
                                class="btn btn-secondary"

     

       
563
       
 
       
                            >

     

       
564
       
-
       
                                Sunset (17-19)

     

       
565
       
 
       
                            </button>

     

       
566
       
 
       
                            <button

     

       
567
       
-
       
                                onclick="loadPreset('night', [20,21,22,23,0,1,2,3,4])"

     

       
568
       
-
       
                                class="btn btn-secondary"

     

       
569
       
 
       
                            >

     

       
570
       
-
       
                                Night (20-4)

     

       
571
       
 
       
                            </button>

     

       
572
       
 
       
                        </div>

     

       
0
       
 
       

     

       
573
       
 
       


     

       
574
       
-
       
                        <div

     

       
575
       
-
       
                            style="

     

       
576
       
-
       
                                border: 1px solid #ddd;

     

       
577
       
-
       
                                padding: 10px;

     

       
578
       
-
       
                                border-radius: 4px;

     

       
579
       
-
       
                                background: #f8f9fa;

     

       
580
       
-
       
                            "

     

       
581
       
-
       
                        >

     

       
582
       
-
       
                            <h5 style="margin: 0 0 10px 0">Custom Range</h5>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
583
       
 
       
                            <div

     

       
584
       
 
       
                                style="

     

       
585
       
 
       
                                    display: flex;

     

       
586
       
-
       
                                    gap: 5px;

     

       
587
       
-
       
                                    align-items: center;

     

       
588
       
-
       
                                    margin-bottom: 10px;

     

       
589
       
 
       
                                "

     

       
590
       
 
       
                            >

     

       
591
       
-
       
                                <label style="font-size: 12px">From:</label>

     

       
592
       
-
       
                                <input

     

       
593
       
-
       
                                    type="number"

     

       
594
       
-
       
                                    id="rangeStart"

     

       
595
       
-
       
                                    min="0"

     

       
596
       
-
       
                                    max="23"

     

       
597
       
-
       
                                    value="9"

     

       
598
       
-
       
                                    style="width: 50px; padding: 4px"

     

       
599
       
-
       
                                />

     

       
600
       
-
       
                                <label style="font-size: 12px">To:</label>

     

       
601
       
-
       
                                <input

     

       
602
       
-
       
                                    type="number"

     

       
603
       
-
       
                                    id="rangeEnd"

     

       
604
       
-
       
                                    min="0"

     

       
605
       
-
       
                                    max="23"

     

       
606
       
-
       
                                    value="11"

     

       
607
       
-
       
                                    style="width: 50px; padding: 4px"

     

       
608
       
-
       
                                />

     

       
609
       
 
       
                                <button

     

       
610
       
-
       
                                    onclick="applyCurrentToRange()"

     

       
611
       
-
       
                                    class="btn btn-success"

     

       
612
       
-
       
                                    style="font-size: 11px"

     

       
613
       
 
       
                                >

     

       
614
       
-
       
                                    Apply Current

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
615
       
 
       
                                </button>

     

       
616
       
 
       
                            </div>

     

       
617
       
-
       
                            <div style="font-size: 11px; color: #666">

     

       
618
       
-
       
                                Uses current gradient & intensity settings for

     

       
619
       
-
       
                                the specified hour range

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
620
       
 
       
                            </div>

     

       
621
       
 
       
                        </div>

     

       
622
       
 
       
                    </div>

     

       
623
       
 
       
                </div>

     

       
624
       
-
       
            </div>

     

       
625
       
-
       
        </div>

     

       
626
       
 
       


     

       
627
       
-
       
        <div id="renderGallery" style="margin-top: 20px">

     

       
628
       
-
       
            <h3>🖼️ Render Gallery</h3>

     

       
629
       
-
       
            <div

     

       
630
       
-
       
                style="

     

       
631
       
-
       
                    background: white;

     

       
632
       
-
       
                    padding: 20px;

     

       
633
       
-
       
                    border-radius: 8px;

     

       
634
       
-
       
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

     

       
635
       
-
       
                "

     

       
636
       
-
       
            >

     

       
637
       
-
       
                <div

     

       
638
       
-
       
                    style="

     

       
639
       
-
       
                        display: flex;

     

       
640
       
-
       
                        justify-content: space-between;

     

       
641
       
-
       
                        align-items: center;

     

       
642
       
-
       
                        margin-bottom: 15px;

     

       
643
       
-
       
                        flex-wrap: wrap;

     

       
644
       
-
       
                        gap: 10px;

     

       
645
       
-
       
                    "

     

       
646
       
-
       
                >

     

       
647
       
-
       
                    <div id="galleryInfo" style="font-size: 14px; color: #666">

     

       
648
       
-
       
                        Ready to render timelines

     

       
649
       
-
       
                    </div>

     

       
650
       
-
       
                    <div style="display: flex; gap: 10px">

     

       
651
       
-
       
                        <button

     

       
652
       
-
       
                            onclick="renderAllTimelines()"

     

       
653
       
-
       
                            class="btn btn-success"

     

       
654
       
-
       
                        >

     

       
655
       
-
       
                            🎨 Render All

     

       
656
       
-
       
                        </button>

     

       
657
       
-
       
                        <button

     

       
658
       
-
       
                            onclick="downloadAllRendered()"

     

       
659
       
-
       
                            class="btn btn-primary"

     

       
660
       
-
       
                            id="downloadAllBtn"

     

       
661
       
-
       
                            disabled

     

       
662
       
-
       
                        >

     

       
663
       
-
       
                            💾 Download ZIP

     

       
664
       
-
       
                        </button>

     

       
665
       
-
       
                        <button onclick="clearGallery()" class="btn btn-danger">

     

       
666
       
-
       
                            🗑️ Clear Gallery

     

       
667
       
-
       
                        </button>

     

       
668
       
-
       
                    </div>

     

       
669
       
-
       
                </div>

     

       
670
       
-
       


     

       
671
       
-
       
                <div

     

       
672
       
-
       
                    id="bulkProgress"

     

       
673
       
-
       
                    style="margin-bottom: 15px; display: none"

     

       
674
       
-
       
                >

     

       
675
       
 
       
                    <div

     

       
676
       
 
       
                        style="

     

       
677
       
-
       
                            background: #e9ecef;

     

       
678
       
-
       
                            border-radius: 4px;

     

       
679
       
-
       
                            overflow: hidden;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
680
       
 
       
                        "

     

       
681
       
 
       
                    >

     

       
0
       
 
       

     

       
0
       
 
       

     

       
682
       
 
       
                        <div

     

       
683
       
-
       
                            id="progressBar"

     

       
684
       
 
       
                            style="

     

       
685
       
-
       
                                background: #28a745;

     

       
686
       
-
       
                                height: 20px;

     

       
687
       
-
       
                                width: 0%;

     

       
688
       
-
       
                                transition: width 0.3s;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
689
       
 
       
                            "

     

       
690
       
-
       
                        ></div>

     

       
691
       
-
       
                    </div>

     

       
692
       
-
       
                    <div

     

       
693
       
-
       
                        id="progressText"

     

       
694
       
-
       
                        style="

     

       
695
       
-
       
                            font-size: 12px;

     

       
696
       
-
       
                            text-align: center;

     

       
697
       
-
       
                            margin-top: 5px;

     

       
698
       
-
       
                        "

     

       
699
       
-
       
                    >

     

       
700
       
-
       
                        0/0

     

       
701
       
-
       
                    </div>

     

       
702
       
-
       
                </div>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
703
       
 
       


     

       
704
       
-
       
                <div

     

       
705
       
-
       
                    id="galleryContent"

     

       
706
       
-
       
                    style="

     

       
707
       
-
       
                        display: grid;

     

       
708
       
-
       
                        grid-template-columns: repeat(

     

       
709
       
-
       
                            auto-fill,

     

       
710
       
-
       
                            minmax(120px, 1fr)

     

       
711
       
-
       
                        );

     

       
712
       
-
       
                        gap: 15px;

     

       
713
       
-
       
                        min-height: 100px;

     

       
714
       
-
       
                        border: 2px dashed #ddd;

     

       
715
       
-
       
                        border-radius: 8px;

     

       
716
       
-
       
                        padding: 20px;

     

       
717
       
-
       
                        align-items: center;

     

       
718
       
-
       
                        justify-content: center;

     

       
719
       
-
       
                    "

     

       
720
       
-
       
                >

     

       
721
       
-
       
                    <div

     

       
722
       
-
       
                        id="galleryPlaceholder"

     

       
723
       
-
       
                        style="

     

       
724
       
-
       
                            grid-column: 1 / -1;

     

       
725
       
-
       
                            text-align: center;

     

       
726
       
-
       
                            color: #999;

     

       
727
       
-
       
                            font-style: italic;

     

       
728
       
-
       
                        "

     

       
729
       
-
       
                    >

     

       
730
       
-
       
                        Click "Render All" to generate images and see them here

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
731
       
 
       
                    </div>

     

       
732
       
 
       
                </div>

     

       
733
       
 
       
            </div>

     

···

       
47
       
 
       


     

       
48
       
 
       
            .container {

     

       
49
       
 
       
                display: grid;

     

       
50
       
+
       
                grid-template-columns: 350px 1fr;

     

       
51
       
 
       
                gap: 20px;

     

       
52
       
 
       
                margin-bottom: 20px;

     

       
53
       
 
       
            }

     
···

       
59
       
 
       
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

     

       
60
       
 
       
                height: fit-content;

     

       
61
       
 
       
                overflow-y: auto;

     

       
62
       
+
       
                overflow-x: auto;

     

       
63
       
 
       
                max-height: 90vh;

     

       
64
       
 
       
                word-wrap: break-word;

     

       
65
       
 
       
                overflow-wrap: break-word;

     
···

       
448
       
 
       
                </div>

     

       
449
       
 
       
            </div>

     

       
450
       
 
       


     

       
451
       
+
       
            <div class="main-area">

     

       
452
       
+
       
                <div class="timeline-area">

     

       
453
       
+
       
                    <div class="timeline-selector">

     

       
454
       
+
       
                        <h3 style="margin-top: 0">Weather Timelines</h3>

     

       
455
       
+
       
                        <div class="timeline-info">

     

       
456
       
+
       
                            Create different timelines for various weather

     

       
457
       
+
       
                            conditions. Each timeline defines how your profile

     

       
458
       
+
       
                            picture should look throughout the day.

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
459
       
 
       
                        </div>

     

       
0
       
 
       

     

       
460
       
 
       


     

       
461
       
+
       
                        <div class="new-timeline">

     

       
462
       
+
       
                            <input

     

       
463
       
+
       
                                type="text"

     

       
464
       
+
       
                                id="newTimelineName"

     

       
465
       
+
       
                                placeholder="Timeline name (e.g. sunny, rainy, cloudy)"

     

       
466
       
+
       
                                style="flex: 1; padding: 8px"

     

       
467
       
+
       
                            />

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
468
       
 
       
                            <button

     

       
469
       
+
       
                                onclick="createTimeline()"

     

       
470
       
+
       
                                class="btn btn-success"

     

       
471
       
 
       
                            >

     

       
472
       
+
       
                                Create

     

       
473
       
 
       
                            </button>

     

       
474
       
+
       
                        </div>

     

       
475
       
+
       


     

       
476
       
+
       
                        <div class="timeline-tabs" id="timelineTabs">

     

       
477
       
+
       
                            <div

     

       
478
       
+
       
                                class="timeline-tab active"

     

       
479
       
+
       
                                data-timeline="sunny"

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
480
       
 
       
                            >

     

       
481
       
+
       
                                Sunny

     

       
482
       
+
       
                            </div>

     

       
483
       
+
       
                        </div>

     

       
484
       
+
       


     

       
485
       
+
       
                        <div style="margin: 10px 0">

     

       
486
       
 
       
                            <button

     

       
487
       
+
       
                                onclick="duplicateTimeline()"

     

       
488
       
 
       
                                class="btn btn-secondary"

     

       
489
       
 
       
                            >

     

       
490
       
+
       
                                Duplicate Current

     

       
491
       
 
       
                            </button>

     

       
492
       
 
       
                            <button

     

       
493
       
+
       
                                onclick="deleteTimeline()"

     

       
494
       
+
       
                                class="btn btn-danger"

     

       
495
       
 
       
                            >

     

       
496
       
+
       
                                Delete Current

     

       
497
       
 
       
                            </button>

     

       
498
       
 
       
                        </div>

     

       
499
       
+
       
                    </div>

     

       
500
       
 
       


     

       
501
       
+
       
                    <div>

     

       
502
       
+
       
                        <h4>

     

       
503
       
+
       
                            24-Hour Timeline:

     

       
504
       
+
       
                            <span id="currentTimelineName">Sunny</span>

     

       
505
       
+
       
                        </h4>

     

       
506
       
+
       
                        <div class="hour-labels">

     

       
507
       
+
       
                            <div class="hour-label">0</div>

     

       
508
       
+
       
                            <div class="hour-label">1</div>

     

       
509
       
+
       
                            <div class="hour-label">2</div>

     

       
510
       
+
       
                            <div class="hour-label">3</div>

     

       
511
       
+
       
                            <div class="hour-label">4</div>

     

       
512
       
+
       
                            <div class="hour-label">5</div>

     

       
513
       
+
       
                            <div class="hour-label">6</div>

     

       
514
       
+
       
                            <div class="hour-label">7</div>

     

       
515
       
+
       
                            <div class="hour-label">8</div>

     

       
516
       
+
       
                            <div class="hour-label">9</div>

     

       
517
       
+
       
                            <div class="hour-label">10</div>

     

       
518
       
+
       
                            <div class="hour-label">11</div>

     

       
519
       
+
       
                            <div class="hour-label">12</div>

     

       
520
       
+
       
                            <div class="hour-label">13</div>

     

       
521
       
+
       
                            <div class="hour-label">14</div>

     

       
522
       
+
       
                            <div class="hour-label">15</div>

     

       
523
       
+
       
                            <div class="hour-label">16</div>

     

       
524
       
+
       
                            <div class="hour-label">17</div>

     

       
525
       
+
       
                            <div class="hour-label">18</div>

     

       
526
       
+
       
                            <div class="hour-label">19</div>

     

       
527
       
+
       
                            <div class="hour-label">20</div>

     

       
528
       
+
       
                            <div class="hour-label">21</div>

     

       
529
       
+
       
                            <div class="hour-label">22</div>

     

       
530
       
+
       
                            <div class="hour-label">23</div>

     

       
531
       
+
       
                        </div>

     

       
532
       
+
       
                        <div class="timeline-grid" id="timelineGrid">

     

       
533
       
+
       
                            <!-- Hours 0-23 will be generated here -->

     

       
534
       
+
       
                        </div>

     

       
535
       
+
       


     

       
536
       
+
       
                        <div style="margin-top: 20px">

     

       
537
       
+
       
                            <h4>Bulk Actions</h4>

     

       
538
       
 
       
                            <div

     

       
539
       
 
       
                                style="

     

       
540
       
 
       
                                    display: flex;

     

       
541
       
+
       
                                    gap: 10px;

     

       
542
       
+
       
                                    flex-wrap: wrap;

     

       
543
       
+
       
                                    margin-bottom: 15px;

     

       
544
       
 
       
                                "

     

       
545
       
 
       
                            >

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
546
       
 
       
                                <button

     

       
547
       
+
       
                                    onclick="loadPreset('dawn', [5,6,7])"

     

       
548
       
+
       
                                    class="btn btn-secondary"

     

       
0
       
 
       

     

       
549
       
 
       
                                >

     

       
550
       
+
       
                                    Dawn (5-7)

     

       
551
       
+
       
                                </button>

     

       
552
       
+
       
                                <button

     

       
553
       
+
       
                                    onclick="loadPreset('morning', [8,9,10,11])"

     

       
554
       
+
       
                                    class="btn btn-secondary"

     

       
555
       
+
       
                                >

     

       
556
       
+
       
                                    Morning (8-11)

     

       
557
       
+
       
                                </button>

     

       
558
       
+
       
                                <button

     

       
559
       
+
       
                                    onclick="loadPreset('afternoon', [12,13,14,15,16])"

     

       
560
       
+
       
                                    class="btn btn-secondary"

     

       
561
       
+
       
                                >

     

       
562
       
+
       
                                    Afternoon (12-16)

     

       
563
       
+
       
                                </button>

     

       
564
       
+
       
                                <button

     

       
565
       
+
       
                                    onclick="loadPreset('sunset', [17,18,19])"

     

       
566
       
+
       
                                    class="btn btn-secondary"

     

       
567
       
+
       
                                >

     

       
568
       
+
       
                                    Sunset (17-19)

     

       
569
       
+
       
                                </button>

     

       
570
       
+
       
                                <button

     

       
571
       
+
       
                                    onclick="loadPreset('night', [20,21,22,23,0,1,2,3,4])"

     

       
572
       
+
       
                                    class="btn btn-secondary"

     

       
573
       
+
       
                                >

     

       
574
       
+
       
                                    Night (20-4)

     

       
575
       
 
       
                                </button>

     

       
576
       
 
       
                            </div>

     

       
577
       
+
       


     

       
578
       
+
       
                            <div

     

       
579
       
+
       
                                style="

     

       
580
       
+
       
                                    border: 1px solid #ddd;

     

       
581
       
+
       
                                    padding: 10px;

     

       
582
       
+
       
                                    border-radius: 4px;

     

       
583
       
+
       
                                    background: #f8f9fa;

     

       
584
       
+
       
                                "

     

       
585
       
+
       
                            >

     

       
586
       
+
       
                                <h5 style="margin: 0 0 10px 0">Custom Range</h5>

     

       
587
       
+
       
                                <div

     

       
588
       
+
       
                                    style="

     

       
589
       
+
       
                                        display: flex;

     

       
590
       
+
       
                                        gap: 5px;

     

       
591
       
+
       
                                        align-items: center;

     

       
592
       
+
       
                                        margin-bottom: 10px;

     

       
593
       
+
       
                                    "

     

       
594
       
+
       
                                >

     

       
595
       
+
       
                                    <label style="font-size: 12px">From:</label>

     

       
596
       
+
       
                                    <input

     

       
597
       
+
       
                                        type="number"

     

       
598
       
+
       
                                        id="rangeStart"

     

       
599
       
+
       
                                        min="0"

     

       
600
       
+
       
                                        max="23"

     

       
601
       
+
       
                                        value="9"

     

       
602
       
+
       
                                        style="width: 50px; padding: 4px"

     

       
603
       
+
       
                                    />

     

       
604
       
+
       
                                    <label style="font-size: 12px">To:</label>

     

       
605
       
+
       
                                    <input

     

       
606
       
+
       
                                        type="number"

     

       
607
       
+
       
                                        id="rangeEnd"

     

       
608
       
+
       
                                        min="0"

     

       
609
       
+
       
                                        max="23"

     

       
610
       
+
       
                                        value="11"

     

       
611
       
+
       
                                        style="width: 50px; padding: 4px"

     

       
612
       
+
       
                                    />

     

       
613
       
+
       
                                    <button

     

       
614
       
+
       
                                        onclick="applyCurrentToRange()"

     

       
615
       
+
       
                                        class="btn btn-success"

     

       
616
       
+
       
                                        style="font-size: 11px"

     

       
617
       
+
       
                                    >

     

       
618
       
+
       
                                        Apply Current

     

       
619
       
+
       
                                    </button>

     

       
620
       
+
       
                                </div>

     

       
621
       
+
       
                                <div style="font-size: 11px; color: #666">

     

       
622
       
+
       
                                    Uses current gradient & intensity settings

     

       
623
       
+
       
                                    for the specified hour range

     

       
624
       
+
       
                                </div>

     

       
625
       
 
       
                            </div>

     

       
626
       
 
       
                        </div>

     

       
627
       
 
       
                    </div>

     

       
628
       
 
       
                </div>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
629
       
 
       


     

       
630
       
+
       
                <div id="renderGallery" style="margin-top: 20px">

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
631
       
 
       
                    <div

     

       
632
       
 
       
                        style="

     

       
633
       
+
       
                            background: white;

     

       
634
       
+
       
                            padding: 20px;

     

       
635
       
+
       
                            padding-top: 5px;

     

       
636
       
+
       
                            border-radius: 8px;

     

       
637
       
+
       
                            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

     

       
638
       
 
       
                        "

     

       
639
       
 
       
                    >

     

       
640
       
+
       
                        <h3>🖼️ Render Gallery</h3>

     

       
641
       
+
       


     

       
642
       
 
       
                        <div

     

       
0
       
 
       

     

       
643
       
 
       
                            style="

     

       
644
       
+
       
                                display: flex;

     

       
645
       
+
       
                                justify-content: space-between;

     

       
646
       
+
       
                                align-items: center;

     

       
647
       
+
       
                                margin-bottom: 15px;

     

       
648
       
+
       
                                flex-wrap: wrap;

     

       
649
       
+
       
                                gap: 10px;

     

       
650
       
 
       
                            "

     

       
651
       
+
       
                        >

     

       
652
       
+
       
                            <div

     

       
653
       
+
       
                                id="galleryInfo"

     

       
654
       
+
       
                                style="font-size: 14px; color: #666"

     

       
655
       
+
       
                            >

     

       
656
       
+
       
                                Ready to render timelines

     

       
657
       
+
       
                            </div>

     

       
658
       
+
       
                            <div style="display: flex; gap: 10px">

     

       
659
       
+
       
                                <button

     

       
660
       
+
       
                                    onclick="renderAllTimelines()"

     

       
661
       
+
       
                                    class="btn btn-success"

     

       
662
       
+
       
                                >

     

       
663
       
+
       
                                    🎨 Render All

     

       
664
       
+
       
                                </button>

     

       
665
       
+
       
                                <button

     

       
666
       
+
       
                                    onclick="downloadAllRendered()"

     

       
667
       
+
       
                                    class="btn btn-primary"

     

       
668
       
+
       
                                    id="downloadAllBtn"

     

       
669
       
+
       
                                    disabled

     

       
670
       
+
       
                                >

     

       
671
       
+
       
                                    💾 Download ZIP

     

       
672
       
+
       
                                </button>

     

       
673
       
+
       
                                <button

     

       
674
       
+
       
                                    onclick="clearGallery()"

     

       
675
       
+
       
                                    class="btn btn-danger"

     

       
676
       
+
       
                                >

     

       
677
       
+
       
                                    🗑️ Clear Gallery

     

       
678
       
+
       
                                </button>

     

       
679
       
+
       
                            </div>

     

       
680
       
+
       
                        </div>

     

       
681
       
+
       


     

       
682
       
+
       
                        <div

     

       
683
       
+
       
                            id="bulkProgress"

     

       
684
       
+
       
                            style="margin-bottom: 15px; display: none"

     

       
685
       
+
       
                        >

     

       
686
       
+
       
                            <div

     

       
687
       
+
       
                                style="

     

       
688
       
+
       
                                    background: #e9ecef;

     

       
689
       
+
       
                                    border-radius: 4px;

     

       
690
       
+
       
                                    overflow: hidden;

     

       
691
       
+
       
                                "

     

       
692
       
+
       
                            >

     

       
693
       
+
       
                                <div

     

       
694
       
+
       
                                    id="progressBar"

     

       
695
       
+
       
                                    style="

     

       
696
       
+
       
                                        background: #28a745;

     

       
697
       
+
       
                                        height: 20px;

     

       
698
       
+
       
                                        width: 0%;

     

       
699
       
+
       
                                        transition: width 0.3s;

     

       
700
       
+
       
                                    "

     

       
701
       
+
       
                                ></div>

     

       
702
       
+
       
                            </div>

     

       
703
       
+
       
                            <div

     

       
704
       
+
       
                                id="progressText"

     

       
705
       
+
       
                                style="

     

       
706
       
+
       
                                    font-size: 12px;

     

       
707
       
+
       
                                    text-align: center;

     

       
708
       
+
       
                                    margin-top: 5px;

     

       
709
       
+
       
                                "

     

       
710
       
+
       
                            >

     

       
711
       
+
       
                                0/0

     

       
712
       
+
       
                            </div>

     

       
713
       
+
       
                        </div>

     

       
714
       
 
       


     

       
715
       
+
       
                        <div

     

       
716
       
+
       
                            id="galleryContent"

     

       
717
       
+
       
                            style="

     

       
718
       
+
       
                                display: grid;

     

       
719
       
+
       
                                grid-template-columns: repeat(

     

       
720
       
+
       
                                    auto-fill,

     

       
721
       
+
       
                                    minmax(120px, 1fr)

     

       
722
       
+
       
                                );

     

       
723
       
+
       
                                gap: 15px;

     

       
724
       
+
       
                                min-height: 100px;

     

       
725
       
+
       
                                border: 2px dashed #ddd;

     

       
726
       
+
       
                                border-radius: 8px;

     

       
727
       
+
       
                                padding: 20px;

     

       
728
       
+
       
                                align-items: center;

     

       
729
       
+
       
                                justify-content: center;

     

       
730
       
+
       
                            "

     

       
731
       
+
       
                        >

     

       
732
       
+
       
                            <div

     

       
733
       
+
       
                                id="galleryPlaceholder"

     

       
734
       
+
       
                                style="

     

       
735
       
+
       
                                    grid-column: 1 / -1;

     

       
736
       
+
       
                                    text-align: center;

     

       
737
       
+
       
                                    color: #999;

     

       
738
       
+
       
                                    font-style: italic;

     

       
739
       
+
       
                                "

     

       
740
       
+
       
                            >

     

       
741
       
+
       
                                Click "Render All" to generate images and see

     

       
742
       
+
       
                                them here

     

       
743
       
+
       
                            </div>

     

       
744
       
+
       
                        </div>

     

       
745
       
 
       
                    </div>

     

       
746
       
 
       
                </div>

     

       
747
       
 
       
            </div>