Rework CSS

This commit is contained in:
Gregory Soutade 2021-12-23 21:22:57 +01:00
parent 422178bc9d
commit daa7c3b44c
3 changed files with 110 additions and 34 deletions

View File

@ -95,6 +95,38 @@ else
setTimeout(scrollToTop, 24); setTimeout(scrollToTop, 24);
} }
function enableMenu(elem, divFrom)
{
elem.style.display = "block";
divFrom.style['font-weight'] = "bold";
}
function disableMenu(elem, divFrom)
{
elem.style.display = "none";
divFrom.style['font-weight'] = "normal";
}
function switchMenuDisplay(id)
{
const array1 = ['admin', 'add_new_password', 'update_masterkey', 'export_database'];
for (const _id of array1)
{
elem = document.getElementById(_id);
divFrom = document.getElementById("menu_" + _id);
if (_id === id)
{
if (elem.style.display == "block")
disableMenu(elem, divFrom);
else
enableMenu(elem, divFrom);
}
else
disableMenu(elem, divFrom);
}
}
</script> </script>
<script src="resources/misc.js"></script> <script src="resources/misc.js"></script>
<script src="resources/gpass.js"></script> <script src="resources/gpass.js"></script>
@ -103,9 +135,15 @@ else
</head> </head>
<body onload="start();"> <body onload="start();">
<div><a id="buttonTop" class="cInvisible" onclick="scrollToTop();"></a></div> <div><a id="buttonTop" class="cInvisible" onclick="scrollToTop();"></a></div>
<div id="menu">
<div id="logo"> <div id="logo">
<a href="http://indefero.soutade.fr/p/gpass"><img src="resources/gpass.png" alt="logo"/></a> <a href="http://indefero.soutade.fr/p/gpass"><img src="resources/gpass.png" alt="logo"/></a>
</div> </div>
<?php if ($ADMIN_MODE) echo "<div id=\"menu_admin\" onclick=\"switchMenuDisplay('admin');\">Create user</div>\n";?>
<div id="menu_add_new_password" onclick="switchMenuDisplay('add_new_password');">Add a new password</div>
<div id="menu_update_masterkey" onclick="switchMenuDisplay('update_masterkey');">Update master key</div>
<div id="menu_export_database" onclick="switchMenuDisplay('export_database');">Export database</div>
</div>
<div id="admin" <?php if (!$ADMIN_MODE) echo "style=\"display:none\"";?> > <div id="admin" <?php if (!$ADMIN_MODE) echo "style=\"display:none\"";?> >
<form method="post"> <form method="post">
@ -155,7 +193,7 @@ else
if ($user != "") if ($user != "")
{ {
echo "<b>Add a new password</b><br/>\n"; echo "<div class=\"title\">Add a new password</div>\n";
echo 'URL <input type="text" id="new_url" name="url" value="' . (filter_input(INPUT_GET, "url", FILTER_SANITIZE_SPECIAL_CHARS) ?: "") . '"/>'; echo 'URL <input type="text" id="new_url" name="url" value="' . (filter_input(INPUT_GET, "url", FILTER_SANITIZE_SPECIAL_CHARS) ?: "") . '"/>';
echo 'login <input type="text" id="new_login" name="login" value="' . (filter_input(INPUT_GET, "user", FILTER_SANITIZE_SPECIAL_CHARS) ?: "") . '"/>'; echo 'login <input type="text" id="new_login" name="login" value="' . (filter_input(INPUT_GET, "user", FILTER_SANITIZE_SPECIAL_CHARS) ?: "") . '"/>';
@ -170,15 +208,13 @@ if ($user != "")
} }
?> ?>
</div> </div>
<div id="passwords">
</div>
<div id="update_masterkey"> <div id="update_masterkey">
<?php <?php
global $user; global $user;
if ($user != "") if ($user != "")
{ {
echo "<b>Update Masterkey</b><br/>\n"; echo "<div class=\"title\">Update Masterkey</div>\n";
echo 'Old master key <input type="text" id="oldmkey"/>'; echo 'Old master key <input type="text" id="oldmkey"/>';
echo 'New master key <input type="text" id="newmkey" onkeyup="chkPass(this.value);"/>'; echo 'New master key <input type="text" id="newmkey" onkeyup="chkPass(this.value);"/>';
@ -192,13 +228,15 @@ if ($user != "")
if ($user != "") if ($user != "")
{ {
echo "<b>Export</b><br/>\n"; echo "<div class=\"title\">Export</div>\n";
echo '<input type="button" value="Export" onclick="export_database();"/>'; echo '<input type="button" value="Export" onclick="export_database();"/>';
echo '<a id="export_link">Download</a>'; echo '<a id="export_link">Download</a>';
} }
?> ?>
</div> </div>
<div id="passwords">
</div>
</div> </div>
</body> </body>
</html> </html>

View File

@ -1,34 +1,61 @@
body { body {
background-image:linear-gradient(#0096ff 30%, white); background-color:#2d2e44;
height:100%; width:100%; height:100%; width:100%;
color:white;
} }
input {
opacity:0.9;
}
#logo { #logo {
display:inline;
}
#logo img{
display:inline;
width:250px;
height:170px;
margin-right:4%;
}
#menu {
display:block; display:block;
margin-left:auto; padding-bottom:10pt;
margin-right:auto; }
margin-top:30px;
margin-bottom:40px; #menu div {
text-align:center; display:inline;
margin-right:2%;
font-size:x-large;
cursor: pointer;
}
.title {
font-size:xx-large;
font-weight:bold;
margin-bottom:20pt;
} }
#admin { #admin {
border-style:solid;
border-width:5px;
border-color:red;
padding : 15px; padding : 15px;
margin : 15px; margin : 15px;
border-radius: 25px;
border-style:solid;
border-width:5px;
border-color:grey;
display:none;
} }
#admin form { #admin form {
text-align : center; text-align : center;
} }
#admin input {
margin-right:10px;
}
#user { #user {
border-style:solid;
border-width:5px;
border-color:green;
padding : 15px; padding : 15px;
margin : 15px; margin : 15px;
text-align:center; text-align:center;
@ -45,10 +72,12 @@ body {
text-align : center; text-align : center;
} }
#selected_user {
margin-left:10px;
margin-right:10px;
}
#passwords { #passwords {
border-style:solid;
border-width:5px;
border-color:grey;
padding : 15px; padding : 15px;
margin : 15px; margin : 15px;
} }
@ -57,34 +86,37 @@ body {
padding:10px; padding:10px;
text-align:center; text-align:center;
font-size:xx-large; font-size:xx-large;
} color:#de0036;
.hash {
width : 700px;
} }
#add_new_password { #add_new_password {
border-radius: 25px;
border-style:solid; border-style:solid;
border-width:5px; border-width:5px;
border-color:blue; border-color:grey;
padding : 15px; padding : 15px;
margin : 15px; margin : 15px;
display:none;
} }
#update_masterkey { #update_masterkey {
border-style:solid;
border-width:5px;
border-color:yellow;
padding : 15px; padding : 15px;
margin : 15px; margin : 15px;
border-radius: 25px;
border-style:solid;
border-width:5px;
border-color:grey;
display:none;
} }
#export_database { #export_database {
border-style:solid;
border-width:5px;
border-color:pink;
padding : 15px; padding : 15px;
margin : 15px; margin : 15px;
border-radius: 25px;
border-style:solid;
border-width:5px;
border-color:grey;
display:none;
} }
#export_link { #export_link {

