Skip to content

GitLab

I
imsiCAPTCHA
Commit cfeb9629 authored by okhin's avatar okhin
Browse files
Options

Adding a noscript version

parent 39164ff9
Hide whitespace changes
Inline Side-by-side
Showing with 180 additions and 66 deletions
css/main.css
View file @ cfeb9629
......@@ -148,7 +148,7 @@ body {
overflow: auto !important;
}
#captcha-modal {
.captcha-modal {
height: 600px;
width: 400px;
background-color: white;
......@@ -302,3 +302,33 @@ td.captcha.checked::before {
content: "\25cf";
color: #333;
}
.script {
display: none;
}
noscript .modal {
display: block;
position: static;
}
noscript .captcha.modal-header {
color: #333;
background-color: white;
}
noscript .captcha.modal-header > div {
color: #333;
font-size: 14px;
text-align: left;
}
noscript .captcha.modal-header > img {
vertical-align: middle;
}
noscript input[type="checkbox"] {
position: relative;
bottom: -38px;
right: -80px;
}
index.html
View file @ cfeb9629
......@@ -14,9 +14,12 @@
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// So, we haz script
$('.script').show();
$('#checkbox-captcha').click(function(event) {
event.preventDefault();
$('#captcha-modal').modal('show');
$('.captcha-modal').modal('show');
});
$('td.captcha').click(function(event) {
$(this).toggleClass('checked')
......@@ -25,10 +28,10 @@ $(document).ready(function() {
$('#footer-standard').hide();
$('#footer-report').show();
$('#footer-report').collapse('toggle');
$('#captcha-modal').animate({"height": "725px"});
$('.captcha-modal').animate({"height": "725px"});
});
$('#footer-close').click(function(event) {
$('#captcha-modal').animate({"height": "600px"});
$('.captcha-modal').animate({"height": "600px"});
$('#footer-report').collapse('toggle');
$('#footer-report').hide();
$('#footer-standard').show();
......@@ -38,7 +41,7 @@ $(document).ready(function() {
$('#redbutton').removeClass('disabled');
});
$('#verify').click(function(event) {
$('#captcha-modal').modal('hide');
$('.captcha-modal').modal('hide');
$('#checkbox-captcha').prop("checked", true);
var timer = window.setTimeout(function() {
document.cookie="captcha=True";
......@@ -52,75 +55,156 @@ $(document).ready(function() {
<div class="container-fluid wrapper">
<div class="row header">
<div class="col-xs-10 col-xs-offset-1">
<h1 data-translate="challenge_headline">One more step</h1>
<h2><span data-translate="complete_sec_check">Please complete the security check to access</span> laquadrature.net</h2>
<h1>One more step</h1>
<h2><span>Please complete the security check to access</span> laquadrature.net</h2>
</div>
</div>
<div class="row content">
<div class="col-md-5 col-md-offset-1 col-sm-12">
<div class="recaptcha row">
<div class="col-xs-8 form-group">
<div class="col-xs-9 check">
<input type="checkbox" id="checkbox-captcha">
<label id="checkbox-captcha-label" for="checkbox-captcha"> I'm not a robot </label>
<noscript>
<div class="col-md-5 col-md-offset-1 col-sm-12">
<div class="container-fluid modal captcha-modal">
<div class="row captcha modal-header">
<div class="col-xs-9">
Select all squares representing <strong>threats to freedoms</strong>.
</div>
<div class="col-xs-3">
<img src="./img/logo_48.png">
</div>
</div>
<div class="col-xs-3 terms">
<img src="./img/logo_48.png">
<h5>imsiCAPTCHA</h5>
<h6>Privacy - Terms</h6>
<div class="row captcha modal-body">
<table class="captcha">
<tr>
<td class="captcha">
<input type="checkbox">
</td>
<td class="captcha">
<input type="checkbox">
</td>
<td class="captcha">
<input type="checkbox">
</td>
<td class="captcha">
<input type="checkbox">
</td>
</tr>
<tr>
<td class="captcha">
<input type="checkbox">
</td>
<td class="captcha">
<input type="checkbox">
</td>
<td class="captcha">
<input type="checkbox">
</td>
<td class="captcha">
<input type="checkbox">
</td>
</tr>
<tr>
<td class="captcha">
<input type="checkbox">
</td>
<td class="captcha">
<input type="checkbox">
</td>
<td class="captcha">
<input type="checkbox">
</td>
<td class="captcha">
<input type="checkbox">
</td>
</tr>
<tr>
<td class="captcha">
<input type="checkbox">
</td>
<td class="captcha">
<input type="checkbox">
</td>
<td class="captcha">
<input type="checkbox">
</td>
<td class="captcha">
<input type="checkbox">
</td>
</tr>
</table>
</div>
<div class="modal fade" id="captcha-modal" tabindex="-1" role="dialog" aria-labelledby="captcha-modal-label" data-backdrop="false">
<div class="container-fluid">
<div class="row captcha modal-header">
<div class="col-xs-12">
Select all squares representing <strong>threats to freedoms</strong>.
<div class="row captcha modal-footer">
<div class="col-xs-12">
<a role="button" href="https://laquadrature.net/" class="btn btn-primary btn-block">Verify</a>
</div>
</div>
</div>
</div>
</noscript>
<div class="script">
<div class="col-md-5 col-md-offset-1 col-sm-12">
<div class="recaptcha row">
<div class="col-xs-8 form-group">
<div class="col-xs-9 check">
<input type="checkbox" id="checkbox-captcha">
<label id="checkbox-captcha-label" for="checkbox-captcha"> I'm not a robot </label>
</div>
<div class="col-xs-3 terms">
<img src="./img/logo_48.png">
<h5>imsiCAPTCHA</h5>
<h6>Privacy - Terms</h6>
</div>
<div class="modal fade captcha-modal" tabindex="-1" role="dialog" aria-labelledby="captcha-modal-label" data-backdrop="false">
<div class="container-fluid">
<div class="row captcha modal-header">
<div class="col-xs-12">
Select all squares representing <strong>threats to freedoms</strong>.
</div>
</div>
</div>
<div class="row captcha modal-body">
<table class="captcha">
<tr>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
</tr>
<tr>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
</tr>
<tr>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
</tr>
<tr>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
</tr>
</table>
</div>
<div class="modal-footer" id="footer-standard">
<div class="button-group pull-left">
<button class="btn btn-default btn-control"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></button>
<button class="btn btn-default btn-control"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></button>
<button class="btn btn-default btn-control"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></button>
<div class="row captcha modal-body">
<table class="captcha">
<tr>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
</tr>
<tr>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
</tr>
<tr>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
</tr>
<tr>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
<td class="captcha"></td>
</tr>
</table>
</div>
<button class="btn btn-primary" id="verify">Verify</button>
<button class="btn btn-link btn-control pull-left" id="modal-collapse">Report a freedom violation</button>
</div>
<div class="collapse modal-footer" id="footer-report">
<a href="#" role="button" class="btn btn-block btn-danger disabled" id="redbutton">REPORT NEW THREAT</a>
<hr />
<button class="close" id="footer-close" aria-label="Close">&times;</button>
<h4>What is the new threat?</h4>
<input type="radio" name="action" id="action1" class="threat-action" value="https://respectmynet.eu/"></input><label for="action1">Net neutrality violation?</label>
<input type="radio" name="action" id="action2" class="threat-action" value="https://piphone.lqdn.fr/"></input><label for="action2">A new law in the making?</label>
<div class="modal-footer" id="footer-standard">
<div class="button-group pull-left">
<button class="btn btn-default btn-control"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></button>
<button class="btn btn-default btn-control"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></button>
<button class="btn btn-default btn-control"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></button>
</div>
<button class="btn btn-primary" id="verify">Verify</button>
<button class="btn btn-link btn-control pull-left" id="modal-collapse">Report a freedom violation</button>
</div>
<div class="collapse modal-footer" id="footer-report">
<a href="#" role="button" class="btn btn-block btn-danger disabled" id="redbutton">REPORT NEW THREAT</a>
<hr />
<button class="close" id="footer-close" aria-label="Close">&times;</button>
<h4>What is the new threat?</h4>
<input type="radio" name="action" id="action1" class="threat-action" value="https://respectmynet.eu/"></input><label for="action1">Net neutrality violation?</label>
<input type="radio" name="action" id="action2" class="threat-action" value="https://piphone.lqdn.fr/"></input><label for="action2">A new law in the making?</label>
</div>
</div>
</div>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment