Ctrl+K
- 1.52 kB initial commit
- 208 Bytes -# Made by Robin Savemark %div{:class => "iphone", :id => "iphone"} %div{:class => "iphone_camera"} %div{:class => "iphone_ear-speaker"} %div{:class => "iphone_ear-speaker-side"} %div{:class => "iphone_overlay"} %div{:class => "iphone_screen", :id => "screen"} %ul{:class => "iphone_screen-signal"} - (1..5).each do |i| %li %span{:class => "iphone_screen-operator"} Tele2 %span{:id => "internet"} %span{:class => "iphone_screen-lock"} %i{:class => "fa fa-lock"} %div{:class => "iphone_screen-time", :id => "time"} %div{:class => "iphone_screen-date", :id => "date"} %span{:class => "iphone_screen-battery", :id => "battery"} 97% %i{:class => "fa fa-battery-full"} %ul{:class => "iphone_screen-text"} - (1..3).each do |i| %li %i{:class => "fa fa-camera"} %div{:class => "iphone_home", :id => "home"} %div{:class => "iphone_silent-mode"} %div{:class => "iphone_silent-mode-side"} %ul{:class => "iphone_sound"} - (1..2).each do |i| %li %ul{:class => "iphone_bottom-right-speaker"} - (1..8).each do |i| %li %div{:class => "iphone_bottom-middle-charge"} - (1..2).each do |i| %span %ul{:class => "iphone_bottom-left-speaker"} - (1..8).each do |i| %li -# %div{:class => "iphone_text", :id => "text"} Hover me --- // Made by Robin Savemark *, *:before, *:after { box-sizing: border-box; } @c1: #FFF; @c2: #000; @c3: #2d3133; @c4: #5b7e8b; @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400'); body { margin: 0 auto; display: flex; justify-content: center; align-items: center; height: 100vh; background: @c1; font-family: "Roboto", sans-serif; font-weight: 100; } .iphone { width: 360px; height: 810px; border-radius: 50px; transform: rotateX(55deg) rotateZ(-45deg); transform-origin: 50% 50%; position: relative; background: none; box-shadow: -35px 35px 50px 5px lighten(@c2, 10%); z-index: 1; transition: all 500ms ease; &:hover { transform: rotateX(45deg) rotateZ(-35deg) translate(100px, -100px); box-shadow: -100px 150px 15px 15px lighten(@c2, 10%); &:before { width: 380px; height: 830px; left: -16px; box-shadow: inset #3D3E42 0 0 31px 6px; } & + .iphone_text { transform: translateX(-120%); color: @c2; } .iphone_overlay { &:before { background: linear-gradient(to right, fade(@c1, 0%) 0%, fade(@c1, 25%) 50%, fade(@c1, 0%) 100%); transform: rotate(40deg); } } .iphone_screen { opacity: 1; } .iphone_ear-speaker-side { &:after { left: -8px; transform: rotate(2deg); border-radius: 5px 0 0 0; } } .iphone_silent-mode-side { &:before { left: -5px; } &:after { left: -10px; transform: rotate(-5deg); border-radius: 5px 0 0 2px; } } } &:before { transition: all 500ms ease; content: ""; display: block; background: lighten(@c2, 3%); width: 390px; height: 840px; border-radius: 77px 49px 86px 70px; position: absolute; top: 5px; left: -26px; box-shadow: inset #3D3E42 0 0 15px 9px; z-index: -1; border: 1px solid #444; } &:after { content: ""; display: block; position: absolute; top: 5px; bottom: 0; left: 5px; height: 800px; width: 100%; background-color: lighten(@c2, 5%); border-radius: 50px; box-shadow: inset 2px 2px 2px 0px #444; border: 1px solid #444; } &_camera { width: 10px; height: 10px; border-radius: 50%; border: 1px solid @c2; background: radial-gradient(ellipse at center, @c3 0%, @c4 33%); box-shadow: inset -1px 1px 2px 1px lighten(@c2, 10%); position: absolute; top: 45px; left: -60px; right: 0; margin: auto; z-index: 2; } &_ear-speaker { width: 55px; height: 10px; border-radius: 55px; border: 1px solid @c2; background: radial-gradient(ellipse at center, @c2 50%, @c2 100%); box-shadow: inset 1px -4px 2px 0px lighten(@c2, 3%); border: 2px solid lighten(@c2, 3%); position: absolute; top: 45px; left: 0; right: -45px; margin: auto; z-index: 2; &-side { position: absolute; left: -182px; background: lighten(@c2, 5%); width: 8px; height: 12px; transform-origin: 50% 50%; transform-style: preserve-3d; transform: rotateY(-50deg); top: 10px; transition: all 500ms ease; &:before { content: ""; display: block; position: absolute; left: -7px; background: inherit; width: inherit; height: inherit; transform-origin: 50% 50%; transform-style: preserve-3d; transform: rotateY(0deg); top: 0; transition: all 500ms ease; } &:after { content: ""; display: block; position: absolute; left: -13px; background: inherit; width: inherit; height: inherit; transform-origin: 50% 50%; transform-style: preserve-3d; transform: rotateY(0deg); top: 0; border-radius: 5px 0 0 0; transition: all 500ms ease; } } } &_overlay { position: absolute; width: 390px; height: 100%; z-index: 4; left: 6px; overflow: hidden; pointer-events: none; display: block; border-radius: 50px; &:before { transition: all 500ms ease; content: ""; display: block; width: 350px; height: calc(~"100% +" 50px); position: absolute; top: 0; background: linear-gradient(to right, fade(@c1, 0%) 0%, fade(@c1, 15%) 50%, fade(@c1, 0%) 100%); transform: rotate(0deg); z-index: 10; } } &_screen { position: absolute; width: 350px; height: 650px; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; z-index: 3; top: 80px; left: 10px; right: 0; margin: auto; overflow: hidden; transition: all 500ms ease; opacity: 0; background-image: url('http://www.droidviews.com/wp-content/uploads/2016/09/iOS10_wall_droidviews_005.jpg'); &-signal { margin: 3px 5px; padding: 0; display: block; position: absolute; list-style: none; & li { display: inline-block; width: 6px; height: 6px; background: @c1; border-radius: 50%; border: 1px solid @c1; &:last-child { background: transparent; } } } &-text { padding: 0; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 3px auto; list-style: none; text-align: center; &:before { content: "Press Home to unlock"; display: block; position: absolute; text-align: center; top: -20px; left: 0; right: 0; margin: auto; color: @c1; font-weight: 400; } &.unlock { &:before { animation: text 300ms linear; content: "try again"; } } & li { display: inline-block; width: 7px; height: 7px; background: @c1; margin: 0 2px; border-radius: 50%; border: 1px solid @c1; color: fade(@c1, 50%); & i { display: none; font-size: 10px; } &:first-child { border-color: fade(@c1, 50%); background: fade(@c1, 50%); } &:last-child { background: transparent; border: transparent; & i { display: block; } } } } &-operator { position: absolute; top: 0; left: 50px; margin: 5px; color: @c1; font-weight: 300; } &-lock { position: absolute; top: 0; left: 0; right: 0; margin: 5px auto; color: @c1; text-align: center; } &-battery { position: absolute; top: 0; right: 0; margin: 5px; color: @c1; font-weight: 300; } &-time, &-date { position: absolute; top: 40px; left: 0; right: 0; display: block; margin: auto; text-align: center; font-size: 80px; color: @c1; z-index: 7; } &-date { font-size: 25px; top: 140px; font-weight: 300; } } &_home { width: 50px; height: 50px; position: absolute; top: 745px; left: 0; right: 0; margin: auto; border-radius: 50%; background: radial-gradient(ellipse at center, lighten(@c2, 5%) 50%, @c2 100%); box-shadow: inset 2px 3px 5px 0px lighten(@c2, 5%), -1px 1px 6px -3px @c1; border: 3px solid lighten(@c2, 3%); z-index: 10; cursor: pointer; } &_silent-mode { position: absolute; left: -15px; top: 95px; display: block; width: 7px; height: 25px; border-radius: 27px; background: lighten(@c2, 5%); box-shadow: inset -2px -2px 3px 0 @c2; &-side { position: absolute; left: 10px; background: lighten(@c2, 5%); width: 8px; height: 12px; transform-origin: 50% 50%; transform-style: preserve-3d; transform: rotateY(-50deg); top: 655px; transition: all 500ms ease; &:before { content: ""; display: block; position: absolute; left: -7px; background: inherit; width: inherit; height: inherit; transform-origin: 50% 50%; transform-style: preserve-3d; transform: rotateY(0deg); top: 0; transition: all 500ms ease; } &:after { content: ""; display: block; position: absolute; left: -13px; background: inherit; width: inherit; height: inherit; transform-origin: 50% 50%; transform-style: preserve-3d; transform: rotateY(0deg); top: 0; border-radius: 5px 0 0 0; transition: all 500ms ease; } } } &_sound { position: absolute; display: block; left: -15px; top: 115px; margin: 0; padding: 0; list-style: none; & li { position: absolute; left: 0; display: block; width: 7px; height: 50px; border-radius: 27px; background: lighten(@c2, 5%); box-shadow: inset -2px -2px 3px 0 @c2; &:first-child { top: 30px; } &:last-child { top: 85px; } } } &_bottom-right-speaker, &_bottom-left-speaker { position: absolute; top: 815px; display: block; margin: 0; padding: 0; list-style: none; transform: rotateX(-86deg); & li { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: @c2; box-shadow: inset @c2 1px -1px 4px 1px, lighten(@c2, 10%) 1px 0px; } } &_bottom-right-speaker { right: 50px; left: auto; } &_bottom-left-speaker { left: 50px; right: auto; } &_bottom-middle-charge { position: absolute; top: 818px; left: 0; right: 0; margin: auto; height: 15px; width: 35px; display: block; border-radius: 27px; background: @c2; box-shadow: inset lighten(@c2, 3%) -1px 1px 0px 2px, lighten(@c2, 10%) 0px 0px 0 1px, inset @c2 0 -3px 10px, lighten(@c2, 10%) 1px 0 0 1px; transform: rotateX(-70deg); & span { position: absolute; display: block; width: 5px; height: 5px; border-radius: 50%; background: lighten(@c2, 10%); top: 6px; &:before { content: ""; display: block; position: absolute; top: 1.5px; left: 0; right: 0; margin: auto; border-radius: 50%; width: 50%; height: 50%; background: @c2; } &:first-child { left: -10px; } &:last-child { right: -10px; } } } &_text { transition: all 500ms ease; color: @c1; position: absolute; z-index: 10; font-size: 60px; pointer-events: none; left: 0; right: 0; margin: auto; width: 500px; text-align: center; transform: translateX(0); } } @keyframes text { 0%, 50% { transform: translateX(-7px); } 25%, 100% { transform: translateX(7px); } } --- // Made by Robin Savemark const background = () => { const background = ["http://www.droidviews.com/wp-content/uploads/2016/09/iOS10_wall_droidviews_005.jpg", "http://www.droidviews.com/wp-content/uploads/2016/09/iOS10_wall_droidviews_002.jpg", "http://www.droidviews.com/wp-content/uploads/2016/09/iOS10_wall_droidviews_001.jpg", "http://www.droidviews.com/wp-content/uploads/2016/09/iOS10_wall_droidviews_010.jpg"]; const $screen = $("#screen"); const random = Math.floor(Math.random() * background.length); $screen.css({"background-image": "url(" + background[random] + ")"}); }; const internet = () => { const array = ["4G", "<i class='fa fa-wifi'></i>"]; const $internet = $("#internet"); const random = Math.floor(Math.random() * array.length); $internet.html(array[random]); }; const battery = () => { const percent = ["48%", "97%", "98%", "100%", "50%", "53%", "70%", "69%", "33%", "28%", "21%"]; const $battery = $("#battery"); const randomPercent = Math.floor(Math.random() * percent.length); $battery.html(percent[randomPercent]); if (percent[randomPercent] === "97%" || percent[randomPercent] === "98%" || percent[randomPercent] === "100%") { $battery.append(" <i class='fa fa-battery-full'></i>"); } else if (percent[randomPercent] === "48%" || percent[randomPercent] === "50%" || percent[randomPercent] === "53%") { $battery.append(" <i class='fa fa-battery-half'></i>"); } else if (percent[randomPercent] === "70%" || percent[randomPercent] === "69%") { $battery.append(" <i class='fa fa-battery-three-quarters'></i>"); } else if (percent[randomPercent] === "33%" || percent[randomPercent] === "28%" || percent[randomPercent] === "21%") { $battery.append(" <i class='fa fa-battery-quarter'></i>"); } }; function date() { const date = new Date(); const today = new Array(7); const month = new Array(12); today[0] = "Sunday"; today[1] = "Monday"; today[2] = "Tuesday"; today[3] = "Wednesday"; today[4] = "Thursday"; today[5] = "Friday"; today[6] = "Saturday"; month[0] = "January"; month[1] = "February"; month[2] = "March"; month[3] = "April"; month[4] = "May"; month[5] = "June"; month[6] = "July"; month[7] = "August"; month[8] = "September"; month[9] = "October"; month[10] = "November"; month[11] = "December"; todayIs = today[date.getDay()] + ", " + date.getDate() + " " + month[date.getMonth()]; $("#date").html(todayIs); }; const time = () => { const today = new Date(); let hour = today.getHours(); let min = today.getMinutes(); if (hour.toString().length == 1) { hour = "0" + hour; } if (min.toString().length == 1) { min = "0" + min; } $("#time").html(hour + ':' + min); }; $(function() { const home = $("#home"); const text = $(".iphone_screen-text"); home.on("click touchstart", function () { background(); internet(); battery(); date(); time(); if (text.hasClass("unlock")) { text.removeClass("unlock"); } else { text.addClass("unlock"); } setTimeout(() => { text.removeClass("unlock"); }, 500); }); }); - Initial Deployment
- 22.4 kB undefined - Follow Up Deployment
- 388 Bytes initial commit