<div class="dynamic-island">
      <div class="camera"></div>
    </div>

<div class="status-bar">
      <span id="clock">9:41</span>

<div>
            <span class="welcome">GOOD MORNING</span>
            <h1>Alex.</h1>
          </div>

</header>

<div class="balance-top">
            <span>Total balance</span>

<div class="balance-change">
            <span>↑ 8.4%</span>
            <small>this month</small>
          </div>

</div>

<button class="action-button">
            <span>↓</span>
            Receive
          </button>

</div>

<h2>Recent activity</h2>

</div>

<div class="transaction-info">
              <strong>Netflix</strong>
              <span>Entertainment · Today</span>
            </div>

</div>

<div class="transaction-info">
              <strong>Salary</strong>
              <span>Income · Yesterday</span>
            </div>

</div>

<div class="transaction-info">
              <strong>Coffee House</strong>
              <span>Food · Sep 14</span>
            </div>

</div>

<div class="transaction-info">
              <strong>Spotify</strong>
              <span>Music · Sep 13</span>
            </div>

</div>

</section>

<div class="secondary-header">
          <span>INSIGHTS</span>
          <h1>Spending</h1>
          <p>Your monthly activity.</p>
        </div>

<span>SEPTEMBER</span>

<small>
            12% less than August
          </small>

</div>

</div>

</section>

<div class="secondary-header">
          <span>WALLET</span>
          <h1>My cards</h1>
          <p>Manage your payment methods.</p>
        </div>

<div class="card-row">
            <span>VANTA</span>
            <span>◉◉</span>
          </div>

<div class="card-bottom">
            <div>
              <small>CARD HOLDER</small>
              <strong>ALEX MORGAN</strong>
            </div>

<div>
              <small>EXPIRES</small>
              <strong>08/29</strong>
            </div>
          </div>

</div>

</section>

<h1>Alex Morgan</h1>
          <span>alex@example.com</span>

</div>

<button>
            <span>◎</span>
            Account settings
            <b>›</b>
          </button>

<button>
            <span>♢</span>
            Security
            <b>›</b>
          </button>

<button>
            <span>◌</span>
            Notifications
            <b>›</b>
          </button>

<button>
            <span>?</span>
            Help & Support
            <b>›</b>
          </button>

</div>

</section>

</div>

<button
        class="nav-button"
        data-screen="statsScreen"
      >
        <span>▥</span>
        Insights
      </button>

<button
        class="nav-button"
        data-screen="cardsScreen"
      >
        <span>▰</span>
        Cards
      </button>

<button
        class="nav-button"
        data-screen="profileScreen"
      >
        <span>○</span>
        Profile
      </button>

</nav>

</div>

/* ========================================
   RESET
======================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;

font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body {
  background:
    radial-gradient(
      circle at 50% 25%,
      #dce4ff,
      #b9c5e5 50%,
      #8d9ab9
    );
}

/* ========================================
   PAGE
======================================== */

.page {
  width: 100%;
  min-height: 100vh;

display: flex;
  align-items: center;
  justify-content: center;

padding: 40px;

overflow: hidden;
}

/* ========================================
   IPHONE
======================================== */

.iphone {
  position: relative;

width: 390px;
  height: 844px;

flex-shrink: 0;

overflow: hidden;

border: 9px solid #16171a;

border-radius: 55px;

background: #f7f7f9;

box-shadow:
    0 45px 100px rgba(19, 28, 55, .35),
    0 8px 25px rgba(0, 0, 0, .22),
    inset 0 0 0 2px #3e4045;
}

/* ========================================
   DYNAMIC ISLAND
======================================== */

.dynamic-island {
  position: absolute;

top: 11px;
  left: 50%;

z-index: 100;

width: 116px;
  height: 33px;

transform:
    translateX(-50%);

border-radius: 22px;

background: #050505;
}

.camera {
  position: absolute;

right: 10px;
  top: 10px;

width: 11px;
  height: 11px;

border-radius: 50%;

background:
    radial-gradient(
      circle,
      #17275a,
      #050505 70%
    );
}

/* ========================================
   STATUS BAR
======================================== */

.status-bar {
  position: absolute;

top: 0;
  left: 0;

z-index: 80;

width: 100%;
  height: 55px;

display: flex;
  align-items: center;
  justify-content: space-between;

padding:
    0 25px;

color: #111;

font-size: 11px;
  font-weight: 700;

pointer-events: none;
}

