.:.[heather saturnia].:.sketchbook template

Tab-3 Default open page

this is *HEAVILY* edited/styled from doqmeat's original template, this is more focused as an image gallery with a lightbox.

do with this code as you like, credit isn't needed~

"Beauties of the Heavens" cigcardpix on Flickr

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab-2

collectible cigarette cards Moths and Butterflies from cigcardpix on Flickr

Tab-1

contellation pages from the children's magazine CHATTERBOX

Aries

Taurus

Gemini

Cancer

Leo

Virgo

Libra

Scorpio

Sagittarius

Capricorn

Aquarius

Pisces

Right Tab-1

collectible cigarette cards "Nartual Calendar" from cigcardpix on Flickr

vintage Liebig Beef Extract trading cards "Colours of the Rainbow" from cigcardpix on Flickr

<head>
  
  <link href="yourowncss.css" rel="stylesheet">
  
</head>

<body>

  <!-- Notebook Wrapper -->
  <div class="notebook">

    <!-- Tabs -->
    <div class="tabs">
     
    
      <button class="tablinks tab3-b" onclick="openTab('Tab1')">Tab1</button>
      <button class="tablinks tab2-b" onclick="openTab('Tab2')">Tab2</button>
      <button class="tablinks tab2-b" onclick="openTab('Tab3')" id="defaultOpen">Tab3</button>
    </div>
    <div class="tabs-right">
      
    <button class="tablinks tab8-b" onclick="openTab('R-Tab1')">R-Tab1</button>
     <button class="tablinks tab9-b" onclick="openTab('R-Tab2')">R-Tab2</button>
      
</div>


   
    <div class="notepages">

     
      <div class="pageleft">
        <div class="page1L">

       <!-- Left PageTABS-Content -->     

          <div id="Tab3" class="tabcontent">
            <div class="content">
                
                <header>Tab-3 Default open page</header>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           </p>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption">orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>
            
            </div>
          </div>




          <div id="Tab2" class="tabcontent">
            <div class="content">
                  <header>Tab-2 </header>
<p></p>
      <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>
                      

            </div>
          </div>



   <div id="Tab1" class="tabcontent">
            <div class="content">
                  <header>Tab-1 </header>
             <p></p>
              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>
            
             
            </div>
          </div>
       


<!-- Right PageTABS-Content -->

          <div id="R-Tab1" class="tabcontent" style="display:none;">
            <div class="content">
     <header>Right Tab-1 </header>
<p></p>
            
              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>


            </div>
          </div>



          <div id="R-Tab2" class="tabcontent" style="display:none;">
            <div class="content">
  <p>  </p>
                
              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>
                
              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

              <img src="" class="thumbnail"
     onclick="openLightbox(this.src, this.nextElementSibling.textContent)">
              <div class="caption"></div>

            </div>
          </div>





        </div>
      </div>

     <!-- Right Page-This is where the lightbox appears --> 
      <div class="pageright">
        <div class="page1R"></div>
 
 <div id="lightbox" class="lightbox" onclick="closeLightbox(event)">
    <div class="lightbox-content"></div>
  </div>

  
 <script src="yourownscripturl.js"></script>


      </div>
    </div>

<!-- NOTEBOOK Covers -->
    
    <div class="notecover">
      <div class="coverleft"></div>
      <div class="coverright"></div>
    </div>

    <span class="spiral"></span>



  </div> <!-- END NOTEBOOK -->
</body>

body {
    margin: 0;
    padding: 10px;
   
}


.notebook {
    position: relative;
    width: 850px; 
    height: 480px;
    margin: 5px;
    margin-bottom: 5px; 
    z-index: 0; 
    top: -12px;
}


.page1L {
    position: absolute;
    left: 10px; 
    top: 10px; 
    width: 385px; 
    height: 450px; 
    overflow-x: hidden;
     background-color: #ffffff;
    border-radius: 8px;
    background-size: 500px;
    border: 1px #423D3D solid;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
    z-index: 1; 
}


.page1L .caption {
    display: none; 
}


.page1R {
    position: absolute;
    left: 410px; 
    top: 10px; 
    width: 385px; 
    height: 450px; 
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    overflow: hidden;
    padding: 10px; 
    box-sizing: border-box; 
    background-color: #ffffff;
    border-radius: 8px;
    background-size: 500px;
    border: 1px #423D3D solid;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
    z-index: 1; 
}


.page1R img {
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
    margin: 0; 
}


.notecover {
    position: absolute;
    top: 0;
    left: 0;
    width: 850px;
    z-index: -1;
}

