BOOM

TeamHTP · Feb 8, 2020 · fdfe040 · fdfe040
1 parent 49fd83d
commit fdfe040
Show file tree

Hide file tree

Showing 3 changed files with 167 additions and 0 deletions.
diff --git a/app.css b/app.css
@@ -0,0 +1,37 @@
+body {
+	background-color: #fff9f8;
+}
+
+.cards-container {
+	margin-top: 30px;
+}
+
+.virtual-card {
+	border-radius: 6px;
+	height: 150px;
+	/*box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);*/
+	background-color: #7fcdbf;
+	color: white;
+	padding: 30px;
+}
+
+.virtual-card > .nickname {
+	font-family: monospace;
+}
+
+.virtual-card > .value {
+	margin-top: 40px;
+	font-family: monospace;
+	font-size: 1.5em;
+}
+
+.activity {
+	padding-top: 1em;
+	background-color: white;
+	border-radius: 6px;
+	/*box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.18);*/
+}
+
+.card-row {
+	margin-bottom: 1em;
+}
diff --git a/app.html b/app.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>SafeCard</title>
+	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+	<link rel="stylesheet" type="text/css" href="./app.css">
+</head>
+<body>
+	<div id="safecard-app">
+		<nav class="container navbar navbar-expand-lg navbar-light">
+		 	<a class="navbar-brand" href="#">Shepherd</a>
+		 	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+		 		<span class="navbar-toggler-icon"></span>
+		 	</button>
+		 	<div class="collapse navbar-collapse" id="navbarNav">
+		 		<ul class="navbar-nav mr-auto">
+		 	    	<li class="nav-item active">
+		 	    		<a class="nav-link" href="#">Cards <span class="sr-only">(current)</span></a>
+		 	    	</li>
+		 	    	<li class="nav-item">
+		 	    		<a class="nav-link" href="#">Account</a>
+		 	    	</li>
+		 		</ul>
+    			<ul class="navbar-nav my-2 my-lg-0">
+		 	    	<li class="nav-item active">
+		 	    		<a class="nav-link" href="#">Log out</a>
+		 	    	</li>
+    			</ul>
+		 	</div>
+		</nav>
+		<div class="container">
+			<div class="cards-container">
+				<div class="row" style="margin-bottom: 1em;">
+					<div class="col-3">
+						<h1>Cards</h1>
+					</div>
+					<div class="col-9">
+						<h1>Activity</h1>
+					</div>
+				</div>
+				<div class="card-row" v-for="card in cards">
+					<div class="row">
+						<div class="col-3">
+							<div class="virtual-card">
+								<div class="value">${{card.value}}</div>
+								<div class="nickname">{{card.nickname}}</div>
+							</div>
+						</div>
+						<div class="col-9 activity">
+							<div v-if="card.activity.length == 0" style="color: #aaa">
+								<span>There hasn't been any activity on this card.</span>
+							</div>
+							<table class="table table-borderless">
+							    <thead>
+							        <tr>
+							            <th scope="col">Date</th>
+							            <th scope="col">Merchant</th>
+							            <th scope="col">Amount</th>
+							        </tr>
+							    </thead>
+							    <tbody>
+							        <tr v-for="activity in card.activity">
+							            <th scope="row">{{activity.date}}</th>
+							            <td>{{activity.merchant}}</td>
+							            <td>{{activity.amount}}</td>
+							        </tr>
+							    </tbody>
+							</table>
+						</div>
+					</div>
+				</div>
+				<div class="new-card">
+					<div class="row">
+						<div class="col-3">
+							<a href="#">
+								<div class="virtual-card" style="background-color: white; color: #888; text-align: center; padding-top: 60px;">
+									+ Add a new card&nbsp;&nbsp;
+								</div>
+							</a>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+	<script type="text/javascript" src="./app.js"></script>
+</body>
+</html>
diff --git a/app.js b/app.js
@@ -0,0 +1,38 @@
+const app = new Vue({
+	el: '#safecard-app',
+	data: {
+		colors: [
+			'rgb(57, 104, 203)',
+			'rgb(201, 124, 216)',
+			'rgb(22, 231, 226)',
+			'rgb(254, 34, 83)',
+			'rgb(249, 235, 16)',
+			'rgb(176, 218, 190)'
+		],
+		cards: {
+			'fake_token': {
+				token: 'fake_token',
+				nickname: 'card_nickname',
+				value: 400.33,
+				policies: {
+					categories: {
+						'music': true,
+						'streaming': true,
+						'food': true,
+						'shopping': true,
+						'games': true,
+						'inapp': true
+					}
+				},
+				activity: [
+					{
+						date: '',
+						merchant: 'IDK*',
+						amount: '10.00',
+						status: 'COMPLETE'
+					}
+				]
+			}
+		}
+	}
+});