Edit Topic

Prose

View

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ForeverPromise</title>
<style>
:root { --brand:#b9972c; --brand-2:#d4af37; --gold-50:#fdfcf6; --gold-500:#c2a94d; --gold-600:#8a6f1a; --navy-600:#1b2a49; --navy-700:#152038; --surface:#fff; --shadow:0 2px 5px rgba(0,0,0,.08); --measure:680px; }
html, body { overflow:hidden; -webkit-overflow-scrolling:touch; -webkit-text-size-adjust:100%; font-family: Georgia,"Source Serif Pro",serif; background:#fff; color:var(--navy-700); margin:0; padding:0; }
@supports (height:100svh){ html{height:-webkit-fill-available;} body{min-height:100svh;} }
@supports not (height:100svh){ html{height:-webkit-fill-available;} body{min-height:-webkit-fill-available;} }

header { max-width:var(--measure); margin:0 auto; }
h1 { text-align:center; color:var(--gold-600); font-weight:700; font-size:2rem; margin:0 0 1rem; }
p { margin:1em 0; line-height:1.6; }
p.lead { font-size:1.75rem; }
.dropcap:first-letter { float:left; font-size:2.6rem; font-weight:700; color:var(--brand); margin:.1rem .45rem 0 0; line-height:1; }
h2, h3 { color:var(--navy-600); font-size:1.57rem; border-bottom:2px solid var(--brand); padding-bottom:.25em; margin-top:1.75em; }
a { color:var(--navy-600); text-decoration:underline; }
blockquote { background:#fffaf1ff; border-left:4px solid var(--gold-500); margin:1.5em 0; padding:.75em 1em; font-style:italic; }
.pullquote { font-size:1.75rem; font-weight:600; color:var(--gold-600); margin:1.5em 0; text-align:center; }
.scripture { background:#fffaf1ff; border-left:4px solid var(--navy-600); padding:.75em 1em; margin:1.5em 0; font-style:italic; }
.scripture .ref { display:block; text-align:right; font-style:normal; font-weight:600; margin-top:.5em; }
ul { padding-left:0; margin:1em 0 1em 0; }
ul li { list-style:none; text-align:left; margin:0 0 1em 1.25rem; font-size:1.2rem; line-height:1.1; }
ul li::before { content:"• "; color:var(--brand); margin-right:.25rem; }
.summary-box { background:#fffaf1ff; border:1px solid var(--gold-500); padding:1em; border-radius:8px; margin:1.5em 0; }
body, article { overflow-wrap:anywhere; word-break:break-word; }
img, svg, video, iframe { max-width:100%; height:auto; display:block; }
pre { white-space:pre-wrap; overflow:auto; }
body, header, article { overflow-x:clip; }

/* ----- Video Overlay ----- */
#videoOverlay {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.8); z-index: 9999; padding: 2vw;
}
#videoOverlay.active { display: flex; }

.video-container {
  position: relative;
  max-width: min(1000px, 94vw);
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto;
}

.video-container video {
  position: relative;          /* ensure it sits beneath the button */
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; background:#000;
}

/* Close button above video, small & rounded, right-flush */
#closeBtn {
  position: absolute; top: 8px; right: 8px;
  z-index: 3;                   /* above the video */
  padding: .35rem .55rem;
  font-size: .9rem; line-height: 1;
  background: rgba(21,32,56,0.9);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  user-select: none;
}
#closeBtn:hover { background: rgba(21,32,56,1); }

/* Fallback rotation if orientation lock fails */
.video-container.rotate {
  transform: rotate(90deg);
  transform-origin: center center;
  max-height: 100vh;
}
</style>
</head>
<body>
  <h1>ForeverPromise</h1>
  <h2>Find Peace. Discover Purpose. Experience Life Forever.</h2>

<p class="lead dropcap">If you’ve ever wondered why life feels empty, why peace seems so far away, or what your purpose really is — you’re not alone. ForeverPromise exists to help you explore life’s biggest questions and discover the God who made you, knows you, and loves you deeply.</p>
  <p>Here, you’ll find short, meaningful articles that speak to the heart — about finding peace, healing from pain, overcoming fear, and discovering lasting hope through a relationship with God.</p>

<h2>What You’ll Find</h2>
  <ul>
    <li><strong>How to Find Peace</strong> — When life feels heavy or uncertain</li>
    <li><strong>Who God Really Is</strong> — And how His love changes everything</li>
    <li><strong>Why the World Leaves Us Empty</strong> — And how only God can fill that space</li>
    <li><strong>Healing for the Heart</strong> — Hope for the broken, lonely, and grieving</li>
    <li><strong>Life Beyond This Life</strong> — What heaven, eternity, and real joy look like</li>
  </ul>

<p>Each article is written to help you take the next step toward truth, freedom, and a life that never ends.</p>

<h2>A Place to Begin</h2>
  <p>No matter what you believe or where you’ve been, this is a safe place to explore faith and ask honest questions. Start with these popular readings:</p>
  <ul>
    <li><strong><a href="https://www.forever-promise.com/RedemptionProse.php?Topic_ID=10002/">Everything Will Be Alright</a></strong></li>
  </ul>

<h2>Ready to Know God Personally?</h2>
  <p>You don’t have to have it all figured out. God is reaching out to you — offering peace today and life forever.</p>
  <p><strong>Watch the short video below</strong> to learn how you can begin a relationship with Him right now.</p>

<p align="center">
    <button id="openOverlayBtn" class="btnew7ew btn-primaryew">Watch Video</button>
  </p>

<div id="videoOverlay" aria-hidden="true">
    <div class="video-container" id="videoContainer" role="dialog" aria-modal="true" aria-label="Gospel video">
      <button id="closeBtn" type="button" aria-label="Close video">✕</button>
      <video id="gospelVideo" src="Gospel.mp4" controls playsinline></video>
    </div>
  </div>

function isMobile() {
      return ('ontouchstart' in window)
             && /Mobi|Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(navigator.userAgent);
    }

async function requestLandscapeFullscreen() {
      if (!videoOverlay.requestFullscreen) return false;
      try {
        await videoOverlay.requestFullscreen({ navigationUI: 'hide' });
        if (screen.orientation && screen.orientation.lock) {
          await screen.orientation.lock('landscape');
        }
        return true;
      } catch { return false; }
    }

function applyCssRotationIfPortrait() {
      const isPortrait = window.innerHeight > window.innerWidth;
      videoContainer.classList.toggle('rotate', isPortrait);
    }

// OPEN
    openOverlayBtn.addEventListener('click', async () => {
      videoOverlay.classList.add('active');
      videoOverlay.setAttribute('aria-hidden', 'false');
      try { await gospelVideo.play(); } catch {}

if (isMobile()) {
        const success = await requestLandscapeFullscreen();
        if (!success) applyCssRotationIfPortrait();
      }
    });

// CLOSE helpers
    function closeOverlay() {
      videoOverlay.classList.remove('active');
      videoOverlay.setAttribute('aria-hidden', 'true');
      gospelVideo.pause();
      gospelVideo.currentTime = 0;
      if (document.fullscreenElement) document.exitFullscreen().catch(() => {});
      videoContainer.classList.remove('rotate');
    }

// Close button
    closeBtn.addEventListener('click', (e) => {
      e.stopPropagation(); // prevent backdrop handler from interfering
      closeOverlay();
    });

// Backdrop click (outside the video frame)
    videoOverlay.addEventListener('click', (e) => {
      if (!videoContainer.contains(e.target)) closeOverlay();
    });

// Esc key
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && videoOverlay.classList.contains('active')) closeOverlay();
    });

// Orientation changes while open
    function onOrientationOrResize() {
      if (!videoOverlay.classList.contains('active') || !isMobile()) return;
      applyCssRotationIfPortrait();
    }
    window.addEventListener('orientationchange', onOrientationOrResize);
    window.addEventListener('resize', onOrientationOrResize);
  });
  </script>

<script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap-4.4.1.js"></script>
</body>
</html>

Edit Topic ID: 10003

All Topics