View File

@ -523,13 +523,15 @@ async function change_master_key(warning_unciphered)
url.setAttribute("class", "hash"); url.setAttribute("class", "hash");
url.setAttribute("type", "text"); url.setAttribute("type", "text");
url.setAttribute("name", "URL"); url.setAttribute("name", "URL");
url.setAttribute("size", "32");
div.appendChild(url); div.appendChild(url);
div.appendChild(document.createTextNode("password")); div.appendChild(document.createTextNode("password"));
password = document.createElement("input"); password = document.createElement("input");
password.setAttribute("class", "hash"); password.setAttribute("class", "password_hash");
password.setAttribute("type", "text"); password.setAttribute("type", "text");
password.setAttribute("name", "password"); password.setAttribute("name", "password");
password.setAttribute("size", "40");
div.appendChild(password); div.appendChild(password);
delete_button = document.createElement("input"); delete_button = document.createElement("input");
@ -637,6 +639,10 @@ function update_master_key(warning_unciphered)
function start() function start()
{ {
new_url = document.getElementById('new_url') ;
if (new_url.value !== "")
switchMenuDisplay('add_new_password');
select_widget = document.getElementById('selected_user') ; select_widget = document.getElementById('selected_user') ;
if (select_widget == null) return; if (select_widget == null) return;