Profidev

Other

PS4 Interface

May 6, 2023 
  <head>
    <meta charset="UTF-8">
      <title>PS4</title>
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
      <header>
        <div id="plus"></div>
        <div id="info"></div>
        <div id="textInfo">Overwatch Update V 1.2.3</div>
        <div id="friends"></div>
        <div id="user"></div>
        <div id="userName">Pixmy Sky</div>
        <div id="trophies"></div>
        <div id="clock">10:02 PM</div>
      </header>
    
    
      <div id="games">
        <div class="squareGame animated bounceInLeft">
          <div class="imgGame ps"></div>
          <div class="gameText">Start</div>
          <span class="gameTitle">Playstation Store</span>
          <div id="store">
            <div id="god" class="storeGame"></div>
            <div id="raider" class="storeGame"></div>
            <div id="codi" class="storeGame"></div>
            <div id="mafia" class="storeGame"></div>
            <div id="destiny" class="storeGame"></div>
            <div id="bt1" class="storeGame"></div>
            <div id="lg" class="storeGame"></div>
            <div id="per" class="storeGame"></div>
          </div>
        </div>
        <div class="squareGame animated bounceInLeft">
          <div class="imgGame new"></div>
          <div class="gameText ascii">▼</div>
          <span class="gameTitle">What's New</span>
        </div>
        <div class="squareGame animated bounceInLeft">
          <div class="imgGame overwatch"></div>
          <div class="gameText">Start</div>
          <span class="gameTitle">Overwatch</span>
        </div>
        <div class="squareGame animated bounceInLeft">
          <div class="imgGame rocketLeague"></div>
          <div class="gameText">Start</div>
          <span class="gameTitle">Rocket League</span>
        </div>
        <div class="squareGame animated bounceInLeft">
          <div class="imgGame cod"></div>
          <div class="gameText">Start</div>
          <span class="gameTitle">Call Of Duty: Black Ops III</span>
        </div>
        <div class="squareGame animated bounceInLeft">
          <div class="imgGame furi"></div>
          <div class="gameText">Start</div>
          <span class="gameTitle">Furi</span>
        </div>
        <div class="squareGame animated bounceInLeft">
          <div class="imgGame youtube"></div>
          <div class="gameText">Start</div>
          <span class="gameTitle">YouTube</span>
        </div>
        <div class="squareGame animated bounceInLeft">
          <div class="imgGame bro"></div>
          <div class="gameText">Start</div>
          <span class="gameTitle">BroForce</span>
        </div>
        <div class="squareGame animated bounceInLeft">
          <div class="imgGame outlast"></div>
          <div class="gameText">Start</div>
          <span class="gameTitle">Outlast 2</span>
        </div>
      </div>
    
      <div class='box'>
        <div class='wave -one'></div>
        <div class='wave -two'></div>
        <div class='wave -three'></div>
      </div>
    </body>
body{
	margin: 0;
	padding: 0;
	background-color: #0e6cc4;
	overflow-x:hidden;
	overflow-y:hidden;
}

header{
	height: 3em;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 999;
}

header div{
	height: 100%;
	display: inline-block;
}

#plus{
	width: 3em;
	background-image: url("https://s20.postimg.org/9jdjr9lml/plus.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	float: left;
}

#info{
	width: 3em;
	background-image: url("https://i.postimg.cc/m2x13xDd/info.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	float: left;
}

#textInfo{
	color: white;
	font-family: arial;
	width: 25%;
	float: left;
	line-height: 3em;
}

#friends{
	width: 3em;
	background-image: url("https://i.postimg.cc/vHwbv8v1/friends.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	float: left;
}

#user{
	margin-left: 1em;
	width: 3em;
	background-image: url("https://s20.postimg.org/yvwsexlfh/user.png");
	background-size: 140%;
	background-repeat: no-repeat;
	background-position: center;
	float: left;
}

#userName{
	color: white;
	font-family: arial;
	width: 25%;
	float: left;
	line-height: 3em;
}

#trophies{
	margin-left: 1em;
	width: 3em;
	background-image: url("https://i.postimg.cc/wTKmp1Cx/trophy.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	float: left;
}

#clock{
	font-family: arial;
	line-height: 3em;
	float: right;
	margin-right: 1em;
	color: white;;
}

/*ENF OF HEADER********************************/

#games{
	width: 1120em;
	position: absolute;
	top: .5em;
	left: 0;
	padding: 5em;
	z-index: 99;
	
}

.squareGame{
	height: 11em;
	width: 11em;
	vertical-align: top;
	display: inline-block;
	transition: 0.3s ease;
}

