Skip to content

M
mangala-pardusacikhack
Kaydet (Commit) 3bc6402e authored tarafından Tuğba Fıçıcı's avatar Tuğba Fıçıcı
Dosyalara gözat
Seçenekler

Oda overlayi eklendi

üst 9f3ffde1
Hide whitespace changes
Inline Side-by-side
Showing with 150 additions and 4 deletions
assets/gameArea.css
Dosyayı görüntüle @ 3bc6402e
...@@ -61,13 +61,58 @@ ...@@ -61,13 +61,58 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0,0,0,0.5); background-color: rgba(51, 68, 67, 0.90);
z-index: 2; z-index: 2;
cursor: pointer; cursor: pointer;
color:aliceblue;
} }
#overlayText{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
.kenar{
border: double 5px #ffe268;
border-color: #ffe268;
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
font-family: "Itim";
}
.disKenar{
font-family: "Itim";
padding-top: 15px;
padding-bottom:15px ;
}
.odaCerceve{
height: 100%;
padding-top: 30%;
justify-content: center;
align-content: center;
text-align: center;
}
.overlayTitle{
text-align: center;
font-size: 25px;
color:#ffe268;
text-shadow: 1.5px 1.5px #a87414;
margin-bottom: 10px;
}
body{ body{
font-family: "OpenSans", sans-serif; font-family: "Itim";
font-size: 1rem; font-size: 1rem;
min-height: 100vh; min-height: 100vh;
background-image: linear-gradient(to right bottom, #334443, #334443, #334443, #334443, #334443); background-image: linear-gradient(to right bottom, #334443, #334443, #334443, #334443, #334443);
...@@ -200,3 +245,81 @@ body{ ...@@ -200,3 +245,81 @@ body{
:root {
--backgroundColor: rgba(246, 241, 209);
--colorShadeA: rgb(88, 112, 85);
--colorShadeB: rgb(88, 112, 85);
--colorShadeC: rgb(187, 240, 182,94);
--colorShadeD: rgb(197, 252, 192,99);
--colorShadeE: rgb(198, 255, 193,100);
}
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
* {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
font-size: 11px;
color:var(--colorShadeA);
font-weight: 700;
text-transform: uppercase;
font-family: inherit;
width: 130px;
}
button.big-button {
padding: 1em 2em;
border: 2px solid var(--colorShadeA);
border-radius: 1em;
background: var(--colorShadeE);
transform-style: preserve-3d;
transition: all 175ms cubic-bezier(0, 0, 1, 1);
}
button.big-button::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--colorShadeC);
border-radius: inherit;
box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.75em 0 0 var(--colorShadeA);
transform: translate3d(0, 0.75em, -1em);
transition: all 175ms cubic-bezier(0, 0, 1, 1);
}
button.big-button:hover {
background: var(--colorShadeD);
transform: translate(0, 0.375em);
}
button.big-button:hover::before {
transform: translate3d(0, 0.75em, -1em);
}
button.big-button:active {
transform: translate(0em, 0.75em);
}
button.big-button:active::before {
transform: translate3d(0, 0, -1em);
box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.25em 0 0 var(--colorShadeB);
}
\ No newline at end of file
pages/gameArea.html
Dosyayı görüntüle @ 3bc6402e
...@@ -9,11 +9,33 @@ ...@@ -9,11 +9,33 @@
</head> </head>
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<div id="overlay" onclick="overlayOff()">
<div class="row" style="padding: 50px;">
<div class="col align-self-center disKenar" style="height: 400px;">
<div class="odaCerceve kenar">
<div class="overlayTitle">ODA KUR</div>
<div class="overlayInput"><button class="big-button" style="font-size: 11px;">OLUŞTUR</button></div>
</div>
</div>
<div class="col align-self-center disKenar" style="height: 400px;">
<div class="odaCerceve kenar">
<div class="overlayTitle">ODAYA KATIL</div>
<div class="overlayInput">
<div class="row">
<div class="col-7 align-self-center"><input class="form-control" type="text" placeholder="Oda Numarası" style="margin-left: 10px;margin-top: 5px;"></div>
<div class="col-5"><button class="big-button" style="font-size: 11px;margin-right: 10px;">GİR</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin: 0;"> <div class="row" style="margin: 0;">
<div class="col-4"><div class="geriButonu"><a href="turnBackMain.html"><img width="60" height="60" src="../assets/image/geri.png" alt="geri"></a></div></div> <div class="col-4"><div class="geriButonu"><a href="turnBackMain.html"><img width="60" height="60" src="../assets/image/geri.png" alt="geri"></a></div></div>
<div class="col-4"><div class="bos"></div></div> <div class="col-4"><div class="bos"><button class="btn-primary" onclick="overlay()">overlay</button></div></div>
<div class="col-4 text-right" id="user1"> <div class="col-4 text-right" id="user1">
<div id="user2card"> <div id="user2card">
<b>Oyuncu 2</b> <b>Oyuncu 2</b>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment