-
-
Save Jiri2059/58795f9229ef87b07f92a9ae357925a3 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <!-- CodingMaker--> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>iPhone 14 Pro Max</title> | |
| <!--CSS Style--> | |
| <link rel="stylesheet" href="style.css" /> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"/> | |
| </head> | |
| <body> | |
| <div class="iphone"> | |
| <div class="iphone-14"> | |
| <div class="operator-name">Coding</div> | |
| <div class="dynamic-island"></div> | |
| <div class="dynamic-island-camera"></div> | |
| <div class="operator-icons"> | |
| <i class="bi bi-reception-4"></i> | |
| 5G | |
| <div class="battery">100</div> | |
| </div> | |
| <div class="date-area"> | |
| <span class="month"></span> | |
| <span class="day-name"></span> | |
| <span class="day"></span> | |
| </div> | |
| <div class="clock-area"></div> | |
| <div class="widget-area"><a href="https://www.youtube.com/c/CodingMaker" target="_blank"> | |
| <span class="widget"><i class="bi bi-cloud-moon-fill"></i> 21°</span> | |
| <span class="widget bell"><i class="bi bi-bell-fill sound"></i></a> | |
| <i class="bi bi-bell-slash-fill quiet"></i></span> | |
| <span class="widget"><i class="bi bi-spotify spotify"></i></span> | |
| <span class="widget"><i class="bi bi-fuel-pump-fill fuelWidgetIcon"></i></span> | |
| </div> | |
| <div class="notification"> | |
| <a href="https://www.youtube.com/c/CodingMaker" target="_blank"> | |
| <div><img class="img" src="https://upload.wikimedia.org/wikipedia/commons/9/95/Instagram_logo_2022.svg" width="14" /> | |
| <b>Instagram.com</b></div> | |
| <div class="notification-text">Click to contact Coding Maker!</div></a> | |
| </div> | |
| <div class="flash-and-camera"> | |
| <a href="https://www.youtube.com/c/CodingMaker" target="_blank"><img src="https://raw.githubusercontent.com/zouraiz523/iphone-14-pro-max/main/Phone%2014%20Pro%20Max%20and%20Dynamic%20Island/img-L.png" width="20"/> | |
| <i class="bi bi-camera-fill"></i></a> | |
| </div> | |
| <div class="line"></div> | |
| <div class="bell-animation-area"></div> | |
| <div class="bell-animation"> | |
| <span class="ntf-1"><i class="bi bi-bell-slash-fill"></i> <span>Quiet Mode On</span></span> | |
| <span class="ntf-2"><i class="bi bi-bell-fill"></i> <span>Quiet Mode Off</span></span> | |
| </div> | |
| <i class="bi bi-geo-alt-fill"></i> | |
| <div class="fuel-area"> | |
| <img src="https://raw.githubusercontent.com/zouraiz523/iphone-14-pro-max/main/Phone%2014%20Pro%20Max%20and%20Dynamic%20Island/img-map.jpg" alt="Maps"> | |
| <div class="fuel-ntf-app"> | |
| <span><b>Aim:</b> Petrol Ofisi</span><br> | |
| <span><b>remaining time:</b> 15 min</span><br> | |
| <span><b>mode of transportationi:</b> Car</span> | |
| </div> | |
| </div> | |
| <i class="bi bi-soundwave"></i> | |
| <div class="music-player"> | |
| <div> | |
| <img src="https://raw.githubusercontent.com/zouraiz523/iphone-14-pro-max/main/Phone%2014%20Pro%20Max%20and%20Dynamic%20Island/img-M.jpg" alt="Music" class="music-poster"> | |
| </div> | |
| <div class="music-details"> | |
| <p>Loreena Mckennitt Snow</p> | |
| <p class="c-gray">To Drive the Cold Winter Away</p> | |
| <audio id="sarki" loop controls | |
| src="https://www.scriptgenerator.net/generator/really-simple-embed-audio-player-script_files/Loreena_Mckennitt_Snow_56bit.mp3"></audio> | |
| <div class="player"> | |
| <i class="bi bi-skip-backward-fill"></i> | |
| <button id="oynat"> | |
| <i class="bi bi-play-fill"></i> | |
| <i class="bi bi-pause-fill"></i> | |
| </button> | |
| <i class="bi bi-skip-forward-fill"></i> | |
| <i class="bi bi-cast"></i> | |
| </div> | |
| <!-- <input type="range" id="ses" max=100 min=0 value=10> --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
| function dateArea(){ | |
| var dateDay = new Date().getDate(); | |
| var d = new Date(); | |
| var dateMonth = ["January","February","March","April","May","June","July","August","September","October","November","December"]; | |
| var dateName = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; | |
| document.querySelector(".day").innerHTML=dateDay; | |
| document.querySelector(".month").innerHTML=dateMonth[d.getMonth()]; | |
| document.querySelector(".day-name").innerHTML=dateName[d.getDay()]; | |
| } | |
| setInterval(dateArea, 1000); | |
| function clockArea(){ | |
| var hoursArea = new Date().getHours(); | |
| var minutesArea = new Date().getMinutes(); | |
| var clockArea = hoursArea + ":" + minutesArea; | |
| if(hoursArea<10){ | |
| var clockArea = "0" + hoursArea + ":" + minutesArea; | |
| } else if(minutesArea<10){ | |
| var clockArea = hoursArea + ":0" + minutesArea; | |
| } else{ | |
| var clockArea = hoursArea + ":" + minutesArea; | |
| } | |
| document.querySelector(".clock-area").innerHTML = clockArea; | |
| } | |
| setInterval(clockArea, 1000); | |
| var ntf = document.querySelector(".bell"); | |
| var ntfBell = document.querySelector(".sound"); | |
| var ntfBellSlash = document.querySelector(".quiet"); | |
| var dynamicIsland = document.querySelector(".dynamic-island"); | |
| var bellAnmArea = document.querySelector(".bell-animation-area"); | |
| var bellAnm = document.querySelector(".bell-animation"); | |
| ntf.addEventListener("click", function(){ | |
| if(ntfBellSlash.style.display !== "inline"){ | |
| ntfBellSlash.style.display="inline"; | |
| ntfBell.style.display="none"; | |
| bellAnmArea.style.display="block"; | |
| bellAnm.style.display="block"; | |
| document.querySelector(".ntf-1").style.display="inline"; | |
| document.querySelector(".ntf-2").style.display="none"; | |
| setTimeout("bellAnmArea.style.display='none'", 7000); | |
| setTimeout("bellAnm.style.display='none'", 5000); | |
| geoIcon.style.visibility="hidden"; | |
| geoIcon.style.opacity="0"; | |
| setTimeout("geoIcon.style.visibility='visible'", 7000); | |
| setTimeout("geoIcon.style.opacity='1'", 7000); | |
| document.querySelector(".bi-soundwave").style.opacity="0"; | |
| document.querySelector(".bi-soundwave").style.visibility="hidden"; | |
| setTimeout("document.querySelector('.bi-soundwave').style.visibility='visible'", 7000); | |
| setTimeout("document.querySelector('.bi-soundwave').style.opacity='1'", 7000); | |
| } | |
| else { | |
| ntfBellSlash.style.display="none"; | |
| ntfBell.style.display="inline"; | |
| bellAnmArea.style.display="block"; | |
| bellAnm.style.display="block"; | |
| document.querySelector(".ntf-1").style.display="none"; | |
| document.querySelector(".ntf-2").style.display="inline"; | |
| } | |
| }) | |
| var spotify = document.querySelector(".spotify"); | |
| spotify.addEventListener("click", function(){ | |
| if(document.querySelector(".music-player").style.visibility !== "visible"){ | |
| document.querySelector(".music-player").style.visibility="visible"; | |
| document.querySelector(".spotify").style.color="#1ED760"; | |
| document.querySelector(".music-player").style.marginTop="20px"; | |
| document.querySelector(".music-player").style.opacity="1"; | |
| document.querySelector(".notification").style.display="none"; | |
| document.querySelector(".flash-and-camera").style.display="none"; | |
| fuelArea.style.visibility="hidden"; | |
| fuelArea.style.bottom="100px"; | |
| fuelArea.style.opacity="0"; | |
| fuelWidgetIcon.style.color="white"; | |
| } else{ | |
| document.querySelector(".music-player").style.visibility="hidden"; | |
| document.querySelector(".spotify").style.color="white"; | |
| document.querySelector(".music-player").style.marginTop="0px"; | |
| document.querySelector(".music-player").style.opacity="0"; | |
| document.querySelector(".notification").style.display="block"; | |
| document.querySelector(".flash-and-camera").style.display="block"; | |
| } | |
| }) | |
| var dynamicVolume = document.querySelector(".bi-soundwave"); | |
| dynamicVolume.addEventListener("click", function(){ | |
| if(document.querySelector(".music-player").style.visibility !== "visible"){ | |
| document.querySelector(".music-player").style.visibility="visible"; | |
| document.querySelector(".spotify").style.color="#1ED760"; | |
| document.querySelector(".music-player").style.marginTop="20px"; | |
| document.querySelector(".music-player").style.opacity="1"; | |
| document.querySelector(".notification").style.display="none"; | |
| document.querySelector(".flash-and-camera").style.display="none"; | |
| fuelArea.style.visibility="hidden"; | |
| } else{ | |
| document.querySelector(".music-player").style.visibility="hidden"; | |
| document.querySelector(".spotify").style.color="white"; | |
| document.querySelector(".music-player").style.marginTop="0px"; | |
| document.querySelector(".music-player").style.opacity="0"; | |
| document.querySelector(".notification").style.display="block"; | |
| document.querySelector(".flash-and-camera").style.display="block"; | |
| } | |
| }) | |
| var geoIcon = document.querySelector(".bi-geo-alt-fill"); | |
| var fuelArea = document.querySelector(".fuel-area"); | |
| var fuelWidgetIcon = document.querySelector(".fuelWidgetIcon"); | |
| fuelWidgetIcon.addEventListener("click", function(){ | |
| if(fuelArea.style.visibility !== "visible"){ | |
| fuelArea.style.visibility="visible"; | |
| fuelArea.style.opacity="1"; | |
| fuelArea.style.bottom="110px"; | |
| geoIcon.style.right="93px"; | |
| geoIcon.style.visibility="visible"; | |
| geoIcon.style.opacity="1"; | |
| dynamicIsland.style.left="83px"; | |
| document.querySelector(".dynamic-island-camera").style.right="125px"; | |
| document.querySelector(".bi-soundwave").style.left="100px"; | |
| fuelWidgetIcon.style.color="red"; | |
| document.querySelector(".music-player").style.visibility="hidden"; | |
| document.querySelector(".music-player").style.marginTop="0px"; | |
| document.querySelector(".music-player").style.opacity="0"; | |
| document.querySelector(".spotify").style.color="white"; | |
| } else{ | |
| fuelArea.style.visibility="hidden"; | |
| fuelArea.style.opacity="0"; | |
| fuelArea.style.bottom="100px"; | |
| geoIcon.style.right="100px"; | |
| geoIcon.style.visibility="hidden"; | |
| geoIcon.style.opacity="0"; | |
| dynamicIsland.style.left="100px"; | |
| document.querySelector(".dynamic-island-camera").style.right="110px"; | |
| document.querySelector(".bi-soundwave").style.left="120px"; | |
| fuelWidgetIcon.style.color="white"; | |
| } | |
| }) | |
| var sarki=document.getElementById("sarki"); | |
| var oynat=document.getElementById("oynat"); | |
| var ses=document.getElementById("ses"); | |
| //What to do when you hit the play button | |
| oynat.onclick=function(){ | |
| if(sarki.paused){ | |
| sarki.play(); | |
| document.querySelector(".bi-pause-fill").style.display="inline"; | |
| document.querySelector(".bi-play-fill").style.display="none"; | |
| document.querySelector(".music-poster").style.transform="scale(1)"; | |
| document.querySelector(".bi-soundwave").style.display="block"; | |
| } else{ | |
| sarki.pause(); | |
| document.querySelector(".bi-pause-fill").style.display="none"; | |
| document.querySelector(".bi-play-fill").style.display="inline"; | |
| document.querySelector(".music-poster").style.transform="scale(.9)"; | |
| document.querySelector(".bi-soundwave").style.display="none"; | |
| } | |
| } | |
| //what to do when range object is changed for audio setting | |
| /* ses.oninput=function(){ | |
| sarki.volume =ses.value/100; | |
| } | |
| */ | |
| //Update range object when volume is changed from control | |
| sarki.onvolumechange=function(){ | |
| ses.value=sarki.volume*100; | |
| } |
| *{ | |
| margin: 0; | |
| padding: 0; | |
| font-family: arial; | |
| } | |
| body{ | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| background: #c2c3c9; | |
| } | |
| .iphone{ | |
| border: 4px solid #3b444b; | |
| border-radius: 50px; | |
| } | |
| a{ | |
| text-decoration: none; | |
| color: white; | |
| } | |
| .iphone-14{ | |
| width: 300px; | |
| height: 600px; | |
| border: 5px solid black; | |
| background: white; | |
| background-image: url("https://raw.githubusercontent.com/zouraiz523/iphone-14-pro-max/main/Phone%2014%20Pro%20Max%20and%20Dynamic%20Island/img-bg.webp"); | |
| background-repeat: no-repeat; | |
| background-size: 301px 600px; | |
| border-radius: 47px; | |
| position: relative; | |
| } | |
| .operator-name{ | |
| position: absolute; | |
| top: 16px; | |
| left: 30px; | |
| font-size: 14px; | |
| color: white; | |
| } | |
| .dynamic-island{ | |
| width: 100px; | |
| height: 25px; | |
| background: black; | |
| border-radius: 50px; | |
| margin: 0 auto; | |
| margin-top: 10px; | |
| position: absolute; | |
| left: 100px; | |
| z-index: 99999; | |
| transition: all .5s; | |
| } | |
| .dynamic-island-camera{ | |
| color: white; | |
| position: absolute; | |
| top: 18px; | |
| right: 110px; | |
| background: #121212; | |
| box-shadow: 0 0 1px grey; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50px; | |
| z-index: 99999; | |
| transition: all .5s; | |
| } | |
| .operator-icons{ | |
| position: absolute; | |
| top: 16px; | |
| right: 50px; | |
| font-size: 14px; | |
| transition: all .2s; | |
| color: white; | |
| } | |
| .battery{ | |
| width: 20px; | |
| height: 10px; | |
| border: 2px solid #fff; | |
| border-radius: 4px; | |
| font-size: 10px; | |
| text-align: center; | |
| color: #000; | |
| background: #Fefefe; | |
| font-weight: bold; | |
| position: absolute; | |
| top: 0px; | |
| right: -28px; | |
| } | |
| .date-area{ | |
| margin-top: 60px; | |
| width: 100%; | |
| text-align: center; | |
| color: white; | |
| } | |
| .clock-area{ | |
| margin-top: 5px; | |
| width: 100%; | |
| text-align: center; | |
| font-size: 60px; | |
| font-family: 'Monoton', cursive; | |
| color: white; | |
| } | |
| .widget-area{ | |
| margin-top: 10px; | |
| width: 100%; | |
| text-align: center; | |
| font-size: 20px; | |
| color: white; | |
| } | |
| .widget{ | |
| margin: 0 5px; | |
| padding: 5px; | |
| border-radius: 10px; | |
| transition: all 1s; | |
| cursor: pointer; | |
| } | |
| .widget i{ | |
| transition: all 1s; | |
| } | |
| .widget:hover .spotify{ | |
| color: #1ED760; | |
| } | |
| .quiet{ | |
| display: none; | |
| color: gray; | |
| transition: all 2s; | |
| animation: bellNtf 2s; | |
| } | |
| @keyframes bellNtf{ | |
| 0%,40%,80%, 100%{color: gray;} | |
| 10%,60%, 90%{color: red;} | |
| } | |
| .notification{ | |
| margin: 0 40px; | |
| margin-top: 50px; | |
| padding: 15px; | |
| border-radius: 10px; | |
| position: absolute; | |
| visibility: hidden; | |
| background-color: rgba(255, 255, 255, 0.250); | |
| transition: all .5s; | |
| animation: notification .5s forwards; | |
| animation-delay: 10s; | |
| color: white; | |
| } | |
| @keyframes notification{ | |
| from{ | |
| bottom:180px; | |
| opacity: 0; | |
| visibility: hidden; | |
| } to{ | |
| bottom: 100px; | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| } | |
| .notification-text{ | |
| font-size: 15px; | |
| color:#fff; | |
| } | |
| .flash-and-camera img{ | |
| position: absolute; | |
| bottom: 30px; | |
| left: 20px; | |
| filter: invert(100%); | |
| padding: 10px; | |
| border-radius: 50px; | |
| background-color: rgba(255, 255, 255, 0.337); | |
| transition: all .5s; | |
| cursor: pointer; | |
| z-index: 99999; | |
| } | |
| .flash-and-camera img:hover{ | |
| background-color: rgba(255, 255, 255, 1); | |
| } | |
| .flash-and-camera i{ | |
| position: absolute; | |
| bottom: 30px; | |
| right: 20px; | |
| color: black; | |
| filter: invert(100%); | |
| padding: 10px; | |
| border-radius: 50px; | |
| background-color: rgba(255, 255, 255, 0.337); | |
| z-index: 99999; | |
| cursor: pointer; | |
| transition: all .5s; | |
| } | |
| .flash-and-camera i:hover{ | |
| background-color: rgba(255, 255, 255, 1); | |
| } | |
| .line{ | |
| position: absolute; | |
| bottom: 10px; | |
| width: 100px; | |
| height: 5px; | |
| border-radius: 50px; | |
| background: #fff; | |
| left: 100px; | |
| } | |
| .bell-animation-area{ | |
| width: 100px; | |
| height: 25px; | |
| background: black; | |
| border-radius: 47px; | |
| position: absolute; | |
| left: 100px; | |
| top: 10px; | |
| z-index: 99999; | |
| display: none; | |
| color: #fff; | |
| animation: dynamicIslandAnm 7s; | |
| } | |
| @keyframes dynamicIslandAnm { | |
| 0%, 100%{width: 100px; height: 25px; left: 100px; opacity: 0 !important;} | |
| 20%, 80%{width: 270px; height: 40px; left: 15px; display: block;} | |
| } | |
| .bell-animation{ | |
| position: absolute; | |
| width: 100%; | |
| top: 15px; | |
| visibility: hidden; | |
| opacity: 0; | |
| left: 0; | |
| text-align: center; | |
| z-index: 99999; | |
| transition: all 1s; | |
| animation: dynamicIslandText 5s; | |
| animation-delay: .5s; | |
| display: none; | |
| color: #fff; | |
| } | |
| @keyframes dynamicIslandText { | |
| 0%, 100%{top: 10px; visibility: hidden; opacity: 0} | |
| 20%, 80%{top: 22px; visibility: visible; opacity: 1} | |
| } | |
| .bell-animation i{ | |
| color: red; | |
| } | |
| .bell-animation-area-slash{ | |
| width: 100px; | |
| height: 25px; | |
| background: #000; | |
| border-radius: 47px; | |
| position: absolute; | |
| left: 100px; | |
| top: 10px; | |
| z-index: 99999; | |
| display: none; | |
| color: #fff; | |
| animation: dynamicIslandAnm 7s; | |
| } | |
| @keyframes dynamicIslandAnm { | |
| 0%, 100%{width: 100px; height: 25px; left: 100px; opacity: 0 !important;} | |
| 20%, 80%{width: 270px; height: 40px; left: 15px; display: block;} | |
| } | |
| .bell-animation-slash{ | |
| position: absolute; | |
| width: 100%; | |
| top: 15px; | |
| visibility: hidden; | |
| opacity: 0; | |
| left: 0; | |
| text-align: center; | |
| z-index: 99999; | |
| transition: all 1s; | |
| animation-delay: .5s; | |
| display: none; | |
| color: #fff; | |
| } | |
| .bell-animation-slash i{ | |
| color: red; | |
| } | |
| .c-gray{ | |
| color: gray; | |
| } | |
| .bi-soundwave{ | |
| position: absolute; | |
| top: 14px; | |
| color: #fff; | |
| left: 120px; | |
| z-index: 99999; | |
| animation: volumeUp 3s infinite; | |
| display: none; | |
| cursor: pointer; | |
| transition: all .5s; | |
| } | |
| @keyframes volumeUp { | |
| 0%, 50%, 100%{ | |
| color: #fff; opacity: 1; | |
| } | |
| 20%, 40%, 60%, 80%{ | |
| color: #ffd0c7; opacity: .8; | |
| } | |
| } | |
| .music-player{ | |
| text-align: center; | |
| margin-top: 0px; | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: all .5s; | |
| } | |
| .music-poster{ | |
| width: 250px; | |
| height: 200px; | |
| border-radius: 10px; | |
| box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; | |
| transform: scale(.9); | |
| transition: all .5s; | |
| text-align: center; | |
| margin: 0 auto; | |
| margin-left: 5px; | |
| } | |
| .bi-pause-fill{display: none;} | |
| .music-details{ | |
| width: 225px; | |
| text-align: center; | |
| background: rgba(255, 255, 255, 0.925); | |
| backdrop-filter: blur(5px); | |
| box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; | |
| color: #000; | |
| padding: 10px; | |
| border-radius: 10px; | |
| margin-left: 30px; | |
| margin-top: 5px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| #sarki{ | |
| height: 15px; | |
| width: 430px; | |
| position: absolute; | |
| left: -110px; | |
| margin-top: 10px; | |
| } | |
| .music-details::before{ | |
| content: ""; | |
| width: 15px; | |
| height: 50px; | |
| background: #efeff2; | |
| position: absolute; | |
| top: 40px; | |
| left: 0; | |
| z-index: 999999; | |
| } | |
| .music-details::after{ | |
| content: ""; | |
| width: 15px; | |
| height: 50px; | |
| background-color: #efeff2; | |
| position: absolute; | |
| top: 40px; | |
| right: 0; | |
| z-index: 999999; | |
| } | |
| .player{ | |
| margin-top: 30px; | |
| } | |
| .player i{ | |
| font-size: 25px; | |
| margin: 0 10px; | |
| } | |
| .bi-cast{ | |
| position: absolute; | |
| bottom: 15px; | |
| right: 10px; | |
| font-size: 15px !important; | |
| } | |
| .player button{ | |
| background: transparent; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .fuel-area{ | |
| position: absolute; | |
| left: 0; | |
| border-radius: 10px; | |
| bottom: 100px; | |
| width: 267px; | |
| padding: 10px; | |
| margin: 0 6px; | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: all .5s; | |
| background-color: rgba(255, 255, 255, 0.750); | |
| backdrop-filter: blur(5px); | |
| } | |
| .fuel-area img{ | |
| width: 110px; | |
| height: 101px; | |
| border-radius: 10px; | |
| } | |
| .fuel-ntf-app{ | |
| position: absolute; | |
| top: 15px; | |
| left: 130px; | |
| } | |
| .bi-geo-alt-fill{ | |
| color: #fff; | |
| position: absolute; | |
| top: 11px; | |
| right: 100px; | |
| font-size: 12px; | |
| padding: 5px; | |
| background:#000; | |
| border-radius: 50px; | |
| z-index: 99999; | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: all .5s; | |
| animation: fuel 3s infinite; | |
| text-align: center; | |
| } | |
| @keyframes fuel { | |
| 0%, 50%, 100%{ | |
| color: #fff; opacity: 1; | |
| } | |
| 20%, 40%, 60%, 80%{ | |
| color: red; opacity: .8; | |
| } | |
| } |
*{
margin: 0;
padding: 0;
font-family: arial;
}
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background: #c2c3c9;
}
.iphone{
border: 4px solid #3b444b;
border-radius: 50px;
}
a{
text-decoration: none;
color: white;
}
.iphone-14{
width: 300px;
height: 600px;
border: 5px solid black;
background: white;
background-image: url("https://raw.githubusercontent.com/zouraiz523/iphone-14-pro-max/main/Phone%2014%20Pro%20Max%20and%20Dynamic%20Island/img-bg.webp");
background-repeat: no-repeat;
background-size: 301px 600px;
border-radius: 47px;
position: relative;
}
.operator-name{
position: absolute;
top: 16px;
left: 30px;
font-size: 14px;
color: white;
}
.dynamic-island{
width: 100px;
height: 25px;
background: black;
border-radius: 50px;
margin: 0 auto;
margin-top: 10px;
position: absolute;
left: 100px;
z-index: 99999;
transition: all .5s;
}
.dynamic-island-camera{
color: white;
position: absolute;
top: 18px;
right: 110px;
background: #121212;
box-shadow: 0 0 1px grey;
width: 10px;
height: 10px;
border-radius: 50px;
z-index: 99999;
transition: all .5s;
}
.operator-icons{
position: absolute;
top: 16px;
right: 50px;
font-size: 14px;
transition: all .2s;
color: white;
}
.battery{
width: 20px;
height: 10px;
border: 2px solid #fff;
border-radius: 4px;
font-size: 10px;
text-align: center;
color: #000;
background: #Fefefe;
font-weight: bold;
position: absolute;
top: 0px;
right: -28px;
}
.date-area{
margin-top: 60px;
width: 100%;
text-align: center;
color: white;
}
.clock-area{
margin-top: 5px;
width: 100%;
text-align: center;
font-size: 60px;
font-family: 'Monoton', cursive;
color: white;
}
.widget-area{
margin-top: 10px;
width: 100%;
text-align: center;
font-size: 20px;
color: white;
}
.widget{
margin: 0 5px;
padding: 5px;
border-radius: 10px;
transition: all 1s;
cursor: pointer;
}
.widget i{
transition: all 1s;
}
.widget:hover .spotify{
color: #1ED760;
}
.quiet{
display: none;
color: gray;
transition: all 2s;
animation: bellNtf 2s;
}
@Keyframes bellNtf{
0%,40%,80%, 100%{color: gray;}
10%,60%, 90%{color: red;}
}
.notification{
margin: 0 40px;
margin-top: 50px;
padding: 15px;
border-radius: 10px;
position: absolute;
visibility: hidden;
background-color: rgba(255, 255, 255, 0.250);
transition: all .5s;
animation: notification .5s forwards;
animation-delay: 10s;
color: white;
}
@Keyframes notification{
from{
bottom:180px;
opacity: 0;
visibility: hidden;
} to{
bottom: 100px;
opacity: 1;
visibility: visible;
}
}
.notification-text{
font-size: 15px;
color:#fff;
}
.flash-and-camera img{
position: absolute;
bottom: 30px;
left: 20px;
filter: invert(100%);
padding: 10px;
border-radius: 50px;
background-color: rgba(255, 255, 255, 0.337);
transition: all .5s;
cursor: pointer;
z-index: 99999;
}
.flash-and-camera img:hover{
background-color: rgba(255, 255, 255, 1);
}
.flash-and-camera i{
position: absolute;
bottom: 30px;
right: 20px;
color: black;
filter: invert(100%);
padding: 10px;
border-radius: 50px;
background-color: rgba(255, 255, 255, 0.337);
z-index: 99999;
cursor: pointer;
transition: all .5s;
}
.flash-and-camera i:hover{
background-color: rgba(255, 255, 255, 1);
}
.line{
position: absolute;
bottom: 10px;
width: 100px;
height: 5px;
border-radius: 50px;
background: #fff;
left: 100px;
}
.bell-animation-area{
width: 100px;
height: 25px;
background: black;
border-radius: 47px;
position: absolute;
left: 100px;
top: 10px;
z-index: 99999;
display: none;
color: #fff;
animation: dynamicIslandAnm 7s;
}
@Keyframes dynamicIslandAnm {
0%, 100%{width: 100px; height: 25px; left: 100px; opacity: 0 !important;}
20%, 80%{width: 270px; height: 40px; left: 15px; display: block;}
}
.bell-animation{
position: absolute;
width: 100%;
top: 15px;
visibility: hidden;
opacity: 0;
left: 0;
text-align: center;
z-index: 99999;
transition: all 1s;
animation: dynamicIslandText 5s;
animation-delay: .5s;
display: none;
color: #fff;
}
@Keyframes dynamicIslandText {
0%, 100%{top: 10px; visibility: hidden; opacity: 0}
20%, 80%{top: 22px; visibility: visible; opacity: 1}
}
.bell-animation i{
color: red;
}
.bell-animation-area-slash{
width: 100px;
height: 25px;
background: #000;
border-radius: 47px;
position: absolute;
left: 100px;
top: 10px;
z-index: 99999;
display: none;
color: #fff;
animation: dynamicIslandAnm 7s;
}
@Keyframes dynamicIslandAnm {
0%, 100%{width: 100px; height: 25px; left: 100px; opacity: 0 !important;}
20%, 80%{width: 270px; height: 40px; left: 15px; display: block;}
}
.bell-animation-slash{
position: absolute;
width: 100%;
top: 15px;
visibility: hidden;
opacity: 0;
left: 0;
text-align: center;
z-index: 99999;
transition: all 1s;
animation-delay: .5s;
display: none;
color: #fff;
}
.bell-animation-slash i{
color: red;
}
.c-gray{
color: gray;
}
.bi-soundwave{
position: absolute;
top: 14px;
color: #fff;
left: 120px;
z-index: 99999;
animation: volumeUp 3s infinite;
display: none;
cursor: pointer;
transition: all .5s;
}
@Keyframes volumeUp {
0%, 50%, 100%{
color: #fff; opacity: 1;
}
20%, 40%, 60%, 80%{
color: #ffd0c7; opacity: .8;
}
}
.music-player{
text-align: center;
margin-top: 0px;
visibility: hidden;
opacity: 0;
transition: all .5s;
}
.music-poster{
width: 250px;
height: 200px;
border-radius: 10px;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
transform: scale(.9);
transition: all .5s;
text-align: center;
margin: 0 auto;
margin-left: 5px;
}
.bi-pause-fill{display: none;}
.music-details{
width: 225px;
text-align: center;
background: rgba(255, 255, 255, 0.925);
backdrop-filter: blur(5px);
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
color: #000;
padding: 10px;
border-radius: 10px;
margin-left: 30px;
margin-top: 5px;
overflow: hidden;
position: relative;
}
#sarki{
height: 15px;
width: 430px;
position: absolute;
left: -110px;
margin-top: 10px;
}
.music-details::before{
content: "";
width: 15px;
height: 50px;
background: #efeff2;
position: absolute;
top: 40px;
left: 0;
z-index: 999999;
}
.music-details::after{
content: "";
width: 15px;
height: 50px;
background-color: #efeff2;
position: absolute;
top: 40px;
right: 0;
z-index: 999999;
}
.player{
margin-top: 30px;
}
.player i{
font-size: 25px;
margin: 0 10px;
}
.bi-cast{
position: absolute;
bottom: 15px;
right: 10px;
font-size: 15px !important;
}
.player button{
background: transparent;
border: none;
cursor: pointer;
}
.fuel-area{
position: absolute;
left: 0;
border-radius: 10px;
bottom: 100px;
width: 267px;
padding: 10px;
margin: 0 6px;
visibility: hidden;
opacity: 0;
transition: all .5s;
background-color: rgba(255, 255, 255, 0.750);
backdrop-filter: blur(5px);
}
.fuel-area img{
width: 110px;
height: 101px;
border-radius: 10px;
}
.fuel-ntf-app{
position: absolute;
top: 15px;
left: 130px;
}
.bi-geo-alt-fill{
color: #fff;
position: absolute;
top: 11px;
right: 100px;
font-size: 12px;
padding: 5px;
background:#000;
border-radius: 50px;
z-index: 99999;
visibility: hidden;
opacity: 0;
transition: all .5s;
animation: fuel 3s infinite;
text-align: center;
}
@Keyframes fuel {
0%, 50%, 100%{
color: #fff; opacity: 1;
}
20%, 40%, 60%, 80%{
color: red; opacity: .8;
}
}
@rah-gif
rah-gif commented last month
Thank you so much! This was so helpful!
@egon0m
Comment
Leave a comment
Thank you so much! This was so helpful!