Kaydet (Commit) 6b85ff62 authored tarafından Abdülkerim AKSAK's avatar Abdülkerim AKSAK

ana ekran görsel düzenleme

üst 41059a6d
No preview for this file type
......@@ -18,10 +18,12 @@
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: "OpenSans", sans-serif;
font-size: 1rem;
......@@ -33,6 +35,7 @@ body {
min-height: 100vh;
background: var(--backgroundColor);
}
button {
position: relative;
display: inline-block;
......@@ -50,13 +53,14 @@ button {
}
button.big-button {
padding: 1em 2em;
padding: 0.5em 1em;
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: "";
......
<!DOCTYPE html>
<html lang="en">
<head>
<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" />
</head>
<body>
<style>
.info {
background-color: #d5ecc2;
height: 150px;
width: 600px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 20px;
}
.otherButtonWrap {
display: flex;
justify-content: center;
align-items: center;
}
.playVsRobot {
background-color: #98ddca;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
justify-content: center;
align-items: center;
height: 150px;
width: 290px;
}
.playVsPerson {
background-color: #98ddca;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
justify-content: center;
align-items: center;
height: 150px;
width: 290px;
}
.score {
background-color: #98ddca;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
justify-content: center;
align-items: center;
height: 75px;
width: 290px;
}
.howToPlay {
background-color: #98ddca;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
justify-content: center;
align-items: center;
height: 75px;
width: 290px;
}
.contact {
background-color: #98ddca;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
justify-content: center;
align-items: center;
height: 75px;
width: 290px;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body style="background-color:#ffd3b4">
<div>
<div class="info">
<div class="info-text">
<div style="display:flex;flex-direction:row;" class="info-header">
<h2 style="margin-right:20px">MANGALA | CLUTCH
<h2>
</div>
<div style="display:flex;">
<p>Türk Zeka ve Strateji Oyunu
<p>
</div>
</div>
<div class="info-image" style="margin:20px; transform: rotate(45deg);">
<img style="width:150px;height:150px;" src="./assets/image/ball.png" alt="ball">
</div>
</div>
<div class="otherButtonWrap">
<div class="rowOne">
<div class="playVsRobot" style="margin-bottom: 10px; margin-right: 15px;">
<div style="display: flex; margin: 0px; padding: 0px; height: 100%;">
<span>
<p>Robota Karşı Oyna</p>
<button class="big-button" id="sendBtn" style="margin:0px; margin-left: 25px;">
<a
href="./pages/gameArea.html"
style="text-decoration: none; color: gray"
>Oyna
</a>
</button>
</span>
</div>
<span>
<img width="100" height="80" src="./assets/image/robot.png" alt="robot" >
</span>
</div>
<div class="playVsPerson">
<div style="display: flex; margin: 0px; padding: 0px; height: 100%;">
<span>
<p>Arkadaşına Karşı Oyna</p>
<button class="big-button" id="sendBtn" style="margin:0px; margin-left: 40px;">
<a
href="./pages/gameArea.html"
style="text-decoration: none; color: gray"
>Oyna
</a>
</button>
</span>
</div>
<span>
<img width="100" height="100" src="./assets/image/playFriends.png" alt="robot" >
</span>
</div>
</div>
<div class="rowOne">
<div class="score" style="margin-bottom: 20px;">
<div style="display: flex; margin: 0px; padding: 0px; height: 100%;">
<span>
<p>Skor</p>
</span>
</div>
<span>
<img width="50" height="50" src="./assets/image/score.png" alt="robot" >
</span>
</div>
<div class="howToPlay" style="margin-bottom: 20px;">
<div>
<div>
<p>yazi</p>
</div>
<div>
<p>image</p>
</div>
</div>
</div>
<div class="contact">
<div>
<div>
<p>yazi</p>
</div>
<div>
<p>image</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
<header class="container">
<button class="big-button" id="sendBtn">
<a
......@@ -18,11 +203,15 @@
<button class="big-button" id="btnSettings">Ayarlar</button>
<button class="big-button" id="btnExit">Çıkış</button>
</header>
-->
<!-- Backend ile Frontend arasında bilgi alışverişi.-->
<script>
const electron = require("electron");
const { ipcRenderer } = electron;
const {
ipcRenderer
} = electron;
let sendBtn = document.querySelector("#sendBtn");
sendBtn.addEventListener("click", () => {
......@@ -42,5 +231,6 @@
);
});
</script>
</body>
</body>
</html>
\ No newline at end of file
......@@ -18,7 +18,7 @@ app.on("ready", () => {
contextIsolation: false,
},
width: 1000,
height: 500,
height: 600,
resizable: true, // *Ekran boyutu imleç ile değiştirilemez.
maximizable: false, // *Ekran maksimum hale getirilemez
backgroundColor: "#d5ecc2",
......
......@@ -5,13 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div>
<div class="kuyu"></div>
<div class="kuyu"></div>
<div class="kuyu"></div>
<div class="kuyu"></div>
<div class="kuyu"></div>
<div class="kuyu"></div>
</div>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
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