.coverleft {
    position: absolute;
    left: 0; 
    top: 0; 
    width: 400px; 
    height: 470px; 
     background-color: #423D3D;
    border-radius: 10px;
    border: 1.5px #050301 solid;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}


.coverright {
    position: absolute;
    left: 404px; 
    top: 0; 
    width: 400px;
    height: 470px; 
    background-color: #423D3D;
    border-radius: 10px;
    border: 1.5px #050301 solid;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}


.spiral {
    position: absolute;
    top: 15px;
    left: 382px; 
    width: 50px;
    height: 438px;
    z-index: 2; 
    image-rendering: auto;
    background-image: url(download your own);
    background-size: 45px;
    background-repeat: repeat-y;

}

.content { 
    display: grid; 
    padding: 15px; 
    gap: 5px; 
    position: absolute; 
    top: 5px; 
    z-index: 1; 
    width: 390px; 
   
}
header{
    grid-column: 1 / -1; 
     font-family: "Arial";
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    color: #000;
    margin-bottom: 0px;
}
p {
    max-width: 350px;
    grid-column: 1 / -1; 
    font-family: "Courier New";
    font-size: 11px;
    font-weight: bold;
    line-height: 1.4;
    text-align: left;
    color: #000;
     margin-top: 0;
    
}







.tabs {
    position: absolute;
    left: 0px;          
    top: 180px;           
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    display: flex;
    gap: 5px;
    z-index: 0;         
}


.tabs-right {
    position: absolute;
    right: 39px;         
    top: 120px;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: right center;
    display: flex;
    gap: 5px;
    z-index: 0;           
}



.tablinks {
    z-index: 1;
    width: 45px; 
    padding: 5px; 
    font-family: "Courier New";
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #000000;
    color: #f8f6f6;
    border-radius: 5px; 
    cursor: pointer;
    background: #4c5e41;
    transition-duration: 0.3s; 
    
}


.tablinks:hover {
    background: #7e976e; 
    color: #ffffff;
}


.tablinks.active {
    background: #7baa5e;
    box-shadow: 1px 1px 8px #808080;
    color: #000000;
}


.tabcontent .content {
    display: grid; 
   grid-template-columns: repeat(auto-fill, minmax(100px, 120px));
    top: 5px; 
    grid-gap: 10px; 
    padding: 10px; 
    box-sizing: border-box; 
    width: 400px;
    position: absolute; 
}


.image-gallery {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center; 
    align-items: center; 
    margin-top: 10px;
}

.image-gallery img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    margin: 5px;
   
    
}
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;            
    flex-direction: column;    
    justify-content: center;
    align-items: center;
}


.lightbox-image {
    height: 350px; 
    max-width: 100%; 
    object-fit: contain; 
    margin-bottom: 4px;
    padding: 2px;
    
}

.lightbox-caption {
    font-family: "Courier New"; 
    font-size: 12px; 
    font-weight: bold;
    text-align: center; 
    color: #000000; 
    margin-top: 10px;
    border: 1px solid #000000;
    width: 350px;
    padding: 2px;
    padding-top: 4px;
    max-height: 60px;
    overflow-y: auto;
}

.thumbnail {
    width: 100px; 
    height: 100px;
    object-fit: cover; 
    cursor: pointer;
}



* {
  scrollbar-width: thin;          
  scrollbar-color: #4c5e41 transparent; 
}

                   function openLightbox(imageUrl, captionText) {
            const page1R = document.querySelector('.page1R');
            page1R.innerHTML = '';

            const img = document.createElement('img');
            img.src = imageUrl;
            img.className = 'lightbox-image';
            page1R.appendChild(img);

         if (captionText && captionText.trim() !== "") {
    const caption = document.createElement('div');
    caption.textContent = captionText;
    caption.className = 'lightbox-caption';
    page1R.appendChild(caption);
}
}


        function openTab(tabName) {
            const tabContents = document.querySelectorAll('.tabcontent');
            tabContents.forEach(tab => tab.style.display = 'none');

            const tabLinks = document.querySelectorAll('.tablinks');
            tabLinks.forEach(tab => tab.classList.remove('active'));

            document.getElementById(tabName).style.display = 'block';

            const activeTab = document.querySelector(`.tablinks[onclick="openTab('${tabName}')"]`);
            if (activeTab) activeTab.classList.add('active');
        }

        document.getElementById('defaultOpen').click();

        window.addEventListener('message', (event) => {
            if (event.data.theme) {
                document.documentElement.setAttribute('data-theme', event.data.theme);
            }
        });

        
document.addEventListener('click', function(e) {
    if (!e.target.classList.contains('thumbnail')) {
        const page1R = document.querySelector('.page1R');
        page1R.innerHTML = '';
    }
});