1
0
mirror of https://github.com/exane/not-gwent-online synced 2024-12-23 21:03:14 +00:00

push this...

This commit is contained in:
devfake 2015-07-02 21:52:40 +02:00
parent 1d9328ddbd
commit 676e40f37b
11 changed files with 482 additions and 0 deletions

BIN
new_public/back.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

0
new_public/css/board.css Normal file
View File

64
new_public/css/core.css Normal file
View File

@ -0,0 +1,64 @@
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr6YfJ4wTnNoNUCmOpdh16Tg.woff2) format('woff2'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr1uKlGE8-OjkUKWan_M3D6s.woff) format('woff');
}
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 400;
src: local('Titillium Web'), local('TitilliumWeb-Regular'), url(http://fonts.gstatic.com/s/titilliumweb/v4/7XUFZ5tgS-tD6QamInJTceHuglUR2dhBxWD-q_ehMME.woff2) format('woff2'), url(http://fonts.gstatic.com/s/titilliumweb/v4/7XUFZ5tgS-tD6QamInJTcZ_o9VAbKgK36i-4snuAuCM.woff) format('woff');
}
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 600;
src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr6d1JQt-lS5nD-1TJX2NNl0.woff2) format('woff2'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wprx3QmhlKDgQgT1VN2Ed1WFo.woff) format('woff');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
body {
background: url(../inner-bg.jpg) #162232 center top no-repeat;
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'Titillium Web', sans-serif;
}
::-moz-selection {
background: rgba(217,111,31, .99);
color: #fff;
text-shadow: none;
}
::selection {
background: rgba(217,111,31, .99);
color: #fff;
text-shadow: none;
}
a { text-decoration: none; }
ul { list-style: none; }
.no-select {
user-select: none;
}
.wrap {
margin: 0 auto;
max-width: 1300px;
min-width: 1100px;
width: 100%;
}

231
new_public/css/hand.css Normal file
View File

