Oh boy................. this is a lot. please keep credits visible, you can move it though.
replace <i class="..."> with your own icons from here

⎗
✓
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Blah</title>
    <style>
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"); /* https://icons.getbootstrap.com/ */
    :root {
    --lighter:#fff2e9;
    --darker:#dff1ed;
    --background:#f7f8f1;
    --c1:#d9c5d2;
}
* {
    box-sizing:border-box;
    margin:0;
    padding:0;
    transition:200ms;
}
@font-face {
    src:url('https://file.garden/ZUU1j1qDEGvQiGRS/fonts/VCR_OSD_MONO_1.001.ttf');
    font-family:'VCR';
}
body {
    height:100vh;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
#outer-container {
    width:max-content;
    height:max-content;
}
#outer {
    border:2px solid black;
    padding:.5rem;
    width:fit-content;
    margin:auto;
    border-radius:30px;
    background:linear-gradient(0deg,var(--lighter) 0%,var(--darker) 40%,var(--darker) 60%,var(--lighter) 100%);
}
#secondary {
    border:2px solid black;
    padding:.8rem;
    width:fit-content;
    border-radius:30px;
    background:white
}
#screen {
    border:2px solid black;
    background-color:var(--background);
    background-image:url('https://i.pinimg.com/564x/5e/8b/dc/5e8bdcb7b60b28da08d44a2fc6c7a225.jpg'); /* replace */
    aspect-ratio:9 / 16;
    width:200px;
    padding:.4rem;
    border-radius:15px;
    background-repeat:no-repeat;
    background-size:150%;
    overflow:scroll;
}
#time {
    font-family:'VCR';
    color:white;
    text-shadow:1px 0 black,-1px 0 black,0 1px black,0 -1px black,0 0 3px black;
    font-size:2.5rem;
    margin:.7rem auto 1rem;
    display:block;
    width:fit-content;
    position:sticky;
    transition:200ms;
}
#time:hover {
    transform:scale(1.2)
}
/* Define the initial and animated states */
        .home {
    transform:translateX(0);
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:700ms;
}
/* Define the active class to move the block */
        .home.active {
    transform:translatey(-200%) scale(.1);
    filter:opacity(0);
    height:0%;
    /* Adjust the value to your needs */
}
.home:last-child {
    margin-top:.5rem;
    color:orange!important;
}
i {
    font-size:1.2rem
}
.lockbtn {
    margin:auto;
    display:block;
    width:1.8rem;
    height:1.8rem;
    padding:0;
}
#bottombar {
    position:absolute;
    /* bottom:10px;
    */
    left:calc(50% - 1rem);
    transform:translateY(300px);
    z-index:9999;
}
#date {
    background:linear-gradient(45deg,transparent,var(--c1),transparent);
    border-radius:20%;
    color:white;
    text-shadow:1px 0 black,-1px 0 black,0 1px black,0 -1px black;
    margin:10px auto -5px
}
.subtxt {
    color:white;
    text-shadow:1px 0 black,-1px 0 black,0 1px black,0 -1px black;
}
.lockbtn {
    padding:0;
    background:transparent;
    color:white;
    border:0;
    transition:200ms;
    text-shadow:1px 0 black,-1px 0 black,0 1px black,0 -1px black;
}
.lockbtn:hover {
    text-shadow:1px 0 black,-1px 0 black,0 1px black,0 -1px black,0 0 5px black;
    color:#fff;
}
.screen2 {
    display:none;
    flex-direction:column;
    align-items:center;
}
.screen2.active {
    display:flex!important;
}
.card {
    padding:1rem;
    border:1px solid black;
    background:white;
    border-radius:8px;
}
.app {
    width:2.5rem;
    height:2.5rem;
    background:white;
    padding:0;
    box-shadow:0 0 3px black,inset 1px 1px 2px #d2e2ffb8,inset -1px -1px 2px #3c3c3ca1,inset 0px -4px 8px -1px #808080a3;
    box-shadow:0 0 1px black;
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-items:center;
}
.app:hover {
    box-shadow:0 0 3px black;
    transform:scale(1.1)
}
.app:hover > .appsubtxt {
    transform:translateY(calc(1.4rem - 10%)) scale(.9);
}
.flex {
    display:flex
}
.approw {
    width:100%;
    justify-content:space-around;
    margin-top:1rem
}
.appsubtxt {
    transform:translateY(1.4rem);
    display:block;
    text-align:center;
    color:black;
    text-shadow:1px 0 white,-1px 0 white,0 1px white,0 -1px white;
}
.widget {
    color:black;
    text-shadow:1px 0 white,-1px 0 white,0 1px white,0 -1px white;
    width:100%;
    height:5rem;
    box-shadow:0 0 3px black;
    background-size:cover;
    background-position:top;
}
.app > i {
    position:relative;
    top:.6rem;
    color:#abcdd4!important;
}
#secondary::after {
    content: 'cr  wrefn';
    color: inherit;
    opacity: .2;
    font-family: inherit;
    display: block;
    margin: auto;
    width: fit-content;
    line-height: 1;
    translate: 0 5px;
    }
