Kaydet (Commit) 7204fee0 authored tarafından Tuğba Fıçıcı's avatar Tuğba Fıçıcı

Ekran arayüzleri yenilendi.

üst fdccc6e0
This source diff could not be displayed because it is too large. You can view the blob instead.
@font-face {
font-family: "Itim";
src: url('fonts/Itim-Regular.ttf') format("truetype");
}
.dot_black {
height: 20px;
width: 20px;
border-radius: 50%;
background-color: black;
background-image: url("image/greenball.png");
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
}
.dot_gray {
height: 20px;
width: 20px;
border-radius: 50%;
background-color: gray;
background-image: url("image/redball.png");
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
}
.cirlce {
height: 100px;
width: 100px;
background-color: white;
height: 101px;
width: 101px;
background-color: rgba(98, 54, 34, 0.685);
border-radius: 50%;
margin: 10px;
border: 1px solid black;
}
.cirlce_container {
margin:3.1px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
align-content: center;
text-align: center;
flex-wrap: wrap;
float:left;
}
.clear{
clear:both;
}
.rectangle {
height: 300px;
height: 305px;
width: 75px;
border: solid 1px black;
background-color: rgba(98, 54, 34, 0.685);
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 {
position: fixed;
display: none;
......@@ -71,12 +65,138 @@
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
\ No newline at end of file
body{
font-family: "OpenSans", sans-serif;
font-size: 1rem;
min-height: 100vh;
background-image: linear-gradient(to right bottom, #334443, #334443, #334443, #334443, #334443);
margin: 0;
}
#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";
}
......@@ -34,8 +34,8 @@
src: url('fonts/AAhaWow-2O1K8.ttf') format("truetype");
}
@font-face {
font-family: "RobotoBold";
src: url('fonts/Roboto-Regular.ttf') format("truetype");
font-family: "Itim";
src: url('fonts/Itim-Regular.ttf') format("truetype");
}
body {
......@@ -183,35 +183,35 @@ button.big-button:active::before {
}
.link{
font-family: "RobotoBold";
font-family: "Itim";
font-size: 14px;
margin-right: 5px;
color: #334443;
color: aliceblue;
text-decoration: none;
}
#linksiz{
font-family: "RobotoBold";
font-family: "Itim";
font-size: 14px;
margin-top: 8px;
color: #334443;
color: aliceblue;
text-decoration: none;
}
.link:hover{
font-family: "RobotoBold";
font-family: "Itim";
font-size: 14px;
color: #334443;
color: #deeceb;
text-shadow: 1px 1px #ee8a17;
text-decoration: none;
}
.oyunText{
font-family: "RobotoBold";
font-family: "Itim";
font-size: 20px;
color: #c6ffc1;
text-decoration: none;
......@@ -219,7 +219,7 @@ button.big-button:active::before {
text-shadow: 2px 2px #2e383a;
}
.oyunText:hover{
font-family: "RobotoBold";
font-family: "Itim";
font-size: 20px;
color: #c6ffc1;
margin-top: 10px;
......
<!DOCTYPE html>
<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>
<div class="container">
<div class="row" id="infoTitle">
<div class="col">
<div class="row">
<p id="mangalaTitle">MANGALA</p>
<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>
<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 class="row" id="infoText">
<div class="col">
<p id="linksiz"><b>Türk Zeka ve Strateji Oyunu</b></p>
</div>
<div class="col text-right">
<img
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 class="col text-right">
<img 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>
<a href="#" class="link" style="font-size: 20px;">|</a>
<img width="35" height="35" src="./assets/image/settings.png" alt="rules">
<a href="#" class="link"><b>Ayarlar</b></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col" style="margin-right: 10px">
<a href="pages/robotGameArea.html" class="boxA">
<div class="row oyun" style="align-items: center">
<div class="col text-center">
<img
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 class="row">
<div class="col" style="margin-right: 10px">
<a href="pages/robotGameArea.html" class="boxA">
<div class="row oyun" style="align-items: center">
<div class="col text-center">
<img width="100" height="80" src="./assets/image/robot.png" alt="robot" />
</div>
</a>
<a href="pages/gameArea.html" class="boxA">
<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 class="col text-center">
<p class="oyunText">Robota Karşı Oyna</p>
</div>
</a>
</div>
<div class="col" style="margin-left: 10px">
<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/score.png"
alt="playFriends"
/>
</div>
<div class="col text-center">
<p class="oyunText">Skor</p>
</div>
</div>
</a>
<a href="pages/gameArea.html" class="boxA">
<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>
</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 class="col text-center">
<p class="oyunText">Arkadaşına Karşı Oyna</p>
</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 class="col" style="margin-left: 10px">
<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/score.png" alt="playFriends" />
</div>
</a>
</div>
<div class="col text-center">
<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>
<script>
const electron = require("electron");
const { ipcRenderer } = electron;
<script>
const electron = require("electron");
const { ipcRenderer } = electron;
let sendBtn = document.querySelector("#sendBtn");
sendBtn.addEventListener("click", () => {
ipcRenderer.send("btnClick", "Oyna tuşuna basıldı!");
});
let sendBtn = document.querySelector("#sendBtn");
sendBtn.addEventListener("click", () => {
ipcRenderer.send("btnClick", "Oyna tuşuna basıldı!");
});
let btnSettings = document.querySelector("#btnSettings");
btnSettings.addEventListener("click", () => {
ipcRenderer.send("key:settingScreen");
});
let btnSettings = document.querySelector("#btnSettings");
btnSettings.addEventListener("click", () => {
ipcRenderer.send("key:settingScreen");
});
let btnExit = document.querySelector("#btnExit");
btnExit.addEventListener("click", () => {
ipcRenderer.send(
"key:exitScreen",
"file://" + __dirname + "/pages/settings.html"
);
});
</script>
</body>
let btnExit = document.querySelector("#btnExit");
btnExit.addEventListener("click", () => {
ipcRenderer.send(
"key:exitScreen",
"file://" + __dirname + "/pages/settings.html"
);
});
</script>
</body>
</html>
</html>
\ No newline at end of file
This diff is collapsed.
......@@ -11,3 +11,158 @@
</form>
</body>
</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>
<!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;