DoomLock.html

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>DoomLock — The Analog Screen-Time App</title>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&display=swap" rel="stylesheet">


<style>

*{
margin:0;
padding:0;
box-sizing:border-box;
}


html{
scroll-behavior:smooth;
}


body{
background:#000;
color:#fff;
font-family:'Inter',sans-serif;
overflow-x:hidden;
}


nav{
position:fixed;
top:0;
left:0;
right:0;
height:80px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 6%;
background:rgba(0,0,0,.8);
backdrop-filter:blur(20px);
border-bottom:1px solid #222;
z-index:1000;
}


.logo{
font-size:22px;
font-weight:900;
letter-spacing:6px;
}


.nav-link{
color:#888;
text-decoration:none;
font-size:14px;
}





/* HERO */


.hero{

min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:130px 20px 50px;

}


.hero small{

letter-spacing:8px;
color:#777;

}


.hero h1{

font-size:clamp(45px,8vw,90px);
font-weight:900;
line-height:.95;
letter-spacing:-5px;
margin-top:30px;

}


.hero p{

max-width:650px;
font-size:22px;
line-height:1.6;
color:#999;
margin-top:30px;

}





/* PATENT PRODUCT */

.patent-diagram{

position:relative;
width:520px;
height:720px;
margin:80px auto;
font-family:monospace;
color:white;

}



.fig-title{

text-align:center;
font-size:18px;
font-weight:bold;
margin-bottom:30px;

}




.phone-box{

position:absolute;
left:160px;
top:70px;

width:210px;
height:390px;

border:4px solid white;
border-radius:25px;

background:#050505;

}



.screen-box{

position:absolute;
inset:20px;

border:2px solid #777;
border-radius:15px;

padding-top:60px;

}



.screen-bar{

height:30px;
margin:15px;
background:#333;

}




.thumb-mark{

position:absolute;
bottom:40px;
right:20px;

font-size:30px;

}





.usb-port-mark{

position:absolute;
bottom:-10px;
left:80px;

width:45px;
height:8px;

background:white;

}





.usb-label{

position:absolute;
left:50px;
top:480px;

font-size:12px;

}





.adapter-box{

position:absolute;

left:235px;
top:470px;

border:3px solid white;

padding:15px;

font-size:12px;

}





.band-line{


position:absolute;

left:270px;
top:540px;


width:170px;
height:120px;


border-left:8px solid white;
border-bottom:8px solid white;

border-radius:0 0 80px 80px;


}





.loop-circle{


position:absolute;

right:50px;
top:520px;


width:100px;
height:100px;


border:6px solid white;

border-radius:50%;

text-align:center;

padding-top:25px;

font-size:11px;


}





.hand-outline{


position:absolute;

left:80px;
bottom:110px;


width:150px;
height:80px;


border:3px solid #888;

border-radius:80px;


text-align:center;

padding-top:20px;

font-size:12px;

}





.callout{

position:absolute;

color:#aaa;

font-size:12px;

}



.device{

left:20px;
top:180px;

}



.band{

right:0;
top:600px;

}





.patent-footer{


position:absolute;

bottom:0;

width:100%;

text-align:center;

font-size:12px;

color:#aaa;


}

/* BUTTON */


.btn{

margin-top:30px;
padding:18px 45px;
border:none;
border-radius:50px;
background:white;
color:black;
font-weight:700;
font-size:16px;
cursor:pointer;

}

</style>

</head>


<body>


<nav>

<div class="logo">
DOOMLOCK
</div>


<a href="#why" class="nav-link">
THE ANTI-APP
</a>


</nav>





<section class="hero">


<small>
DOOMLOCK
</small>


<h1>
The world's first<br>
analog screen-time app.
</h1>



<p>
A USB-C resistance loop that physically fights your scrolling habit.
Every swipe requires commitment.
</p>

<div class="patent-diagram">


    <div class="fig-title">
        DOOMLOCK — FIG. 1
    </div>



    <div class="phone-box">


        <div class="screen-box">

            <div class="screen-bar"></div>
            <div class="screen-bar"></div>
            <div class="screen-bar"></div>


            <div class="thumb-mark">
                👆
            </div>

        </div>



        <div class="usb-port-mark">
            
        </div>


    </div>





    <div class="usb-label">

        101<br>
        USB-C PORT

    </div>




    <div class="adapter-box">

        102<br>
        ADAPTER

    </div>





    <div class="band-line">

    </div>



    <div class="loop-circle">

        104<br>
        THUMB LOOP

    </div>






    <div class="hand-outline">


        HAND<br>
        HOLDING<br>
        PHONE


    </div>







    <div class="callout device">

        105<br>
        MOBILE DEVICE

    </div>



    <div class="callout band">

        103<br>
        4MM SILICONE<br>
        RESISTANCE BAND

    </div>







    <div class="patent-footer">


        ───────────────────────


        <br>


        DOOMLOCK<br>


        ANALOG SCREEN-TIME<br>
        RESISTANCE DEVICE


        <br><br>


        FIG. 1 — USB-C THUMB CONTROL ASSEMBLY


    </div>



