From 88bfdffc455e6d9f043f46bb36d30637313d77b9 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Thu, 2 Sep 2021 11:33:21 -0400
Subject: [PATCH] frame added to main project

---
 index.html | 249 +++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 222 insertions(+), 27 deletions(-)

diff --git a/index.html b/index.html
index ae9be9e..a69478a 100644
--- a/index.html
+++ b/index.html
@@ -742,37 +742,231 @@ Video.Init = function()
         <a class="CTA" href="https://truthforlife.org/store/buy/">Buy Now</a>
         <span>$10.00 (free shipping)</span>
         <div>
-            <div class="Shot" show="cover">
-                <div class="Book">
-                    <img style="display:block; height:100%; width:auto; visibility: visible;" src="book-panel-spine.jpg"/>
-                    <div class="Page Page--Fill"> <div class="Front Shadow--Radiosity "><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div>
-                    <div class="Spine">
-                        <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity "><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div>
-                        <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
-                        <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
-                        <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
             
-                        <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
-                        <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-3.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
-                        <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-5.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-4.jpg"/></div> </div>
-                        <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-6.jpg"/></div> </div>
+            <style>
+
+                .frame
+                {
+                    position:relative;
+                    padding:20px;
+                    border-bottom: none;
+                    box-sizing:border-box;
+                }
+                
+                .frame__image
+                {
+                    position:relative;
+                    z-index:20;
+                    margin-bottom:19px;
+                }
+                
+                .frame__bar
+                {
+                    position:relative;
+                    bottom:0;
+                    left:0;
+                    width:100%;
+                    height:44px;
+                    overflow:hidden;
+                    transform-origin: center 22.5px;
+                }
+                .frame__bar span
+                {
+                    display: block;
+                    position: absolute;
+                    top: -10.5px;
+                    left: 50%;
+                    width: 20px;
+                    height: 20px;
+                    border: 5px solid #000;
+                    border-right-color: transparent;
+                    border-bottom-color: transparent;
+                    transform: translate(-50%, 20px) rotate(45deg);
+                    transition: left 0.4s;
+                }
+                .frame__bar span::before, .frame__bar span::after
+                {
+                    content: " ";
+                    display: block;
+                    position: absolute;
+                    width: 1000px;
+                    height:0px;
+                    border-top: 5px solid black;
+                    transform:rotate(-45deg);
+                }
+                .frame__bar span::before
+                {
+                    bottom: -0.5px;
+                    right: 20px;
+                    transform-origin: right bottom;
+                }
+                .frame__bar span::after
+                {
+                    top: -4px;
+                    left: 17px;
+                    transform-origin: left top;
+                }
+                .frame__bar--down
+                {
+                    transform: scaleY(-1);
+                }
+                .frame__bar--up
+                {
+                    transform: scaleY(1);
+                }
+                .frame__bar--1-3 span
+                {
+                    left:16.6%;
+                }
+                .frame__bar--2-3 span
+                {
+                    left:50%;
+                }
+                .frame__bar--3-3 span
+                {
+                    left:83%;
+                }
+                
+                .frame__bracket
+                {
+                    position:relative;
+                    display:block;
+                    width:100%;
+                    height:0px;
+                    top:-200px;
+                    z-index:10;
+                    border-top:5px solid black;
+                }
+                .frame__bracket::before, .frame__bracket::after
+                {
+                    content:" ";
+                    display:block;
+                    width:15px;
+                    height:171px;
+                    position:absolute;
+                    top:-5px;
+                    border:5px solid black;
+                }
+                .frame__bracket::before
+                {
+                    left:-20px;
+                }
+                .frame__bracket::after
+                {
+                    right:-20px;
+                }
+                
+                .frame__button
+                {
+                    position:relative;
+                    display:block;
+                    float:left;
+                    padding:5px 0px 5px 0px;
+                    box-sizing: border-box;
+                    width:33.3%;
+                    text-align:center;
+                    text-transform: uppercase;
+                    cursor:pointer;
+                }
+                .frame__button:hover::before
+                {
+                    content: " ";
+                    display: block;
+                    width: 7px;
+                    height: 7px;
+                    background: black;
+                    position: absolute;
+                    top: -12px;
+                    left: 50%;
+                    transform: translateX(-5px) rotate(45deg);
+                    transition: top 0.4s, bottom 0.4s;
+                }
+                .frame__button--upper:hover::before
+                {
+                    top:auto;
+                    bottom:-9px;
+                }
+                .frame__button[data-frame-active='true']:hover::before
+                {
+                    bottom:auto;
+                    top: -30px;
+                }
+                .frame__button--upper[data-frame-active='true']:hover::before
+                {
+                    bottom: -26px;
+                    top:auto;
+                }
+                </style>
+                <div class="frame">
+                    <div class="frame__image">
+
+                        <div class="Shot" show="cover">
+                            <div class="Book">
+                                <img style="display:block; height:100%; width:auto; visibility: visible;" src="book-panel-spine.jpg"/>
+                                <div class="Page Page--Fill"> <div class="Front Shadow--Radiosity "><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div>
+                                <div class="Spine">
+                                    <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity "><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div>
+                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
+                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
+                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
                         
