ONE ssss: CODE : ONE Feedback

<style>

#FB{

height: 300px;
width:80%;
 font-family: "Comic Sans MS", "Comic Sans";
 font-size:20px;
 overflow: hidden; 
 border: none;
 outline: none;

background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 180% 120%;
  background-color:#FFFCD3;
  background-position: center;

padding-left:10%;
     padding-right:10%;
      padding-top:10%;

}

#MakeFB,#SubmitFB {
width: 100%;
height : 50px;
font-family: "Comic Sans MS", "Comic Sans", cursive;
font-size:20px;
letter-spacing: .25em;
}

h1{
text-align:center;
font-size:8px;
opacity:0.5;
}

.layer_bg{position:fixed; width:100%; height:100%; background: rgba(0,0,0,0); left:0; top:0}
.layer_wrap{position:fixed; width:300px; height:100px; background:transparent; text-align: center; margin-bottom:30%;}

</style>

<#block-textarea-block id="FB" style="display:none;" placeholder="Write Here..." name="Feedback"></block-textarea-block><br />

<button class="btnSubmit btn-block" id="SubmitFB" name="submit" onclick="pageoff()" style="display: none;" type="submit">Submit</button><br /><br /><br />
<h1>programmed by Subham Mandal</h1>

const scriptURL = 'https://script.google.com/macros/s/AKfycbwhmGhUFN9DJhvjYYCE9d0kxYu_ttbIvfOr7P3viNba334CqiD-00WwpNQRR-KAUU4Akg/exec'

const form = document.forms['google-sheet']
          
            form.addEventListener('submit', e => {
              e.preventDefault()
              fetch(scriptURL, { method: 'POST', body: new FormData(form)})
                .then(response => document.getElementById("flowerbtn").click())

.catch(error => console.error('Error!', error.message))
            })
            
            
</script>

setInterval(run,1);

function run(){
document.getElementById("time").value=new Date().toLocaleTimeString();
document.getElementById("date").value=new Date().toDateString();
document.getElementById("source").value= window.location.href;
}

function pageon(){
document.getElementById("FB").style.display="block";
document.getElementById("MakeFB").style.display="none";
document.getElementById("SubmitFB").style.display="block";

}

function pageoff(){
document.getElementById("FB").style.display="none";
document.getElementById("MakeFB").style.display="block";
document.getElementById("SubmitFB").style.display="none";

}

</script>

<div class="layer_bg" id="flbg" style="display: none;"></div>
 
            <div class="layer_wrap" id="flwr" layer="1" style="display: none;">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVk71xDOQjglJ4CJnKA-n3qQ64b4r3MAsxRiWlamlyiMJgu1vYQE1rpdL6sqNh72wu8HwwPPAVIy5XIAB1B_VbdOt7wiZTAEiC5o7qJ0fVkwZf6DbGXj7E3NKRk133tZG9SOI7UH7uxANOUAvlB3F6n_AJpeL1lrRMFFAyJHkmA6Y5lKle-dkc8Ix_1Q/s320/flower.png" />
             <a>Thank you for this Feedback</a><br />
            <a class="btn_close" href="javascript:;">Close</a><br />
           
            </div>

$(function () {

$(".layer_bg, .layer_wrap").hide();

function layer_position(){
    var win_W = $(window).width();
    var win_H = $(window).height();
    $(".layer_wrap").css({'left':(win_W-300)/2, 'top':(win_H-100)/2});
  };

function layer_open(no){
    $(".layer_wrap[layer="+no+"]").fadeIn();
    $(".layer_bg").fadeIn();
    layer_position();

$(".layer_bg").click(function (e) {
      if(!$(".layer_wrap").has(e.target).length){
        layer_close();
      };
    });
  };

function layer_close(){
    $(".layer_wrap, .layer_bg").fadeOut();
  };

$(".btn_layer").click(function () {
    var no = $(this).attr("layer");
    layer_open(no);
  });

$(".btn_close").click(function () {
    layer_close();
  });

$(window).resize(function () {
    layer_position();
  });
})
</script>