.squareGame:hover{
	height: 16.5em;
	width: 15em;
	border: 3px solid white;
	cursor: pointer;
}

.squareGame:hover .imgGame{
	height: 85%;
}

.imgGame{
	height: 100%;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.gameText{
	color: white;
	font-family: arial;
	text-align: center;
	line-height: 2.4em;
	background-color: rgba(255,255,255,.2);
}

.gameTitle{
	position: absolute;
	color: white;
	font-size: 1.2em;
	font-family: Arial;
	transform: translate(13.2em,-1.5em);
}
/*SQUARE IMAGE*****************************************/

.ascii{
	font-weight: bold;
}

.ps{
	background-image: url("https://i.postimg.cc/c1pRT9TJ/ps.png");
}

.new{
	background-image: url("https://i.postimg.cc/X7SSnLHG/new.png");
}

.overwatch{
	background-image: url("https://i.postimg.cc/kX3QwRGP/overwatch.png");
}

.rocketLeague{
	background-image: url("https://i.postimg.cc/sfkLSJhY/rl.png");
}

.cod{
	background-image: url("https://i.postimg.cc/9F5G2TcL/cod.png");
}

.furi{
	background-image: url("https://i.postimg.cc/dtcZTYk6/furi.png");
}

.youtube{
	background-image: url("https://i.postimg.cc/L6KF3S10/yt.png");
}

.bro{
	background-image: url("https://i.postimg.cc/Dykz0PJb/bro.png");
}

.outlast{
	background-image: url("https://i.postimg.cc/8PQ5xhLw/outlast.png");
}

.storeGame{
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

#god{
	background-image: url("https://i.postimg.cc/bY7QwSfF/god.png");
}

#raider{
	background-image: url("https://i.postimg.cc/VLyY6nsT/tomb.png");
}

#codi{
	background-image: url("https://i.postimg.cc/MKkq3q1Q/if.png");
}

#mafia{
	background-image: url("https://i.postimg.cc/gk94xTPp/mafia.png");
}

#destiny{
	background-image: url("https://i.postimg.cc/ncbwWCgJ/destiny.png");
}

#bt1{
	background-image: url("https://i.postimg.cc/fT4GmHvD/b1.png");
}

#lg{
	background-image: url("https://i.postimg.cc/sfkNC263/horizon.png");
}

#per{
	background-image: url("https://i.postimg.cc/QxGz5trH/per.png");
}

/*store*/

#store{
	padding: 1em;
	padding-top: 6em;
	margin-top: -3em;
	width: 60em;
	height: 25em;
	padding-left: 12em;
}

#store div{
	float: left;
	border: 3px solid rgba(245,245,245,1);
	width: 12em;
	height: 12em;
	display: inline-block;
}

#store div:hover{
	transform: scale(1.1, 1.1);
	box-shadow: 0px 5px 10px 3px rgba(45,45,45,.7);
	transition: 0.3s ease;
}

/*waves****************************/


.box {
	position: fixed;
	top: 0;
	transform: rotate(80deg);
	left: 0;
}

.wave {
	position: fixed;
	top: 0;
	left: 0;
  opacity: .4;
  position: absolute;
  top: 3%;
  left: 10%;
  background: #0af;
  width: 1500px;
  height: 1300px;
  margin-left: -150px;
  margin-top: -250px;
  transform-origin: 50% 48%;
  border-radius: 43%;
  animation: drift 7000ms infinite linear;
}

.wave.-three {
  animation: drift 7500ms infinite linear;
	position: fixed;
	background-color: #77daff;
}

.wave.-two {
  animation: drift 3000ms infinite linear;
  opacity: .1;
  background: black;
	position: fixed;
}

.box:after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  transform: translate3d(0, 0, 0);
}

@keyframes drift {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}

/*LOADING SPACE*/