-                        <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
-                        <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
-                        <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
-                        <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
-                        <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div>
+                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
+                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-3.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
+                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-5.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-4.jpg"/></div> </div>
+                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-6.jpg"/></div> </div>
+                                    
+                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
+                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
+                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
+                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
+                                    <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
+                    <div class="frame__button frame__button--upper" onclick="bookPose('cover'); bookClose();">Cover</div><div class="frame__button frame__button--upper" onclick="bookPose('spine'); bookClose();">Spine </div><div class="frame__button frame__button--upper" onclick="bookPose('back');  bookClose();">Back</div>
+                
+                    <div class="frame__bar"><span></span></div>
+                    <div class="frame__bracket"></div>
+                
+                    <div class="frame__button" onclick="bookPose('pages'); bookOpen(4);">Intro</div><div class="frame__button" onclick="bookPose('pages'); bookOpen(5);">1 & 2</div><div class="frame__button" onclick="bookPose('pages'); bookOpen(6);">3 & 4</div>
                 </div>
-            </div>
-            <div>
-                <button onclick="bookPose('cover'); bookClose();">Front</button>
-                <button onclick="bookPose('spine'); bookClose();">Spine</button>
-                <button onclick="bookPose('back');  bookClose();">Back</button>
-                <button onclick="bookPose('pages'); bookOpen(4);">Intro</button>
-                <button onclick="bookPose('pages'); bookOpen(5);">Days 1 & 2</button>
-                <button onclick="bookPose('pages'); bookOpen(6);">Days 3 & 4</button>
-            </div>
+                
+                <script>
+                    function frame__setup(inFrame)
+                    {
+                        var buttons = inFrame.querySelectorAll(".frame__button");
+                        var bar = inFrame.querySelector(".frame__bar");
+                        var active = false;
+                
+                        function activate(inButton)
+                        {
+                            var index = parseInt(inButton.getAttribute("data-frame-index"));
+                            var classX = "frame__bar--" + ((index % 3)+1) + "-3";
+                            var classY = index > 2 ? "frame__bar--down" : "frame__bar--up";
+                
+                            bar.setAttribute("class", "frame__bar " + classX + " " + classY);
+                
+                            if(active)
+                            {
+                                active.setAttribute("data-frame-active", "false");
+                            }
+                            active = inButton;
+                            inButton.setAttribute("data-frame-active", "true");
+                        }
+                        for(var i=0; i<buttons.length; i++)
+                        {
+                            buttons[i].setAttribute("data-frame-index", i);
+                            buttons[i].setAttribute("data-frame-active", "false");
+                            buttons[i].addEventListener("click", function(){ activate(this); });
+                        }
+                
+                        activate( buttons[0] );
+                    }
+                
+                    frame__setup(document.querySelector(".frame"));
+                </script>    
+                
         </div>
             
     </section>
@@ -911,4 +1105,5 @@ playerInterview = Video.Player('PlayerInterview', 'wEkSWh2_yM4');
 
 </script>
 </body>
+
 </html>
\ No newline at end of file