</div></div>
      
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' href='https://onessssweb.blogspot.com/2023/01/code-auto-overlay-animation-depend-on.html' id='Blog1_blog-pager-newer-link' title='Newer Post'>Newer Post</a>
</span>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='https://onessssweb.blogspot.com/2023/01/edge-animation-2.html' id='Blog1_blog-pager-older-link' title='Older Post'>Older Post</a>
</span>
<a class='home-link' href='https://onessssweb.blogspot.com/'>Home</a>
</div>
<div class='clear'></div>
<div class='post-feeds'>
</div>
</div><div class='widget HTML' data-version='1' id='HTML3'>
<div class='widget-content'>
<style>

@media (max-width: 768px) {
            body
             {
                width: 100%;
                height: 100%;
                 margin: 0;

background-color: #f4f4f4;
            }
        }

.post-div, .post-div-sp {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    text-align: left;
    transition: transform 0.5s ease-in-out;
}

.post-div:hover, .post-div-sp:hover {
    transform: scale(1.05);
    cursor: pointer;
     background-color: #FFD700;
      box-shadow: 0 0 200px yellow;
      color: blue;
}

.post-div span, .post-div-sp span {
   
    color: #333;
}

#opensite {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 99999999;
    color: black;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

#iframe {
      position: fixed;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      z-index: 99999;
      border: none;
      outline: none;
      backdrop-filter: blur(20px);
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
    }
    
     
      #iframe-buttons {
      display:none;
      position: fixed;
      top: 4%;
      left: 80%;
      z-index: 100000;
    }

.iframe-buttona {
      width: 40px;
      height: 40px;
      background-color: blue;
      color: #fff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      margin-right: 5px;
    }
    
    .iframe-buttonb {
      width: 40px;
      height: 40px;
      background-color: red;
      color: #fff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      margin-right: 5px;
    }

.container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 94%;
      text-align: center;
      padding: 1%;
    }

h1 {
      font-size: 3rem;
    }

h2 {
      font-size: 1.5rem;
    }

/* Cursor */
    .txt-type > .txt {
      border-right: 0.2rem solid #777;
      color: #e2000f; /* Move color styling here */
    }

@media(min-width: 120px) {
      h1 {
        font-size: 2.7rem;
      }
    }

@media(max-width: 500px) {
      h1 {
        font-size: 2.4rem;
      }
    }

#search {
      padding: 1%;
      border: 2px solid #3498db;
      border-radius: 5px;
      outline: none;
      font-size: 16px;
      width:50%;
      transition: border-color 0.3s ease-in-out;
    }

#search::placeholder {
      color: #95a5a6;
    }

#search:focus {
      border-color: green;
    }
    </style>

<div id="opensite">
  <h1>Loading...</h1><br />
  <span>Programmed by Subham Mandal</span>
</div>

</center>

function hides() {
    let search = document.getElementById('search').value.toLowerCase();

const postDivs = document.querySelectorAll('#post-list .post-div-sp');

postDivs.forEach(function (div) {
        const spanText = div.querySelector('span').textContent.toLowerCase();

if (!spanText.includes(search)) {
            div.style.display = 'none';
        } else {
            div.style.display = 'block';
        }
    });
}

</script>

// Gradually expand the iframe to 90% height and width
      let width = 0;
      let height = 0;

// Function to center the iframe on the page
    function centerIframe() {
      const iframe = document.getElementById('iframe');
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      const iframeWidth = iframe.offsetWidth;
      const iframeHeight = iframe.offsetHeight;

const left = (windowWidth - iframeWidth) / 2;
      const top = (windowHeight - iframeHeight) / 2;

iframe.style.left = left + 'px';
      iframe.style.top = top + 'px';
    }

const pageUrl = 'https://www.googleapis.com/blogger/v3/blogs/2693207758598499829/pages?key=AIzaSyDEhgVwwkCTst0V1DOZUKvtjaXBppuMI3M&maxResults=500&startIndex=0';

const postUrl = 'https://www.googleapis.com/blogger/v3/blogs/2693207758598499829/posts?key=AIzaSyDEhgVwwkCTst0V1DOZUKvtjaXBppuMI3M&maxResults=500&startIndex=0';

