Skip to content

Commit

Permalink
i
Browse files Browse the repository at this point in the history
  • Loading branch information
i1li committed Nov 29, 2024
1 parent c4720dc commit 8e096f2
Show file tree
Hide file tree
Showing 10 changed files with 276 additions and 61 deletions.
2 changes: 2 additions & 0 deletions dist/bundle-b47a0.css

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions dist/bundle-b47a0.js

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions dist/bundle-ecfb9.css

This file was deleted.

2 changes: 0 additions & 2 deletions dist/bundle-ecfb9.js

This file was deleted.

2 changes: 1 addition & 1 deletion dist/index.html

Large diffs are not rendered by default.

89 changes: 69 additions & 20 deletions src/css/style.css
Original file line number Diff line number Diff line change
@@ -1,46 +1,95 @@
* {border-radius:.3em; scrollbar-color: rgba(22,222,222,.7) rgba(0,0,72,.7); overscroll-behavior: none; scroll-behavior: smooth; scroll-snap-type: none;}
header:hover {background: linear-gradient(to bottom, rgba(255, 0, 0, .4) 0%, rgba(0, 222, 0, .15) 8%, rgba(128, 22, 128, 0.3) 96%, rgba(255, 0, 0, .4) 100%);}
header {position: sticky;
#welcome-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 1);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 1;
overflow: hidden;
}
.welcome-overlay-content p,.welcome-overlay-content h1{
text-align: center;
color: white;
width: 70%;
margin: auto;
}
#header-verse:hover {
opacity: 1;
}
#header-verse {
position: fixed;
left: 20%;
top: -.8em;
width: 80%;
font-size: 92%;
text-align: center;
opacity: .7;
transition: all 1s;
text-shadow:
0 0 1px currentColor,
0 0 3px currentColor,
0 0 4px currentColor;
}
.scrolled-down #header-verse, .scrolled-down #next-verse { display:none;}
#next-verse {opacity: .5;}
header:hover {background: linear-gradient(to bottom, rgba(255, 0, 0, .4) 0%, rgba(0, 222, 0, .15) 6%, rgba(128, 22, 128, 0.3) 94%, rgba(255, 0, 0, .4) 100%);}
header {position: fixed;
top: 0;
height: 5em;
width: 95%;
margin:auto;
margin-left:2%;
z-index: 1;
padding: 1em 0 0 0;
transition: all .45s;
transition: all .3s;
overflow: hidden;
background: linear-gradient(to top, rgba(255, 0, 0, .25) 0%, rgba(0, 22, 0, .3) 2%, rgba(128, 0, 128, 0.2) 98%, rgba(0, 0, 255, .5) 100%);
backdrop-filter: brightness(115%) contrast(90%) saturate(270%);
border-bottom: solid 2px rgba(0,0,255,.25);
border-left: solid 2px rgba(255,0,0,.15);
border-right: solid 2px rgba(111,0,111,.4);
border-radius: 0 0 2em 2em;
background: linear-gradient(to top, rgba(255, 0, 0, .25) 0%, rgba(0, 22, 0, .3) 4%, rgba(128, 0, 128, 0.2) 92%, rgba(0, 0, 255, .5) 100%);
backdrop-filter: brightness(115%) contrast(90%) saturate(270%);}
border-radius: 0 0 2em 2em;}
.scrolled-down:hover {background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(128, 128, 128, 0.6)); opacity: 1;}
.scrolled-down h1 {font-size: 140%; position: absolute; left:0; filter: drop-shadow(0 0 1rem white);}
.scrolled-down .img-header {height: 2.9rem; filter: drop-shadow(0 0 1rem rgba(127, 127, 127, 0.45))}
.scrolled-down #site-title-text {margin-left:-.2em; opacity: .33;}
.scrolled-down #toolbar {opacity:.7;
position: absolute;
top: .2em;
right: .4em;
font-size: 110%;}
#toolbar:hover {opacity:.9;}
.scrolled-down {height: 3em;
margin-top: 2em;
opacity: .8;
padding-top:0;
width: 97%;
margin-left: 1%;
overflow-x: hidden;
backdrop-filter: blur(.07em) brightness(90%) contrast(115%) saturate(115%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(128, 128, 128, 0.1) 99%, rgba(128, 128, 128, .75) 100%);
min-width: 97%;
overflow-x: hidden;
border-bottom: none;
border-left: solid 2px rgba(255,0,0,.15);
border-right: solid 2px rgba(111,0,111,.4);
border-radius: 0 0 1em 1em;}
#header-filler {
position: sticky;
top: 0;
left: 0;
height: 6em;
text-align: center!important;
align-content: start!important;
vertical-align: top!important;
justify-content: center!important;
}
.scrolled-down h1 {font-size: 140%; position: absolute; left:0; filter: drop-shadow(0 0 1rem white);}
.scrolled-down .img-header {height: 2.9rem; filter: drop-shadow(0 0 1rem rgba(127, 127, 127, 0.45))}
.scrolled-down #site-title-text {margin-left:-.2em; opacity: .33;}
.scrolled-down #toolbar {opacity:.7;
position: absolute;
top: .2em;
right: .4em;
font-size: 110%;}
#toolbar:hover {opacity:.9;}
#toolbar {opacity:.8;
position: absolute;
text-align: right;
top: .7em;
top: 3em;
right: 2%;
font-size: 120%;
transition: all .2s ease-in-out;
Expand Down
22 changes: 16 additions & 6 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@
<link rel="stylesheet" type="text/css" href="/css/background.css">
<link rel="stylesheet" type="text/css" href="/yt/youtube-embed.css">
</head><body>