.status-icons {
  display: flex;

align-items: center;

gap: 6px;
}

.signal {
  font-size: 7px;

letter-spacing: -1px;
}

.battery {
  width: 21px;
  height: 10px;

padding: 1px;

border:
    1px solid #222;

border-radius: 3px;
}

.battery div {
  width: 75%;
  height: 100%;

border-radius: 1px;

background: #222;
}

/* ========================================
   APP CONTENT AREA
======================================== */

.app {
  position: absolute;

top: 55px;
  left: 0;
  right: 0;
  bottom: 86px;

overflow: hidden;

background: #f7f7f9;
}

.screen {
  display: none;

width: 100%;
  height: 100%;

overflow-x: hidden;
  overflow-y: auto;

padding:
    18px 20px 30px;

scrollbar-width: none;

-webkit-overflow-scrolling:
    touch;
}

.screen::-webkit-scrollbar {
  display: none;
}

.screen.active {
  display: block;

animation:
    screenIn .28s ease;
}

@keyframes screenIn {

from {
    opacity: 0;

transform:
      translateY(7px);
  }

to {
    opacity: 1;

transform:
      translateY(0);
  }

}

/* ========================================
   HOME HEADER
======================================== */

.app-header {
  display: flex;

align-items: center;
  justify-content: space-between;

margin-bottom: 22px;
}

.welcome {
  display: block;

margin-bottom: 3px;

color: #9a9da7;

font-size: 7px;
  font-weight: 700;

letter-spacing: 1.6px;
}

.app-header h1 {
  margin: 0;

color: #16171b;

font-size: 27px;

letter-spacing: -1.2px;
}

.avatar {
  position: relative;

width: 42px;
  height: 42px;

padding: 0;

border: 0;

border-radius: 50%;

background:
    linear-gradient(
      135deg,
      #ded5ff,
      #8d78e8
    );

color: white;

font-family: inherit;

font-weight: 700;

cursor: pointer;

outline: none;
}

.avatar span {
  position: absolute;

right: 1px;
  bottom: 1px;

width: 10px;
  height: 10px;

border:
    2px solid #f7f7f9;

border-radius: 50%;

background: #4fd38a;
}

/* ========================================
   BALANCE CARD
======================================== */

.balance-card {
  position: relative;

height: 190px;

overflow: hidden;

padding: 22px;

border-radius: 27px;

background:
    linear-gradient(
      135deg,
      #15171e,
      #282c3a
    );

color: white;

box-shadow:
    0 20px 40px
    rgba(22, 24, 35, .18);
}

.balance-top {
  position: relative;

z-index: 2;

display: flex;

align-items: center;
  justify-content: space-between;
}

.balance-top span {
  color:
    rgba(255, 255, 255, .5);

font-size: 10px;
}

.balance-top button {
  width: 30px;
  height: 30px;

display: grid;

place-items: center;

padding: 0;

border: 0;

border-radius: 50%;

outline: none;

background:
    rgba(255, 255, 255, .05);

color:
    rgba(255, 255, 255, .65);

cursor: pointer;

transition:
    background .2s ease;
}

.balance-top button:hover {
  background:
    rgba(255, 255, 255, .1);
}

.balance {
  position: relative;

z-index: 2;

margin-top: 14px;

color: white;

font-size: 35px;
  font-weight: 600;

letter-spacing: -1.5px;
}

.balance-change {
  position: relative;

z-index: 2;

margin-top: 9px;
}

.balance-change span {
  padding:
    4px 7px;

border-radius: 7px;

background:
    rgba(91, 223, 153, .13);

color: #71e6aa;

font-size: 8px;
}

.balance-change small {
  margin-left: 5px;

color:
    rgba(255, 255, 255, .3);

font-size: 8px;
}

.card-decoration {
  position: absolute;

border:
    1px solid
    rgba(255, 255, 255, .08);

border-radius: 50%;

pointer-events: none;
}

.card-decoration.one {
  width: 220px;
  height: 220px;

right: -90px;
  top: -90px;
}

.card-decoration.two {
  width: 160px;
  height: 160px;

right: -45px;
  top: -55px;
}

/* ========================================
   QUICK ACTIONS
======================================== */

