Skip to content
Snippets Groups Projects
Commit 57c35e4f authored by Maxime Tissot's avatar Maxime Tissot
Browse files

A bit of CSS

parent 534f869c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Backend/src/main/java/hsrt/VSundSOA/backendapi/GameAPI.java
+ 1
− 1
View file @ 57c35e4f
...@@ -3,7 +3,7 @@ package hsrt.VSundSOA.backendapi; ...@@ -3,7 +3,7 @@ package hsrt.VSundSOA.backendapi;
import org.springframework.boot.SpringApplication; import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication //startet das backend @SpringBootApplication
public class GameAPI { public class GameAPI {
public static void main(String[] args) { public static void main(String[] args) {
SpringApplication.run(GameAPI.class, args); SpringApplication.run(GameAPI.class, args);
......
Sudoku.css 0 → 100644
+ 91
− 0
View file @ 57c35e4f
@charset "UTF-8";
body{
#margin: auto;
background-color: #2C2F33;
colour: blueviolet;
}
h1{
display: block;
text-align: center;
font-size: 400%;
font-family: Arial;
margin: auto;
color: #7289DA;
}
h2{
display: block;
text-align: center;
font-size: 200%;
font-family: 'Roboto', sans-serif;;
margin: auto;
color: #F6F6F6;
}
.button{
display: block;
background-color: #7289DA;
text-align: center;
font-size: 200%;
font-family: "Lucida Console";
width: 200px;
height: 75px;
cursor: pointer;
box-shadow: #23272A;
margin: 5% auto auto;
border-radius: 8px;
color: #23272A;
}
.input{
display: block;
background-color: #23272A;
font-family: "Lucida Console";
width: 400px;
height: 30px;
color:white;
margin: 5% auto auto;
border-radius: 8px;
}
.Game{
display: grid;
grid-template-columns: 90% 10%;
align-content: center;
}
.Sudoku{
width: 700px;
overflow: hidden;
background: #7918f2;
background: -webkit-linear-gradient(-68deg, #ac32e4 , #4801ff);
background: -o-linear-gradient(-68deg, #ac32e4 , #4801ff);
background: -moz-linear-gradient(-68deg, #ac32e4 , #4801ff);
background: linear-gradient(-68deg, #ac32e4 , #4801ff);
border-radius: 16px;
}
.Sudoku td{
font-size: 60px;
font-family: Montserrat-Regular;
text-align: center;
line-height: 70px;
border: 1px solid #999;
}
.Sudoku td:hover{
background-color: rgba(255,255,255,0.2);
}
.NumberPad{
display: grid;
grid-template-columns: 80px;
}
.PadButton{
height: 80px;
font-size: 50px;
}
\ No newline at end of file
Sudoku.html
+ 5
− 5
View file @ 57c35e4f
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Sudoku_With_Friends</title> <title>Sudoku_With_Friends</title>
<link rel="" href=""/> <link rel="stylesheet" href="Sudoku.css"/>
</head> </head>
<body> <body>
<div id="options"> <div id="options">
...@@ -12,11 +12,11 @@ ...@@ -12,11 +12,11 @@
<input type="text" id="username" class="input" placeholder="Username"/> <input type="text" id="username" class="input" placeholder="Username"/>
<button type="button" id="login" class="button" onclick="loginOnClick()">Connect</button> <button type="button" id="login" class="button" onclick="loginOnClick()">Connect</button>
</div> </div>
<div id="game"> <div class="Game" id="game">
<table id="Sudoku"> <table class="Sudoku" id="Sudoku">
</table> </table>
</div> <div class="NumberPad" id="number-pad">
<div id="number-pad" style="display: grid; grid-template-columns: 40px 40px 40px"> </div>
</div> </div>
<script src="Sudoku.js"></script> <script src="Sudoku.js"></script>
</body> </body>
......
Sudoku.js
+ 2
− 0
View file @ 57c35e4f
...@@ -8,6 +8,7 @@ function createEmptySudokuGrid() { ...@@ -8,6 +8,7 @@ function createEmptySudokuGrid() {
const table = document.getElementById('Sudoku'); const table = document.getElementById('Sudoku');
for (let row = 0; row < 9; row++) { for (let row = 0; row < 9; row++) {
const tr = document.createElement('tr'); const tr = document.createElement('tr');
tr.className = 'row';
table.appendChild(tr) table.appendChild(tr)
for (let cell = 0; cell < 9; cell++) { for (let cell = 0; cell < 9; cell++) {
const td = document.createElement('td'); const td = document.createElement('td');
...@@ -22,6 +23,7 @@ function createNumberPadButtons() { ...@@ -22,6 +23,7 @@ function createNumberPadButtons() {
const div = document.getElementById('number-pad'); const div = document.getElementById('number-pad');
for (let i = 1; i <= 9; i++) { for (let i = 1; i <= 9; i++) {
const input = document.createElement('input'); const input = document.createElement('input');
input.className = 'PadButton';
input.id = `number-pad-${i}`; input.id = `number-pad-${i}`;
input.type = 'button'; input.type = 'button';
input.value = i.toString(); input.value = i.toString();
......
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