HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

76x19

1.61 KB

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Discipline Workout App</title>

<style>
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:#0e0e11;
  color:#fff;
}

/* COMMON */
.hidden{display:none}
.center{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100vh;
  text-align:center;
}

/* LOGIN */
input{
  width:220px;
  padding:10px;
  margin:8px 0;
  border-radius:6px;
  border:none;
}
button{
  padding:10px 24px;
  background:#ffa500;
  border:none;
  border-radius:20px;
  font-weight:bold;
  cursor:pointer;
}
button:hover{opacity:.9}

/* STRIKE BAR */
.strike-bar{
  position:fixed;
  top:15px;
  right:20px;
  background:#1c1c22;
  padding:10px 18px;
  border-radius:20px;
  font-weight:bold;
  box-shadow:0 0 12px rgba(255,165,0,.5);
  cursor:pointer;
  z-index:10;
}
.strike-bar span{color:#ffa500}

/* MODAL */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:20;
}
.modal-content{
  background:#16161c;
  padding:20px;
  width:90%;
  max-width:620px;
  border-radius:14px;
  max-height:80vh;
  overflow-y:auto;
}

/* TROPHIES */
.trophy-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:15px;
}
.trophy{
  text-align:center;
  opacity:.25;
  transition:.3s;
}
.trophy.unlocked{
  opacity:1;
  color:gold;
  animation:glow 1.5s infinite alternate;
}
.trophy.perfect{
  opacity:1;
  color:#ffd700;
  animation:pulse 1.2s infinite;
}

@keyframes glow{
  from{text-shadow:0 0 5px gold}
  to{text-shadow:0 0 15px gold}
}
@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.12)}
  100%{transform:scale(1)}
}

/* BLOCK PAGE */
img{max-width:250px;margin:20px 0}
.insta{color:#ffa500;font-weight:bold}
</style>
</head>

<body>

<!-- LOGIN PAGE -->
<div id="loginPage" class="center">
  <h2>Login Required</h2>
  <input id="uid" placeholder="User ID">
  <input id="pwd" type="password" placeholder="Password">
  <button onclick="login()">LOGIN</button>
</div>

<!-- MAIN APP -->
<div id="mainApp" class="hidden">
  <div class="strike-bar" onclick="openAchievements()">
    STRIKE: <span id="strikeCount">0</span>
  </div>
  <div class="center">
    <h2>Workout Program Active</h2>
    <p>Discipline decides results.</p>
  </div>
</div>

<!-- BLOCKED PAGE -->
<div id="blockedPage" class="center hidden">
  <img src="scanner.png" alt="Scanner">
  <h3>PLEASE ASK ID AND PASS FROM ADMIN</h3>
  <p>Contact:</p>
  <p class="insta">s__vishu3108</p>
</div>

<!-- ACHIEVEMENTS MODAL -->
<div id="achievementModal" class="modal">
  <div class="modal-content">
    <h3 style="text-align:center">30-Day Discipline Achievements</h3>
    <div class="trophy-grid" id="trophyGrid"></div>
    <div style="text-align:center;margin-top:15px">
      <button onclick="closeAchievements()">Close</button>
    </div>
  </div>
</div>

<script>
/* VALID USERS */
const USERS={
  keshav:"bauna",
  admin:"admin1234"
};

const TOTAL_DAYS=30;

/* USER DATA */
let completedDays=JSON.parse(localStorage.getItem("completedDays"))||[];
let strike=parseInt(localStorage.getItem("strike"))||0;

/* LOGIN */
function login(){
  const u=uid.value.trim();
  const p=pwd.value.trim();

  if(USERS[u] && USERS[u]===p){
    loginPage.classList.add("hidden");
    mainApp.classList.remove("hidden");
    strikeCount.innerText=strike;
  }else{
    loginPage.classList.add("hidden");
    blockedPage.classList.remove("hidden");
  }
}

/* ACHIEVEMENTS */
function openAchievements(){
  renderTrophies();
  achievementModal.style.display="flex";
}
function closeAchievements(){
  achievementModal.style.display="none";
}
function renderTrophies(){
  trophyGrid.innerHTML="";
  for(let d=1;d<=TOTAL_DAYS;d++){
    const t=document.createElement("div");
    t.className="trophy";
    if(completedDays.includes(d)){
      t.classList.add(d<=strike?"perfect":"unlocked");
    }
    t.innerHTML=`🏆<div>DAY ${d}</div>`;
    trophyGrid.appendChild(t);
  }
}

/* ---- SAMPLE DEMO DATA (REMOVE IN PRODUCTION) ---- */
/*
localStorage.setItem("completedDays",JSON.stringify([1,2,3,4,5]));
localStorage.setItem("strike","5");
*/
</script>

</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

5KB

Transfer Size

5KB

Content Size

104.0ms

Dom Content Loaded

192.0ms

First Paint

110.0ms

Load Time

Domain Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests