Skip to content

Commit

Permalink
Merge pull request #7 from wea-f/smooth-patch-6
Browse files Browse the repository at this point in the history 
t3wefsd
  • Loading branch information
@wea-f
wea-f committed Oct 29, 2023
2 parents bb106ef + c34b44f commit 9535cd8
Showing 1 changed file with 92 additions and 36 deletions.
128 changes: 92 additions & 36 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
color: white;
}


button {
font-family: "Fredoka", "sans-serif";
background-color: #64dd17;
Expand Down Expand Up @@ -75,6 +76,7 @@
#condition {
color: #e53935;
text-align: center;
font-size: 18px;
}

#seperator {
Expand All @@ -91,43 +93,50 @@
vertical-align: middle;
}

.fade-in {
opacity: 0;
transition: opacity 0.65s ease-in;
}

.fade-in.active {
opacity: 1;
}

</style>
</head>
<body>
<h1 id="title"> Norepted <h1>
<h3> Paste your youtube link in the orange box. Then press the LAUNCH button. <br> <br>To exit the site, press "0," doing this way will remove Norepted from your history. <br> <br>To hide the tab, press "1."</h3></h3>
<h4 id="copy_tip"> If you want, press the "COPY" button to copy a link, open it in a new tab.</h4>
<h4 id="tip"> Tip: Press "Enter" on your keyboard to launch the video faster. </h4>
<br>
<input id="link"><br>
<button onclick="fix_link()"> LAUNCH </button>
<br>
<button id="copy" onclick="copy_link()"> COPY </button>
<h3> The video will show down here</h3>
<h5> (It might take a few seconds) </h5>
<iframe id="video" width="650" height="425" frameborder="0" src=" " allowfullscreen> </iframe>
<br>
<div id="seperator">
<span> -------------------------------------------------- </span>
</div>

<div id="footer">
<div class="visitor-counter">
<script type="text/javascript" src="https://www.stat-counter.org/count/d6u8"></script><br>
</div>
<div class="visitor-counter">
<script type="text/javascript" src="https://www.freevisitorcounters.com/en/home/counter/1086686/t/1"> </script>
</div>
<div class="visitor-counter">
<a href="https://www.cutercounter.com/" target="_blank"><img src="https://www.cutercounter.com/hits.php?id=huxoacnd&nd=5&style=1" border="0" alt="website counter"> </a>
</div>
<h1 class="fade-in" id="title"> Norepted <h1>
<h3 class="fade-in"> Paste your youtube link in the orange box. Then press the LAUNCH button. <br> <br>To exit the site, press "0," doing this way will remove Norepted from your history. <br> <br>To hide the tab, press "1."</h3></h3>
<h4 class="fade-in" id="copy_tip"> If you want, press the "COPY" button to copy a link, open it in a new tab.</h4>
<h4 class="fade-in" id="tip"> Tip: Press "Enter" on your keyboard to launch the video faster. </h4>
<br>
<input class="fade-in" id="link"><br>
<button class="fade-in" onclick="fix_link()"> LAUNCH </button>
<br>
<button class="fade-in" id="copy" onclick="copy_link()"> COPY </button>
<h3 class="fade-in"> The video will show down here</h3>
<h5 class="fade-in"> (It might take a few seconds) </h5>
<iframe class="fade-in" id="video" width="650" height="425" frameborder="0" src=" " allowfullscreen> </iframe>
<br>
<div class="fade-in" id="seperator">
<span> -------------------------------------------------- </span>
</div>

<div id="footer" class="fade-in">
<div class="visitor-counter">
<script type="text/javascript" src="https://www.stat-counter.org/count/d6u8"></script><br>
</div>

<h5 id="socials"> Made by the user <a href="https://codepen.io/weaF_z" target=”_blank”> WG563 on codepen.io </a>, aka <a href="https://github.com/wea-f" target=”_blank”>wea-f on github </a>, aka <a href="https://replit.com/@wea-F" target=”_blank”> wea-F on replit </a> <br> FOR MORE INFO AND TERMS CHECK IT OUT <a href="https://github.com/wea-f/Norepted" target="_blank"> HERE </a> <br>
<span id="condition">!!! I am NOT responsible in anyway if you get in trouble while using Norepted, it is YOUR device and YOU control it. !!! </span>
</h5>


<div class="fade-in">
<script type="text/javascript" src="https://www.freevisitorcounters.com/en/home/counter/1086686/t/1"> </script>
</div>
<div class="fade-in">
<a href="https://www.cutercounter.com/" target="_blank"><img src="https://www.cutercounter.com/hits.php?id=huxoacnd&nd=5&style=1" border="0" alt="website counter"> </a>
</div>
</div>

<h5 class="fade-in" id="socials"> Made by the user <a href="https://codepen.io/weaF_z" target=”_blank”> WG563 on codepen.io </a>, aka <a href="https://github.com/wea-f" target=”_blank”>wea-f on github </a>, aka <a href="https://replit.com/@wea-F" target=”_blank”> wea-F on replit </a> <br> FOR MORE INFO AND TERMS CHECK IT OUT <a href="https://github.com/wea-f/Norepted" target="_blank"> HERE </a> <br>
<span class="fade-in" id="condition">!!! I am NOT responsible in anyway if you get in trouble while using Norepted, it is YOUR device and YOU control it. !!! </span>
</h5>


</body>
Expand Down Expand Up @@ -165,14 +174,14 @@ <h5 id="socials"> Made by the user <a href="https://codepen.io/weaF_z" target=
}
else if (c.key == "0") {
c.preventDefault();
c.stopPropagation();
c.stopPropagation();
window.location.replace("https://www.google.com/webhp?igu=1");
}
else if (c.key == "1") {
c.preventDefault();
c.stopPropagation();
c.stopPropagation();
document.title = "My Drive - Google Drive";
setFavicons("https://ssl.gstatic.com/images/branding/product/1x/drive_2020q4_32dp.png");
setFavicons("https://ssl.gstatic.com/images/branding/product/1x/drive_2020q4_32dp.png");
}
}

Expand All @@ -191,6 +200,53 @@ <h5 id="socials"> Made by the user <a href="https://codepen.io/weaF_z" target=
window.open("https://github.com/wea-f/Norepted/tree/master")
}

// //SCROLL ANIMATION
const fadeInElems = document.querySelectorAll('.fade-in');

const debounce = (fn) => {
let frame;
return (...params) => {
if (frame) {
cancelAnimationFrame(frame);
}
frame = requestAnimationFrame(() => {
fn(...params);
});
}
};

const handleScroll = debounce(() => {
const windowHeight = window.innerHeight;
const scrollTop = window.scrollY;
const scrollBottom = scrollTop + windowHeight;

fadeInElems.forEach(elem => {
const top = elem.offsetTop;
const height = elem.offsetHeight;
const bottom = top + height;
const isBeforeBottom = bottom - scrollTop > 0;
const isAfterTop = top < scrollBottom;

if (isBeforeBottom && isAfterTop) {
elem.classList.add('active');
} else {
elem.classList.remove('active');
}
});
});

document.addEventListener('scroll', handleScroll);


//Fade in elements on load
fadeInElems.forEach(elem => {
const isVisible = (elem.offsetTop - window.scrollY) < window.innerHeight;
if (isVisible) {
elem.classList.add('active');
} else {
elem.classList.remove('active');
}
});

</script>
</html>

0 comments on commit 9535cd8

Please sign in to comment.