</style>
</head>
<body onload="startTime()">
      <div id="outer-container">
        <!-- all HTML content goes here -->
        <div id="outer">
          <div id="secondary">
            <div id="screen">
              <div id="bottombar">
                <a href="#" tabindex="-1">
                  <button onclick="unlock()" class="lockbtn">
                    <i class="bi lockicon bi-lock-fill">
                    </i>
                  </button>
                </a>
              </div>
              <div class="home">
                <div id="date">
                </div>
                <div id="time">
                </div>
              </div>
              <div class="screen2">
                <div class="card widget" style="background: center center / cover no-repeat url('YOUR_URL')">
                  <h3>
                    header 3
                  </h3>
                  <div class="inner" style="max-height: 2rem; overflow:scroll">
                    styff here
                  </div>
                </div>
                <span class="subtxt">
                  widget
                </span>
                <span class="flex approw">
                  <a href="#" target="_blank">
                    <div class="card app">
                      <i class="bi bi-person-circle">
                      </i>
                      <span class="subtxt appsubtxt">
                        link
                      </span>
                    </div>
                  </a>
                  <a href="#" target="_blank">
                    <div class="card app">
                      <i class="bi bi-link-45deg">
                      </i>
                      <span class="subtxt appsubtxt">
                        lalala
                      </span>
                    </div>
                  </a>
                  <a href="#" target="_blank">
                    <div class="card app">
                      <i class="bi bi-braces">
                      </i>
                      <span class="subtxt appsubtxt">
                        hie
                      </span>
                    </div>
                  </a>
                </span>
                <span class="flex approw" style="margin-top: 2rem;">
                  <a href="#" target="_blank">
                    <div class="card app">
                      <i class="bi bi-pinterest">
                      </i>
                      <span class="subtxt appsubtxt">
                        🪿
                      </span>
                    </div>
                  </a>
                  <a href="#" target="_blank">
                    <div class="card app">
                      <i class="bi bi-chat-heart">
                      </i>
                      <span class="subtxt appsubtxt">
                        yep
                      </span>
                    </div>
                  </a>
                  <a href="#" target="_blank">
                    <div class="card app">
                      <i class="bi bi-discord">
                      </i>
                      <span class="subtxt appsubtxt">
                        ya
                      </span>
                    </div>
                  </a>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
<script>
function unlock() {
  const block = document.querySelector('.home');
  block.classList.toggle('active');

  const lock = document.querySelector('.lockicon');
  lock.classList.toggle('bi-unlock-fill');

  const umm = document.querySelector('.screen2');
  umm.classList.toggle('active');

}
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  m = checkTime(m);
  document.getElementById('time').innerHTML = h + ":" + m;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i
  }
  return i;
}

const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const currentDate = new Date();

const dayOfWeek = days[currentDate.getDay()];
const dayOfMonth = currentDate.getDate();
const month = months[currentDate.getMonth()];

const formattedDate = `${dayOfWeek}, ${month} ${dayOfMonth}`;
document.getElementById('date').innerText = formattedDate;
</script>
</body>
</html>
Edit
Pub: 02 Oct 2024 20:04 UTC
Views: 88