Skip to content

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

Ekran arayüzleri yenilendi.

üst fdccc6e0
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 562 additions and 185 deletions
assets/bootstrap.min.css
Dosyayı görüntüle @ 7204fee0
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/gameArea.css
Dosyayı görüntüle @ 7204fee0
@font-face {
font-family: "Itim";
src: url('fonts/Itim-Regular.ttf') format("truetype");
}
.dot_black { .dot_black {
height: 20px; height: 20px;
width: 20px; width: 20px;
border-radius: 50%; background-image: url("image/greenball.png");
background-color: black; background-repeat: no-repeat;
background-size: cover;
display: inline-block; display: inline-block;
} }
.dot_gray { .dot_gray {
height: 20px; height: 20px;
width: 20px; width: 20px;
border-radius: 50%; background-image: url("image/redball.png");
background-color: gray; background-repeat: no-repeat;
background-size: cover;
display: inline-block; display: inline-block;
} }
.cirlce { .cirlce {
height: 100px; height: 101px;
width: 100px; width: 101px;
background-color: white; background-color: rgba(98, 54, 34, 0.685);
border-radius: 50%; border-radius: 50%;
margin: 10px; margin:3.1px;
border: 1px solid black;
}
.cirlce_container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-content: center;
flex-direction: row; text-align: center;
flex-wrap: wrap;
float:left;
}
.clear{
clear:both;
} }
.rectangle { .rectangle {
height: 300px; height: 305px;
width: 75px; width: 75px;
border: solid 1px black; background-color: rgba(98, 54, 34, 0.685);
border-radius: 10px; border-radius: 10px;
} }
.deneme {
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.circle_container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.circle_wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
#overlay { #overlay {
position: fixed; position: fixed;
display: none; display: none;
...@@ -71,12 +65,138 @@ ...@@ -71,12 +65,138 @@
z-index: 2; z-index: 2;
cursor: pointer; cursor: pointer;
} }
#text{
position: absolute; body{
top: 50%; font-family: "OpenSans", sans-serif;
left: 50%; font-size: 1rem;
font-size: 50px; min-height: 100vh;
color: white; background-image: linear-gradient(to right bottom, #334443, #334443, #334443, #334443, #334443);
transform: translate(-50%,-50%); margin: 0;
-ms-transform: translate(-50%,-50%);
}
\ No newline at end of file }
#user1{
height: 70px;
background-color: #ed664c;
border-bottom-left-radius: 40px;
margin:0;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
margin-bottom: 20px;
color:#334443;
font-family: "Itim";
font-size: 20px;
align-items: center;
display: flex;
}
#user2{
height:70px;
background-color: #ffe268;
border-top-right-radius: 40px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
margin:0;
margin-top: 20px;
color:#334443;
font-family: "Itim";
font-size: 20px;
align-items: center;
display: flex;
float:left;
}
#tahta{
height: 362px;
margin:0;
}
.container-fluid{
padding: 0;
}
#tahtaCerceve{
width: 90%;
height: 95%;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
padding-top: 0.75%;
background-color: #894c30;
-webkit-box-shadow: 0px 0px 23px 8px rgba(0,0,0,0.85);
box-shadow: 0px 0px 23px 8px rgba(0,0,0,0.85);
}
#tahtaGorunum{
width: 98%;
height: 98%;
margin-right: auto;
margin-left: auto;
background-image:url("image/woodtexture.jpg");
background-repeat: no-repeat;
background-size: cover;
padding:10px;
}
.hazine1{
width: 9%;
height: 90%;
margin-right: 1%;
}
.hazine2{
width: 9%;
height: 90%;
margin-left: 1%;
}
.boncuklar{
width: 80%;
height: 90%;
align-items: center;
}
.boncuklar1{
width: 100%;
height: 100%;
margin-top: 25px;
}
.boncuklar2{
width: 100%;
height: 100%;
margin-top: 40px;
}
#geriButonuIcon{
width: 50px;
height: 50px;
background-image: url("image/geri.png");
background-repeat: no-repeat;
background-size: cover;
}
.toast{
margin-top: 30px;
font-size: 15px;
color:#c6ffc1;
font-family: "Itim";
}
.oda{
margin-top: 55px;
color:#c6ffc1;
font-size: 20px;
font-family: "Itim";
}
assets/main.css
Dosyayı görüntüle @ 7204fee0
...@@ -34,8 +34,8 @@ ...@@ -34,8 +34,8 @@
src: url('fonts/AAhaWow-2O1K8.ttf') format("truetype"); src: url('fonts/AAhaWow-2O1K8.ttf') format("truetype");
} }
@font-face { @font-face {
font-family: "RobotoBold"; font-family: "Itim";
src: url('fonts/Roboto-Regular.ttf') format("truetype"); src: url('fonts/Itim-Regular.ttf') format("truetype");
} }
body { body {
...@@ -183,35 +183,35 @@ button.big-button:active::before { ...@@ -183,35 +183,35 @@ button.big-button:active::before {
} }
.link{ .link{
font-family: "RobotoBold"; font-family: "Itim";
font-size: 14px; font-size: 14px;
margin-right: 5px; margin-right: 5px;
color: #334443; color: aliceblue;
text-decoration: none; text-decoration: none;
} }
#linksiz{ #linksiz{
font-family: "RobotoBold"; font-family: "Itim";
font-size: 14px; font-size: 14px;
margin-top: 8px; margin-top: 8px;
color: #334443; color: aliceblue;
text-decoration: none; text-decoration: none;
} }
.link:hover{ .link:hover{
font-family: "RobotoBold"; font-family: "Itim";
font-size: 14px; font-size: 14px;
color: #334443; color: #deeceb;
text-shadow: 1px 1px #ee8a17; text-shadow: 1px 1px #ee8a17;
text-decoration: none; text-decoration: none;
} }
.oyunText{ .oyunText{
font-family: "RobotoBold"; font-family: "Itim";
font-size: 20px; font-size: 20px;
color: #c6ffc1; color: #c6ffc1;
text-decoration: none; text-decoration: none;
...@@ -219,7 +219,7 @@ button.big-button:active::before { ...@@ -219,7 +219,7 @@ button.big-button:active::before {
text-shadow: 2px 2px #2e383a; text-shadow: 2px 2px #2e383a;
} }
.oyunText:hover{ .oyunText:hover{
font-family: "RobotoBold"; font-family: "Itim";
font-size: 20px; font-size: 20px;
color: #c6ffc1; color: #c6ffc1;
margin-top: 10px; margin-top: 10px;
......
main.html
Dosyayı görüntüle @ 7204fee0
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mangala | CLUTCH</title>
<link rel="stylesheet" href="assets/main.css" />
<link rel="stylesheet" href="assets/bootstrap.min.css" />
</head>
<body> <head>
<div class="container"> <meta charset="UTF-8" />
<div class="row" id="infoTitle"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="col"> <title>Mangala | CLUTCH</title>
<div class="row"> <link rel="stylesheet" href="assets/main.css" />
<p id="mangalaTitle">MANGALA</p> <link rel="stylesheet" href="assets/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row" id="infoTitle">
<div class="col">
<div class="row">
<p id="mangalaTitle">MANGALA</p>
</div>
<div class="row" id="infoText">
<div class="col">
<p id="linksiz"><b>Türk Zeka ve Strateji Oyunu</b></p>
</div> </div>
<div class="row" id="infoText"> <div class="col text-right">
<div class="col"> <img width="35" height="35" src="./assets/image/rulesYellow.png" alt="rules" />
<p id="linksiz"><b>Türk Zeka ve Strateji Oyunu</b></p> <a href="./pages/nasilOynanir.html" class="link"><b>Nasıl Oynanır?</b></a>
</div> <a href="#" class="link" style="font-size: 20px;">|</a>
<div class="col text-right"> <img width="35" height="35" src="./assets/image/settings.png" alt="rules">
<img <a href="#" class="link"><b>Ayarlar</b></a>
width="35"
height="35"
src="./assets/image/rulesYellow.png"
alt="rules"
/>
<a href="./pages/nasilOynanir.html" class="link"
><b>Nasıl Oynanır?</b></a
>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row"> <div class="row">
<div class="col" style="margin-right: 10px"> <div class="col" style="margin-right: 10px">
<a href="pages/robotGameArea.html" class="boxA"> <a href="pages/robotGameArea.html" class="boxA">
<div class="row oyun" style="align-items: center"> <div class="row oyun" style="align-items: center">
<div class="col text-center"> <div class="col text-center">
<img <img width="100" height="80" src="./assets/image/robot.png" alt="robot" />
width="100"
height="80"
src="./assets/image/robot.png"
alt="robot"
/>
</div>
<div class="col text-center">
<p class="oyunText">Robota Karşı Oyna</p>
</div>
</div> </div>
</a> <div class="col text-center">
<a href="pages/gameArea.html" class="boxA"> <p class="oyunText">Robota Karşı Oyna</p>
<div class="row oyun" style="align-items: center">
<div class="col text-center">
<img
width="100"
height="100"
src="./assets/image/playFriendskirp.png"
alt="playFriends"
/>
</div>
<div class="col text-center">
<p class="oyunText">Arkadaşına Karşı Oyna</p>
</div>
</div> </div>
</a> </div>
</div> </a>
<div class="col" style="margin-left: 10px"> <a href="pages/gameArea.html" class="boxA">
<a href="" class="boxA"> <div class="row oyun" style="align-items: center">
<div class="row skor" style="align-items: center"> <div class="col text-center">
<div class="col text-center"> <img width="100" height="100" src="./assets/image/playFriendskirp.png" alt="playFriends" />
<img
width="50"
height="50"
src="./assets/image/score.png"
alt="playFriends"
/>
</div>
<div class="col text-center">
<p class="oyunText">Skor</p>
</div>
</div> </div>
</a> <div class="col text-center">
<a href="" class="boxA"> <p class="oyunText">Arkadaşına Karşı Oyna</p>
<div class="row oyun" style="align-items: center">
<div class="col text-center">
<img
width="80"
height="80"
src="./assets/image/onlineSoluk.png"
alt="playFriends"
/>
</div>
<div class="col text-center">
<p class="oyunText">Multiplayer Oyna</p>
</div>
</div> </div>
</a> </div>
<a href="" class="boxA"> </a>
<div class="row skor" style="align-items: center"> </div>
<div class="col text-center"> <div class="col" style="margin-left: 10px">
<img <a href="" class="boxA">
width="50" <div class="row skor" style="align-items: center">
height="50" <div class="col text-center">
src="./assets/image/contact.png" <img width="50" height="50" src="./assets/image/score.png" alt="playFriends" />
alt="playFriends"
/>
</div>
<div class="col text-center">
<p class="oyunText">Clutch</p>
</div>
</div> </div>
</a> <div class="col text-center">
</div> <p class="oyunText">Skor</p>
</div>
</div>
</a>
<a href="" class="boxA">
<div class="row oyun" style="align-items: center">
<div class="col text-center">
<img width="80" height="80" src="./assets/image/onlineSoluk.png" alt="playFriends" />
</div>
<div class="col text-center">
<p class="oyunText">Multiplayer Oyna</p>
</div>
</div>
</a>
<a href="" class="boxA">
<div class="row skor" style="align-items: center">
<div class="col text-center">
<img width="50" height="50" src="./assets/image/contact.png" alt="playFriends" />
</div>
<div class="col text-center">
<p class="oyunText">Clutch</p>
</div>
</div>
</a>
</div> </div>
</div> </div>
</div>
<script>
const electron = require("electron");
const { ipcRenderer } = electron;
<script> let sendBtn = document.querySelector("#sendBtn");
const electron = require("electron"); sendBtn.addEventListener("click", () => {
const { ipcRenderer } = electron; ipcRenderer.send("btnClick", "Oyna tuşuna basıldı!");
});
let sendBtn = document.querySelector("#sendBtn"); let btnSettings = document.querySelector("#btnSettings");
sendBtn.addEventListener("click", () => { btnSettings.addEventListener("click", () => {
ipcRenderer.send("btnClick", "Oyna tuşuna basıldı!"); ipcRenderer.send("key:settingScreen");
}); });
let btnSettings = document.querySelector("#btnSettings"); let btnExit = document.querySelector("#btnExit");
btnSettings.addEventListener("click", () => { btnExit.addEventListener("click", () => {
ipcRenderer.send("key:settingScreen"); ipcRenderer.send(
}); "key:exitScreen",
"file://" + __dirname + "/pages/settings.html"
);
});
</script>
</body>
let btnExit = document.querySelector("#btnExit"); </html>
btnExit.addEventListener("click", () => { \ No newline at end of file
ipcRenderer.send(
"key:exitScreen",
"file://" + __dirname + "/pages/settings.html"
);
});
</script>
</body>
</html>
pages/gameArea.html
Dosyayı görüntüle @ 7204fee0
This diff is collapsed.
pages/settings.html
Dosyayı görüntüle @ 7204fee0
...@@ -11,3 +11,158 @@ ...@@ -11,3 +11,158 @@
</form> </form>
</body> </body>
</html> </html>
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="../assets/bootstrap.min.css" />
<link rel="stylesheet" href="../assets/button.sccs" />
<style>
@font-face {
font-family: "Itim";
src: url('../assets/fonts/Itim-Regular.ttf') format("truetype");
}
body {
width: 400px;
height: 300px;
background-color: #334443;
border-style: solid;
color: aliceblue;
font-family: "Itim";
}
: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: 150px;
}
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);
}
.custom-control-input:checked~.custom-control-label::before {
color: #fff;
border-color: #7B1FA2;
}
.custom-control-input:checked~.custom-control-label.yellow::before {
background-color: #ffe268;
}
</style>
</head>
<body>
<div class="container">
<div class="col">
<div class="row">
<div class="col text-center" style="margin-top: 30px; color:#ffe268; text-shadow: 1.5px 1.5px #a87414;" ><h4>AYARLAR</h4></div>
</div>
<div class="row" style="margin-top:10px;margin-bottom:10px;font-size: 16px;">
<div class="col-5 align-self-center">Kullanıcı Adı:</div>
<div class="col-7"><input class="form-control" type="text" placeholder="Kullanıcı Adı"></div>
</div>
<div class="row" style="margin-top:10px;margin-bottom:10px;font-size: 16px;">
<div class="col-5">Zorluk Seviyesi:</div>
<div class="col-7">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input" checked>
<label class="custom-control-label yellow" for="customRadioInline1">Kolay</label>
</div><br>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label yellow" for="customRadioInline2">Orta</label>
</div><br>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline3" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label yellow" for="customRadioInline3">Zor</label>
</div>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-5">
</div>
<div class="col-7">
<!--<a href="#" class="btn">Oyuna Dön</a>-->
<button class="big-button">Kaydet</button>
</div>
</div>
</div>
</div>
</body>
</html>
pages/turnBackMain.html 0 → 100644
Dosyayı görüntüle @ 7204fee0
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="../assets/bootstrap.min.css" />
<link rel="stylesheet" href="../assets/button.sccs" />
<style>
@font-face {
font-family: "Itim";
src: url('../assets/fonts/Itim-Regular.ttf') format("truetype");
}
body {
width: 400px;
height: 250px;
background-color: #334443;
border-style: solid;
color: aliceblue;
font-family: "Itim";
}
: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: 150px;
}
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);
}
</style>
</head>
<body>
<div class="container">
<div class="col">
<div class="row">
<div class="col text-center" style="margin-top: 50px; color:#ffe268; text-shadow: 1.5px 1.5px #a87414;" ><h4>ANASAYFAYA DÖN</h4></div>
</div>
<div class="row" style="margin-top:10px;margin-bottom:10px;font-size: 14px;">
<p>Anasayfaya döndüğünüzde oyun kaydedilmez.</p>
</div>
<div class="row">
<div class="col">
<button class="big-button">Anasayfaya Dön</button>
</div>
<div class="col">
<!--<a href="#" class="btn">Oyuna Dön</a>-->
<button class="big-button">Oyuna Dön</button>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
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