.contain {
	animation-delay: 4s;
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  background: #25a7d7;
  background: -webkit-linear-gradient(#25a7d7, #2962FF);
  background: linear-gradient(#25a7d7, #25a7d7);
}

.icon {
  width: 100px;
  height: 100px;
  margin: 0 5px;
}

/*Animation*/
.icon:nth-child(2) img {-webkit-animation-delay: 0.2s;animation-delay: 0.2s}
.icon:nth-child(3) img {-webkit-animation-delay: 0.3s;animation-delay: 0.3s}
.icon:nth-child(4) img {-webkit-animation-delay: 0.4s;animation-delay: 0.4s}

.icon img {
  -webkit-animation: anim 2s ease infinite;
  animation: anim 2s ease infinite;
  -webkit-transform: scale(0,0) rotateZ(180deg);
  transform: scale(0,0) rotateZ(180deg);
}

@-webkit-keyframes anim{
  0% {
    -webkit-transform: scale(0,0) rotateZ(-90deg);
    transform: scale(0,0) rotateZ(-90deg);opacity:0
  }
  30% {
    -webkit-transform: scale(1,1) rotateZ(0deg);
    transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  50% {
    -webkit-transform: scale(1,1) rotateZ(0deg);
    transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  80% {
    -webkit-transform: scale(0,0) rotateZ(90deg);
    transform: scale(0,0) rotateZ(90deg);opacity:0
  }
}

@keyframes anim{
  0% {
    -webkit-transform: scale(0,0) rotateZ(-90deg);
    transform: scale(0,0) rotateZ(-90deg);opacity:0
  }
  30% {
    -webkit-transform: scale(1,1) rotateZ(0deg);transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  50% {
    -webkit-transform: scale(1,1) rotateZ(0deg);
    transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  80% {
    -webkit-transform: scale(0,0) rotateZ(90deg);
    transform: scale(0,0) rotateZ(90deg);opacity:0
  }
}
$(document).ready(function(){
    $(".gameText").hide();
    $('.gameTitle').hide();
    $('#store').hide();
    timeout();

    // Variables for current position
    var x, y;

    function handleMouse(e) {
      // Verify that x and y already have some value
      if (x && y) {
        // Scroll window by difference between current and previous positions
        window.scrollBy(e.clientX - x, e.clientY - y);
      }

      // Store current position
      x = e.clientX ;
      y = e.clientY;
    }

    // Assign handleMouse to mouse movement events
    document.onmousemove = handleMouse;

     $(window).scroll(function(){
        if ($(this).scrollTop() > 10) {
            $('header').css("background-color","rgba(34,123,165,.8)");
        } else {
            $('header').css("background-color","rgba(255,255,255,0)");
        }
    });
});


var time = 0;

function timeout() {
    setTimeout(function () {
        if(time===0){
            $("#textInfo").text("Rocket League new content!");
            $("#textInfo").addClass("animated slideInDown");
            time++;
        }else
            if(time===1){
            $("#textInfo").text("Outlast 2 Demo Downloaded");
            $("#textInfo").addClass("animated slideInDown");
            time++;
        }else
            if(time===2){
            $("#textInfo").text("Overwatch Update V 1.2.3");
            $("#textInfo").addClass("animated slideInDown");
            time=0;
        }
        setTimeout(function () {
            $("#textInfo").removeClass("animated slideInDown");
        }, 1000);
        timeout();
    }, 4000);
}

$(".squareGame").hover(
    function(){
        $(this).find('.gameText').show();
        $(this).find('.gameTitle').show();
        $(this).find('#store').show();
    },
    function(){
        $(this).find('.gameText').hide();
        $(this).find('.gameTitle').hide();
        $(this).find('#store').hide();
    }
);

function init() {
  'use strict'
  function select(a) {
    return document.querySelector(a);
  }
  var randomNum = Math.floor((Math.random() * 24) + 1),
      triangle = select('.triangle img'),
      circle = select('.circle img'),
      cross = select('.cross img'),
      box = select('.boxi img'),
      link = 'http://kapilnemo.free.fr/codepen/playstation-loading/',
      order = [
        [1,2,3,4],
        [1,2,4,3],
        [1,3,2,4],
        [1,3,4,2],
        [1,4,2,3],
        [1,4,3,2],
        [2,1,3,4],
        [2,1,4,3],
        [2,3,1,4],
        [2,3,4,1],
        [2,4,1,3],
        [2,4,3,1],
        [3,1,2,4],
        [3,1,4,2],
        [3,2,1,4],
        [3,2,4,1],
        [3,4,1,2],
        [3,4,2,1],
        [4,1,2,3],
        [4,1,3,2],
        [4,2,1,3],
        [4,2,3,1],
        [4,3,1,2],
        [4,3,2,1]
      ];

  triangle.src = link + order[randomNum][0] + ".png";
  circle.src = link + order[randomNum][1] + ".png";
  cross.src = link + order[randomNum][2] + ".png";
  box.src = link + order[randomNum][3] + ".png";


}
window.setInterval(init, 2000);

Похожая запись

Other

Scratch & Win

Jul 8, 2024 admin
Other

Countdown timer

Jun 14, 2024 admin
Other

January 1

Dec 28, 2023 admin

You missed

Cards ReactJS

Recipe Card React.js

18.06.2026 admin
Cards

Recipe Card

18.06.2026 admin
ReactJS Sliders

Image Carousel React.js

08.06.2026 admin
Sliders

Image Carousel

08.06.2026 admin