1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <meta name="description" content="Welcome to Kizaki, offering unique dining experiences, authentic Japanese Omakase, and a warm atmosphere. Discover our story, menu, and latest updates here." /> 7 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 8 <link rel="icon" href="images/Kizaki-Den-Icon.png" type="image/png" sizes="300x300"> 9 <title>Kizaki</title> 10 11
11<script src="js/notification-popup.js" defer></script>
11 12 13 14 15
15<script type="application/ld+json"> 16 { 17 "@context": "https://schema.org", 18 "@type": "Organization", 19 "url": "https://denchukizaki.com", 20 "logo": "https://denchukizaki.com/images/Kizaki-Den-Icon.png", 21 "name": "Kizaki" 22 } 23 </script>
23 24 25 <style> 26 27 /* ===== Base Styles ===== */ 28 * { 29 box-sizing: border-box; 30 margin: 0; 31 padding: 0; 32 } 33 34 html { 35 scroll-behavior: smooth; 36 max-width: 100%; 37 overflow-x: hidden; 38 } 39 40 body { 41 font-family: 'Palatino Linotype', 'Book Antiqua', serif; 42 background: url('images/Background/Kizaki Den Space_Finals_Web-Res_01.jpg') no-repeat center center fixed; 43 background-size: cover; 44 color: #fff; 45 max-width: 100%; 46 overflow-x: hidden; 47 } 48 49 /* ===== Typography for Sections ===== */ 50 #bio-toshi, 51 #omakaseabt, 52 #bio-taro, 53 #reservation { 54 font-family: 'Palatino Linotype', 'Book Antiqua', serif; 55 font-size: 18px; 56 line-height: 1.5; 57 } 58 59 #bio-toshi, 60 #omakaseabt { 61 color: #333; 62 } 63 64 #reservation { 65 color: #000; 66 } 67 68 /* Section headings and paragraphs */ 69 section h1 + p, 70 section h2 + p { 71 margin-top: 1.5rem; 72 } 73 74 .indented { 75 text-indent: 2em; 76 } 77 78 /* ===== Banner Styles ===== */ 79 .section-banner, 80 .solid-banner { 81 width: 100vw; 82 height: 175px; 83 object-fit: cover; 84 display: block; 85 } 86 87 .section-banner { 88 mix-blend-mode: multiply; 89 background-color: transparent; 90 } 91 92 /* ===== Overlay Styles ===== */ 93 .overlay { 94 background-color: white; 95 padding: 20px; 96 min-height: 85vh; 97 display: flex; 98 flex-direction: column; 99 align-items: center; 100 } 101 102 .overlay-block { 103 width: 100%; 104 background: white; 105 padding: 40px 0; 106 color: #222; 107 box-shadow: none; 108 border-radius: 0; 109 margin: 0; 110 } 111 112 .overlay-block .container { 113 max-width: 900px; 114 margin: 0 auto; 115 padding: 0 30px; 116 } 117 118 /* ===== Header and Navigation ===== */ 119 header { 120 background-color: white; 121 height: 100px; 122 display: flex; 123 align-items: center; 124 justify-content: space-between; 125 padding: 0 40px; 126 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 127 position: relative; 128 z-index: 2; 129 width: 100%; 130 } 131 132 .header-left .logo { 133 height: 70px; 134 width: auto; 135 } 136 137 .header-center { 138 flex: 1; 139 display: flex; 140 justify-content: center; 141 } 142 143 .header-center .middle-design { 144 max-height: 70px; 145 max-width: 250px; 146 object-fit: contain; 147 } 148 149 .header-right { 150 display: flex; 151 gap: 20px; 152 flex-wrap: wrap; 153 } 154 155 #header-nav a { 156 color: #111; 157 text-decoration: none; 158 font-weight: lighter; 159 font-size: 1.1rem; 160 padding: 6px 10px; 161 transition: background-color 0.3s ease; 162 flex-shrink: 1; 163 } 164 165 #header-nav a:hover { 166 background-color: #444444; 167 border-radius: 5px; 168 } 169 170 /* ===== Floating Navigation ===== */ 171 .floating-nav { 172 position: fixed; 173 top: 0; 174 left: 0; 175 right: 0; 176 height: 60px; 177 background-color: rgba(0, 0, 0, 0.5); 178 display: flex; 179 align-items: center; 180 padding: 0 20px; 181 box-shadow: 0 2px 5px rgba(0,0,0,0.3); 182 opacity: 0; 183 pointer-events: none; 184 transition: opacity 0.3s ease; 185 z-index: 1000; 186 justify-content: flex-end; 187 overflow: visible; 188 line-height: 60px; 189 } 190 191 .floating-nav.show { 192 opacity: 1; 193 pointer-events: auto; 194 } 195 196 .floating-nav .floating-logo { 197 margin-right: 20px; 198 display: flex; 199 align-items: center; 200 opacity: 1; 201 } 202 203 .floating-nav .floating-logo img { 204 height: 40px; 205 width: auto; 206 display: block; 207 margin: 0; 208 } 209 210 .floating-nav a { 211 color: white; 212 margin-left: 20px; 213 text-decoration: none; 214 font-weight: 600; 215 font-size: 1rem; 216 line-height: 60px; 217 white-space: nowrap; 218 } 219 220 .floating-nav a:hover { 221 text-decoration: underline; 222 } 223 224 /* ===== Hamburger Toggle ===== */ 225 #floating-nav-toggle { 226 font-size: 2rem; 227 background: none; 228 border: none; 229 color: white; 230 cursor: pointer; 231 margin-left: 20px; 232 display: none; 233 } 234 235 /* ===== Floating Nav Links (Dropdown) ===== */ 236 .floating-nav-links { 237 display: flex; 238 position: static; 239 flex-direction: row; 240 width: auto; 241 padding: 0; 242 border: none; 243 box-shadow: none; 244 background: transparent; 245 } 246 247 @media (max-width: 1019px) { 248 .floating-nav-links { 249 display: none; 250 position: absolute; 251 top: 60px; 252 right: 1rem; 253 flex-direction: column; 254 width: 200px; 255 padding: 0.5rem 0; 256 border-radius: 6px; 257 box-shadow: 0 4px 8px rgba(0,0,0,0.1); 258 background: white; 259 border: 1px solid #ddd; 260 } 261 262 .floating-nav-links.active { 263 display: flex; 264 } 265 } 266 267 /* ===== Responsive Styles ===== */ 268 @media (max-width: 1019px) { 269 /* Show hamburger toggle */ 270 #floating-nav-toggle { 271 display: block; 272 } 273 274 /* Floating nav links styling for small screens */ 275 .floating-nav-links { 276 background: rgba(0, 0, 0, 0.85); 277 border: none; 278 box-shadow: 0 4px 8px rgba(0,0,0,0.8); 279 right: 3rem; 280 padding: 10px 15px; 281 width: 240px; 282 } 283 284 .floating-nav-links a { 285 display: block; 286 color: white; 287 text-align: left; 288 font-weight: 600; 289 font-size: 1rem; 290 padding: 0.5rem 0.75rem; 291 margin: 0; 292 border: none; 293 white-space: normal; 294 width: 100%; 295 box-sizing: border-box; 296 } 297 298 .floating-nav-links a:hover { 299 text-decoration: underline; 300 } 301 302 /* Mobile navigation toggle and menu */ 303 #nav-toggle { 304 display: none; 305 font-size: 2.5rem; 306 background: none; 307 border: none; 308 color: #111; 309 cursor: pointer; 310 z-index: 1001; 311 } 312 313 @media (max-width: 1019px) { 314 #nav-toggle { 315 display: block; 316 } 317 } 318 319 #header-nav { 320 display: none; 321 flex-direction: column; 322 position: fixed; 323 top: 100px; 324 right: 0; 325 background-color: white; 326 width: 200px; 327 padding: 10px 20px; 328 box-shadow: -2px 0 8px rgba(0,0,0,0.2); 329 border-radius: 0 0 0 10px; 330 z-index: 1000; 331 } 332 333 #header-nav.active { 334 display: flex; 335 } 336 337 #header-nav a { 338 color: #111; 339 padding: 12px 0; 340 font-size: 1.2rem; 341 } 342 343 /* Floating reserve button adjustments */ 344 .floating-reserve { 345 position: fixed; 346 bottom: 40px; 347 right: 40px; 348 background-color: #0d0a2e; 349 color: #fff !important; 350 padding: 15px 20px; 351 border-radius: 50px; 352 text-decoration: none; 353 font-weight: 900; 354 font-size: 1.2rem; 355 text-transform: uppercase; 356 letter-spacing: 1.5px; 357 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); 358 z-index: 999; 359 transition: background-color 0.3s ease, transform 0.2s ease; 360 } 361 @media (max-width: 768px) { 362 .floating-reserve { 363 padding: 15px 20px; 364 font-size: 1rem; 365 bottom: 20px; 366 right: 20px; 367 } 368 } 369 .floating-reserve.hidden { 370 opacity: 0; 371 pointer-events: none; 372 transform: translateY(20px); 373 transition: opacity 0.3s ease, transform 0.3s ease; 374 } 375 a.floating-reserve:hover { 376 background-color: #1d0000; 377 transform: scale(1.1); 378 } 379 } 380 381 /* ===== Footer ===== */ 382 footer { 383 background-color: rgba(0, 0, 0, 0.8); 384 padding: 30px 20px; 385 text-align: center; 386 font-size: 0.9rem; 387 color: #ddd; 388 border-top: 1px solid #444; 389 margin-top: auto; 390 } 391 392 /* ===== Content and Homepage Sections ===== */ 393 .content, 394 .homepage-section { 395 max-width: 900px; 396 width: 100%; 397 background-color: white; 398 color: #000; 399 border-radius: 10px; 400 padding: 20px 30px; 401 margin: 30px auto; 402 } 403 404 .homepage-section { 405 box-shadow: 0 4px 10px rgba(0,0,0,0.1); 406 } 407 408 .homepage-section h2 { 409 margin-bottom: 12px; 410 } 411 412 .homepage-section p { 413 line-height: 1.5; 414 margin-bottom: 15px; 415 } 416 417 /* ===== Buttons ===== */ 418 .btn { 419 display: inline-block; 420 background-color: #111; 421 color: white; 422 padding: 10px 18px; 423 border-radius: 4px; 424 text-decoration: none; 425 font-weight: lighter; 426 transition: background-color 0.3s ease; 427 } 428 429 .btn:hover { 430 background-color: #555; 431 } 432 433 /* ===== Slideshow ===== */ 434 .slideshow { 435 position: relative; 436 width: 100%; 437 height: 90vh; 438 max-height: 600px; 439 overflow: hidden; 440 z-index: 1; 441 } 442 443 @media (max-width: 1019px) { 444 .slideshow { 445 height: auto; 446 max-height: none; 447 aspect-ratio: 16 / 9; /* Optional, keeps a good ratio */ 448 } 449 450 .slides { 451 position: relative; 452 height: auto; 453 width: 100%; 454 object-fit: contain; 455 } 456 457 .slideshow-container { 458 border: none; /* optional: less clutter on mobile */ 459 } 460 } 461 462 .slides { 463 width: 100%; 464 height: 100%; 465 object-fit: cover; 466 user-select: none; 467 position: absolute; 468 top: 0; 469 left: 0; 470 opacity: 0; 471 transition: opacity 1s ease-in-out; 472 pointer-events: none; 473 } 474 475 .slides.active { 476 opacity: 1;
477 pointer-events: auto; 478 } 479 480 .slideshow-container { 481 height: 100%; 482 max-width: 1500px; 483 margin: 0 auto; 484 border: 2px solid black; 485 box-sizing: border-box; 486 border-bottom: 2px solid #000; 487 } 488 489 /* ===== Slideshow Arrows ===== */ 490 .prev, .next { 491 position: absolute; 492 top: 50%; 493 transform: translateY(-50%); 494 background-color: transparent; 495 border: none; 496 color: white; 497 font-size: 2rem; 498 padding: 8px 14px; 499 cursor: pointer; 500 border-radius: 50%; 501 user-select: none; 502 transition: background-color 0.3s ease; 503 z-index: 10; 504 } 505 506 .prev:hover, .next:hover { 507 background-color: transparent; 508 } 509 510 .prev { 511 left: 20px; 512 } 513 514 .next { 515 right: 20px; 516 } 517 518 /* ===== Image Grid ===== */ 519 .image-grid { 520 display: grid; 521 grid-template-columns: repeat(3, 1fr); 522 gap: 20px; 523 max-width: 900px; 524 margin: 30px auto 0; 525 justify-items: center; 526 margin-bottom: 10rem; 527 } 528 529 .image-grid img { 530 width: 100%; 531 max-width: 250px; 532 height: 200px; 533 border-radius: 8px; 534 object-fit: cover; 535 box-shadow: 0 2px 8px rgba(0,0,0,0.15); 536 display: block; 537 margin-left: auto; 538 margin-right: auto; 539 } 540 541 /* ===== Floating Reserve Button ===== */ 542 .floating-reserve { 543 position: fixed; 544 bottom: 40px; 545 right: 40px; 546 background-color: #0d0a2e; 547 color: #fff !important; 548 padding: 30px 40px; 549 border-radius: 50px; 550 text-decoration: none; 551 font-weight: 900; 552 font-size: 2rem; 553 text-transform: uppercase; 554 letter-spacing: 1.5px; 555 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); 556 z-index: 999; 557 transition: background-color 0.3s ease, transform 0.2s ease; 558 display: flex; 559 align-items: center; 560 justify-content: center; 561 text-align: center; 562 } 563 564 .floating-reserve.hidden { 565 opacity: 0; 566 pointer-events: none; 567 transform: translateY(20px); 568 transition: opacity 0.3s ease, transform 0.3s ease; 569 } 570 571 a.floating-reserve:hover { 572 background-color: #1d0000; 573 transform: scale(1.1); 574 } 575 576 /* ===== About Image ===== */ 577 .about-image { 578 float: left; 579 margin: 0 15px 15px 0; 580 width: 100%; 581 max-width: 500px; 582 height: auto; 583 border-radius: 8px; 584 } 585 586 #about h1 { 587 margin-bottom: 1em; 588 } 589 590 @media (max-width: 768px) { 591 .about-image { 592 float: none; 593 display: block; 594 margin: 0 auto 20px auto; /* center it on mobile */ 595 } 596 } 597 598 /* ===== Back To Top Button ===== */ 599 .back-to-top { 600 background-color: #0d0a2e; 601 color: white; 602 border: none; 603 padding: 12px 24px; 604 font-size: 16px; 605 font-weight: 600; 606 border-radius: 25px; 607 cursor: pointer; 608 box-shadow: 0 4px 8px rgba(0,0,0,0.3); 609 transition: background-color 0.3s ease; 610 } 611 612 .back-to-top:hover { 613 background-color: #424242; 614 } 615 616 .lightbox { 617 display: none; 618 position: fixed; 619 top: 0; left: 0; 620 width: 100vw; height: 100vh; 621 background: rgba(0,0,0,0.8); 622 justify-content: center; 623 align-items: center; 624 z-index: 2000; 625 cursor: zoom-out; 626 } 627 628 .lightbox.active { 629 display: flex; 630 } 631 632 .lightbox img { 633 max-width: 90%; 634 max-height: 90%; 635 box-shadow: 0 4px 20px rgba(0,0,0,0.5); 636 border-radius: 4px; 637 } 638 639 640 641 /* HTML */ 642 643 </style> 644</head> 645<body> 646 647 <header> 648 <a href="#top" class="header-left"> 649 <img src="images/Kizaki Den.png" alt="Kizaki Logo" class="logo" /> 650 </a> 651 652 <button id="nav-toggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="header-nav"> 653 ☰ 654 </button> 655 656 <nav id="header-nav" class="header-right"> 657 <a href="#top">HOME</a> 658 <a href="#about">ABOUT THE CHEFS</a> 659 <a href="#omakase">OMAKASE</a> 660 <a href="press.html">PRESS</a> 661 <a href="contact.html">CONTACT</a> 662 <a href="https://www.opentable.com/r/kizaki-denver">RESERVATION</a> 663 <a href="https://www.opentable.com/r/kizaki-denver" target="_blank" class="floating-reserve hidden">RESERVATION</a> 664 </nav> 665 </header> 666 667 <nav id="floating-nav" class="floating-nav"> 668 <a href="#top" class="floating-logo"> 669 <img src="images/Kizaki Den(2).png" alt="Kizaki Logo" /> 670 </a> 671 672 <button id="floating-nav-toggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="floating-nav-links"> 673 ☰ 674 </button> 675 676 <div id="floating-nav-links" class="floating-nav-links"> 677 <a href="#top">HOME</a> 678 <a href="#about">ABOUT THE CHEFS</a> 679 <a href="#omakase">OMAKASE</a> 680 <a href="press.html">PRESS</a> 681 <a href="contact.html">CONTACT</a> 682 </div> 683 </nav> 684 685 <div id="top"></div> 686 687 <div class="slideshow-container"> 688 <div class="slideshow"> 689 <img class="slides active" src="images/Slides/Kizaki Den Space_Finals_Web-Res_02.jpg" alt="Slide 1" /> 690 <img class="slides" src="images/Slides/Kizaki Den Food_Finals_Web-Res_07.jpg" alt="Slide 2" /> 691 <img class="slides" src="images/Slides/Kizaki Den Space_Finals_Web-Res_05.jpg" alt="Slide 3" /> 692 <img class="slides" src="images/Slides/Kizaki Den Food_Finals_Web-Res_06.jpg" alt="Slide 4" /> 693 <img class="slides" src="images/Slides/Kizaki_Den_Tuna.jpg" alt="Slide 5" /> 694 695 <button class="prev" onclick="changeSlide(-1)">â®</button> 696 <button class="next" onclick="changeSlide(1)">â¯</button> 697 </div> 698 </div> 699 700 <section id="about"> 701 <div class="overlay"> 702 <div class="overlay-block"> 703 <div class="container"> 704 <h1>Chef Toshi Kizaki</h1> 705 <img src="images/thumbnail_Toshi Head shot.jpg" alt="Chef Toshi Kizaki" class="about-image" /> 706 <p id="bio-toshi"></p> 707 </div> 708 </div> 709 </div> 710 </section> 711 712 <section id="about-taro"> 713 <div class="overlay"> 714 <div class="overlay-block"> 715 <div class="container"> 716 <h1>Chef Taro</h1> 717 <p id="bio-taro"></p> 718 </div> 719 </div> 720 </div> 721 </section> 722 723<div class="section-banner"></div> 724 725 726 <section id="omakase"> 727 <section class="overlay"> 728 <div class="overlay-block"> 729 <div class="container"> 730 <h2>Omakase</h2> 731 <p id="omakaseabt"></p> 732 </div> 733 </div> 734 <div class="image-grid"> 735 <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_01.jpg" alt="Visual 1" /> 736 <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_02.jpg" alt="Visual 2" /> 737 <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_03.jpg" alt="Visual 3" /> 738 <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_04.jpg" alt="Visual 4" /> 739 <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_05.jpg" alt="Visual 5" /> 740 <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_10.jpg" alt="Visual 6" /> 741 <img src="images/Omakase Section Visuals/4C1A2792.jpg" alt="Visual 7" /> 742 <img src="images/Omakase Section Visuals/4C1A3064.jpg" alt="Visual 8" /> 743 <img src="images/Omakase Section Visuals/4C1A3103.jpg" alt="Visual 9" /> 744 <img src="images/Omakase Section Visuals/4C1A3138.jpg" alt="Visual 10" /> 745 <img src="images/Omakase Section Visuals/4C1A3165.jpg" alt="Visual 11" /> 746 <img src="images/Omakase Section Visuals/4C1A3211.jpg" alt="Visual 12" /> 747 <img src="images/Omakase Section Visuals/4C1A3278.jpg" alt="Visual 13" /> 748 <img src="images/Omakase Section Visuals/4C1A3412.jpg" alt="Visual 14" /> 749 <img src="images/Omakase Section Visuals/4C1A3433.jpg" alt="Visual 15" /> 750 <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_11.jpg" alt="Visual 16" /> 751 <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_13.jpg" alt="Visual 117" /> 752 <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_15.jpg" alt="Visual 18" /> 753 </div> 754 755 <div style="text-align: center; margin: 20px 0;"> 756 <button id="backToTopBtn" class="back-to-top">Back to Top â</button> 757 </div> 758 </section> 759 </section> 760 761 <div id="lightbox" class="lightbox"> 762 <img id="lightbox-img" src="" alt="Expanded image" /> 763 </div> 764 765 766 <footer> 767 <div style="text-align: center; padding: 20px;"> 768 <h3>Contact & Location</h3> 769 <p>Kizaki</p> 770 <p>1551 S Pearl St. Denver, CO 80210</p> 771 <p>Email: [email protected] | Phone: (720)-512-2753</p> 772 <p> 773 <a href="contact.html" style="color: #ddd; text-decoration: underline;"> 774 Contact Us 775 </a> 776 </p> 777 778 <hr style="margin: 20px auto; width: 60%; border-color: #666;" /> 779 780 <p>Connect With Us</p> 781 782 <div class="social-icons" style="margin-top: 10px;"> 783 <a href="https://www.instagram.com/kizakiden/" target="_blank" aria-label="Instagram"> 784 <img src="images/instagram-new.png" alt="Instagram" style="width: 24px; height: 24px;" /> 785 </a> 786 </div> 787 788 <hr style="margin: 20px auto; width: 60%; border-color: #666;" /> 789 790 <p>Visit Our Other Great Restaurants</p> 791 792 <div class="social-icons" style="margin-top: 10px;"> 793 <a href="https://www.sushiden.net" target="_blank" aria-label="Sushi Den"> 794 <img src="images/Sushi Den logo alternative.png" alt="Sushi Den" style="width: 100px; height: 80px;" /> 795 </a> 796 <a href="https://ototoden.com" target="_blank" aria-label="OTOTO"> 797 <img src="images/OTOTO BC logo alternative.png" alt="OTOTO" style="width: 75px; height: 100px;" /> 798 </a> 799 <a href="https://izakayaden.net" target="_blank" aria-label="Izakaya Den"> 800 <img src="images/Izakaya Den Logo alternative.png" alt="Izakaya Den" style="width: 70px; height: 75px;" /> 801 </a> 802 <a href="https://www.temakiden.com" target="_blank" aria-label="Tamaki Den"> 803 <img src="images/thumbnail_temakiden_transparent.png" alt="Tamaki Den" style="width: 100px; height: 100px;" /> 804 </a> 805 </div> 806 807 </div> 808</footer> 809 810
810<script> 811 const navToggle = document.getElementById('nav-toggle'); 812 const headerNav = document.getElementById('header-nav'); 813 const slides = document.querySelectorAll('.slides'); 814 let currentSlide = 0; 815 let slideInterval; 816 let isPaused = false; 817 818 function showSlide(index) { 819 if (index >= slides.length) currentSlide = 0; 820 else if (index < 0) currentSlide = slides.length - 1; 821 else currentSlide = index; 822 823 slides.forEach((slide, i) => { 824 slide.classList.toggle('active', i === currentSlide); 825 }); 826 } 827 828 function changeSlide(direction) { 829 showSlide(currentSlide + direction); 830 } 831 832 function startSlideshow() { 833 slideInterval = setInterval(() => { 834 if (!isPaused) changeSlide(1); 835 }, 7500); // 5 seconds per slide 836 } 837 838 function stopSlideshow() { 839 clearInterval(slideInterval); 840 } 841 842 const slideshowContainer = document.querySelector('.slideshow-container'); 843 844 slideshowContainer.addEventListener('mouseenter', () => { 845 isPaused = true; 846 }); 847 848 slideshowContainer.addEventListener('mouseleave', () => { 849 isPaused = false; 850 }); 851 852 // Start the slideshow 853 showSlide(currentSlide); 854 startSlideshow(); 855 856 // Floating nav show on scroll after 80px 857 const floatingNav = document.getElementById('floating-nav'); 858 859 window.addEventListener('scroll', () => { 860 floatingNav.classList.toggle('show', window.scrollY > 80); 861 862 if (reserveBtn) { 863 reserveBtn.classList.toggle('hidden', window.scrollY < 100); 864 } 865 }); 866 867 const reserveBtn = document.querySelector('.floating-reserve'); 868 869 window.addEventListener('scroll', () => { 870 if (window.scrollY < 100) { 871 reserveBtn.classList.add('hidden'); 872 } else { 873 reserveBtn.classList.remove('hidden'); 874 } 875 }); 876 877 document.getElementById('backToTopBtn').addEventListener('click', () => { 878 window.scrollTo({ top: 0, behavior: 'smooth' }); 879 }); 880 881 navToggle.addEventListener('click', () => { 882 const isExpanded = navToggle.getAttribute('aria-expanded') === 'true'; 883 navToggle.setAttribute('aria-expanded', !isExpanded); 884 headerNav.classList.toggle('active'); 885 }); 886 887 888 889 document.addEventListener('DOMContentLoaded', () => { 890 const toggleBtn = document.getElementById('floating-nav-toggle'); 891 const navLinks = document.getElementById('floating-nav-links'); 892 893 toggleBtn.addEventListener('click', () => { 894 navLinks.classList.toggle('active'); 895 const expanded = toggleBtn.getAttribute('aria-expanded') === 'true'; 896 toggleBtn.setAttribute('aria-expanded', !expanded); 897 }); 898 }); 899 900 function toggleNavToggle() { 901 const btn = document.getElementById('nav-toggle'); 902 if (window.innerWidth > 1019) { 903 btn.style.display = 'none'; 904 } else { 905 btn.style.display = 'block'; 906 } 907 } 908 window.addEventListener('resize', toggleNavToggle); 909 window.addEventListener('load', toggleNavToggle); 910 911 document.addEventListener('click', function (event) { 912 const headerToggle = document.getElementById('nav-toggle'); 913 const headerNav = document.getElementById('header-nav'); 914 const floatingToggle = document.getElementById('floating-nav-toggle'); 915 const floatingNav = document.getElementById('floating-nav-links'); 916 917 const clickedInsideHeader = headerToggle.contains(event.target) || headerNav.contains(event.target); 918 const clickedInsideFloating = floatingToggle.contains(event.target) || floatingNav.contains(event.target); 919 920 // Close header nav if click was outside 921 if (!clickedInsideHeader) { 922 headerNav.classList.remove('active'); 923 headerToggle.setAttribute('aria-expanded', 'false'); 924 } 925 926 // Close floating nav if click was outside 927 if (!clickedInsideFloating) { 928 floatingNav.classList.remove('active'); 929 floatingToggle.setAttribute('aria-expanded', 'false'); 930 } 931 });
932 933 const lightbox = document.getElementById('lightbox'); 934 const lightboxImg = document.getElementById('lightbox-img'); 935 const gridImgs = document.querySelectorAll('.image-grid img'); 936 937 // Open lightbox on click 938 gridImgs.forEach(img => { 939 img.style.cursor = 'zoom-in'; 940 img.addEventListener('click', () => { 941 lightboxImg.src = img.src; 942 lightbox.classList.add('active'); 943 }); 944 }); 945 946 // Close on backdrop click 947 lightbox.addEventListener('click', () => { 948 lightbox.classList.remove('active'); 949 }); 950 951 // Close on Escape key 952 document.addEventListener('keydown', e => { 953 if (e.key === 'Escape') { 954 lightbox.classList.remove('active'); 955 } 956 }); 957 958 959 960 961 fetch('texts/bio-toshi.txt') 962 .then(response => response.text()) 963 .then(text => { 964 const paragraphs = text.split(/\n+/); // split by line breaks 965 const html = paragraphs.map(p => { 966 if (p.startsWith('[indent]')) { 967 p = p.replace('[indent]', '').trim(); 968 return `<p class="indented">${p}</p>`; 969 } else { 970 return `<p>${p.trim()}</p>`; 971 } 972 }).join(''); 973 document.getElementById('bio-toshi').innerHTML = html; 974 }); 975 976 fetch('texts/bio-taro.txt') 977 .then(response => response.text()) 978 .then(text => { 979 const paragraphs = text.split(/\n+/); // split by line breaks 980 const html = paragraphs.map(p => { 981 if (p.startsWith('[indent]')) { 982 p = p.replace('[indent]', '').trim(); 983 return `<p class="indented">${p}</p>`; 984 } else { 985 return `<p>${p.trim()}</p>`; 986 } 987 }).join(''); 988 document.getElementById('bio-taro').innerHTML = html; 989 }); 990 991 fetch('texts/omakaseabt.txt') 992 .then(response => response.text()) 993 .then(text => { 994 const paragraphs = text.split(/\n+/); // split by line breaks 995 const html = paragraphs.map(p => { 996 if (p.startsWith('[indent]')) { 997 p = p.replace('[indent]', '').trim(); 998 return `<p class="indented">${p}</p>`; 999 } else { 1000 return `<p>${p.trim()}</p>`; 1001 } 1002 }).join(''); 1003 document.getElementById('omakaseabt').innerHTML = html; 1004 }); 1005 1006 1007 1008 </script>
1008 1009 1010</body>
1011<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'p3plzcpnl509148'},{'dcenter':'p3'},{'cp_id':'10374093'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script>
1011<script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script>
1011</html> 1012
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.