Redesigned several parts so it looks more aethestic both in desktop and in mobile
diff --git a/css/basic.css b/css/basic.css
index c5a3ff2..5c6382f 100644
--- a/css/basic.css
+++ b/css/basic.css
@@ -1,14 +1,13 @@
body {
font-size: 24px;
font-family: Helvetica;
- line-height: 1em;
background-image: url('https://images.unsplash.com/photo-1428196457394-f0c4aec5f574?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
background-size: cover;
}
#outter-container {
- margin: 32px auto 16px auto;
+ margin: 32px auto;
max-width: 800px;
width: 90%;
}
@@ -17,3 +16,7 @@
background-color: rgba(255,255,255, 0.8);
padding: 5%;
}
+
+input[type="text"], input[type="password"], select {
+ margin-bottom: 8px;
+}
diff --git a/css/login.css b/css/login.css
index 94937f7..6b6b20f 100644
--- a/css/login.css
+++ b/css/login.css
@@ -1,11 +1,10 @@
select {
- font-size: 24px;
+ font-size: 18px;
height: 2em;
width: 80%;
}
input[type="submit"] {
- font-size: 24px;
+ font-size: 18px;
height: 2em;
- width: 17%;
-}
\ No newline at end of file
+}
diff --git a/css/main.css b/css/main.css
index b85fe2c..35d80b1 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,13 +1,10 @@
-#butons {
- position: fixed;
- bottom: 5%;
- right: 0;
+table td {
+ vertical-align: top;
}
#butons button {
- font-size: 36px;
- height: 100px;
- width: 70%;
+ font-size: 1.25em;
+ min-height: 2em;
color: white;
text-decoration: none;
}
@@ -19,3 +16,37 @@
button#lose {
background-color: red;
}
+
+.victima {
+ font-size: 24px;
+}
+
+#victim_img {
+ float: left;
+ width: 200px;
+ max-width: 100%;
+ margin-right: 16px;
+}
+
+#victim_name {
+ font-weight: bold;
+ font-size: 1.5em;
+ margin-bottom: 8px;
+}
+
+#victim_curs_i_grau {
+ font-size: 1em;
+ margin-bottom: 16px;
+}
+
+@media (max-width: 700px) {
+ #victim_img {
+ width: 100px;
+ }
+
+ #victim_name {
+ font-weight: bold;
+ font-size: 1.25em;
+ margin-bottom: 8px;
+ }
+}
diff --git a/index.php b/index.php
index 6c1f7c7..f770c9b 100644
--- a/index.php
+++ b/index.php
@@ -2,31 +2,34 @@
<head>
<meta charset="UTF-8">
<title>Pàgina de benvinguda</title>
+
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
<link rel="stylesheet" href="./css/basic.css" />
<link rel="stylesheet" href="./css/login.css" />
-
+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="outter-container">
<div id="inner-container">
<h1>Selecciona el teu nom</h1>
- <h3>Per entrar al joc de la Pastanaga Assessina</h3>
+ <p>Per entrar al joc de la Pastanaga Assessina</p>
<form action="./php/login.php" method="POST">
<select name="user" id="list">
</select>
-
+
<input disabled required placeholder="Clau d'accés..." id="password" type="password" name="password"/>
<input type="submit" value="Entrar" />
</form>
</div>
</div>
-
+
<script>
$.post("./ajax/getusers.php", function(data, status){
$("#list").html(data);
});
-
+
$('select').on('change', function() {
let nopassword = $('select option:selected').hasClass('nopassword');
$('#password').prop('disabled', nopassword);
diff --git a/main.php b/main.php
index 1726e0d..c3c3a97 100644
--- a/main.php
+++ b/main.php
@@ -8,43 +8,45 @@
<head>
<meta charset="UTF-8">
<title>Pàgina de l'usuari</title>
-
+
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
<link rel="stylesheet" href="./css/basic.css" />
<link rel="stylesheet" href="./css/main.css" />
-
+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://rawgit.com/notifyjs/notifyjs/master/dist/notify.js"></script>
-
+
<script src="./js/utils.js"></script>
<script src="./js/animations.js"></script>
-
- <?php
+
+ <?php
require './credentials.php';
require './php/utils.php';
$user = get_users($_COOKIE['user']);
$victim = get_users($user->quimata);
if ($user->mort) header("Location: ./dead.php");
?>
-
+
<script>
let user = {
'id': <?=$user->id?>,
'quimata': <?=$user->quimata?>,
'requested': <?=$user->requested?>,
'mort': <?=$user->mort?>,
-
+
'nom': "<?=$user->nomcomplet?>",
'curs': <?=$user->curs?>,
'grau': <?=$user->grau?>
};
</script>
-
+
</head>
<body>
<div id="outter-container">
<div id="inner-container">
<h2>Hola <name id="user_name"><?=$user->nom()?></name>,</h2>
-
+
<div class="formulari_contrasenya" style="display: none;">
<p>Sembla que no tens contrasenya, la gent podrà entrar a la teva compta...</p>
<form action="./php/change_password.php" method="POST">
@@ -54,20 +56,26 @@
<input type="submit">
</form>
</div>
-
- <h3>La teva víctima és:</h3>
-
- <div class="victima">
- <img width="300px" src="./imgs/<?=$victim->id?>.png" />
- <h2 id="victim_name"><?=$victim->nomcomplet?></h2>
- <h3><span id="victim_curs"><?=$victim->curs?></span>-<span id="victim_grau"><?=$victim->grau?></span></h3>
- </div>
+
+ <p>La teva víctima és:</p>
+
+ <table class="victima">
+ <tr>
+ <td><img id="victim_img" src="./imgs/<?=$victim->id?>.png" /></td>
+ <td>
+ <div id="victim_name"><?=$victim->nomcomplet?></div>
+ <div id="victim_curs_i_grau"><span id="victim_curs"><?=$victim->curs?></span>-<span id="victim_grau"><?=$victim->grau?></span></div>
+ <div id="butons" class="options">
+ <button id="win" onclick="js: send_request(user, 'REQ KILL');">L'he matat</button>
+ </div>
+ </td>
+ </tr>
+ </table>
+
+ <div style="clear: both;"></div>
</div>
</div>
- <div id="butons" class="options">
- <button id="win" onclick="js: send_request(user, 'REQ KILL');">L'he matat</button>
- </div>
-
+
<script>
$(document).ready(function() {
// Set interval of checking