|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>9Follow</title>
|
|
|
|
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no"
|
|
|
|
|
name="viewport">
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css"/>
|
|
|
|
|
<link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css">
|
|
|
|
|
<link rel="stylesheet" href="css/app.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container" id="app">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-6">
|
|
|
|
|
<h2>9Follow</h2>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-6 text-right">
|
|
|
|
|
<button id="follow-button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#addModal">
|
|
|
|
|
<i class="fas fa-user-plus"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<hr color="white"/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<div class="alert alert-secondary" v-if="followedAccounts.length === 0">
|
|
|
|
|
Pretty lonely here.<br/>
|
|
|
|
|
Add some accounts to your list.
|
|
|
|
|
</div>
|
|
|
|
|
<ul class="list-group" v-else>
|
|
|
|
|
<li class="list-group-item" v-for="account in followedAccounts">
|
|
|
|
|
<a href="javascript:" @click="visitAccount(account)">{{ account.name }}</a><br/>
|
|
|
|
|
<small class="muted">{{ getDiffForView(account.lastVisited) }}</small>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
|
|
|
|
|
<div class="modal-dialog">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<h5 class="modal-title" id="addModalLabel">Follow account</h5>
|
|
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">×</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="name">
|
|
|
|
|
Username on 9gag
|
|
|
|
|
</label>
|
|
|
|
|
<input id="name" type="text" class="form-control" v-model="userNameToAdd"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="nameForList">
|
|
|
|
|
Name in list (optional)
|
|
|
|
|
</label>
|
|
|
|
|
<input id="nameForList" type="text" class="form-control" v-model="nameForList"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
|
|
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="followAccount()">Add
|
|
|
|
|
to list
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
|
|
|
|
|
<script src="https://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
|
|
|
<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
|
|
|
|
|
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
|
|
|
|
<script src="js/app.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
