Skip to content

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

Ana ekran yeniden düzenlendi.

üst 30aa7cb7
Hide whitespace changes
Inline Side-by-side
Showing with 200 additions and 176 deletions
assets/bootstrap.min.css 0 → 100644
Dosyayı görüntüle @ b5c5d3c5
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/main.css
Dosyayı görüntüle @ b5c5d3c5
......@@ -13,6 +13,7 @@
--colorShadeC: rgb(150, 232, 195);
--colorShadeD: rgb(187, 232, 211);
--colorShadeE: rgb(205, 255, 232);
--shadow: #2e383a;
}
* {
......@@ -24,6 +25,19 @@
box-sizing: border-box;
}
@font-face {
font-family: "RobotoThin";
src: url('fonts/Roboto-Thin.ttf') format("truetype");
}
@font-face {
font-family: "RobotoRegular";
src: url('fonts/AAhaWow-2O1K8.ttf') format("truetype");
}
@font-face {
font-family: "RobotoBold";
src: url('fonts/Roboto-Regular.ttf') format("truetype");
}
body {
font-family: "OpenSans", sans-serif;
font-size: 1rem;
......@@ -33,7 +47,7 @@ body {
justify-content: center;
margin: 0;
min-height: 100vh;
background: var(--backgroundColor);
background-image: linear-gradient(to bottom, #416e75, #529290, #6db7a6, #94dbb5, #c6ffc1);
}
button {
......@@ -93,4 +107,125 @@ button.big-button:active {
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);
}
.row.oyun{
height: 150px;
width: 290px;
margin-bottom: 10px;
background-color: #34656d;
border-radius: 25px 10px;
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;
}
.row.skor{
height: 70px;
width: 290px;
margin-bottom: 10px;
background-color: #34656d;
border-radius: 25px 10px;
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;
}
#infoTitle{
height: 150px;
width: 600px;
margin-bottom: 10px;
color: #334443;
background: rgba(125, 179, 192, 0.25);
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba(97, 201, 128, 0.18);
}
#mangalaTitle{
font-family: "RobotoRegular";
font-size: 60px;
margin-left: auto;
margin-right: auto;
color: aliceblue;
text-shadow:
6px 6px var(--shadow),
5.75px 5.75px var(--shadow),
5.5px 5.5px var(--shadow),
5.25px 5.25px var(--shadow),
5px 5px var(--shadow),
4.75px 4.75px var(--shadow),
4.5px 4.5px var(--shadow),
4.25px 4.25px var(--shadow),
4px 4px var(--shadow),
3.75px 3.75px var(--shadow),
3.5px 3.5px var(--shadow),
3.25px 3.25px var(--shadow),
3px 3px var(--shadow),
2.75px 2.75px var(--shadow),
2.5px 2.5px var(--shadow),
2.25px 2.25px var(--shadow),
2px 2px var(--shadow),
1.75px 1.75px var(--shadow),
1.5px 1.5px var(--shadow),
1.25px 1.25px var(--shadow),
1px 1px var(--shadow),
0.75px 0.75px var(--shadow),
0.5px 0.5px var(--shadow),
0.25px 0.25px var(--shadow);
}
#infoText{
font-family: "RobotoRegular";
font-size: 14px;
}
.link{
font-family: "RobotoBold";
font-size: 14px;
margin-right: 5px;
color: #334443;
text-decoration: none;
}
#linksiz{
font-family: "RobotoBold";
font-size: 14px;
margin-top: 8px;
color: #334443;
text-decoration: none;
}
.link:hover{
font-family: "RobotoBold";
font-size: 14px;
color: #334443;
text-shadow: 1px 1px #ee8a17;
text-decoration: none;
}
.oyunText{
font-family: "RobotoBold";
font-size: 20px;
color: #c6ffc1;
text-decoration: none;
margin-top: 10px;
text-shadow: 2px 2px #2e383a;
}
.oyunText:hover{
font-family: "RobotoBold";
font-size: 20px;
color: #c6ffc1;
margin-top: 10px;
text-shadow: 2px 2px #ee8a17;
text-decoration: none;
}
.boxA:hover{
text-decoration: none;
}
\ No newline at end of file
main.html
Dosyayı görüntüle @ b5c5d3c5
......@@ -6,207 +6,95 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mangala | CLUTCH</title>
<link rel="stylesheet" href="assets/main.css" />
<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>
<link rel="stylesheet" href="assets/bootstrap.min.css" />
</head>
<body style="background-color:#ffd3b4">
<body>
<div class="container">
<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 class="row" id="infoTitle">
<div class="col">
<div class="row ">
<p id="mangalaTitle">MANGALA</p>
</div>
<div style="display:flex;">
<p>Türk Zeka ve Strateji Oyunu
<p>
<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="#" class="link"><b>Nasıl Oynanır?</b></a>
</div>
</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>
<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>
<span>
<img width="100" height="100" src="./assets/image/playFriends.png" alt="robot" >
</span>
</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>
<div class="col text-center">
<p class="oyunText">Arkadaşına Karşı Oyna</p>
</div>
</div>
</a>
</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 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>
<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>
</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>
<p>image</p>
<div class="col text-center">
<p class="oyunText">Multiplayer Oyna</p>
</div>
</div>
</div>
<div class="contact">
<div>
<div>
<p>yazi</p>
</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>
<p>image</p>
<div class="col text-center">
<p class="oyunText">Clutch</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<!--
<header class="container">
<button class="big-button" id="sendBtn">
<a
href="./pages/gameArea.html"
style="text-decoration: none; color: gray"
>Oyna</a
>
</button>
<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 {
......
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