// Fetch both URLs concurrently using Promise.all
Promise.all([
  fetch(pageUrl).then(response => response.json()),
  fetch(postUrl).then(response => response.json())
])
  .then(([pageData, postData]) => {
    const postList = document.getElementById('post-list');
    const reversedItems = [...pageData.items, ...postData.items];

setTimeout(() => {
      document.getElementById('opensite').style.display = 'none';
    }, 1000);

reversedItems.forEach((post, index) => {
      const div = document.createElement('div');
      div.classList.add('post-div-sp');

// Add an event listener to open the iframe when the div is clicked
      div.addEventListener('click', () => {
        const newIframeURL = 'https://' + post.url.slice(7);

// Remove the existing iframe
        const iframe = document.getElementById('iframe');
        iframe.remove();

// Create a new iframe element
        const newIframe = document.createElement('iframe');
        newIframe.id = 'iframe';
        newIframe.onload = showButtons;
        document.body.appendChild(newIframe);

openIframe(newIframeURL);
      });

// Create a clickable link within the div
      const link = document.createElement('span');
      link.target = '_blank'; // Open link in a new tab
      link.textContent = `${reversedItems.length - index}. ${post.title}`;

div.appendChild(link);
      postList.appendChild(div);
    });
  })
  .catch(error => {
    alert(error);
  });

function showButtons() {
        setTimeout(function(){document.querySelector('#iframe-buttons').style.display = 'block';    
   },1000);
      }

function openInNewTab() {
      const iframe = document.getElementById('iframe');
      if (iframe.src) {
        window.open(iframe.src, '_blank');
      }
    }

// Function to remove the iframe
    function removeIframe() {
      const iframe = document.getElementById('iframe');
      if (iframe) {
        iframe.remove();
       
       setTimeout(function(){let iframe = document.createElement('iframe');

iframe.id = 'iframe';
   document.body.appendChild(iframe);},1000);
   
        document.querySelector('#iframe-buttons').style.display = 'none';  
      }
    }

</script>

type() {
        const current = this.wordIndex % this.words.length;
        const fullTxt = this.words[current];

if (this.isDeleting) {
          this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
          this.txt = fullTxt.substring(0, this.txt.length + 1);
        }

this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

let typeSpeed = 200;

if (this.isDeleting) {
          typeSpeed /= 2;
        }

if (!this.isDeleting && this.txt === fullTxt) {
          typeSpeed = this.wait;
          this.isDeleting = true;
        } else if (this.isDeleting && this.txt === '') {
          this.isDeleting = false;
          this.wordIndex++;
          typeSpeed = 200;
        }

setTimeout(() => this.type(), typeSpeed);
      }
    }

document.addEventListener('DOMContentLoaded', init);

function init() {
      const txtElement = document.querySelector('.txt-type');
      const words = JSON.parse(txtElement.getAttribute('data-words'));
      const wait = txtElement.getAttribute('data-wait');
      new TypeWriter(txtElement, words, wait);
    }
  </script>
  
  
<script>
var currentUrl = window.location.href;
if(currentUrl.length>40)
{

var urlPrefix = 'https://onessssweb.blogspot.com/?fbclid';

if (!currentUrl.startsWith(urlPrefix)) {

document.getElementById('openbox').style.display = 'none';
  document.getElementById('opensite').style.display = 'none';
}

}
else{document.getElementById('openbox').style.display='block';
document.getElementById('opensite').style.display = 'flex';
}
</script>

function deleteElements() {

const elementsToDelete = document.querySelectorAll('.post-title.entry-title, .post-feeds, .clear, .blog-pager, .comments, .post-footer,.status-msg-wrap, .post-header, .blog-feeds');

elementsToDelete.forEach(element => {
    element.remove();
  });
}

deleteElements();

</script>

<div id='loadingurl'>
  <div>Loading...</div>
</div>

function urlhold() {
    let currentURL = window.location.href;
    let digitRegex = /\d/g;
    let mainurl = currentURL.match(digitRegex) || [];
    
    let startIndex = currentURL.indexOf('url/') + 4;
    let endIndex = currentURL.indexOf('/', startIndex);
    let extractedText = currentURL.substring(startIndex, endIndex);

let gotourl = atob(extractedText);

let iframe = document.getElementById('urlholder');
    iframe.style.display = 'block';
    iframe.src = gotourl;

iframe.onload = function() {
      document.getElementById('loadingurl').style.display='none';
    };

iframe.onerror = function() {

alert('error');
    };
  }
</script>
</div>
<div class='clear'></div>
</div></div>