<div class="box">
    <div class="inner">
        <div class="island_popup">
            <div class="content">
                <div class="details">
                    <div class="imgBx">
                        <img src="https://mankeung.gitee.io/static/image/mankeung.webp">
                    </div>
                    <p>mankeung</p>
                </div>
                <div class="action">
                    <ion-icon name="call" class="red"></ion-icon>
                    <ion-icon name="call" class="green"></ion-icon>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="iphone-case case-1">
                <div class="gradient-1"></div>
                <div class="gradient-2"></div>
            </div>
        </div>
    </div>
    <i class="btn btn1"></i>
    <i class="btn btn2"></i>
    <i class="btn btn3"></i>
    <i class="rightSideBtn"></i>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #fff;
}

.box {
  position: relative;
  width: 300px;
  height: 600px;
  background: #666;
  border-radius: 50px;
}

.box::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: #000;
  border-radius: 48px;
}

.inner {
  position: absolute;
  inset: 3px;
  background: url(bg.jpg);
  background-size: cover;
  background-position: center;
  border-radius: 48px;
  border: 10px solid #000;
  display: flex;
  justify-content: center;
  opacity: 1;
  transition: 0.5s;
}

.btn {
  position: absolute;
  top: 110px;
  left: -2px;
  width: 3px;
  height: 26px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background: radial-gradient(#ccc, #666, #222);
  z-index: 10;
}

.btn.btn2 {
  top: 160px;
  height: 40px;
}

.btn.btn3 {
  top: 220px;
  height: 40px;
}

.rightSideBtn {
  position: absolute;
  top: 170px;
  right: -2px;
  width: 3px;
  height: 70px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  background: radial-gradient(#ccc, #666, #222);
  z-index: 10;
}

.island_popup {
  position: absolute;
  z-index: 33;
  top: 26px;
  width: 80px;
  height: 25px;
  background: #000;
  border-radius: 20px;
  transition: 0.5s ease-in-out;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.island_popup:hover {
  width: 200px;
  height: 25px;
}

.island_popup.active {
  width: 240px;
  height: 60px;
  border-radius: 50px;
}

.content {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 10px;
  line-height: 25px;
}

.content p {
  color: #fff;
  font-size: 0.6em;
  cursor: default;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
}

.action {
  position: relative;
  top: 5px;
  color: #fff;
  display: flex;
  gap: 12px;
  transition: 0.5s;
  visibility: hidden;
  opacity: 0;
}

.island_popup.active .action {
  top: 12px;
}

ion-icon.red {
  color: #fd443b;
  transform: rotate(135deg);
  cursor: pointer;
  transition: 0.5s;
}

ion-icon.green {
  color: #31d059;
  cursor: pointer;
  transition: 0.5s;
}

.island_popup:hover p,
.island_popup.active p,
.island_popup:hover .action,
.island_popup.active .action {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.25s;
}

.island_popup.active ion-icon.red {
  background: #fd443b;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 8px #fd443b;
  margin-right: 12px;
}

.island_popup.active ion-icon.green {
  background: #31d059;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 8px #31d059;
  margin-right: 8px;
}

.details {
  position: relative;
  display: flex;
  align-items: center;
}

.details .imgBx {
  position: relative;
  width: 0;
  height: 0;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  transition: 0.5s;
}

.island_popup.active .details .imgBx {
  width: 40px;
  height: 40px;
  margin-right: 8px;
}

.details .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  color: white;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

.container {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.iphone-case {
  --border-radius-outer: 2rem;
  --outer-padding: 0.5rem;
  --case-color: hsl(0, 0%, 0%);
  --border-radius-inner: calc(var(--border-radius-outer) - var(--outer-padding));
  box-shadow: 0px 0px 0px 2px white;
  background-color: var(--case-color);
  border-radius: var(--border-radius-outer);
  padding: var(--outer-padding);
  width: 100%;
  aspect-ratio: 1/2;
  position: relative;
  margin-inline: auto;
}

.iphone-case>div {
  --start-color: hsl(0, 0%, 0%);
  --shadow-x: 2px;
  height: 50%;
  border-radius: 50%;
  background-color: var(--base-color, #fdc1f7);
  box-shadow: 0px 2px 10px var(--base-color);
  background-size: 100% 200%;
}

.iphone-case .gradient-1 {
  --gradient-stop-1: 30%;
  border-top-left-radius: var(--border-radius-inner);
  border-top-right-radius: var(--border-radius-inner);
  border-bottom: 3px solid var(--base-color);
  box-shadow: 0px 2px 4px var(--base-color);
  /* background-image: radial-gradient(circle at bottom, var(--start-color) var(--gradient-stop-1), var(--color-stop-center),  var(--base-color) 90%); */
  background-image: -webkit-radial-gradient(circle, var(--start-color) var(--gradient-stop-1), var(--color-stop-center), var(--base-color) 90%);
  background-image: radial-gradient(circle, var(--start-color) var(--gradient-stop-1), var(--color-stop-center), var(--base-color) 90%);
  background-position: 50% 200%;
  background-size: 100% 200%;
}

.iphone-case .gradient-2 {
  --gradient-stop-1: 65%;
  --gradient-stop-2: 80%;
  border-bottom-left-radius: var(--border-radius-inner);
  border-bottom-right-radius: var(--border-radius-inner);
  border-top: 3px solid var(--base-color);
  box-shadow: 0px -2px 4px var(--base-color);
  /* background-image: radial-gradient(circle at top, var(--start-color) var(--gradient-stop-1), var(--color-2, hsl(0, 0%, 0%)) var( --gradient-stop-2) , var(--base-color) 100%); */
  background-image: -webkit-radial-gradient(circle, var(--start-color) var(--gradient-stop-1), var(--color-2, hsl(0, 0%, 0%)) var(--gradient-stop-2), var(--base-color) 100%);
  background-image: radial-gradient(circle, var(--start-color) var(--gradient-stop-1), var(--color-2, hsl(0, 0%, 0%)) var(--gradient-stop-2), var(--base-color) 100%);
  background-position: 50% 100%;
}

.case-1 .gradient-1 {
  --base-color: #fdc1f7;
  --color-stop-center: #230a77, #c84fe4;
}

.case-1 .gradient-2 {
  --color-2: #400898;
  ;
  --base-color: #8778d1;
}

h1 {
  margin-bottom: .2em;
  font-size: clamp(1.1rem, 0.2rem + 5vw, 2rem);
}

let popup = document.querySelector('.island_popup');
popup.onclick = function () {
  popup.classList.toggle('active')
}