mirror of
https://github.com/Luzifer/anti-followbot.git
synced 2024-09-16 11:38:24 +00:00
293 lines
9.5 KiB
HTML
293 lines
9.5 KiB
HTML
<html>
|
|
|
|
<title>Anti-FollowBot</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/bootstrap@4/dist/css/bootstrap.min.css,npm/bootstrap-vue@2/dist/bootstrap-vue.min.css,npm/bootswatch@5/dist/darkly/bootstrap.min.css">
|
|
<script src="https://kit.fontawesome.com/0caf4eb225.js" crossorigin="anonymous"></script>
|
|
|
|
<style>
|
|
#chart {
|
|
height: 100%;
|
|
left:0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.btn-twitch {
|
|
background-color: #6441a5;
|
|
border-color: #6441a5;
|
|
color: white;
|
|
}
|
|
.carousel-caption {
|
|
background-color: rgba(0,0,0,0.7);
|
|
border-radius: 0.5rem;
|
|
left: 5%;
|
|
right: 5%;
|
|
}
|
|
.embed-responsive-custom::before {
|
|
padding-top: calc(6 / 21 * 100%);
|
|
}
|
|
</style>
|
|
|
|
<div id="app">
|
|
<b-container>
|
|
<template v-if="twitchUserID">
|
|
|
|
<b-row class="my-3" v-if="!blockRunStarted">
|
|
<b-col>
|
|
<div class="embed-responsive embed-responsive-custom">
|
|
<div id="chart"></div>
|
|
</div>
|
|
</b-col>
|
|
</b-row>
|
|
|
|
<b-row class="my-3">
|
|
<b-col cols="7">
|
|
<b-card
|
|
no-body
|
|
>
|
|
<b-card-header class="d-flex justify-content-between">
|
|
Filtered followers
|
|
<b-badge>
|
|
{{ filteredFollowers.length }}
|
|
</b-badge>
|
|
</b-card-header>
|
|
|
|
<b-list-group
|
|
flush
|
|
v-if="displayFollowers"
|
|
>
|
|
<b-list-group-item
|
|
class="d-flex justify-content-between align-items-center"
|
|
v-for="follower in filteredFollowers"
|
|
:key="follower.from_id"
|
|
>
|
|
<span>
|
|
<i class="fas fa-fw fa-user mr-1" v-if="!follower.blocked"></i>
|
|
<i class="fas fa-fw fa-user-slash mr-1 text-danger" v-else></i>
|
|
{{ follower.from_name }}
|
|
</span>
|
|
<span>
|
|
<b-badge class="mr-2">
|
|
{{ moment(follower.followed_at).format('lll') }}
|
|
</b-badge>
|
|
<b-btn-group size="sm">
|
|
<b-btn
|
|
:disabled="actionsDisabled || protectedIDs.indexOf(follower.from_id) > -1"
|
|
title="Block"
|
|
variant="danger"
|
|
>
|
|
<i class="fas fa-fw fa-ban"></i>
|
|
</b-btn>
|
|
<b-btn
|
|
@click="toggleProtect(follower.from_id)"
|
|
:disabled="actionsDisabled"
|
|
title="Protect from actions"
|
|
:variant="protectedIDs.indexOf(follower.from_id) > -1 ? 'warning' : 'success'"
|
|
>
|
|
<i class="fas fa-fw fa-shield"></i>
|
|
</b-btn>
|
|
</b-btn-group>
|
|
</span>
|
|
</b-list-group-item>
|
|
</b-list-group>
|
|
</b-card>
|
|
</b-col>
|
|
|
|
<b-col cols="5">
|
|
<b-card
|
|
header="Settings"
|
|
>
|
|
|
|
<b-form-group
|
|
label="Timespan to load"
|
|
label-for="timespan"
|
|
>
|
|
<b-form-select
|
|
:disabled="blockRunStarted"
|
|
id="timespan"
|
|
:options="timespanOpts"
|
|
v-model="timespan"
|
|
></b-form-select>
|
|
</b-form-group>
|
|
|
|
<p>
|
|
<i class="fas fa-fw fa-info-circle mr-1"></i>
|
|
Current zoom level: <strong>{{ bucketSize / 1000 }}s</strong> per bar.
|
|
</p>
|
|
|
|
<b-form-checkbox
|
|
class="mt-2"
|
|
v-model="displayFollowers"
|
|
switch
|
|
>
|
|
Display followers in the left column<br>
|
|
<small>
|
|
<i class="fas fa-fw fa-exclamation-triangle mr-1 text-warning"></i>
|
|
Many displayed followers might slow or crash your browser, filter through the chart first!
|
|
</small>
|
|
</b-form-checkbox>
|
|
|
|
</b-card>
|
|
<b-card
|
|
class="mt-3"
|
|
header="Actions"
|
|
>
|
|
|
|
<b-row>
|
|
<b-col>
|
|
<b-form-group
|
|
label="Affected Users"
|
|
label-for="affectedUsers"
|
|
>
|
|
<b-form-input
|
|
class="text-right"
|
|
disabled
|
|
id="affectedUsers"
|
|
readonly
|
|
:value="affectedUsers"
|
|
/>
|
|
</b-form-group>
|
|
</b-col>
|
|
<b-col>
|
|
<b-form-group
|
|
label="Protected Users"
|
|
label-for="protectedUsers"
|
|
>
|
|
<b-form-input
|
|
class="text-right"
|
|
disabled
|
|
id="protectedUsers"
|
|
readonly
|
|
:value="protectedUsers"
|
|
/>
|
|
</b-form-group>
|
|
</b-col>
|
|
</b-row>
|
|
|
|
<b-button-group
|
|
class="w-100"
|
|
v-if="!blockRunStarted"
|
|
>
|
|
<b-btn
|
|
class="w-50"
|
|
@click.prevent="blockButtonUnlocked = true"
|
|
:disabled="actionsDisabled || affectedUsers === 0"
|
|
variant="primary"
|
|
v-if="!blockButtonUnlocked"
|
|
>
|
|
<i class="fas fa-fw fa-unlock"></i>
|
|
Unlock Block
|
|
</b-btn>
|
|
<b-btn
|
|
class="w-50"
|
|
@click="executeBlocks"
|
|
:disabled="actionsDisabled || affectedUsers === 0"
|
|
variant="danger"
|
|
v-else
|
|
>
|
|
<i class="fas fa-fw fa-ban"></i>
|
|
Block Users
|
|
</b-btn>
|
|
<b-btn
|
|
@click="protectedIDs = []"
|
|
class="w-50"
|
|
variant="warning"
|
|
>
|
|
<i class="fas fa-fw fa-broom"></i>
|
|
Clear Protected
|
|
</b-btn>
|
|
</b-button-group>
|
|
|
|
<b-progress
|
|
:max="affectedUsers"
|
|
v-else
|
|
>
|
|
<b-progress-bar
|
|
:label="`${((blockedUsers / affectedUsers) * 100).toFixed(1)}%`"
|
|
:value="blockedUsers"
|
|
></b-progress-bar>
|
|
</b-progress>
|
|
|
|
<p
|
|
class="mt-2 mb-0"
|
|
v-if="blockRunStarted && affectedUsers === blockedUsers"
|
|
>
|
|
<i class="fas fa-fw fa-info-circle mr-1 text-success"></i>
|
|
Blocks are now finished. Please reload this site and do a new analysis.
|
|
(It might take some minutes for Twitch to have the follow removed!)
|
|
</p>
|
|
|
|
</b-card>
|
|
<b-card
|
|
class="mt-3"
|
|
header="Analyze another User"
|
|
v-if="!blockRunStarted"
|
|
>
|
|
|
|
<p>
|
|
You can analyze another users followers but take no actions for them. They need to take actions themselves…
|
|
</p>
|
|
<b-input-group prepend="Username">
|
|
<b-form-input
|
|
v-on:keyup.enter="fetchUserID(overrideUser)"
|
|
v-model="overrideUser"
|
|
></b-form-input>
|
|
<b-input-group-append>
|
|
<b-button
|
|
@click="fetchUserID(overrideUser)"
|
|
variant="primary"
|
|
>
|
|
<i class="fas fa-download"></i>
|
|
Fetch User
|
|
</b-button>
|
|
</b-input-group-append>
|
|
</b-input-group>
|
|
|
|
</b-card>
|
|
</b-col>
|
|
</b-row>
|
|
|
|
</template>
|
|
<template v-else>
|
|
|
|
<b-row class="justify-content-center mt-3 mb-5">
|
|
<b-col cols="8">
|
|
<b-carousel
|
|
id="carousel-fade"
|
|
style="text-shadow: 0px 0px 5px #000"
|
|
fade
|
|
indicators
|
|
>
|
|
<b-carousel-slide
|
|
caption="Detect a follow-bot in the chart"
|
|
img-src="screenshots/followerbot.png"
|
|
></b-carousel-slide>
|
|
<b-carousel-slide
|
|
caption="Filter down by time"
|
|
img-src="screenshots/followerbot_filtered.png"
|
|
></b-carousel-slide>
|
|
<b-carousel-slide
|
|
caption="Protect regular followers and block bots"
|
|
img-src="screenshots/block_prepared.png"
|
|
></b-carousel-slide>
|
|
</b-carousel>
|
|
</b-col>
|
|
</b-row>
|
|
|
|
<b-row class="my-3">
|
|
<b-col class="text-center">
|
|
<b-btn :href="authURL" variant="twitch">
|
|
<i class="fab fa-twitch fa-fw mr-1"></i>
|
|
Connect with Twitch
|
|
</b-btn>
|
|
</b-col>
|
|
</b-row>
|
|
|
|
</template>
|
|
</b-container>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/combine/npm/axios@0.21.1,npm/vue@2,npm/bootstrap-vue@2/dist/bootstrap-vue.min.js,npm/highcharts@9,npm/highcharts@9/themes/dark-unica.min.js,npm/moment@2/moment.min.js"></script>
|
|
<script type="module" src="app.js"></script>
|
|
</html>
|