-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (122 loc) · 6.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
<title>Owe Easy</title>
<script src="https://kit.fontawesome.com/de20837442.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css?v=3.4.2">
<!--link rel="stylesheet" href="fontawesome/css/all.css"-->
</head>
<body>
<section id="welcome_section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="welcome">
<h1>Owe Easy</h1>
<h3>Splitting money made easier!</h3>
<hr></hr>
</div><!--End of welcome-->
</div><!--End of col-->
</div><!--End of row-->
<div class="btn_div">
<a href="#groupmates_section"><button class="btn btn-outline-success btn-lg my-2" id="start"><i class="fas fa-coins"></i>
Get Started!
</button></a>
</div>
</div><!--End of container-->
</section>
<section id="groupmates_section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="participants_actions_div">
<h4 style="text-align: center">Add names for the participants here</h4><!--Add a google font here-->
<div id="groupmates_form">
<form class="form-inline">
<div class="form-group mt-4 mb-4" id="groupmates_inputs">
<div><label for="participant_name" style="font-size: 1.2em;font-weight: 500;">Participant: </label></div>
<div><input type="text" class="form-control" id="participant_name" placeholder="Participant Name"></div>
<div><button type="button" class="btn btn-primary pl-4 pr-4" id="participant_add_btn">Add</button></div>
<div id="participants_view">
<!--button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#participant_names" id="participants_view_btn">View the <span id="num_participants">0</span> new participants added</button>
<div id="participant_names" class="collapse">
</div-->
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" id="participants_view_btn">
View the <span id="num_participants">0</span> new participants added
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body" id='participant_names'>
</div>
</div>
</div>
</div><!--End of form-group mt-4 mb-4-->
</form>
</div><!--End of groupmates_form-->
<div id="done_adding_groupmates">
<a href="#groupmates_section" id="done_adding_link"><button type="submit" class="btn btn-primary pl-5 pr-5" id="done_adding_btn">Done Adding</button></a>
</div>
</div><!--End of groupmates_div-->
</div><!--End of container-->
</div><!--End of col-->
</div><!--End of row-->
</section>
<section id="transactions_section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="participants_actions_div" style="width: 80%;margin-left: 10%;">
<h3 style="text-align: center;">Add your transactions here</h3>
<form class="form-inline">
<div style="margin-top: 5%;" id="transactions_div">
<select class="custom-select added_gpmates" id="added_participants_1">
<option selected>Borrower</option>
</select>
<span class="random_text">owes</span>
<select class="custom-select added_gpmates" id="added_participants_2">
<option selected>Lender</option>
</select>
<select class="custom-select" id="currency">
<option selected>$</option>
</select>
<input type="number" class="form-control amount" id="amount" min="0" step="0.01" value="0.00">
<span class="random_text"> for </span>
<input type="text" class="w-25 form-control desc" id="transaction_desc" placeholder="description of expense">
<a href="#groupmates_section" id="transaction_add_link"><button type="button" class="btn btn-primary pt-1 pb1 -pl-3 pr-3" id="transaction_add_btn">Add</button></a>
</form>
<!--h6>Participants added: <span id="num_participants">0</span></h6-->
<!--br>Transactions added: <span id="num_transactions">0</span></p></br-->
<br>
<p>
<a data-toggle="collapse" href="#addedTransactions" role="button" aria-expanded="false" aria-controls="collapseExample" id="trans_view_link">
<span id="see_or_hide">See</span> the <span id="num_transactions">0</span> transactions <span id="added_or_resolved">added</span>
</a>
</p>
<div class="collapse" id="addedTransactions">
<div class="card card-body" >
<ul id="addedTransList">
</ul>
</div>
</div>
</br>
<div>
</div>
<div id="done_adding_transactions">
<button type="button" class="btn btn-primary pl-5 pr-5" id="done_adding_trans_btn">Resolve!</button><!--The text on the button was formerly: 'Done Adding'-->
</div>
<div id="debts_resolution">
<!--p style="text-align: center">The generated report will go here!</p-->
<ul id="res_payments">
</ul>
</div>
</div><!--End of transactions_div-->
</div><!--End of participants_actions_div-->
</div><!--End of container-->
</div><!--End of col-->
</div><!--End of row-->
</section>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>