DHBW/Projektmanagement-Game
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

Added game rules

Browse Source
This commit is contained in:
H4CK3R-01 2021-06-21 21:03:41 +02:00 committed by H4CK3R-01
parent 36bb93279a
commit e3689bff5c
4 changed files with 113 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
public/css/components.css
View File

@ -12,7 +12,7 @@ body {
overflow: hidden; overflow: hidden;
} }
main { #main {
display: grid; display: grid;
grid-template-columns: 80% 20%; grid-template-columns: 80% 20%;
height: calc(100% - 3em - 10px); height: calc(100% - 3em - 10px);
@ -32,4 +32,61 @@ main {
direction: ltr; direction: ltr;
-webkit-font-feature-settings: "liga"; -webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
}
#modal {
display: none;
position: fixed;
z-index: 100000;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
}
#content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 90%;
height: calc(100% - 142px);
border-radius: 5px;
}
.divider {
background: #585858;
height: 0.1em;
margin: 0.5em 0 0.5em;
}
#modal_header {
display: grid;
grid-template-columns: 90% 10%;
}
#modal_header #modal_title {
grid-column: 1;
margin: 0;
}
#modal_header > span {
grid-column: 2;
display: flex;
justify-content: flex-end;
align-items: center;
}
#modal_header span i {
cursor: pointer;
}
#spielanleitung {
background-color: #fefefe;
width: 100%;
height: calc(100% - 50px);
} }

15
public/css/header.css
View File

@ -12,6 +12,21 @@ header {
grid-template-columns: 25% 40% 25%; grid-template-columns: 25% 40% 25%;
} }
.spielanleitung {
display: flex;
align-items: center;
font-size: 1.5em;
padding-left: 10px;
}
.spielanleitung span {
background: #404040;
border: 1px solid #000000;
padding: 5px;
border-radius: 5px;
cursor: pointer;
}
.title { .title {
text-align: center; text-align: center;
display: flex; display: flex;

BIN
public/data/Spielanleitung.pdf Normal file
View File

Binary file not shown.

62
public/index.html
View File

@ -16,37 +16,55 @@
</head> </head>
<body> <body>
<header> <header>
<div></div> <div class="spielanleitung"><span
onclick="document.getElementById('modal').style.display = 'block';">Spielanleitung</span></div>
<div class="title">PM-Game</div> <div class="title">PM-Game</div>
<div class="build"><span>DATE_TO_BE_REPLACED</span><span><a href="COMMIT_LINK_TO_BE_REPLACED" target="_blank">COMMIT_TO_BE_REPLACED</a></span> <div class="build"><span>DATE_TO_BE_REPLACED</span><span><a href="COMMIT_LINK_TO_BE_REPLACED" target="_blank">COMMIT_TO_BE_REPLACED</a></span>
</div> </div>
</header> </header>
<main> <main>
<div id="login"> <div id="main">
<form> <div id="login">
<h2 id="error"></h2> <form>
<label for="username">Benutzername: </label> <h2 id="error"></h2>
<input id="username" name="username" placeholder="Benutzername" type="text"> <label for="username">Benutzername: </label>
<input id="username" name="username" placeholder="Benutzername" type="text">
<label for="room">Raumnummer: </label> <label for="room">Raumnummer: </label>
<input id="room" name="room" placeholder="Raumnummer" type="text"> <input id="room" name="room" placeholder="Raumnummer" type="text">
<button id="ok" type="button">Bestätigen</button> <button id="ok" type="button">Bestätigen</button>
</form>
</div>
<div id="game">
</div>
<div id="chat">
<div id="messages_received"></div>
<div id="message_add">
<form onsubmit="sendMessage(); return false;">
<label for="message_input"></label>
<textarea id="message_input" name="message" placeholder="Type here..."></textarea>
<button id="message_send" type="submit">Send</button>
</form> </form>
</div> </div>
<div id="game">
</div>
<div id="chat">
<div id="messages_received"></div>
<div id="message_add">
<form onsubmit="sendMessage(); return false;">
<label for="message_input"></label>
<textarea id="message_input" name="message" placeholder="Type here..."></textarea>
<button id="message_send" type="submit">Send</button>
</form>
</div>
</div>
</div>
<div id="modal">
<div id="content">
<div id="modal_header">
<h3 id="modal_title">Spielanleitung</h3>
<span><i class="material-icon"
onclick="document.getElementById('modal').style.display = 'none';">close</i></span>
</div>
<div class="divider"></div>
<iframe height="678"
id="spielanleitung"
src="data/Spielanleitung.pdf"
width="500">
</iframe>
</div>
</div> </div>
</main> </main>
<footer> <footer>