.actions {
  display: grid;

grid-template-columns:
    repeat(4, 1fr);

gap: 12px;

margin:
    22px 0 28px;
}

.action-button {
  padding: 0;

border: 0;

outline: none;

background: transparent;

color: #656873;

font-family: inherit;

font-size: 8px;

cursor: pointer;
}

.action-button span {
  width: 48px;
  height: 48px;

display: grid;

place-items: center;

margin:
    0 auto 7px;

border:
    1px solid #e8e8ec;

border-radius: 16px;

background: white;

color: #202127;

font-size: 17px;

box-shadow:
    0 6px 15px
    rgba(20, 25, 40, .05);

transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.action-button:hover span {
  transform:
    translateY(-3px);

background: #f0efff;

box-shadow:
    0 9px 20px
    rgba(20, 25, 40, .08);
}

/* ========================================
   SECTION TITLE
======================================== */

.section-title {
  display: flex;

align-items: center;
  justify-content: space-between;

margin-bottom: 10px;
}

.section-title h2 {
  margin: 0;

color: #1d1e23;

font-size: 16px;
}

.section-title button {
  padding: 5px;

border: 0;

outline: none;

background: none;

color: #7664d9;

font-family: inherit;

font-size: 9px;

cursor: pointer;
}

/* ========================================
   TRANSACTIONS
======================================== */

.transactions {
  width: 100%;
}

.transaction {
  display: grid;

grid-template-columns:
    43px 1fr auto;

gap: 11px;

align-items: center;

min-height: 64px;

padding:
    11px 0;

border-bottom:
    1px solid #ebebee;
}

.transaction:last-child {
  border-bottom: 0;
}

.transaction-icon {
  width: 42px;
  height: 42px;

display: grid;

place-items: center;

border-radius: 14px;

font-size: 12px;
  font-weight: 700;
}

.purple {
  background: #eee9ff;

color: #715bd4;
}

.green {
  background: #e5f8ee;

color: #39a96c;
}

.orange {
  background: #fff0dd;

color: #d48830;
}

.blue {
  background: #e7efff;

color: #5578d3;
}

.transaction-info {
  min-width: 0;
}

.transaction-info strong {
  display: block;

overflow: hidden;

color: #24252a;

font-size: 11px;

white-space: nowrap;

text-overflow: ellipsis;
}

.transaction-info span {
  display: block;

margin-top: 3px;

overflow: hidden;

color: #a0a2aa;

font-size: 8px;

white-space: nowrap;

text-overflow: ellipsis;
}

.transaction-value {
  color: #2c2d31;

font-size: 10px;
  font-weight: 600;

white-space: nowrap;
}

.transaction-value.positive {
  color: #36aa6d;
}

/* ========================================
   SECONDARY SCREEN HEADERS
======================================== */

.secondary-header {
  padding-top: 8px;

margin-bottom: 25px;
}

.secondary-header > span {
  color: #999da7;

font-size: 7px;
  font-weight: 700;

letter-spacing: 1.6px;
}

.secondary-header h1 {
  margin:
    5px 0 2px;

color: #1c1d22;

font-size: 29px;

letter-spacing: -1.3px;
}

.secondary-header p {
  margin: 0;

color: #9699a2;

font-size: 9px;
}

/* ========================================
   INSIGHTS
======================================== */

.large-stat {
  padding: 23px;

border:
    1px solid
    rgba(0, 0, 0, .025);

border-radius: 22px;

background: white;

box-shadow:
    0 12px 30px
    rgba(25, 30, 50, .06);
}

.large-stat span,
.large-stat strong,
.large-stat small {
  display: block;
}

.large-stat span {
  color: #a1a4ad;

font-size: 7px;

letter-spacing: 1.3px;
}

.large-stat strong {
  margin-top: 7px;

color: #1d1e23;

font-size: 34px;

letter-spacing: -1.5px;
}

.large-stat small {
  margin-top: 4px;

color: #42ac72;

font-size: 8px;
}

/* ========================================
   CHART
======================================== */

.chart {
  height: 260px;

display: flex;

align-items: flex-end;

gap: 10px;

margin-top: 30px;

padding:
    0 5px 30px;
}

.chart > div {
  position: relative;

flex: 1;

height:
    var(--height);

border-radius:
    10px 10px 3px 3px;

background:
    linear-gradient(
      to top,
      #6555d9,
      #9d8ff4
    );

animation:
    barsIn .6s ease;
}

@keyframes barsIn {

from {
    height: 0;
  }

}

.chart span {
  position: absolute;

left: 50%;
  bottom: -21px;

transform:
    translateX(-50%);

color: #9b9da5;

font-size: 8px;
}

/* ========================================
   CREDIT CARD
======================================== */

.credit-card {
  height: 215px;

padding: 23px;

border-radius: 25px;

background:
    linear-gradient(
      135deg,
      #6856e5,
      #292557
    );

color: white;

box-shadow:
    0 25px 50px
    rgba(78, 65, 170, .28);
}

.card-row {
  display: flex;

align-items: center;
  justify-content: space-between;

font-size: 11px;
  font-weight: 700;

letter-spacing: 1px;
}

.chip {
  width: 38px;
  height: 29px;

margin-top: 30px;

border-radius: 7px;

background:
    linear-gradient(
      135deg,
      #e6ca80,
      #ad8b41
    );
}

.card-number {
  margin-top: 21px;

font-size: 13px;

letter-spacing: 1px;
}

.card-bottom {
  display: flex;

justify-content: space-between;

margin-top: 20px;
}

.card-bottom small,
.card-bottom strong {
  display: block;
}

.card-bottom small {
  color:
    rgba(255, 255, 255, .4);

font-size: 6px;
}

.card-bottom strong {
  margin-top: 3px;

color: white;

font-size: 8px;
}

.add-card {
  width: 100%;

margin-top: 20px;

padding: 14px;

border:
    1px solid #e3e3e7;

border-radius: 15px;

outline: none;

background: white;

color: #5550b8;

font-family: inherit;

font-size: 10px;

cursor: pointer;

transition:
    background .2s ease,
    transform .2s ease;
}

.add-card:hover {
  transform:
    translateY(-1px);

background: #f5f3ff;
}

/* ========================================
   PROFILE
======================================== */

.profile {
  padding:
    30px 0 28px;

text-align: center;
}

.profile-avatar {
  width: 75px;
  height: 75px;

display: grid;

place-items: center;

margin: auto;

border-radius: 50%;

background:
    linear-gradient(
      135deg,
      #9e8ef3,
      #5e4ec7
    );

color: white;

font-size: 23px;
  font-weight: 700;

box-shadow:
    0 14px 28px
    rgba(94, 78, 199, .2);
}

.profile h1 {
  margin:
    13px 0 3px;

color: #1d1e23;

font-size: 20px;
}

.profile > span {
  color: #999ca5;

font-size: 9px;
}

/* ========================================
   SETTINGS
======================================== */

.settings {
  overflow: hidden;

border:
    1px solid #e8e8eb;

border-radius: 20px;

background: white;
}

.settings button {
  width: 100%;

display: grid;

grid-template-columns:
    30px 1fr auto;

align-items: center;

padding: 14px;

border: 0;

border-bottom:
    1px solid #ededf0;

outline: none;

background: white;

color: #33343a;

font-family: inherit;

font-size: 10px;

text-align: left;

cursor: pointer;

transition:
    background .15s ease;
}

.settings button:hover {
  background: #faf9ff;
}

.settings button:last-child {
  border-bottom: 0;
}

.settings button > span {
  color: #6d5ed2;

font-size: 15px;
}

.settings button b {
  color: #aaaeb5;

font-size: 17px;
  font-weight: 400;
}

/* ========================================
   BOTTOM NAVIGATION
======================================== */

.bottom-nav {
  position: absolute;

left: 0;
  right: 0;
  bottom: 0;

z-index: 80;

width: 100%;
  height: 86px;

display: grid;

grid-template-columns:
    repeat(4, 1fr);

align-items: start;

padding:
    7px 10px 22px;

border-top:
    1px solid #e5e5e9;

background:
    rgba(250, 250, 252, .97);

backdrop-filter:
    blur(22px);

-webkit-backdrop-filter:
    blur(22px);
}

/* ========================================
   NAV BUTTONS
======================================== */

.nav-button {
  position: relative;

width: 100%;
  height: 52px;

display: flex;

flex-direction: column;

align-items: center;
  justify-content: center;

gap: 3px;

margin: 0;

padding: 0;

border: 0;

border-radius: 12px;

outline: none;

background: transparent;

color: #9a9da6;

font-family: inherit;

font-size: 7px;
  font-weight: 500;

line-height: 1;

cursor: pointer;

appearance: none;

-webkit-appearance: none;

-webkit-tap-highlight-color:
    transparent;

transition:
    color .2s ease,
    background .2s ease,
    transform .2s ease;
}

.nav-button span {
  display: block;

margin: 0 0 2px;

color: inherit;

font-size: 18px;

line-height: 18px;
}

.nav-button:hover {
  background:
    rgba(101, 84, 217, .045);

color: #7063c8;
}

.nav-button.active {
  background:
    rgba(101, 84, 217, .07);

color: #6554d9;
}

/*
  Prevents the large blue browser
  focus rectangle seen previously.
*/

.nav-button:focus {
  outline: none;

box-shadow: none;
}

/*
  Keep keyboard navigation accessible,
  but use a subtle focus indicator.
*/

.nav-button:focus-visible {
  outline:
    2px solid
    rgba(101, 84, 217, .3);

outline-offset: -2px;
}

/* ========================================
   HOME INDICATOR
======================================== */

.home-indicator {
  position: absolute;

left: 50%;
  bottom: 7px;

z-index: 100;

width: 120px;
  height: 4px;

transform:
    translateX(-50%);

border-radius: 999px;

background: #111;

pointer-events: none;
}

/* ========================================
   RESPONSIVE HEIGHT
======================================== */

@media (max-height: 900px) {

.iphone {
    transform:
      scale(.82);

transform-origin:
      center center;
  }

}

/* ========================================
   PHONE-SIZED VIEW
======================================== */

@media (max-width: 450px) {

html,
  body {
    overflow: hidden;
  }

.page {
    width: 100vw;
    height: 100vh;

min-height: 0;

padding: 0;
  }

.iphone {
    width: 100vw;
    height: 100vh;

border: 0;

border-radius: 0;

transform: none;

box-shadow: none;
  }

.bottom-nav {
    padding-bottom:
      max(
        22px,
        env(safe-area-inset-bottom)
      );
  }

}

/* -------------------------
   TAB NAVIGATION
-------------------------- */

const navButtons =
  document.querySelectorAll(
    ".nav-button"
  );

const screens =
  document.querySelectorAll(
    ".screen"
  );

navButtons.forEach(
  function(button) {

button.addEventListener(
      "click",
      function() {

const screenID =
          button.dataset.screen;

navButtons.forEach(
          function(item) {

item.classList.remove(
              "active"
            );

}
        );

screens.forEach(
          function(screen) {

screen.classList.remove(
              "active"
            );

}
        );

button.classList.add(
          "active"
        );

document
          .getElementById(
            screenID
          )
          .classList
          .add(
            "active"
          );

}
    );

}
);

/* -------------------------
   BALANCE PRIVACY
-------------------------- */

const eyeButton =
  document.getElementById(
    "eyeButton"
  );

const balance =
  document.getElementById(
    "balance"
  );

let balanceVisible =
  true;

eyeButton.addEventListener(
  "click",
  function() {

balanceVisible =
      !balanceVisible;

if (balanceVisible) {

balance.textContent =
        balance.dataset.value;

eyeButton.textContent =
        "◉";

} else {

balance.textContent =
        "••••••••";

eyeButton.textContent =
        "○";

}

}
);

/* -------------------------
   LIVE CLOCK
-------------------------- */

function updateClock() {

const now =
    new Date();

let hours =
    now.getHours();

let minutes =
    now.getMinutes();

hours =
    hours % 12 || 12;

minutes =
    String(minutes)
      .padStart(
        2,
        "0"
      );

document
    .getElementById(
      "clock"
    )
    .textContent =
      hours +
      ":" +
      minutes;

}

updateClock();

setInterval(
  updateClock,
  30000
);

/* -------------------------
   ACTION BUTTON FEEDBACK
-------------------------- */

const actionButtons =
  document.querySelectorAll(
    ".action-button"
  );

actionButtons.forEach(
  function(button) {

button.addEventListener(
      "click",
      function() {

const icon =
          button.querySelector(
            "span"
          );

icon.animate(
          [
            {
              transform:
                "scale(1)"
            },

{
              transform:
                "scale(.88)"
            },

{
              transform:
                "scale(1)"
            }
          ],
          {
            duration: 220
          }
        );

}
    );

}
);

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground