├── LICENSE
├── README.md
└── hotspot
    ├── css
        └── style.css
    ├── img
        └── fundo.jpg
    ├── js
        └── login.js
    ├── login.html
    └── redirect.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 berghetti
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # hotspot-social
2 | libera internet após usuário compartilhar link informado no facebook
3 | 
4 | ## instruções
5 |  -editar o script login.js na pasta js </br>
6 |  -habilitar o hotspot no mikrotik</br>
7 |  -apagar todos os arquivos originais gerados e copiar a pasta hotspot para o mikrotik
8 |  
9 | 


--------------------------------------------------------------------------------
/hotspot/css/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 | 	margin: 0;
 3 | 	padding: 0;
 4 | }
 5 | 
 6 | body, html{
 7 | 	width: 100%;
 8 | 	height: 100%;
 9 | 	font-family: sans-serif, Tahoma, Arial;
10 | 	background-image: url(../img/fundo.jpg);
11 | 	background-repeat: no-repeat;
12 | 	background-position: center;
13 | 	background-size: cover;
14 | }
15 | 
16 | .container{
17 | 	height: 100%;
18 | 	width: 100%;
19 | }
20 | 
21 | .box{
22 | 	position: relative;
23 | 	width: 25%;
24 | 	height: 50%;
25 | 	top: 50%;
26 | 	left: 50%;
27 | 	transform: translate(-50%, -50%);
28 | 	min-width: 300px;
29 | 	background-color: rgba(245,222,179, 0.4);
30 | 	color: #FFF;
31 | 	text-align: center;
32 | }
33 | 
34 | .box-top{
35 | 	position: relative;
36 | 	left: 50%;
37 | 	transform: translate(-50%);
38 | 	width: 90%;
39 | 	height: 20%;
40 | 	border-bottom: solid 5px rgb(245,222,179);
41 | }
42 | 
43 | .box-top p{
44 | 	font-size: 20px;
45 | 	font-weight: bold;
46 | 	padding-top: 5%;
47 | 	padding-bottom: 5%;
48 | }
49 | 
50 | .box-middle{
51 | 	position: relative;
52 | 	left: 50%;
53 | 	top:40%;
54 | 	transform: translate(-50%, -50%);
55 | 	width: 90%;
56 | 	height: 70%;
57 | }
58 | 
59 |  .links{
60 | 	position: relative;
61 | 	top: 30%;
62 | 	left: 50%;
63 | 	transform: translate(-50%, -50%);
64 | 	height: 100px;
65 | }
66 | 
67 | .links a{
68 | 	text-align: center;
69 | 	display: block;
70 | 	text-decoration: none;
71 | 	color: #FFF;
72 | 	border: none;
73 | 	padding: 15px 15px 15px 15px;
74 | 	margin-bottom: 15px;
75 | }
76 | 
77 | .facebook{ background-color: #4267b2; }
78 | .facebook:hover{ background-color: #365899; border: none;}
79 | 


--------------------------------------------------------------------------------
/hotspot/img/fundo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/berghetti/hotspot-social/f2789399680f16bdc4416ef4602cae2c449bd0f9/hotspot/img/fundo.jpg


--------------------------------------------------------------------------------
/hotspot/js/login.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var app_id = 'your_app_id'           // id do app criado no facebook
 3 | var pagForShared = 'link_for_shared' // pagina que sera compartilhada no perfil do usuario
 4 | 
 5 | var userInMk = ''                    // usuario e senha configurado no serviço de hotspot mikrotik
 6 | var passInMK = ''
 7 | 
 8 | window.fbAsyncInit = function() {
 9 |   FB.init({
10 |     appId            : app_id,
11 |     autoLogAppEvents : true,
12 |     xfbml            : true,
13 |     version          : 'v3.3'
14 |   });
15 | };
16 | 
17 | function sharePost(){
18 |   FB.ui(
19 |     {
20 |       method: 'feed',
21 |       app_id: app_id,
22 |       display: 'popup',
23 |       link: pagForShared,
24 |     },
25 |     // callback
26 |     function(response) {
27 |       if (response && !response.error_message) {
28 |         authHotspotMikrotik();
29 |       }
30 |     }
31 |   );
32 | }
33 | 
34 | function authHotspotMikrotik() {
35 |   document.sendin.username.value = userInMk;
36 |   document.sendin.password.value = passInMK;
37 |   document.sendin.submit();
38 |   return false;
39 | }
40 | 


--------------------------------------------------------------------------------
/hotspot/login.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="pt-br">
 3 | <head>
 4 | 	<meta charset="utf-8"/>
 5 | 	<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" />
 6 | 	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
 7 | 	<link rel="stylesheet" href="css/style.css">
 8 | 	<title>Wifi Social</title>
 9 | </head>
10 | <body>
11 | 	<script async defer src="https://connect.facebook.net/pt_BR/sdk.js"></script>
12 | 	<script src="js/login.js"></script>
13 | 
14 | 	<form name="sendin" action="$(link-login-only)" method="post">
15 | 		<input type="hidden" name="username"/>
16 | 		<input type="hidden" name="password"/>
17 | 		<input type="hidden" name="dst" value="$(link-orig)" />
18 | 	</form>
19 | 
20 | 	<div class="container">
21 | 		<div class="box">
22 | 
23 | 			<div class="box-top">
24 | 				<p> Ola, curta e compartilhe para usar o wifi :-)</p>
25 | 			</div>
26 | 
27 | 			<div class="box-middle">
28 | 
29 | 				<div class="links">
30 | 					<div>
31 | 						<a href="#" onclick="sharePost();" class="long-share-btn facebook">
32 | 							<i class="fa fa-facebook-square"></i>
33 | 							Compartilhar no Facebook
34 | 						</a>
35 | 					</div>
36 | 					<!-- <div> NOVO LINK
37 | 					<a href="#"></a>
38 | 				</div>
39 | 			</div> -->
40 | 
41 | 		</div>
42 | 
43 | 	</div	>
44 | </div>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/hotspot/redirect.html:
--------------------------------------------------------------------------------
 1 | $(if http-status == 302)Hotspot redirect$(endif)
 2 | $(if http-header == "Location")$(link-redirect)$(endif)
 3 | <html>
 4 | <head>
 5 | <title>...</title>
 6 | <meta http-equiv="refresh" content="0; url=$(link-redirect)">
 7 | <meta http-equiv="pragma" content="no-cache">
 8 | <meta http-equiv="expires" content="-1">
 9 | </head>
10 | <body>
11 | </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------