adjusted settings widget to include a cog image, and theme select in addition to the currency select

This commit is contained in:
0ceanSlim 2023-08-09 14:38:43 -04:00
parent 83e248c6c7
commit 64f3f30fdb
2 changed files with 55 additions and 33 deletions

View File

@ -5,6 +5,14 @@
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="settings"><img src='file:///android_asset/images/cog.png' alt='cog' />
<div class="theme-dropdown">
<label for="theme-select">Theme:</label>
<select id="theme-select">
<option value="usd">Dark</option>
<option value="ars">Alt</option>
</select>
</div>
<div class="currency-dropdown">
<label for="currency-select">Currency:</label>
<select id="currency-select">
@ -25,6 +33,7 @@
<option value="vnd">Dong</option>
</select>
</div>
</div>
<body>
<div class="container">

View File

@ -23,34 +23,47 @@ a:hover {
color: rgb(149, 0, 207);
}
/*.currency-dropdown{
width: fit-content;
padding: 8px;
margin: 8px;
background-color: #282828;
border: 3px solid #ccc;
border-radius: 8px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
font-family: monospace;
color: #ffffff;
.settings {
width: auto;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
right: 10px;
} */
.currency-dropdown #currency-select{
width: fit-content;
padding: 8px;
margin: 8px;
background-color: #282828;
border: 3px solid #ccc;
border-radius: 8px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.cog-image {
margin-right: 20px; /* Add margin to separate cog image from dropdowns */
}
.theme-dropdown,
.currency-dropdown {
flex: 1; /* Distribute available space equally among dropdowns */
display: flex;
align-items: center;
justify-content: flex-end; /* Align theme dropdown to the right */
margin-right: 10px; /* Add some space between the dropdowns */
}
.currency-dropdown {
justify-content: center; /* Align currency dropdown to the center */
}
#theme-select,
#currency-select {
width: fit-content;
padding: 8px;
background-color: #282828;
border: 3px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
font-family: monospace;
color: #ffffff;
right: 10px;
}
.container {