<div id="welcome-overlay"><div class="welcome-overlay-content">
<h1>Jesus Christ is King!</h1>
<p>"<span class="bible-verse-text"></span>" - <a class="bible-verse-link" href=""></a></p>
<p>God bless!</p>
</div></div>

<div id="bg-wrapper"><div id="bg-img"><div id="bg-wrapper2"><div id="bg-wrapper3"></div></div></div></div>
<div id="bg"><div id="shift-layer1"><div id="shift-layer2"></div></div></div><div id="bg-frame-top"></div><div id="bg-frame-right"></div><div id="bg-frame-bottom"></div><div id="bg-frame-left"></div>

Expand All @@ -21,11 +28,13 @@
<div class="search-results-wrapper"><div id="searchResults">
</div></div></div></div>

<header><table><tr><td style="width:50%;">
<header><span id="header-verse"><p class="no-indent center">"<span class="bible-verse-text"></span>" <nobr>- <a class="bible-verse-link" href=""></a></nobr></p></span>
<table><tr><td style="width:50%;">
<h1><span id="site-title"><a href="/" class="no-bg" title="Home"><img alt="Home" class="img-header img-opaq" decoding="async" src="/img/yinyang.png"></a>
<a href="/" id="site-title-text" class="no-bg" title="Home">i&i</a></span></h1></td><td style="width:50%;">
<span id="toolbar"><span id="search" title="Search"><span id="search-text">Search</span>🔍</span><button id="zoom-out" title="Zoom Out"></button><button id="zoom-in" title="Zoom In">+</button>
<span class="mode-toggle"><button id="mode-toggle" title="Dark / Light">🌙 / ☀️</button></span></span></td></tr></table></header>
<span class="mode-toggle"><button id="mode-toggle" title="Dark / Light">🌙 / ☀️</button></span></span>
</td></tr></table></header><div id="header-filler"></div>

<div class="row justify-content-center"><div class="col-md-9">
<div id="welcome"><p class="no-indent width90" id="site-intro">
Expand Down Expand Up @@ -1487,13 +1496,14 @@ <h4>Profitability Has Never Excused Criminality: A Message To Facebook, Google,
<footer><table style="width:100%;"><tr><td style="text-align:left; width:20%; padding-left:3.5%; padding-top:.6em;"><span id="toTopFooter" onclick="goToTop()" title="Go to top"><img alt="Go to top" class="img-footer" decoding="async" src="/img/top2.png"></span></td>
<td style="text-align:center; width:60%; vertical-align:middle; padding-top:1em; font-size:1em; opacity:.7;"><a href="https://connect4more.netlify.app" class="no-bg" title="Connect for more.">Connect</a></td>
<td style="text-align:right; width:20%; padding-right:2.5%; padding-top:.6em;"><a class="no-bg" title="Home" href="/"><img class="img-footer img-opaq" decoding="async" alt="Home" src="/img/yinyang.png"></a></td></tr></table></footer>

<script src="/js/utils.js"></script>
<script src="/js/background.js"></script>
<script src="/js/github-pages.js"></script>
<script src="/yt/shuffle.js"></script>

