diff --git a/Backend/src/main/java/hsrt/VSundSOA/backendapi/GameAPI.java b/Backend/src/main/java/hsrt/VSundSOA/backendapi/GameAPI.java
index 34790f981e7a8153c516a6af85801f6946840297..f06e6b884239f6fde6b17054d9aa57c0ee4f4f97 100644
--- a/Backend/src/main/java/hsrt/VSundSOA/backendapi/GameAPI.java
+++ b/Backend/src/main/java/hsrt/VSundSOA/backendapi/GameAPI.java
@@ -3,7 +3,7 @@ package hsrt.VSundSOA.backendapi;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
-@SpringBootApplication //startet das backend
+@SpringBootApplication
public class GameAPI {
public static void main(String[] args) {
SpringApplication.run(GameAPI.class, args);
diff --git a/Sudoku.css b/Sudoku.css
new file mode 100644
index 0000000000000000000000000000000000000000..b6e9a3814f6ce38e138732e81dc4ffc563bc38a3
--- /dev/null
+++ b/Sudoku.css
@@ -0,0 +1,91 @@
+@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
diff --git a/Sudoku.html b/Sudoku.html
index 4a48ac6f779e84e66c5b95fb64f08f2c602b3dbb..8257fa5850e051ffd0c47ce2240b8d61a46876ff 100644
--- a/Sudoku.html
+++ b/Sudoku.html
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Sudoku_With_Friends</title>
- <link rel="" href=""/>
+ <link rel="stylesheet" href="Sudoku.css"/>
</head>
<body>
<div id="options">
@@ -12,11 +12,11 @@
<input type="text" id="username" class="input" placeholder="Username"/>
<button type="button" id="login" class="button" onclick="loginOnClick()">Connect</button>
</div>
- <div id="game">
- <table id="Sudoku">
+ <div class="Game" id="game">
+ <table class="Sudoku" id="Sudoku">
</table>
- </div>
- <div id="number-pad" style="display: grid; grid-template-columns: 40px 40px 40px">
+ <div class="NumberPad" id="number-pad">
+ </div>
</div>
<script src="Sudoku.js"></script>
</body>
diff --git a/Sudoku.js b/Sudoku.js
index 0f87f936712cfc92ced27fdc26c7abcbb9cd10a6..87fd0fea2bb09497a995659c40df3cd07f116f0c 100644
--- a/Sudoku.js
+++ b/Sudoku.js
@@ -8,6 +8,7 @@ function createEmptySudokuGrid() {
const table = document.getElementById('Sudoku');
for (let row = 0; row < 9; row++) {
const tr = document.createElement('tr');
+ tr.className = 'row';
table.appendChild(tr)
for (let cell = 0; cell < 9; cell++) {
const td = document.createElement('td');
@@ -22,6 +23,7 @@ function createNumberPadButtons() {
const div = document.getElementById('number-pad');
for (let i = 1; i <= 9; i++) {
const input = document.createElement('input');
+ input.className = 'PadButton';
input.id = `number-pad-${i}`;
input.type = 'button';
input.value = i.toString();