Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
1002 lines (885 loc) · 57.6 KB
/
Copy pathindex.html
File metadata and controls
1002 lines (885 loc) · 57.6 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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Italian Adventure</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
:root {
--primary-bg: #F9F6F0;
--accent-color: #C84C35;
--accent-hover: #A63B28;
--food-color: #D34E24;
--shop-color: #205E7D;
--stay-color: #B8860B;
--sight-color: #722F37;
--nature-color: #4A6B53;
--text-main: #2C2C2C;
--text-light: #666666;
--card-bg: #FFFFFF;
--border-light: #EBE6DE;
--route-color: #4A6B53;
}
body {
margin: 0;
padding: 0;
font-family: 'Nunito', sans-serif;
background-color: var(--primary-bg);
color: var(--text-main);
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
header {
background-color: var(--card-bg);
text-align: center;
padding: 24px 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
z-index: 1000;
border-bottom: 2px solid var(--accent-color);
}
h1 {
font-family: 'Playfair Display', serif;
color: var(--accent-color);
margin: 0;
font-size: 2.4rem;
}
p.subtitle {
margin: 8px 0 0 0;
color: var(--text-light);
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 2px;
}
#map {
flex-grow: 1;
width: 100%;
z-index: 1;
}
.fab-btn {
position: fixed;
bottom: 30px;
right: 30px;
background-color: var(--accent-color);
color: white;
border: none;
border-radius: 30px;
padding: 14px 24px;
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 1.1rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.25);
cursor: pointer;
z-index: 1000;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
align-items: center;
gap: 8px;
}
.fab-btn:hover {
background-color: var(--accent-hover);
transform: translateY(-4px) scale(1.05);
box-shadow: 0 8px 20px rgba(200,76,53,0.4);
}
.restart-btn {
right: auto;
left: 30px;
background-color: var(--card-bg);
color: var(--accent-color);
border: 2px solid var(--border-light);
}
.restart-btn:hover {
background-color: var(--primary-bg);
color: var(--accent-hover);
}
/* Copy-Paste Friendly Sidebar */
.sidebar {
position: fixed;
top: 0;
right: -100%;
width: 100%;
max-width: 550px;
height: 100vh;
background-color: #FFFFFF;
box-shadow: -5px 0 25px rgba(0,0,0,0.2);
z-index: 2500;
transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
display: flex;
flex-direction: column;
}
.sidebar.active { right: 0; }
.sidebar-header {
padding: 25px 30px 15px 30px;
background-color: #FAFAFA;
border-bottom: 1px solid var(--border-light);
display: flex;
justify-content: space-between;
align-items: center;
}
.sidebar-close {
background: rgba(0,0,0,0.05);
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
cursor: pointer;
transition: all 0.2s;
}
.sidebar-close:hover { background: var(--accent-color); color: white; }
.sidebar-content {
flex-grow: 1;
overflow-y: auto;
padding: 40px;
padding-bottom: 100px;
user-select: text;
}
/* Modal & UI Styling */
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(44, 44, 44, 0.6);
backdrop-filter: blur(5px);
z-index: 2000;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.modal-overlay.active { display: flex; opacity: 1; }
.modal-content {
background: var(--card-bg);
width: 90%;
max-width: 650px;
max-height: 85vh;
border-radius: 16px;
padding: 35px;
position: relative;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
overflow-y: auto;
transform: translateY(20px);
transition: transform 0.3s ease;
}
.modal-overlay.active .modal-content { transform: translateY(0); }
#welcomeOverlay .modal-content { text-align: center; max-width: 500px; }
.close-btn {
position: absolute;
top: 20px;
right: 25px;
background: rgba(0,0,0,0.5);
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: white;
cursor: pointer;
transition: all 0.2s;
z-index: 10;
}
.close-btn:hover { background: var(--accent-color); transform: scale(1.05); }
.modal-hero-img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 25px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
/* CYOA Styles */
.cyoa-container {
margin: 15px 0;
padding: 20px;
background: #FAFAFA;
border-radius: 12px;
border: 2px dashed #EBE6DE;
}
.cyoa-title {
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
color: var(--accent-color);
margin-top: 0;
margin-bottom: 15px;
text-align: center;
}
.cyoa-toggle {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.cyoa-btn {
flex: 1;
padding: 10px 5px;
border: 2px solid var(--accent-color);
background: transparent;
color: var(--accent-color);
border-radius: 8px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
font-family: 'Nunito', sans-serif;
font-size: 0.9rem;
}
.cyoa-btn.active {
background: var(--accent-color);
color: white;
box-shadow: 0 4px 10px rgba(200, 76, 53, 0.2);
}
.cyoa-btn:hover:not(.active) { background: rgba(200, 76, 53, 0.05); }
.cyoa-content {
background: white;
padding: 15px;
border-radius: 8px;
border: 1px solid var(--border-light);
font-size: 0.95rem;
line-height: 1.6;
}
.cyoa-content ul { margin: 0; padding-left: 20px; }
.cyoa-content li { margin-bottom: 8px; }
.why-block {
background: #F4E8EA;
border-left: 4px solid #722F37;
padding: 18px 20px;
margin: 25px 0;
border-radius: 0 8px 8px 0;
text-align: left;
}
.why-block h3 { margin-top: 0; color: #722F37; font-family: 'Playfair Display', serif; font-size: 1.3rem; margin-bottom: 8px; }
.why-block p { margin: 0; color: var(--text-main); font-style: italic; line-height: 1.5; }
.next-btn {
background-color: var(--accent-color); color: white; border: none; padding: 16px 24px; font-size: 1.1rem; font-family: 'Nunito', sans-serif; font-weight: 700; border-radius: 8px; cursor: pointer; margin-top: 15px; transition: background 0.3s, transform 0.2s; width: 100%; display: block;
}
.next-btn:hover { background-color: var(--accent-hover); transform: translateY(-2px); }
details { background: #FFFFFF; border-radius: 8px; border: 1px solid var(--border-light); margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.02); text-align: left; }
summary { padding: 18px 20px; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.2rem; color: var(--text-main); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary:after { content: "+"; font-family: 'Nunito', sans-serif; font-size: 1.5rem; color: var(--accent-color); transition: transform 0.3s; }
details[open] summary:after { transform: rotate(45deg); }
details[open] summary { background: var(--primary-bg); border-bottom: 1px solid var(--border-light); }
.details-content { padding: 20px; font-size: 1rem; line-height: 1.6; color: var(--text-light); text-align: left; }
h2 { font-family: 'Playfair Display', serif; color: var(--accent-color); border-bottom: 2px solid var(--border-light); padding-bottom: 12px; margin-top: 0; margin-bottom: 20px; font-size: 2rem; }
.tag-container { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; justify-content: flex-start; }
.tag { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 6px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.tag.history { background: #F4E8EA; color: #722F37; }
.tag.food { background: #FCEEEB; color: #D34E24; }
.tag.nature { background: #EAF1EB; color: #4A6B53; }
.tag.water { background: #E6F0F5; color: #205E7D; }
.tag.stay { background: #FDF6E3; color: #B8860B; }
a { color: var(--accent-color); text-decoration: none; font-weight: 700; border-bottom: 1px solid transparent; transition: all 0.2s; }
a:hover { color: var(--accent-hover); border-bottom: 1px solid var(--accent-hover); }
ul { padding-left: 20px; margin-top: 5px; }
li { margin-bottom: 12px; }
/* Map Pins */
.custom-pin {
background-color: var(--accent-color); border: 2px solid white; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; justify-content: center; align-items: center; color: white; font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700;
}
.custom-pin:hover { transform: scale(1.15) translateY(-5px); background-color: var(--accent-hover); box-shadow: 0 6px 15px rgba(200,76,53,0.4); }
.food-pin { background-color: var(--food-color); border-color: #FCEEEB; font-size: 14px; }
.food-pin:hover { background-color: #BA421D; }
.shop-pin { background-color: var(--shop-color); border-color: #E6F0F5; font-size: 14px; }
.shop-pin:hover { background-color: #174861; }
.stay-pin { background-color: var(--stay-color); border-color: #FDF6E3; font-size: 14px; }
.stay-pin:hover { background-color: #8B6508; }
.sight-pin { background-color: var(--sight-color); border-color: #F4E8EA; font-size: 14px; }
.sight-pin:hover { background-color: #4A1A24; }
.nature-pin { background-color: var(--nature-color); border-color: #EAF1EB; font-size: 14px; }
.nature-pin:hover { background-color: #2F4535; }
</style>
</head>
<body>
<header>
<h1>Our Italian Adventure</h1>
<p class="subtitle">14 Days of History, Art & Culinary Magic</p>
</header>
<div id="map"></div>
<button class="fab-btn restart-btn" onclick="showWelcomeScreen()">🎉 Restart Tour</button>
<button class="fab-btn" onclick="toggleSidebar()">📜 View Itinerary</button>
<div class="sidebar" id="itinerarySidebar">
<div class="sidebar-header">
<span style="font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--accent-color);">Itinerary Document</span>
<button class="sidebar-close" onclick="toggleSidebar()">×</button>
</div>
<div class="sidebar-content" id="sidebarContent"></div>
</div>
<!-- Birthday Welcome Modal -->
<div class="modal-overlay active" id="welcomeOverlay">
<div class="modal-content">
<h2 style="border: none; margin-bottom: 10px;">Happy 25th Birthday, Damian!! 💜</h2>
<p style="font-size: 1.1rem; color: var(--text-light); line-height: 1.6; margin-bottom: 25px;">
I know how much you want to travel and see the world, and I want to make this possible for you & be right there beside you every step of the way. Because you deserve all the very best the world has to offer you, my love. So, my birthday present to you this year is an itinerary that I crafted with you in mind! We can modify it, pick dates, and I'll go ahead and finalize the reservations :D (P.S. I also want to commit ~$400 towards your expenses as a part of this hehe)
</p>
<img src="IMG_6156.png" alt="Happy Birthday" class="modal-hero-img">
<button class="next-btn" onclick="startAdventure()">Start Our Adventure ➔</button>
</div>
</div>
<!-- Main Itinerary Modal -->
<div class="modal-overlay" id="modalOverlay">
<div class="modal-content">
<button class="close-btn" onclick="closeModal()">×</button>
<div id="itineraryDetails"></div>
</div>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<!-- Confetti Library -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<script>
const map = L.map('map').setView([43.0, 12.0], 7);
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
attribution: '© OpenStreetMap © CARTO',
subdomains: 'abcd',
maxZoom: 20
}).addTo(map);
// State object to track CYOA choices
const adventureState = {
rome: 'A',
assisi: 'A',
florence: 'A',
cinque: 'A',
venice: 'A'
};
// Main City Hubs
const locations = [
{ id: 'rome', step: 1, name: 'Start: Rome', coords: [41.9028, 12.4964] },
{ id: 'assisi', step: 2, name: 'Assisi', coords: [43.0702, 12.6186] },
{ id: 'florence', step: 3, name: 'Florence', coords: [43.7695, 11.2558] },
{ id: 'cinque', step: 4, name: 'Cinque Terre', coords: [44.1353, 9.6828] },
{ id: 'venice', step: 5, name: 'End: Venice', coords: [45.4408, 12.3155] }
];
// Extra Locations
const extraLocations = [
{ id: 'rome-stay', type: 'stay', emoji: '🛏️', name: 'Casa di Santa Brigida', coords: [41.8955, 12.4711], desc: "Located off Piazza Farnese, this traditional convent stay run by the Birgittine Sisters offers a tranquil, historic base right in the heart of the city." },
{ id: 'pantheon', type: 'sight', emoji: '🏛️', name: 'The Pantheon', coords: [41.8986, 12.4769], desc: "Built around 125 AD, the Pantheon features a perfectly proportioned unreinforced concrete dome and a central oculus." },
{ id: 'colosseum', type: 'sight', emoji: '⚔️', name: 'Colosseum & Roman Forum', coords: [41.8902, 12.4922], desc: "The Flavian Amphitheatre (completed in 80 AD) once held 50,000 spectators for gladiatorial contests. Adjacent lies the Forum, the excavated heart of ancient Roman politics and commerce." },
{ id: 'vatican', type: 'sight', emoji: '🖼️', name: 'Vatican Museums & Sistine Chapel', coords: [41.9065, 12.4536], desc: "Spanning 54 galleries, the museums house centuries of papal art acquisitions, culminating in Michelangelo's breathtaking Sistine Chapel frescoes." },
{ id: 'borghese', type: 'sight', emoji: '🎨', name: 'Borghese Gallery', coords: [41.9139, 12.4922], desc: "Set in the Villa Borghese Pinciana, this gallery contains masterpieces of the Renaissance and Baroque, including Bernini's <em>Apollo and Daphne</em>." },
{ id: 'taverna', type: 'food', emoji: '🍝', name: 'La Taverna dei Fori Imperiali', coords: [41.8943, 12.4891], desc: "A renowned, family-run restaurant serving classic Roman dishes like <em>Abbacchio al Forno</em> (roast lamb) and crispy <em>Cacio e Pepe</em>." },
{ id: 'maritozzaro', type: 'food', emoji: '🥐', name: 'Il Maritozzaro', coords: [41.8814, 12.4646], desc: "A legendary 1960s café famous across Rome for serving the ultimate <em>Maritozzo</em>—a sweet brioche-like bun overflowing with freshly whipped panna." },
{ id: 'boschetto', type: 'shop', emoji: '🛍️', name: 'Via del Boschetto', coords: [41.8967, 12.4905], desc: "The artistic soul of the Monti district, known for its bohemian vibe, independent artisan jewelry makers, and curated vintage clothing boutiques." },
{ id: 'assisi-stay', type: 'stay', emoji: '🛏️', name: 'Monastero Sant\'Andrea', coords: [43.0715, 12.6135], desc: "Run by Franciscan sisters, this medieval stone monastery offers panoramic views of the Umbrian valley and a profoundly quiet, spiritual atmosphere." },
{ id: 'basilica', type: 'sight', emoji: '⛪', name: 'Basilica of San Francesco', coords: [43.0745, 12.6062], desc: "Consecrated in 1228, this complex features an Upper and Lower basilica adorned with groundbreaking frescoes by Giotto." },
{ id: 'eremo', type: 'nature', emoji: '🌲', name: 'Eremo delle Carceri', coords: [43.0645, 12.6515], desc: "A steep 4km hike into a dense oak forest reveals this network of tiny chapels and caves carved directly into the rock where St. Francis retreated for isolated prayer." },
{ id: 'pallotta', type: 'food', emoji: '🍷', name: 'Trattoria Pallotta', coords: [43.0712, 12.6163], desc: "Situated in Piazza del Comune under historic stone vaults, this trattoria specializes in Umbrian <em>Stringozzi</em> pasta, black truffles, and rich wild boar ragù." },
{ id: 'ceramics', type: 'shop', emoji: '🏺', name: 'Deruta Ceramics', coords: [43.0720, 12.6150], desc: "Assisi preserves the local Umbrian tradition of Majolica pottery, recognizable by its vibrant blues, yellows, and intricate geometric Renaissance patterns." },
{ id: 'florence-stay', type: 'stay', emoji: '🛏️', name: 'Fattoria Il Milione', coords: [43.7380, 11.2185], desc: "A stunning 15th-century estate set on 50 hectares of parkland in the Chianti hills, acting as an authentic Agriturismo base just outside the bustling city." },
{ id: 'uffizi', type: 'sight', emoji: '🖼️', name: 'Uffizi Gallery', coords: [43.7677, 11.2556], desc: "Designed by Vasari, the Uffizi houses the world's greatest collection of Italian Renaissance art, including Botticelli's <em>Birth of Venus</em>." },
{ id: 'accademia', type: 'sight', emoji: '🗿', name: 'Accademia Gallery', coords: [43.7769, 11.2585], desc: "Founded in 1784, this gallery's crown jewel is Michelangelo's <em>David</em> (1504)." },
{ id: 'duomo', type: 'sight', emoji: '⛪', name: 'Florence Duomo', coords: [43.7731, 11.2560], desc: "The Cattedrale di Santa Maria del Fiore, famous for Brunelleschi's massive red-tiled dome. Climbing it requires navigating 463 narrow stone steps." },
{ id: 'vinaio', type: 'food', emoji: '🥪', name: "All'Antico Vinaio", coords: [43.7684, 11.2573], desc: "Located on Via dei Neri, this is Italy's most famous street food spot, serving massive, freshly baked schiacciata bread overflowing with Tuscan meats." },
{ id: 'cuoio', type: 'shop', emoji: '👜', name: 'Scuola del Cuoio', coords: [43.7681, 11.2618], desc: "Founded post-WWII, this leather school sits inside the Santa Croce dormitories. Visitors can watch masters tool and gild authentic Florentine leather." },
{ id: 'cinque-stay', type: 'stay', emoji: '🛏️', name: 'Affittacamere Anna', coords: [44.1705, 9.6148], desc: "A comfortable, locally-run guesthouse basecamp in Levanto, providing a quiet escape from the heavily trafficked five main villages." },
{ id: 'vernazza', type: 'sight', emoji: '🏰', name: 'Vernazza & Doria Castle', coords: [44.1352, 9.6830], desc: "Arguably the most picturesque of the villages, characterized by steep, narrow alleys leading up to an 11th-century watchtower." },
{ id: 'sentiero', type: 'nature', emoji: '🥾', name: 'Sentiero Azzurro', coords: [44.1177, 9.7123], desc: "A legendary 12km coastal path connecting the villages. Hikers navigate cliffside vineyards and olive groves." },
{ id: 'nessun', type: 'food', emoji: '🥂', name: 'Nessun Dorma', coords: [44.1065, 9.7275], desc: "A world-famous Manarola cliffside terrace focusing entirely on local bruschetta, meat platters, and pesto making." },
{ id: 'pescato', type: 'food', emoji: '🍤', name: 'Il Pescato Cucinato', coords: [44.0984, 9.7394], desc: "A beloved 'hole in the wall' in Riomaggiore frying up the daily catch. Known for their legendary <em>fritto misto</em> served in paper cones." },
{ id: 'venice-stay', type: 'stay', emoji: '🛏️', name: 'Foresteria Valdese', coords: [45.4374, 12.3392], desc: "Located in the Castello district inside the historic Palazzo Cavagnis. Rooms feature 16th-century frescoes, and proceeds support Waldensian charities." },
{ id: 'doge', type: 'sight', emoji: '🏛️', name: "Doge's Palace", coords: [45.4337, 12.3404], desc: "A Venetian Gothic masterpiece and the historical seat of the Republic's power. It connects to the grim prison cells via the famous Bridge of Sighs." },
{ id: 'murano', type: 'sight', emoji: '🔥', name: 'Murano Glass Island', coords: [45.4578, 12.3533], desc: "A short Vaporetto ride away, this island has been the global hub of elite glassmaking since 1291. Visitors can watch master artisans manipulate glowing silica." },
{ id: 'domori', type: 'food', emoji: '🍢', name: 'Cantina Do Mori', coords: [45.4388, 12.3338], desc: "Tucked into San Polo 429 beneath hanging copper pots, this is rumored to have been Casanova's watering hole. A mandatory stop for <em>cicchetti</em> (Venetian tapas)." },
{ id: 'macana', type: 'shop', emoji: '🎭', name: "Ca' Macana Mask Makers", coords: [45.4316, 12.3242], desc: "Located in Dorsoduro, this elite workshop creates authentic papier-mâché masks, completely eschewing modern plastics." }
];
const latlngs = locations.map(loc => loc.coords);
L.polyline(latlngs, { color: '#4A6B53', weight: 3, dashArray: '8, 8', opacity: 0.9 }).addTo(map);
// Function to generate the dynamic HTML based on the CYOA state!
function getItineraryHtml(cityId) {
if (cityId === 'rome') {
return `
<img src="IMG_7307.png" alt="Us" class="modal-hero-img">
<h2>Days 1–3: Rome</h2>
<div class="tag-container">
<span class="tag history">🏛️ Ancient Wonders</span>
<span class="tag history">🎨 Baroque Art</span>
</div>
<div class="why-block">
<h3>💜 Why I chose this for us</h3>
<p>The Roman Empire!! I know how much you love history, and I think this would be such an iconic start to see all the views! I can't wait for you to tell me everything you know about these places, and most importantly see your eyes light up as we go through the city :)</p>
</div>
<details open>
<summary>Day 1: Arrival & Trastevere</summary>
<div class="details-content">
<ul>
<li><strong>2:00 PM:</strong> Arrive via train, check into our convent, and drop our bags!</li>
<li><strong>4:00 PM:</strong> Head to the Pantheon. We'll marvel at the massive unreinforced concrete dome.</li>
<li><strong>6:30 PM:</strong> Cross the river for our Twilight Walking Food Tour in Trastevere.</li>
<li><strong>9:30 PM:</strong> After the tour, let's grab an evening cocktail at <strong>Freni e Frizioni</strong>.</li>
</ul>
</div>
</details>
<details open>
<summary>Day 2: The Heart of the Ancient World</summary>
<div class="details-content">
<ul>
<li><strong>9:00 AM:</strong> Enter the Colosseum and Roman Forum. We'll walk the exact political and religious nucleus of the ancient world.</li>
<li><strong>1:00 PM:</strong> Head to the bohemian Monti district for lunch and vintage shopping along Via del Boschetto.</li>
<li><strong>3:30 PM:</strong> Explore the Capitoline Museums to see the famous bronze she-wolf.</li>
<li><strong>8:00 PM:</strong> Dinner reservations at <strong>La Taverna dei Fori Imperiali</strong> for rich, classic Roman pasta.</li>
</ul>
</div>
</details>
<img src="IMG_8280.png" alt="Eating Italian pasta" class="modal-hero-img">
<div class="cyoa-container">
<h4 class="cyoa-title">✨ Choose Your Adventure: Day 3 ✨</h4>
<div class="cyoa-toggle">
<button class="cyoa-btn ${adventureState.rome === 'A' ? 'active' : ''}" onclick="updateAdventure('rome', 'A')">Vatican & Art</button>
<button class="cyoa-btn ${adventureState.rome === 'B' ? 'active' : ''}" onclick="updateAdventure('rome', 'B')">E-Bikes & Catacombs</button>
</div>
<div class="cyoa-content">
${adventureState.rome === 'A' ? `
<ul>
<li><strong>8:00 AM:</strong> Vatican Museums Prime Experience. We'll beat the crowds to see Michelangelo's grueling, masterful Sistine Chapel frescoes.</li>
<li><strong>1:00 PM:</strong> Lunch near the Prati neighborhood.</li>
<li><strong>3:30 PM:</strong> Head to the Borghese Gallery to get up close to Bernini's impossibly soft marble sculptures.</li>
<li><strong>9:00 PM:</strong> Walk to the Trevi Fountain after dark, grab a famous <em>Maritozzo</em> sweet bun, and stroll through Campo de' Fiori!</li>
</ul>
` : `
<ul>
<li><strong>9:00 AM:</strong> Rent e-bikes and ride down the ancient 2,000-year-old cobblestones of the Via Appia Antica!</li>
<li><strong>11:30 AM:</strong> Park our bikes and head underground to explore the eerie Christian Catacombs.</li>
<li><strong>2:00 PM:</strong> Stop at a countryside osteria for a massive lunch featuring Rome's famous <em>Abbacchio al Forno</em> (roast lamb) and fresh artichokes.</li>
<li><strong>9:00 PM:</strong> Walk to the Trevi Fountain after dark, grab a famous <em>Maritozzo</em> sweet bun, and stroll through Campo de' Fiori!</li>
</ul>
`}
</div>
</div>
<button class="next-btn" onclick="openCityCard('assisi', 43.0702, 12.6186)">Next Stop: Assisi ➔</button>
`;
}
if (cityId === 'assisi') {
return `
<img src="IMG_1963.png" alt="Pumpkin farm" class="modal-hero-img">
<h2>Day 4: Assisi</h2>
<div class="tag-container">
<span class="tag water">🕊️ Spiritual Retreat</span>
<span class="tag nature">🌲 Nature Trails</span>
</div>
<div class="why-block">
<h3>💜 Why I chose this for us</h3>
<p>Actually this was Sohum's recommendation! As I looked into it further, the art just seemed so cool that we had to make a pit stop. Also I feel like staying in a monastery is kinda dope lol</p>
</div>
<details open>
<summary>Day 4 Morning: Monastic Life</summary>
<div class="details-content">
<ul>
<li><strong>9:00 AM:</strong> Catch our regional train out of the bustling city and into the Umbrian countryside.</li>
<li><strong>11:30 AM:</strong> Check into our peaceful hilltop monastery.</li>
<li><strong>1:00 PM:</strong> Explore the Basilica of San Francesco to witness Giotto's groundbreaking, three-dimensional frescoes.</li>
</ul>
</div>
</details>
<div class="cyoa-container">
<h4 class="cyoa-title">✨ Choose Your Adventure: Afternoon ✨</h4>
<div class="cyoa-toggle">
<button class="cyoa-btn ${adventureState.assisi === 'A' ? 'active' : ''}" onclick="updateAdventure('assisi', 'A')">Spiritual Hike</button>
<button class="cyoa-btn ${adventureState.assisi === 'B' ? 'active' : ''}" onclick="updateAdventure('assisi', 'B')">Truffle Hunting</button>
</div>
<div class="cyoa-content">
${adventureState.assisi === 'A' ? `
<ul>
<li><strong>3:30 PM:</strong> Hike up Mount Subasio to the <em>Eremo delle Carceri</em>, a remote, forested network of caves where St. Francis prayed.</li>
<li><strong>7:30 PM:</strong> Sit down for a quiet, romantic dinner at <strong>Trattoria Pallotta</strong> for wild boar ragù, black truffles, and Umbrian wine.</li>
</ul>
` : `
<ul>
<li><strong>2:30 PM:</strong> Head into the Umbrian woods with a local <em>Tartufaio</em> and his specially trained dogs to hunt for fresh black truffles!</li>
<li><strong>5:30 PM:</strong> Enjoy the rewards of our hunt with a massive, rustic farmhouse meal featuring the truffles we found shaved over pasta, paired with an incredible spread of local cured pork sausages.</li>
</ul>
`}
</div>
</div>
<button class="next-btn" onclick="openCityCard('florence', 43.7695, 11.2558)">Next Stop: Florence ➔</button>
`;
}
if (cityId === 'florence') {
return `
<h2>Days 5–7: Florence & Tuscany</h2>
<div class="tag-container">
<span class="tag history">🎨 Renaissance Art</span>
<span class="tag nature">🛵 Vespa Cruising</span>
</div>
<div class="why-block">
<h3>💜 Why I chose this for us</h3>
<p>This one I chose for the romantic aspect with a few cultural activities built in 💕 From what I've heard, this is one of the few must dos if you're going to Italy. Plus the food (and sweet treats!!) seemed so so yummy!</p>
</div>
<details open>
<summary>Day 5: The Wealth of the Medici</summary>
<div class="details-content">
<ul>
<li><strong>10:00 AM:</strong> Catch our train from Assisi into the heart of Tuscany.</li>
<li><strong>1:00 PM:</strong> Check into our rustic Agriturismo farm estate!</li>
<li><strong>3:00 PM:</strong> Visit the Uffizi Gallery. We'll explore the administrative headquarters of the Medici family.</li>
<li><strong>6:30 PM:</strong> Walk across the historic Ponte Vecchio right at sunset.</li>
</ul>
</div>
</details>
<details open>
<summary>Day 6: The Symbol of Defiance</summary>
<div class="details-content">
<ul>
<li><strong>9:00 AM:</strong> Enter the Accademia Gallery to stand beneath Michelangelo's towering <em>David</em>.</li>
<li><strong>12:30 PM:</strong> Wait in line for Florence's most legendary street food: massive schiacciata pork sandwiches from <strong>All'Antico Vinaio</strong>.</li>
<li><strong>2:30 PM:</strong> Take on the 463-step climb to the top of Brunelleschi's magnificent Duomo.</li>
<li><strong>7:30 PM:</strong> Sit down for an incredibly traditional Tuscan dinner featuring herb-roasted pork (<em>Arista di Maiale</em>).</li>
</ul>
</div>
</details>
<div class="cyoa-container">
<h4 class="cyoa-title">✨ Choose Your Adventure: Day 7 ✨</h4>
<div class="cyoa-toggle">
<button class="cyoa-btn ${adventureState.florence === 'A' ? 'active' : ''}" onclick="updateAdventure('florence', 'A')">Chianti Vespa Tour</button>
<button class="cyoa-btn ${adventureState.florence === 'B' ? 'active' : ''}" onclick="updateAdventure('florence', 'B')">Siena & Sweets</button>
</div>
<div class="cyoa-content">
${adventureState.florence === 'A' ? `
<ul>
<li><strong>9:00 AM - 4:00 PM:</strong> Head out for our guided vintage Fiat 500 or Vespa tour through the rolling Chianti hills, including a farmhouse lunch!</li>
<li><strong>5:00 PM:</strong> Return to the city and visit the <strong>Scuola del Cuoio</strong> to watch artisans tool genuine leather jackets and bags.</li>
</ul>
` : `
<ul>
<li><strong>9:00 AM:</strong> Catch a luxury bus to the stunning medieval hilltop city of Siena.</li>
<li><strong>11:30 AM:</strong> Marvel at the magnificent striped Gothic Cathedral and the sweeping Piazza del Campo.</li>
<li><strong>2:00 PM:</strong> Stop at a historic bakery to indulge in <em>Panforte</em> and <em>Ricciarelli</em> (Siena's legendary, chewy almond sweet treats!).</li>
<li><strong>6:00 PM:</strong> Head back to Florence for a sunset aperitivo.</li>
</ul>
`}
</div>
</div>
<button class="next-btn" onclick="openCityCard('cinque', 44.1353, 9.6828)">Next Stop: Cinque Terre ➔</button>
`;
}
if (cityId === 'cinque') {
return `
<img src="IMG_8442.png" alt="Kiss on a cliff" class="modal-hero-img">
<h2>Days 8–10: Cinque Terre</h2>
<div class="tag-container">
<span class="tag water">🌊 Coastal Vibes</span>
<span class="tag nature">🥾 Epic Hiking</span>
</div>
<div class="why-block">
<h3>💜 Why I chose this for us</h3>
<p>I wanted to relive all the amazing cliff side hikes we've had and reminisce on the amazing memories we've shared. Although every day with you feels so blissful, I'm hoping that these days should feel like our amazing lazy weekend mornings and be a quiet romantic getaway.</p>
</div>
<details open>
<summary>Day 8: Coastal Isolation</summary>
<div class="details-content">
<ul>
<li><strong>10:00 AM:</strong> Take the coastal train from Florence up into the Ligurian mountains.</li>
<li><strong>1:00 PM:</strong> Arrive and check into our authentic guesthouse in Levanto.</li>
<li><strong>3:00 PM:</strong> Take the local train into Vernazza. We'll explore the narrow alleys and climb up to the pirate-defense Doria Castle ruins.</li>
<li><strong>6:30 PM:</strong> Join the virtual queue for <strong>Nessun Dorma</strong> in Manarola. We'll watch the sun go down over the cliffs with a meat and cheese platter.</li>
</ul>
</div>
</details>
<details open>
<summary>Day 9: The Monumental Landscape</summary>
<div class="details-content">
<ul>
<li><strong>8:00 AM:</strong> Start early to hike the Sentiero Azzurro (Blue Trail) along the sea cliffs, walking past centuries of hand-carved agricultural terraces.</li>
<li><strong>12:30 PM:</strong> Arrive in Monterosso. Time to cool off, shop for lemon soaps, and grab some Limoncello!</li>
<li><strong>4:00 PM:</strong> Head to Riomaggiore for an afternoon snack: a paper cone filled with hot, fresh-fried calamari and shrimp from <strong>Il Pescato Cucinato</strong>.</li>
</ul>
</div>
</details>
<div class="cyoa-container">
<h4 class="cyoa-title">✨ Choose Your Adventure: Day 10 ✨</h4>
<div class="cyoa-toggle">
<button class="cyoa-btn ${adventureState.cinque === 'A' ? 'active' : ''}" onclick="updateAdventure('cinque', 'A')">Pesto & Vineyards</button>
<button class="cyoa-btn ${adventureState.cinque === 'B' ? 'active' : ''}" onclick="updateAdventure('cinque', 'B')">Sanctuary Hike</button>
</div>
<div class="cyoa-content">
${adventureState.cinque === 'A' ? `
<ul>
<li><strong>10:00 AM:</strong> Authentic Pesto Making Masterclass in the hills of Manarola.</li>
<li><strong>2:00 PM:</strong> Walk through the steeply terraced vineyards for a dry-land wine tasting overlooking the sea.</li>
</ul>
` : `
<ul>
<li><strong>9:00 AM:</strong> Take the scenic inland hike up to the Sanctuary of Montenero (solid ground, amazing views!).</li>
<li><strong>1:00 PM:</strong> Reward ourselves with massive slices of warm, oil-soaked focaccia bread in the village square.</li>
</ul>
`}
</div>
</div>
<button class="next-btn" onclick="openCityCard('venice', 45.4408, 12.3155)">Next Stop: Venice ➔</button>
`;
}
if (cityId === 'venice') {
return `
<img src="IMG_8032.png" alt="Drinks!" class="modal-hero-img">
<h2>Days 11–14: Venice</h2>
<div class="tag-container">
<span class="tag water">🛶 Romantic Canals</span>
<span class="tag history">🎭 Secret History</span>
</div>
<div class="why-block">
<h3>💜 Why I chose this for us</h3>
<p>Ok honestly, as iconic as Venice is, I mostly picked this because I thought you'd like the prison cells we'd be visiting! And I absolutely cannot miss the best bakeries in the country, and there's no one I'd rather grab a sweet treat with than my sweet heart. I know this adventure only marks the start of many, and I can't wait to do it all with you.</p>
</div>
<details open>
<summary>Day 11: Across the North</summary>
<div class="details-content">
<ul>
<li><strong>11:00 AM:</strong> Hop on the high-speed train leaving the coast for the Venetian Lagoon.</li>
<li><strong>3:30 PM:</strong> Step out of the station and immediately catch the Vaporetto (water bus) cruising down the majestic Grand Canal.</li>
<li><strong>4:30 PM:</strong> Check into our historic palazzo guest house.</li>
<li><strong>7:00 PM:</strong> Head out to Campo Santa Margherita to grab cheap spritzes and mingle with the university students and locals!</li>
</ul>
</div>
</details>
<details open>
<summary>Day 12: Secrets of the Republic & Casanova</summary>
<div class="details-content">
<ul>
<li><strong>9:30 AM:</strong> Doge’s Palace "Secret Itineraries" tour. We'll explore the hidden offices of the maritime empire and step inside Casanova's legendary prison cell.</li>
<li><strong>1:00 PM:</strong> Grab a casual lunch away from St. Mark's Square.</li>
<li><strong>6:00 PM:</strong> Time for our Cicchetti crawl! We'll start at <strong>Cantina Do Mori</strong> for fresh seafood crostini, followed by sweet pastry <em>Fritole</em> treats!</li>
</ul>
</div>
</details>
<div class="cyoa-container">
<h4 class="cyoa-title">✨ Choose Your Adventure: Day 13 ✨</h4>
<div class="cyoa-toggle">
<button class="cyoa-btn ${adventureState.venice === 'A' ? 'active' : ''}" onclick="updateAdventure('venice', 'A')">Glass & Mask Artisans</button>
<button class="cyoa-btn ${adventureState.venice === 'B' ? 'active' : ''}" onclick="updateAdventure('venice', 'B')">Learn to Row</button>
</div>
<div class="cyoa-content">
${adventureState.venice === 'A' ? `
<ul>
<li><strong>10:00 AM:</strong> Take the Vaporetto to Murano. We'll watch the master glassblowers whose secrets the Republic guarded with their lives!</li>
<li><strong>2:00 PM:</strong> Head to Dorsoduro to visit <strong>Ca' Macana</strong> and see how authentic papier-mâché Venetian masks are crafted.</li>
<li><strong>5:30 PM:</strong> Our final night! A romantic sunset gondola ride through the shallow, winding canals.</li>
</ul>
` : `
<ul>
<li><strong>10:00 AM:</strong> Skip the tourist lines and meet with a local Venetian maritime expert.</li>
<li><strong>11:30 AM:</strong> Step into a traditional wooden <em>Barchin</em> and actually learn to row like a gondolier (<em>Voga alla Veneta</em>) through the quiet canals!</li>
<li><strong>5:00 PM:</strong> Reward our hard physical work with a deep dive into Cannaregio's best bakeries for an absolute feast of sweet treats.</li>
</ul>
`}
</div>
</div>
<img src="IMG_6608.png" alt="Laughing at a party" class="modal-hero-img">
<details open>
<summary>Day 14: Departure</summary>
<div class="details-content">
<ul>
<li><strong>9:00 AM:</strong> Grab a final Italian espresso, then take the Alilaguna water bus to Marco Polo Airport for our journey home!</li>
</ul>
</div>
</details>
`;
}
}
// Helper function for Tag UI mapping
function getTagInfo(type) {
switch(type) {
case 'food': return { class: 'food', text: 'Local Eats' };
case 'shop': return { class: 'water', text: 'Shopping' };
case 'stay': return { class: 'stay', text: 'Accommodation' };
case 'sight': return { class: 'history', text: 'History & Art' };
case 'nature': return { class: 'nature', text: 'Outdoors' };
default: return { class: 'history', text: 'Explore' };
}
}
// Render Main City Markers
locations.forEach(loc => {
const numberedIcon = L.divIcon({
className: 'custom-pin',
html: `<span>${loc.step}</span>`,
iconSize: [36, 36],
iconAnchor: [18, 18]
});
const marker = L.marker(loc.coords, {
icon: numberedIcon,
zIndexOffset: 1000
}).addTo(map);
marker.bindTooltip(loc.name, { permanent: false, direction: 'top' });
marker.on('click', () => {
document.getElementById('itineraryDetails').innerHTML = getItineraryHtml(loc.id);
document.getElementById('modalOverlay').classList.add('active');
});
});
// Render Detailed Extra Markers
extraLocations.forEach(loc => {
const iconClass = `${loc.type}-pin`;
const extraIcon = L.divIcon({
className: `custom-pin ${iconClass}`,
html: `<span>${loc.emoji}</span>`,
iconSize: [28, 28],
iconAnchor: [14, 14]
});
const marker = L.marker(loc.coords, { icon: extraIcon }).addTo(map);
marker.bindTooltip(loc.name, { permanent: false, direction: 'top' });
const tagInfo = getTagInfo(loc.type);
const popupHtml = `
<h2>${loc.name}</h2>
<div class="tag-container">
<span class="tag ${tagInfo.class}">${loc.emoji} ${tagInfo.text}</span>
</div>
<div class="details-content" style="padding: 0;">
<p>${loc.desc}</p>
</div>
`;
marker.on('click', () => {
document.getElementById('itineraryDetails').innerHTML = popupHtml;
document.getElementById('modalOverlay').classList.add('active');
});
});
// --- CYOA Update Logic ---
window.updateAdventure = function(cityId, choice) {
// Update the state
adventureState[cityId] = choice;
// Re-render the modal card
const detailsContainer = document.getElementById('itineraryDetails');
if (detailsContainer) {
detailsContainer.innerHTML = getItineraryHtml(cityId);
}
};
// --- Sidebar Functionality ---
function toggleSidebar() {
const sidebar = document.getElementById('itinerarySidebar');
if (sidebar.classList.contains('active')) {
sidebar.classList.remove('active');
} else {
closeModal();
populateSidebar();
sidebar.classList.add('active');
}
}
// Generates PURE SEMANTIC HTML text for easy copying to Google Docs!
function populateSidebar() {
const content = `
<div style="font-family: Arial, sans-serif; color: #000; line-height: 1.6; max-width: 100%;">
<h1 style="font-size: 24px; border-bottom: 2px solid #ccc; padding-bottom: 10px;">Our Italian Adventure: 14-Day Itinerary</h1>
<h2 style="font-size: 20px; margin-top: 25px; color: #C84C35;">Days 1-3: Rome</h2>
<p><strong>Lodging:</strong> Casa di Santa Brigida or Casa Maria Immacolata</p>
<ul>
<li><strong>Day 1:</strong> Arrive 2:00 PM. Visit the Pantheon (4:00 PM). Twilight walking food tour in Trastevere (6:30 PM).</li>
<li><strong>Day 2:</strong> Colosseum and Roman Forum (9:00 AM). Lunch and vintage shopping in Monti (1:00 PM). Dinner at La Taverna dei Fori Imperiali (8:00 PM).</li>
</ul>
<h3 style="font-size: 16px; margin-top: 15px;">Day 3 Alternate Options:</h3>
<ul>
<li><strong>Option A (Vatican & Art):</strong> Vatican Museums (8:00 AM), Borghese Gallery (3:30 PM), Trevi Fountain at night.</li>
<li><strong>Option B (E-Bikes & Catacombs):</strong> E-bike down Via Appia Antica (9:00 AM), explore Catacombs (11:30 AM), roast lamb lunch at a countryside Osteria.</li>
</ul>
<h2 style="font-size: 20px; margin-top: 25px; color: #C84C35;">Day 4: Assisi</h2>
<p><strong>Lodging:</strong> Monastero Sant'Andrea</p>
<ul>
<li><strong>Morning:</strong> Regional train to Assisi. Check into hilltop monastery (11:30 AM). Visit the Basilica of San Francesco (1:00 PM).</li>
</ul>
<h3 style="font-size: 16px; margin-top: 15px;">Afternoon Alternate Options:</h3>
<ul>
<li><strong>Option A (Spiritual Hike):</strong> Hike Mount Subasio to Eremo delle Carceri (3:30 PM). Dinner at Trattoria Pallotta (7:30 PM).</li>
<li><strong>Option B (Truffle Hunting):</strong> Forest truffle hunt with dogs (2:30 PM). Farmhouse meal with truffles and cured pork (5:30 PM).</li>
</ul>
<h2 style="font-size: 20px; margin-top: 25px; color: #C84C35;">Days 5-7: Florence & Tuscany</h2>
<p><strong>Lodging:</strong> Fattoria Il Milione (Agriturismo)</p>
<ul>
<li><strong>Day 5:</strong> Uffizi Gallery (3:00 PM). Sunset at Ponte Vecchio (6:30 PM).</li>
<li><strong>Day 6:</strong> Accademia Gallery / David (9:00 AM). All'Antico Vinaio sandwiches (12:30 PM). Florence Duomo climb (2:30 PM).</li>
</ul>
<h3 style="font-size: 16px; margin-top: 15px;">Day 7 Alternate Options:</h3>
<ul>
<li><strong>Option A (Chianti Vespa):</strong> Guided vintage Vespa/Fiat tour in Chianti (9:00 AM). Scuola del Cuoio leather artisans (5:00 PM).</li>
<li><strong>Option B (Siena Sweets):</strong> Bus to Siena's Cathedral (9:00 AM). Indulge in historic Siena Panforte and Ricciarelli almond sweets (2:00 PM).</li>
</ul>
<h2 style="font-size: 20px; margin-top: 25px; color: #C84C35;">Days 8-10: Cinque Terre</h2>
<p><strong>Lodging:</strong> Affittacamere Anna (Levanto)</p>
<ul>
<li><strong>Day 8:</strong> Arrive in Levanto. Visit Vernazza (3:00 PM). Sunset platter at Nessun Dorma in Manarola (6:30 PM).</li>
<li><strong>Day 9:</strong> Hike the Sentiero Azzurro (8:00 AM). Fried calamari in Riomaggiore (4:00 PM).</li>
</ul>
<h3 style="font-size: 16px; margin-top: 15px;">Day 10 Alternate Options:</h3>
<ul>
<li><strong>Option A (Pesto & Vineyards):</strong> Authentic Pesto Making Masterclass (10:00 AM). Terraced cliffside wine tasting (2:00 PM).</li>
<li><strong>Option B (Sanctuary Hike):</strong> Inland scenic hike to the Sanctuary of Montenero (9:00 AM). Warm focaccia in the village (1:00 PM).</li>
</ul>
<h2 style="font-size: 20px; margin-top: 25px; color: #C84C35;">Days 11-14: Venice</h2>
<p><strong>Lodging:</strong> Foresteria Valdese</p>
<ul>
<li><strong>Day 11:</strong> Vaporetto on the Grand Canal (3:30 PM). Evening in Campo Santa Margherita (7:00 PM).</li>
<li><strong>Day 12:</strong> Doge's Palace Secret Itineraries (9:30 AM). Evening Cicchetti crawl at Cantina Do Mori (6:00 PM).</li>
</ul>
<h3 style="font-size: 16px; margin-top: 15px;">Day 13 Alternate Options:</h3>
<ul>
<li><strong>Option A (Artisans):</strong> Murano Glassblowing (10:00 AM). Ca' Macana mask making (2:00 PM). Sunset gondola ride (5:30 PM).</li>
<li><strong>Option B (Learn to Row):</strong> Meet local maritime expert (10:00 AM). Learn to row a traditional boat like a gondolier (11:30 AM). Sweet bakery hopping in Cannaregio (5:00 PM).</li>
</ul>
<ul>
<li><strong>Day 14:</strong> Alilaguna water bus to Marco Polo Airport for departure (9:00 AM).</li>
</ul>
</div>
`;
document.getElementById('sidebarContent').innerHTML = content;
}
// --- Modal Functionality ---
function closeModal() {
document.getElementById('modalOverlay').classList.remove('active');
}
document.getElementById('modalOverlay').addEventListener('click', function(e) {
if(e.target === this) closeModal();
});
// --- Confetti & Welcome Screen Logic ---
function fireConfetti() {
var duration = 3000;
var end = Date.now() + duration;
(function frame() {
confetti({
particleCount: 5,
angle: 60,
spread: 55,
origin: { x: 0 },
colors: ['#C84C35', '#B8860B', '#205E7D'],
zIndex: 3000
});
confetti({
particleCount: 5,
angle: 120,
spread: 55,
origin: { x: 1 },
colors: ['#C84C35', '#B8860B', '#205E7D'],
zIndex: 3000
});
if (Date.now() < end) {
requestAnimationFrame(frame);
}
}());
}
// Fire confetti immediately on page load
window.onload = function() {
fireConfetti();
};
function showWelcomeScreen() {
closeModal();
document.getElementById('itinerarySidebar').classList.remove('active');
map.setView([43.0, 12.0], 7); // Reset the map view to the whole country
document.getElementById('welcomeOverlay').classList.add('active');
fireConfetti();
}
function startAdventure() {
document.getElementById('welcomeOverlay').classList.remove('active');
openCityCard('rome', 41.9028, 12.4964);
}
function openCityCard(cityId, lat, lng) {
closeModal();
map.flyTo([lat, lng], 13, { duration: 1.5, easeLinearity: 0.25 });
setTimeout(() => {
document.getElementById('itineraryDetails').innerHTML = getItineraryHtml(cityId);
document.getElementById('modalOverlay').classList.add('active');
}, 1000);
}
</script>