WebApp to follow people on 9gag, sorted via last visited
https://luna-development.net/9follow/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
4.0 KiB
90 lines
4.0 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>9Follow | Follow your favorite 9GAG accounts</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"> |
|
<header 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> |
|
</header> |
|
|
|
<main class="row"> |
|
<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" v-if="!account.deleted"> |
|
<small class="muted float-right timestamp"> |
|
{{ getDiffForView(account.lastVisited) }} |
|
<button class="btn btn-sm btn-danger delete-button" @click="unfollowAccount(account)"> |
|
<i class="fas fa-user-minus"></i> |
|
</button> |
|
</small> |
|
<a href="javascript:" @click="visitAccount(account)" class="account-name"> |
|
<img :src="getRandomAvatarFrom9GAG()" class="avatar"> |
|
{{ account.name }} |
|
</a> |
|
</li> |
|
</ul> |
|
</div> |
|
</main> |
|
|
|
<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> |