Skip to content

M
mangala-pardusacikhack
Kaydet (Commit) 6b85ff62 authored tarafından Abdülkerim AKSAK's avatar Abdülkerim AKSAK
Dosyalara gözat
Seçenekler

ana ekran görsel düzenleme

üst 41059a6d
Hide whitespace changes
Inline Side-by-side
Showing with 332 additions and 139 deletions
.DS_Store
Dosyayı görüntüle @ 6b85ff62
No preview for this file type
assets/main.css
Dosyayı görüntüle @ 6b85ff62
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "OpenSans", sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "OpenSans", sans-serif;
}
:root {
--backgroundColor: "#98ddca";
--colorShadeA: rgb(106, 163, 137);
--colorShadeB: rgb(121, 186, 156);
--colorShadeC: rgb(150, 232, 195);
--colorShadeD: rgb(187, 232, 211);
--colorShadeE: rgb(205, 255, 232);
--backgroundColor: "#98ddca";
--colorShadeA: rgb(106, 163, 137);
--colorShadeB: rgb(121, 186, 156);
--colorShadeC: rgb(150, 232, 195);
--colorShadeD: rgb(187, 232, 211);
--colorShadeE: rgb(205, 255, 232);
}
* {
box-sizing: border-box;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "OpenSans", sans-serif;
font-size: 1rem;
line-height: 2;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
background: var(--backgroundColor);
font-family: "OpenSans", sans-serif;
font-size: 1rem;
line-height: 2;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
background: var(--backgroundColor);
}
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
font-size: 1rem;
color: var(--colorShadeA);
font-weight: 700;
text-transform: uppercase;
font-family: inherit;
margin: 30px;
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
font-size: 1rem;
color: var(--colorShadeA);
font-weight: 700;
text-transform: uppercase;
font-family: inherit;
margin: 30px;
}
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);
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: "";
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);
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);
background: var(--colorShadeD);
transform: translate(0, 0.375em);
}
button.big-button:hover::before {
transform: translate3d(0, 0.75em, -1em);
transform: translate3d(0, 0.75em, -1em);
}
button.big-button:active {
transform: translate(0em, 0.75em);
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);
}
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
main.html
Dosyayı görüntüle @ 6b85ff62
<!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>
<header class="container">
<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
href="./pages/gameArea.html"
......@@ -18,29 +203,34 @@
<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;
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 btnExit = document.querySelector("#btnExit");
btnExit.addEventListener("click", () => {
ipcRenderer.send(
"key:exitScreen",
"file://" + __dirname + "/pages/settings.html"
);
});
const electron = require("electron");
const {
ipcRenderer
} = electron;
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 btnExit = document.querySelector("#btnExit");
btnExit.addEventListener("click", () => {
ipcRenderer.send(
"key:exitScreen",
"file://" + __dirname + "/pages/settings.html"
);
});
</script>
</body>
</html>
</body>
</html>
\ No newline at end of file
main.js
Dosyayı görüntüle @ 6b85ff62
......@@ -9,50 +9,50 @@ let mainWindow;
// *Uygulama hazır olduğunda ilk çalışan fonksiyon.
app.on("ready", () => {
console.log("Uygulama çalıştı.");
mainWindow = new BrowserWindow({
webPreferences: {
//* Frontend kısmında "Electron require() is not defined" hata çözümü.
nodeIntegration: true,
contextIsolation: false,
},
width: 1000,
height: 500,
resizable: true, // *Ekran boyutu imleç ile değiştirilemez.
maximizable: false, // *Ekran maksimum hale getirilemez
backgroundColor: "#d5ecc2",
});
mainWindow.loadURL(
url.format({
pathname: path.join(__dirname, "main.html"),
protocol: "file:",
slashes: true,
})
);
ipcMain.on("btnClick", (err, data) => {
console.log(data);
});
ipcMain.on("key:settingScreen", () => {
createWİndow();
});
console.log("Uygulama çalıştı.");
mainWindow = new BrowserWindow({
webPreferences: {
//* Frontend kısmında "Electron require() is not defined" hata çözümü.
nodeIntegration: true,
contextIsolation: false,
},
width: 1000,
height: 600,
resizable: true, // *Ekran boyutu imleç ile değiştirilemez.
maximizable: false, // *Ekran maksimum hale getirilemez
backgroundColor: "#d5ecc2",
});
mainWindow.loadURL(
url.format({
pathname: path.join(__dirname, "main.html"),
protocol: "file:",
slashes: true,
})
);
ipcMain.on("btnClick", (err, data) => {
console.log(data);
});
ipcMain.on("key:settingScreen", () => {
createWİndow();
});
});
function createWİndow() {
addWindow = new BrowserWindow({
width: 482,
height: 200,
title: "Ayarlar",
});
addWindow.loadURL(
url.format({
pathname: path.join(__dirname, "./pages/settings.html"),
protocol: "file:",
slashes: true,
})
);
}
addWindow = new BrowserWindow({
width: 482,
height: 200,
title: "Ayarlar",
});
addWindow.loadURL(
url.format({
pathname: path.join(__dirname, "./pages/settings.html"),
protocol: "file:",
slashes: true,
})
);
}
\ No newline at end of file
pages/settings.html
Dosyayı görüntüle @ 6b85ff62
......@@ -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