Skip to content

modified #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TeriJacobs merged 1 commit into from
Jul 30, 2022
Merged

modified #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 34 additions & 32 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
<div class="row mt-5">
<form class="login-form">
<div class="row input-group input-group-sm">
<!-- <div class="col-md-4 offset-md-10 col-auto ms-auto logout-btn-wrapper"> -->
<div class="col-auto ms-auto">
<button type="button" class="btn btn-outline-dark input-logout-btn">Logout</button>
</div>
Expand Down Expand Up @@ -47,24 +46,34 @@ <h4 class="welcome-message" style="margin-left:0">Welcome to your Expense Tracke
<section class="main">
<div class="row mt-5 justify-content-md-center">
<div class="mb-4 col-lg-4 col-md-12 col-sm-12 account-summary">
<div class="card-widget card-widget-income">
<div class="card-widget">
<div class="card-widget-body">
<div class="dot me-3 bg-indigo"></div>
<div class="text">
Income received: <span class="transaction-income"></span>
<span class="transaction-income transaction-summary-text"></span>
<span class="text-muted text-uppercase small">Income</span>
</div>
<div class="col-auto ms-auto"><i class="bi bi-wallet"></i></div>
<div class="col-auto ms-auto">
<div class="income-icon-background">
<i class="bi bi-wallet"></i>
</div>
</div>
</div>
</div>
</div>
<div class="mb-4 col-lg-4 col-md-12 col-sm-12 account-summary">
<div class="card-widget card-widget-expenses">
<div class="card-widget">
<div class="card-widget-body">
<div class="dot me-3 bg-red"></div>
<div class="text">
Expenses: <span class="transaction-expenses"></span>
<span class="transaction-expenses transaction-summary-text"></span>
<span class="text-muted text-uppercase small">Expenses</span>
</div>
<div class="col-auto ms-auto">
<div class="expense-icon-background">
<i class="bi bi-cash-coin"></i>
</div>
</div>
<div class="col-auto ms-auto"><i class="bi bi-cash-coin"></i></div>
</div>
</div>
</div>
Expand All @@ -73,39 +82,32 @@ <h4 class="welcome-message" style="margin-left:0">Welcome to your Expense Tracke
<div class="card-widget-body">
<div class="dot me-3 bg-green"></div>
<div class="text">
Balance: <span class="transaction-balance"></span>
<span class="transaction-balance transaction-summary-text"></span>
<span class="text-muted text-uppercase small">Balance</span>
</div>
<div class="col-auto ms-auto">
<div class="balance-icon-background">
<i class="bi bi-wallet2"></i>
</div>
</div>
<div class="col-auto ms-auto"><strong><i class="bi bi-wallet2"></i></strong></div>
</div>
</div>
</div>
</div>
<div class="row mt-5 justify-content-md-center">
<div class="col-lg-7 mb-4 mb-lg-0 transaction-view">
<div class="container card-widget card-widget-header-included">
<div class="container card-widget card-widget-transactions card-widget-header-included">
<div class="row mb-2 ml-2">
<h4 class="text-muted text-uppercase small">All Transactions</h4>
</div>
<!-- <table>
<thead class="thead-dark">
<tr>
<th scope="col">Type</th>
<th scope="col">Category</th>
<th scope="col">Date</th>
<th scope="col">Amount</th>
</tr>
</thead>
</table> -->
<div class="container">
<div class="row thead-dark">
<!-- <div class="col ">2 deposit</div> -->
<div class="col-md-2 offset-md-3">Category</div>
<div class="col-md-3 offset-md-1 transaction-header">Date</div>
<div class="col-md-3 transaction-header">Amount</div>
</div>
</div>
<div class="container movements container-movements card-body pt-0">
<!-- <div class="container"> -->
<div class="card-widget-body h-100">
<div class="row my-1">
<div class="col movements-type movements-type-deposit">2 deposit</div>
Expand All @@ -125,7 +127,7 @@ <h4 class="text-muted text-uppercase small">All Transactions</h4>

