the home of serif.blue
feat: update timeline builder styling
+259
-245
+259
-245
site/pfp-updates/index.html
+259
-245
site/pfp-updates/index.html
···
47
47
48
48
.container {
49
49
display: grid;
50
-
grid-template-columns: 300px 1fr;
50
+
grid-template-columns: 350px 1fr;
51
51
gap: 20px;
52
52
margin-bottom: 20px;
53
53
}
···
59
59
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
60
60
height: fit-content;
61
61
overflow-y: auto;
62
-
overflow-x: hidden;
62
+
overflow-x: auto;
63
63
max-height: 90vh;
64
64
word-wrap: break-word;
65
65
overflow-wrap: break-word;
···
448
448
</div>
449
449
</div>
450
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
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.
478
459
</div>
479
-
</div>
480
460
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
-
>
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
+
/>
542
468
<button
543
-
onclick="loadPreset('dawn', [5,6,7])"
544
-
class="btn btn-secondary"
469
+
onclick="createTimeline()"
470
+
class="btn btn-success"
545
471
>
546
-
Dawn (5-7)
472
+
Create
547
473
</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"
474
+
</div>
475
+
476
+
<div class="timeline-tabs" id="timelineTabs">
477
+
<div
478
+
class="timeline-tab active"
479
+
data-timeline="sunny"
557
480
>
558
-
Afternoon (12-16)
559
-
</button>
481
+
Sunny
482
+
</div>
483
+
</div>
484
+
485
+
<div style="margin: 10px 0">
560
486
<button
561
-
onclick="loadPreset('sunset', [17,18,19])"
487
+
onclick="duplicateTimeline()"
562
488
class="btn btn-secondary"
563
489
>
564
-
Sunset (17-19)
490
+
Duplicate Current
565
491
</button>
566
492
<button
567
-
onclick="loadPreset('night', [20,21,22,23,0,1,2,3,4])"
568
-
class="btn btn-secondary"
493
+
onclick="deleteTimeline()"
494
+
class="btn btn-danger"
569
495
>
570
-
Night (20-4)
496
+
Delete Current
571
497
</button>
572
498
</div>
499
+
</div>
573
500
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>
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>
583
538
<div
584
539
style="
585
540
display: flex;
586
-
gap: 5px;
587
-
align-items: center;
588
-
margin-bottom: 10px;
541
+
gap: 10px;
542
+
flex-wrap: wrap;
543
+
margin-bottom: 15px;
589
544
"
590
545
>
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
546
<button
610
-
onclick="applyCurrentToRange()"
611
-
class="btn btn-success"
612
-
style="font-size: 11px"
547
+
onclick="loadPreset('dawn', [5,6,7])"
548
+
class="btn btn-secondary"
613
549
>
614
-
Apply Current
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)
615
575
</button>
616
576
</div>
617
-
<div style="font-size: 11px; color: #666">
618
-
Uses current gradient & intensity settings for
619
-
the specified hour range
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>
620
625
</div>
621
626
</div>
622
627
</div>
623
628
</div>
624
-
</div>
625
-
</div>
626
629
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
-
>
630
+
<div id="renderGallery" style="margin-top: 20px">
675
631
<div
676
632
style="
677
-
background: #e9ecef;
678
-
border-radius: 4px;
679
-
overflow: hidden;
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);
680
638
"
681
639
>
640
+
<h3>🖼️ Render Gallery</h3>
641
+
682
642
<div
683
-
id="progressBar"
684
643
style="
685
-
background: #28a745;
686
-
height: 20px;
687
-
width: 0%;
688
-
transition: width 0.3s;
644
+
display: flex;
645
+
justify-content: space-between;
646
+
align-items: center;
647
+
margin-bottom: 15px;
648
+
flex-wrap: wrap;
649
+
gap: 10px;
689
650
"
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>
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>
703
714
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
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>
731
745
</div>
732
746
</div>
733
747
</div>