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,7 +95,39 @@ else
setTimeout(scrollToTop, 24);
}
</script>
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 src="resources/misc.js"></script>
<script src="resources/gpass.js"></script>
<script src="resources/pwdmeter.js"></script>
@ -103,9 +135,15 @@ else
</head>
<body onload="start();">
<div><a id="buttonTop" class="cInvisible" onclick="scrollToTop();"></a></div>
<div id="menu">
<div id="logo">
<a href="http://indefero.soutade.fr/p/gpass"><img src="resources/gpass.png" alt="logo"/></a>
</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\"";?> >
<form method="post">
@ -155,7 +193,7 @@ else
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 '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 id="passwords">
</div>
<div id="update_masterkey">
<?php
global $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 'New master key <input type="text" id="newmkey" onkeyup="chkPass(this.value);"/>';
@ -192,13 +228,15 @@ 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 '<a id="export_link">Download</a>';
}
?>
</div>
<div id="passwords">
</div>
</div>
</body>
</html>

View File

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

View File

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