</div>
<div class="col-lg-5 mb-4 mb-lg-0 operation-view">
<div class="container deposits operations-display p-2 card-widget">
<div class="container deposits operations-display p-2 card-widget card-widget-income">
<div class="h-50 pb-4 pb-lg-2">
<div class="card-body">
<div class="row mb-2">
Expand All @@ -135,10 +137,10 @@ <h4 class="text-muted text-uppercase small">Deposit income into account</h4>
<form id="form-deposits">
<div class="form-row align-items-center input-group input-group-sm">
<div class="col">
<input type="date" class=" form-control input-date-income" placeholder="Date" aria-required="true">
<input type="date" class=" form-control input-date-income input-income-border" placeholder="Date" aria-required="true">
</div>
<div class="col mx-2">
<input type="amount" class=" form-control input-amount-income" placeholder="R400" aria-required="true">
<input type="amount" class=" form-control input-amount-income input-income-border" placeholder="R400" aria-required="true">
</div>
<div class="col">
<button type="button" class="btn btn-outline-dark submit-income" style="width:100%">Submit</button>
Expand All @@ -149,7 +151,7 @@ <h4 class="text-muted text-uppercase small">Deposit income into account</h4>
</div>
</div>
</div>
<div class="container withdrawals operations-display mt-2 p-2 card-widget">
<div class="container withdrawals operations-display mt-2 p-2 card-widget card-widget-expenses">
<div class="h-50 pb-4 pb-lg-2">
<div class="card-body">
<div class="row mb-2">
Expand All @@ -159,7 +161,7 @@ <h4 class="text-muted text-uppercase small">Add an Expense to account</h4>
<form id="form-expenses" class="input-group input-group-sm">
<div class="form-row">
<div class="mb-1">
<select class="form-control input-type-expense" required="true">
<select class="form-control input-type-expense expense-income-border" required="true">
<option value="" disabled selected hidden>-Please Select-</option>
<option>Food</option>
<option>Petrol</option>
Expand All @@ -170,10 +172,10 @@ <h4 class="text-muted text-uppercase small">Add an Expense to account</h4>
</div>
<div class="form-row align-items-center input-group input-group-sm">
<div class="col">
<input type="date" class=" form-control input-date-expense" placeholder="Date" required="true">
<input type="date" class=" form-control input-date-expense expense-income-border" placeholder="Date" required="true">
</div>
<div class="col mx-2">
<input type="amount" class=" form-control input-amount-expense" placeholder="R400" required="true">
<input type="amount" class=" form-control input-amount-expense expense-income-border" placeholder="R400" required="true">
</div>
<div class="col">
<button type="button" class="btn btn-outline-dark submit-expense" style="width:100%">Submit</button>
Expand All @@ -184,7 +186,7 @@ <h4 class="text-muted text-uppercase small">Add an Expense to account</h4>
</div>
</div>
</div>
<div class="container close-account operations-display mt-2 p-2 card-widget">
<div class="container close-account operations-display mt-2 p-2 card-widget card-widget-close">
<div class="h-50 pb-4 pb-lg-2 container closure p-2">
<div class="card-body">
<div class="row">
Expand All @@ -195,10 +197,10 @@ <h4 class="text-muted text-uppercase small">Close your account</h4>
<form>
<div class="form-row align-items-center input-group input-group-sm">
<div class="col">
<input type="text" class=" form-control input-account-username" placeholder="username">
<input type="text" class=" form-control input-account-username input-account-border" placeholder="username">
</div>
<div class="col mx-2">
<input type="password" class=" form-control input-account-password" placeholder="password">
<input type="password" class=" form-control input-account-password input-account-border" placeholder="password">
</div>
<div class="col">
<button type="button" class="btn btn-outline-dark submit-delete-account" style="width:100%">Submit</button>
Expand Down
76 changes: 61 additions & 15 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,40 +5,71 @@
.input-logout-btn{
opacity: 0;
}
.transaction-summary-text{
font-size:28px;
}
.dot {
width: 10px;
height: 10px;
width: 15px;
height: 15px;
border-radius: 50%;
flex-grow: 0;
flex-shrink: 0;
}
.income-icon-background{
width: 55px;
height: 55px;
border-radius: 50%;
flex-grow: 0;
flex-shrink: 0;
background-color: rgb(129,171,221);
}
.expense-icon-background{
width: 55px;
height: 55px;
border-radius: 50%;
flex-grow: 0;
flex-shrink: 0;
background-color: rgb(197,114,194);
}
.balance-icon-background{
width: 55px;
height: 55px;
border-radius: 50%;
flex-grow: 0;
flex-shrink: 0;
background-color: #35b653;;
}
.bi{
font-size:33px;
}
.bg-indigo {
background-color: #6610f2;
background-color: rgb(129,171,221);
}
.bi-wallet{
color:#6610f2;
font-size: x-large;
color:#fff;
margin-left: 10px;
}
.bg-red {
background-color: #dc3545;
background-color: rgb(197,114,194);
}
.bi-cash-coin{
color:#dc3545;
font-size: x-large;
color:#fff;
margin-left: 10px;
}
.bg-green {
background-color: #35b653;
}
.bi-wallet2{
color:#35b653;
font-size: x-large;
color:#fff;
margin-left: 10px;
}
.me-3 {
margin-right: 1rem !important;
}
.card-widget {
padding: 1.5rem;
border-radius: 50rem;
/* border: solid #6610f2; */
background: #fff;
-webkit-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
Expand All @@ -50,13 +81,20 @@
align-items: center;
}
.card-widget-income{
background-color:rgb(102 16 242 / 5%);
/* background-color:rgb(102 16 242 / 5%); */
border: solid rgb(129,171,221) !important;
}
.card-widget-expenses{
background-color:rgb(220 53 69/ 5%);
/* background-color:rgb(220 53 69/ 5%); */
border: solid rgb(197,114,194) !important;
}
.card-widget-close{
/* background-color:rgb(53 182 83 / 5%); */
border: solid rgb(220 53 69)!important;
}
.card-widget-balance{
background-color:rgb(53 182 83 / 5%);
.card-widget-transactions{
/* background-color:rgb(53 182 83 / 5%); */
border: solid rgb(53 182 83 / 45%);
}
.card {
position: relative;
Expand Down Expand Up @@ -89,7 +127,15 @@
flex: 1 1 auto;
padding: 2rem;
}

.input-income-border{
border: solid rgb(129 171 221 / 85%) !important;
}
.expense-income-border{
border: solid rgb(197,114,194) !important;
}
.input-account-border{
border: solid rgb(220 53 69)!important;
}
/* Listed Transactions on Account */
.container-movements {
overflow: auto;
Expand Down