<script src="/yt/youtube-embed.js"></script>
<script src="/js/light-dark.js"></script>
<script src="/yt/shuffle.js"></script>
<script src="/js/bible-verses.js"></script>
<script src="/js/background.js"></script>
<script src="/js/github-pages.js"></script>
<script src="/js/zoom.js"></script>
<script src="/js/scroll.js"></script>
<script src="/js/spa.js"></script>
Expand Down
128 changes: 128 additions & 0 deletions src/js/bible-verses.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
const bibleVerses = [
{
verse: "Exodus 3:14",
text: "I AM WHO I AM. This is what you are to say to the Israelites: 'I AM has sent me to you.'"
},
{
verse: "John 6:35",
text: "I am the bread of life. Whoever comes to me will never go hungry, and whoever believes in me will never be thirsty."
},
{
verse: "John 8:12",
text: "I am the light of the world. Whoever follows me will never walk in darkness, but will have the light of life."
},
{
verse: "John 10:9",
text: "I am the gate; whoever enters through me will be saved."
},
{
verse: "John 10:11",
text: "I am the good shepherd. The good shepherd lays down his life for the sheep."
},
{
verse: "John 11:25-26",
text: "I am the resurrection and the life. The one who believes in me will live, even though they die; and whoever lives by believing in me will never die."
},
{
verse: "John 14:6",
text: "I am the way and the truth and the life. No one comes to the Father except through me."
},
{
verse: "John 15:1",
text: "I am the true vine, and my Father is the gardener."
},
{
verse: "John 8:58",
text: "Truly, truly, I say to you, before Abraham was, I am."
},
{
verse: "Revelation 1:8",
text: "I am the Alpha and the Omega, says the Lord God, who is, and who was, and who is to come, the Almighty."
},
{
verse: "Philippians 4:13",
text: "I can do all things through him who strengthens me."
},
{
verse: "Jeremiah 29:11",
text: "'For I know the plans I have for you' - this is the Lord's declaration - 'plans for your well-being, not for disaster, to give you a future and a hope.'"
},
{
verse: "Romans 8:28",
text: "We know that all things work together for the good of those who love God, who are called according to his purpose."
},
{
verse: "Psalm 23:1",
text: "The Lord is my shepherd; I have what I need."
},
{
verse: "Proverbs 3:5-6",
text: "Trust in the Lord with all your heart, and do not rely on your own understanding; in all your ways know him, and he will make your paths straight."
},
{
verse: "Isaiah 41:10",
text: "Do not fear, for I am with you; do not be afraid, for I am your God. I will strengthen you; I will help you; I will hold on to you with my righteous right hand."
},
{
verse: "2 Corinthians 5:17",
text: "Therefore, if anyone is in Christ, he is a new creation; the old has passed away, and see, the new has come!"
},
{
verse: "Matthew 11:28",
text: "Come to me, all of you who are weary and burdened, and I will give you rest."
},
{
verse: "Galatians 2:20",
text: "I have been crucified with Christ, and I no longer live, but Christ lives in me. The life I now live in the body, I live by faith in the Son of God, who loved me and gave himself for me."
},
{
verse: "Joshua 1:9",
text: "Haven't I commanded you: be strong and courageous? Do not be afraid or discouraged, for the Lord your God is with you wherever you go."
}
];
function constructBLBUrl(verse) {
const [book, chapter_verse] = verse.split(' ');
const [chapter, verse_range] = chapter_verse.split(':');
const formatted_book = book.toLowerCase().substring(0, 3);
return `https://www.blb.org/csb/${formatted_book}/${chapter}/${verse_range}`;
}
function displayRandomBibleVerse() {
shuffle(bibleVerses);
let currentIndex = 0;
let remainingTime = 0;
let timerPause = null;
const tickInterval = 500;
function displayVerse() {
const bibleVerse = bibleVerses[currentIndex];
document.querySelectorAll('.bible-verse-text').forEach(element => {
element.textContent = bibleVerse.text;
});
document.querySelectorAll('.bible-verse-link').forEach(element => {
element.textContent = bibleVerse.verse;
element.href = constructBLBUrl(bibleVerse.verse);
});
const wordCount = bibleVerse.text.split(' ').length;
remainingTime = wordCount * 650;
currentIndex = (currentIndex + 1) % bibleVerses.length;
checkAndSetTimeout();
}
function checkAndSetTimeout() {
if (timerPause) {
clearTimeout(timerPause);
}
function tick() {
if (isWindowActive && !document.querySelector('header').classList.contains('scrolled-down')) {
remainingTime -= tickInterval;
if (remainingTime <= 0) {
displayVerse();
} else {
timerPause = setTimeout(tick, tickInterval);
}
} else {
timerPause = setTimeout(tick, tickInterval);
}
}
tick();
}
displayVerse();
}
9 changes: 5 additions & 4 deletions src/js/scroll.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
// Sticky Header & Go to top
const scrollTransition = 50;
const header = document.querySelector('header');
const toTop = document.getElementById("toTop");
const header = document.querySelector('header');
const headerHeight = 3 * parseFloat(getComputedStyle(document.documentElement).fontSize);
function goToTop() {
header.classList.remove('scrolled-down');
window.scrollTo(0, 0);
}
function handleScroll() {
if (window.scrollY > scrollTransition) {
if (window.scrollY > headerHeight * .6) {
header.classList.add('scrolled-down');
} else {
header.classList.remove('scrolled-down');
}
if (document.body.scrollTop > scrollTransition * 7 || document.documentElement.scrollTop > scrollTransition * 7) {
if (document.body.scrollTop > window.innerHeight || document.documentElement.scrollTop > window.innerHeight) {
toTop.style.opacity = "0.4";
toTop.style.pointerEvents = "auto";
} else {
Expand Down
Loading

0 comments on commit 8e096f2

Please sign in to comment.