@ -0,0 +1,231 @@
.hand-wrap {
background: rgba(0,0,0,.8);
width: 100%;
height: 130px;
position: absolute;
bottom: 0;
left: 0;
}
.hand-cards {
max-width: calc(100% - 350px);
margin: 0 auto;
width: 100%;
float: left;
}
.card-wrap {
float: left;
margin: 18px 0 0 0;
cursor: pointer;
z-index: 10;
}
.card-wrap .shadow,
.grave .shadow {
height: calc(100% - 40px);
left: 14px;
top: 20px;
width: calc(100% - 26px);
}
.card-wrap:hover {
margin: 10px 0 0 0;
box-sizing: unset;
padding: 0 0 10px 0;
z-index: 20;
}
.card {
float: left;
height: 93px;
width: 69px;
position: relative;
transition: margin .05s ease-in-out 0s;
}
.card i {
display: block;
position: absolute;
top: 3px;
left: 3px;
overflow: hidden;
height: 87px;
z-index: 10;
}
/** SHAME **/
.card-wrap:hover .bla,
.grave:hover .bla,
.leader-card:hover .bla {
box-shadow: 0 0 2px 0 orange;
opacity: 1;
}
.bla {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
.shadow {
border-radius: 35%;
box-shadow: 0 0 15px 14px #ffa500;
content: "";
height: calc(100% - 50px);
left: 15px;
position: absolute;
width: calc(100% - 22px);
z-index: 1;
top: 30px;
transition: all 0.3s ease-in-out 0s;
opacity: 0;
}
.card-wrap:hover .shadow,
.grave:hover .shadow,
.leader-card:hover .shadow {
-webkit-animation: Shadow 4s ease-in-out infinite;
-moz-animation: Shadow 4s ease-in-out infinite;
animation: Shadow 4s ease-in-out infinite;
}
.ani {
background: linear-gradient(2deg, #000, #000, #000, #000);;
transition: all .05s ease-in-out 0s;
}
.card-wrap:hover .ani,
.grave:hover .ani,
.leader-card:hover .ani {
background: linear-gradient(2deg, #ffa500, #ffd68b, #ffa500, #ffa500);
background-size: 800% 800%;
-webkit-animation: AnimationName 3s ease infinite;
-moz-animation: AnimationName 3s ease infinite;
animation: AnimationName 3s ease infinite;
}
@-webkit-keyframes Shadow {
0% {
opacity: 0;
}
25% {
opacity: .5;
}
50%{
opacity: 1;
}
75% {
opacity: .5;
}
100%{ opacity: 0;
}
}
@-webkit-keyframes Shadow {
0% {
opacity: 0;
}
25% {
opacity: .5;
}
50%{
opacity: 1;
}
75% {
opacity: .5;
}
100%{ opacity: 0;
}
}
@keyframes Shadow {
0% {
opacity: 0;
}
25% {
opacity: .5;
}
50%{
opacity: 1;
}
75% {
opacity: .5;
}
100%{ opacity: 0;
}
}
.overlay-card {
background: linear-gradient(2deg, rgba(255,255,255,.03), rgba(255,255,255,.2), rgba(255,255,255,.05));
background-size: 800% 800%;
position: absolute;
z-index: 20;
top: 3px;
left: 3px;
width: calc(100% - 4px);
height: calc(100% - 4px);
opacity: 0;
cursor: pointer;
}
.card-wrap:hover .overlay-card,
.grave:hover .overlay-card,
.leader-card:hover .overlay-card {
opacity: 1;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
}
@-webkit-keyframes AnimationName {
0%{background-position:51% 0%}
50%{background-position:50% 100%}
100%{background-position:51% 0%}
}
@-moz-keyframes AnimationName {
0%{background-position:51% 0%}
50%{background-position:50% 100%}
100%{background-position:51% 0%}
}
@keyframes AnimationName {
0%{background-position:51% 0%}
50%{background-position:50% 100%}
100%{background-position:51% 0%}
}
/** SUB HAND **/
.sub-hand {
float: left;
width: 150px;
margin: 18px 0 0 0;
}
.grave {
position: relative;
width: 69px;
height: 93px;
float: left;
}
.grave-img {
background: url(../grave.png) no-repeat;
position: absolute;
width: 63px;
height: 87px;
top: 3px;
left: 3px;
z-index: 10;
}
.deck-back {
background: url(../back.png) no-repeat;
float: left;
width: 63px;
height: 87px;
margin: 3px 0 0 10px;
}

53
new_public/css/leader.css Normal file
View File

@ -0,0 +1,53 @@
.leader-wrap {
float: left;
width: 200px;
}
.leader-card-wrap {
position: relative;
bottom: 75px;
}
.leader-card {
float: left;
position: relative;
width: 113px;
bottom: 15px;
height: 148px;
}
.leader-card .shadow {
left: 11px;
}
.leader-card i {
position: absolute;
top: 4px;
left: 4px;
width: 105px;
height: 140px;
background: silver;
z-index: 10;
}
.btn-pass {
float: left;
padding: 4px;
color: #fff;
backgorund: #000;
clear: both;
width: 106px;
text-align: center;
text-transform: uppercase;
cursor: pointer;
margin: 0 0 0 4px;
background: #243141;
background: -moz-linear-gradient(left, #243141 0%, #334152 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#243141), color-stop(100%,#334152));
background: -webkit-linear-gradient(left, #243141 0%,#334152 100%);
background: -o-linear-gradient(left, #243141 0%,#334152 100%);
background: -ms-linear-gradient(left, #243141 0%,#334152 100%);
background: linear-gradient(to right, #243141 0%,#334152 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#243141', endColorstr='#334152',GradientType=1 );
}

BIN
new_public/grave.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

47
new_public/index.php Normal file
View File

@ -0,0 +1,47 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gwent Online</title>
<link href="assets/favicon.ico" rel="icon" type="image/x-icon">
<link href="css/core.css" rel="stylesheet">
<link href="../public/build/cards.css" rel="stylesheet">
<link href="css/board.css" rel="stylesheet">
<link href="css/hand.css" rel="stylesheet">
<link href="css/leader.css" rel="stylesheet">
</head>
<body>
<div class="hand-wrap">
<div class="wrap">
<?php
require 'partials/leader.php';
require 'partials/hand_cards.php';
require 'partials/sub_hand.php';
?>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="core.js"></script>
<script>
// Count hand cards and set correct width.
// todo: Run on update.
//var handLength = $('.card').length * 70;
//$('.hand-cards').css('width', handLength + 'px');
</script>
</body>
</html>

BIN
new_public/inner-bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

View File

@ -0,0 +1,57 @@
<div class="hand-cards">
<div class="card-wrap">
<div class="card">
<div class="bla ani"></div>
<i class="card-sm-northern card-sm-northern-trebuchet1"></i>
<div class="shadow"></div>
<div class="overlay-card"></div>
</div>
</div>
<div class="card-wrap">
<div class="card">
<div class="bla ani"></div>
<i class="card-sm-monster card-sm-monster-leshen"></i>
<div class="shadow"></div>
<div class="overlay-card"></div>
</div>
</div>
<div class="card-wrap">
<div class="card">
<div class="bla ani"></div>
<i class="card-sm-monster card-sm-monster-imlerith"></i>
<div class="shadow"></div>
<div class="overlay-card"></div>
</div>
</div>
<div class="card-wrap">
<div class="card">
<div class="bla ani"></div>
<i class="card-sm-neutral card-sm-neutral-decoy"></i>
<div class="shadow"></div>
<div class="overlay-card"></div>
</div>
</div>
<div class="card-wrap">
<div class="card">
<div class="bla ani"></div>
<i class="card-sm-monster card-sm-monster-frightener"></i>
<div class="shadow"></div>
<div class="overlay-card"></div>
</div>
</div>
<div class="card-wrap">
<div class="card">
<div class="bla ani"></div>
<i class="card-sm-monster card-sm-monster-vampire_ekimmara"></i>
<div class="shadow"></div>
<div class="overlay-card"></div>
</div>
</div>
</div>

View File

@ -0,0 +1,16 @@
<div class="leader-wrap">
<div class="leader-card-wrap">
<div class="leader-card">
<div class="bla ani"></div>
<i></i>
<div class="shadow"></div>
<div class="overlay-card"></div>
</div>
<div class="btn-pass">Pass</div>
</div>
</div>

View File

@ -0,0 +1,14 @@
<div class="sub-hand">
<div class="grave">
<div class="bla ani"></div>
<i class="grave-img"></i>
<div class="shadow"></div>
<div class="overlay-card"></div>
</div>
<div class="deck-back">
</div>
</div>