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,25 +5,34 @@
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
</head> </head>
<div class="currency-dropdown"> <div class="settings"><img src='file:///android_asset/images/cog.png' alt='cog' />
<label for="currency-select">Currency:</label> <div class="theme-dropdown">
<select id="currency-select"> <label for="theme-select">Theme:</label>
<option value="usd">Dollar</option> <select id="theme-select">
<option value="ars">Argentine Peso</option> <option value="usd">Dark</option>
<option value="brl">Brazilian Real</option> <option value="ars">Alt</option>
<option value="cny">Chinese Yuan</option> </select>
<option value="eur">Euros</option> </div>
<option value="inr">Indian Rupee</option> <div class="currency-dropdown">
<option value="jpy">Yen</option> <label for="currency-select">Currency:</label>
<option value="ngn">Nigerian Naira</option> <select id="currency-select">
<option value="pkr">Pakistani Rupee</option> <option value="usd">Dollar</option>
<option value="php">Philippine Peso</option> <option value="ars">Argentine Peso</option>
<option value="rub">Russian Ruble</option> <option value="brl">Brazilian Real</option>
<option value="thb">Thai Baht</option> <option value="cny">Chinese Yuan</option>
<option value="try">Turkish Lira</option> <option value="eur">Euros</option>
<option value="uah">Ukrainian Hryvnia</option> <option value="inr">Indian Rupee</option>
<option value="vnd">Dong</option> <option value="jpy">Yen</option>
</select> <option value="ngn">Nigerian Naira</option>
<option value="pkr">Pakistani Rupee</option>
<option value="php">Philippine Peso</option>
<option value="rub">Russian Ruble</option>
<option value="thb">Thai Baht</option>
<option value="try">Turkish Lira</option>
<option value="uah">Ukrainian Hryvnia</option>
<option value="vnd">Dong</option>
</select>
</div>
</div> </div>
<body> <body>

View File

@ -23,34 +23,47 @@ a:hover {
color: rgb(149, 0, 207); color: rgb(149, 0, 207);
} }
/*.currency-dropdown{ .settings {
width: fit-content; width: auto;
padding: 8px; margin-left: 20px;
margin: 8px; margin-right: 20px;
margin-top: 20px;
display: flex;
align-items: center;
background-color: #282828; background-color: #282828;
border: 3px solid #ccc; border: 3px solid #ccc;
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
font-family: monospace; }
color: #ffffff;
align-items: center;
justify-content: center;
right: 10px;
} */
.currency-dropdown #currency-select{ .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; width: fit-content;
padding: 8px; padding: 8px;
margin: 8px;
background-color: #282828; background-color: #282828;
border: 3px solid #ccc; border: 3px solid #ccc;
border-radius: 8px; border-radius: 8px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
font-family: monospace; font-family: monospace;
color: #ffffff; color: #ffffff;
right: 10px;
} }
.container { .container {