</div>


<button class="btn" onclick="notifyUser()">

Notify Me

</button>


</section>








<section id="why">


<h2 class="title">

Why DoomLock?

</h2>


<p class="description">

Infinite scrolling works because it has zero friction.
DoomLock adds a physical pause between impulse and action.

</p>




<div class="cards">



<div class="card">

<h3>
🧠 Conscious Scrolling
</h3>

<p>
The only screen-time tool you can actually feel.
</p>

</div>





<div class="card">

<h3>
💪 Accidental Fitness
</h3>

<p>
Clinically engineered to question your life choices.
</p>

</div>





<div class="card">

<h3>
🔋 Zero Technology
</h3>

<p>
Battery-free.<br>
AI-free.<br>
Bluetooth-free.
</p>

</div>



</div>


</section>








<section>


<h2 class="title">

Resistance Modes

</h2>


<div class="modes">


<div>
Casual Reddit
</div>


<div>
Instagram Athlete
</div>


<div>
TikTok Addiction
</div>


<div>
Election Season
</div>


<div>
Breakup Mode
</div>


</div>


</section>









<section class="story">


<h2>
Congratulations.
</h2>


<p>

Your screen-time app clearly wasn't enough.

<br><br>

So we added physical consequences.

<br><br>

Every swipe now requires commitment.

<br><br>

Scroll less.<br>
Think more.<br>
Accidentally get a stronger thumb.

</p>


</section>








<section>


<h2 class="title">

Premium Engineering

</h2>




<div class="spec">


<p>
Material
<span>
Military-grade silicone
</span>
</p>


<p>
Connection
<span>
USB-C attachment
</span>
</p>



<p>
Power
<span>
Battery-free
</span>
</p>



<p>
Wireless
<span>
Bluetooth-free
</span>
</p>



<p>
Subscription
<span>
Never
</span>
</p>



<p>
Compatibility
<span>
100% compatible with guilt
</span>
</p>



</div>


</section>








<section class="cta">


<h2>
Stop Doomscrolling.
</h2>


<p>
Because self-control needed hardware.
</p>


<button class="btn" onclick="notifyUser()">

Join Waiting List

</button>


</section>







<footer>


<strong>
DOOMLOCK
</strong>


<p>
The world's first analog screen-time app.
</p>


<br>


<p>
Scroll less. Think more.
</p>


<br>


<p>
© 2026 DoomLock
</p>


</footer>







<style>


.title{

text-align:center;
font-size:clamp(35px,5vw,60px);
font-weight:900;
margin-bottom:30px;

}



.description{

max-width:700px;
margin:auto;
text-align:center;
color:#999;
line-height:1.8;
font-size:18px;

}




section{

width:min(1200px,90%);
margin:auto;
padding:100px 0;

}





.cards{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:60px;

}



.card{

background:#0b0b0b;
border:1px solid #222;
padding:35px;
border-radius:25px;

}


.card p{

color:#999;
margin-top:15px;
line-height:1.7;

}





.modes{

display:flex;
justify-content:center;
flex-wrap:wrap;
gap:15px;

}


.modes div{

border:1px solid #333;
padding:15px 25px;
border-radius:50px;

}





.story{

text-align:center;
background:#050505;
border-top:1px solid #222;
border-bottom:1px solid #222;

}


.story h2{

font-size:60px;
font-weight:900;

}



.story p{

margin-top:40px;
font-size:22px;
line-height:1.8;
color:#999;

}




.spec{

max-width:650px;
margin:auto;

}


.spec p{

display:flex;
justify-content:space-between;
border-bottom:1px solid #222;
padding:20px 0;

}


.spec span{

color:#888;

}





.cta{

text-align:center;

}


.cta h2{

font-size:clamp(45px,7vw,80px);
font-weight:900;

}


.cta p{

color:#999;
margin:25px;

}





footer{

text-align:center;
padding:70px 20px;
border-top:1px solid #222;
color:#777;

}



footer strong{

display:block;
font-size:24px;
letter-spacing:6px;
color:white;
margin-bottom:20px;

}







@media(max-width:900px){


.cards{

grid-template-columns:1fr;

}



.patent-view{

transform:scale(.75);

margin-left:-40px;

}


}



@media(max-width:500px){


.patent-view{

transform:scale(.6);

height:400px;

}



.hero h1{

letter-spacing:-2px;

}



.hero p{

font-size:17px;

}



.spec p{

flex-direction:column;
gap:10px;

}


}




</style>







<script>


function notifyUser(){

alert(
"🚀 DoomLock is coming soon.\n\nYour thumb has been notified."
);

}


</script>



</body>

</html>