Skip to content

Instantly share code, notes, and snippets.

@afifmisran

afifmisran/index.html

Created December 5, 2017 01:00
Show Gist options
  • Save afifmisran/320b6fed45f42426a77e7730d24c5b62 to your computer and use it in GitHub Desktop.
Save afifmisran/320b6fed45f42426a77e7730d24c5b62 to your computer and use it in GitHub Desktop.
Download ZIP
Dah tambah {% load static %} <img src="{% static "my_app/example.jpg" %}" alt="My image"/>
Raw
index.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>HumanOrBot</title>
<!-- Bootstrap Core CSS -->
<link href="{% static 'lib/bootstrap/css/bootstrap.min.css' %}" type= "text/css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<!-- Plugin CSS -->
<link rel="stylesheet" href="{% static 'lib/font-awesome/css/font-awesome.min.css' %}">
<link rel="stylesheet" href="{% static 'lib/simple-line-icons/css/simple-line-icons.css' %}">
<link rel="stylesheet" href="{% static 'lib/device-mockups/device-mockups.min.css' %}">
<link rel="stylesheet" href="{% static 'lib/progresscircle.min.css' %}">
<link rel="stylesheet" href="{% static 'lib/profile-card.min.css' %}">
<link rel="stylesheet" href="{% static 'lib/bootstrapValidator.min.css' %}">
<!-- Theme CSS -->
<link href="{% static 'css/new-age.min.css' %}" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top"><strong>HumanOrBot</strong></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#download">Check</a>
</li>
<li>
<a class="page-scroll" href="#features">Result</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<header>
<div class="container">
<div class="row">
<div class="col-sm-7">
<div class="header-content">
<div class="header-content-inner">
<h1><strong>HumanOrBot.</strong> A spam bot detection for Twitter</h1>
<a href="callback.php" class="btn btn-outline btn-xl page-scroll">Start Now</a>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="device-container">
<div class="device-mockup iphone6_plus portrait black">
<div class="device">
<div class="screen">
<!-- Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! -->
<img src="img/demo-screen-2.jpg" class="img-responsive" alt="">
</div>
<div class="button">
<!-- You can hook the "home button" to some JavaScript events or just remove it -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<section id="download" class="download bg-primary text-center">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="section-heading">Discover the activity of a Twitter account</h2>
<p>whether it is <strong>Human</strong> or <strong>Bot</strong></p>
<!--CHECK USERNAME -->
<form id="registration-form" action="#features" method="POST" class="form-inline">
<div class="form-group"
<label class="col-md-2 control-label" for="username"></label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" name="username" id="username"
class="form-control" placeholder="Twitter username" aria-describedby="basic-addon1"/>
</div>
</div>
<input type="submit" id="submit" value="CHECK"
class="btn btn-default page-scroll" /></form>
</div>
</div>
</div>
</section>
<section id="features" class="features">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Result</h2>
<p class="text-muted">Bot-like percentage score for <?php
echo $_POST["username"];
?>
<?php
$result = exec("C:/Python36/python att_Score.py /tmp");
echo $result
?>
</div>
</hr>
<div class="col-lg-5 text-center">
<a class="twitter-timeline" data-width="700" data-height="400" href="https://twitter.com/<?php echo $_POST["username"]; ?>?ref_src=twsrc%5Etfw">Tweets by</a><?php echo $_POST["username"]; ?>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-lg-3 text-center">
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">23%</div>
</div>
<h1>SCORE</h1>
</div>
<div class="col-lg-4 text-center">
<!-- code start -->
<div class="twPc-div">
<a class="twPc-bg twPc-block"></a>
<div>
<div class="twPc-button">
<!-- Twitter Button | you can get from: https://about.twitter.com/tr/resources/buttons#follow -->
<a href="https://twitter.com/<?php echo $_POST["username"]; ?>" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false" data-dnt="true">Follow @</a><?php echo $_POST["username"]; ?>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- Twitter Button -->
</div>
<a title="<?php echo $_POST["username"]; ?>" href="https://twitter.com/<?php echo $_POST["username"]; ?>" class="twPc-avatarLink">
<img alt="<?php echo $_POST["username"]; ?>" src="{% static 'lib/afif1.jpg' %}" class="twPc-avatarImg">
</a>
<div class="twPc-divUser">
<div class="twPc-divName">
<a href="https://twitter.com/amirulafif_"><?php echo $_POST["username"]; ?></a>
</div>
<span>
<a href="https://twitter.com/amirulafif_">@<span><?php echo $_POST["username"]; ?></span></a>
</span>
</div>
<div class="twPc-divStats">
<ul class="twPc-Arrange">
<li class="twPc-ArrangeSizeFit">
<a href="https://twitter.com/amirulafif_" title="9.840 Tweet">
<span class="twPc-StatLabel twPc-block">Tweets</span>
<span class="twPc-StatValue">9.840</span>
</a>
</li>
<li class="twPc-ArrangeSizeFit">
<a href="https://twitter.com/amirulafif_/following" title="885 Following">
<span class="twPc-StatLabel twPc-block">Following</span>
<span class="twPc-StatValue">885</span>
</a>
</li>
<li class="twPc-ArrangeSizeFit">
<a href="https://twitter.com/amirulafif_/followers" title="1.810 Followers">
<span class="twPc-StatLabel twPc-block">Followers</span>
<span class="twPc-StatValue">1.810</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 text-center">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cta">
<div class="cta-content">
<div class="container">
<h2>Check other<br>account</h2>
<a href="#" class="btn btn-outline btn-xl page-scroll">Let's Start Again!</a>
</div>
</div>
<div class="overlay"></div>
</section>
<section id="contact" class="contact bg-primary">
<div class="container">
<h2>Follow <i class="fa fa-heart"></i> us!</h2>
<ul class="list-inline list-social">
<li class="social-twitter">
<a href="https://twitter.com/AmirulAfif_"><i class="fa fa-twitter"></i></a>
</li>
<li class="social-facebook">
<a href="https://www.facebook.com/amirulafifm"><i class="fa fa-facebook"></i></a>
</li>
<li class="social-google-plus">
<a href="https://plus.google.com/u/0/+AmirulAfifMisran"><i class="fa fa-google-plus"></i></a>
</li>
</ul>
</div>
</section>
<footer>
<div class="container">
<p>&copy; 2017 BotOrHuman Universiti Sains Islam Malaysia. All Rights Reserved.</p>
<ul class="list-inline">
<li>
<a href="#">Privacy</a>
</li>
<li>
<a href="#">Terms</a>
</li>
<li>
<a href="#">FAQ</a>
</li>
</ul>
</div>
</footer>
<!-- jQuery -->
<script src="{% static 'lib/jquery/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrapValidator.min.js' %}" type="text/javascript"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{% static 'lib/bootstrap/js/bootstrap.min.js' %}"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Theme JavaScript -->
<script src="{% static 'js/new-age.min.js' %}"></script>
</body>
<script type="text/javascript">
$(document).ready(function(){
var validators = $("#registration-form").bootstrapValidator({
fields : {
username : {
message : "Username is required",
validators : {
Empty :{
message : "Please insert username",
}
}
}
}
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment