Commit 733297ef authored by okhin's avatar okhin

Finishing most of the imsiCAPTCHA

parent 885bd63a
......@@ -38,7 +38,7 @@ body { font-family: 'Open Sans', sans-serif; }
padding: 30px 0px;
}
/* Recpatcha form style */
/* Recaptcha form style */
.recaptcha {
background-color: white;
margin: 25px;
......@@ -52,6 +52,7 @@ body { font-family: 'Open Sans', sans-serif; }
border-style: solid;
border-radius: 3px;
box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.08);
clear: none;
}
.recaptcha .check {
......@@ -143,20 +144,21 @@ body { font-family: 'Open Sans', sans-serif; }
#captcha-modal {
height: 600px;
width: 400px;
background-color: red;
background-color: white;
border-width: 1px;
border-style: solid;
border-color: #d3d3d3;
box-shadow: 5px 5px 3px 2px rgba(0,0,0,0.1);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);
position: absolute;
top: 40px;
left: 260px;
top: -240px;
left: 60px;
padding: 0px;
overflow: visible;
}
#captcha-modal .captcha-modal-header {
width: auto;
background-color: #337AB7;
background-color: #4A90E2;
padding: 30px 0px;
border-color: white;
border-style: solid;
......@@ -210,7 +212,7 @@ td.captcha.checked::before {
top: -35px;
width: 30px;
height: 30px;
background-color: #337AB7;
background-color: #4A90E2;
color: white;
display: inline-block;
font-size: 30px;
......@@ -219,3 +221,71 @@ td.captcha.checked::before {
border-radius: 17px;
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
}
/* Modal control buttons */
.modal-footer {
width: 100%;
margin: 0px;
padding-top: 5px;
padding-bottom: 0px;
}
.btn-control {
background-color: rgba(0, 0, 0, 0);
border: none;
color: #333;
margin-left: 0px;
}
.btn-control:hover {
background-color: rgba(0,0,0,0);
color: black;
text-decoration: none;
}
.btn-control.btn-link {
margin-left: 0px !important;
clear: left;
}
/* Report controls */
#footer-report {
display: none;
}
#footer-report h4 {
text-align: center !important;
}
/* Nicer radio */
#footer-report input[type="radio"] {
display: none;
}
#footer-report label {
float: left;
vertical-align: middle;
color: #333;
}
#footer-report label::before {
content: "";
height: 25px;
width: 25px;
display: inline-block;
vertical-align: middle;
margin: 5px;
border-color: #333;
border-width: 1px;
border-style: solid;
border-radius: 15px;
text-align: center;
font-size: 18px;
line-height: 17px;
}
#footer-report input[type="radio"]:checked + label::before {
content: "\25cf";
color: #333;
}
......@@ -24,6 +24,30 @@ $(document).ready(function() {
$('td.captcha').click(function(event) {
$(this).toggleClass('checked')
});
$('#modal-collapse').click(function(event) {
$('#footer-standard').hide();
$('#footer-report').show();
$('#footer-report').collapse('toggle');
$('#captcha-modal').animate({"height": "725px"});
});
$('#footer-close').click(function(event) {
$('#captcha-modal').animate({"height": "600px"});
$('#footer-report').collapse('toggle');
$('#footer-report').hide();
$('#footer-standard').show();
});
$('.threat-action').change(function(event) {
$('#redbutton').attr("href", $(this).attr("value"));
$('#redbutton').removeClass('disabled');
});
$('#verify').click(function(event) {
$('#captcha-modal').modal('hide');
$('#checkbox-captcha').prop("checked", true);
var timer = window.setTimeout(function() {
document.cookie="captcha=True";
window.location = "https://www.laquadrature.net/";
}, 1000);
});
});
</script>
</head>
......@@ -48,6 +72,61 @@ $(document).ready(function() {
<h5>imsiCAPTCHA</h5>
<h6>Privacy - Terms</h6>
</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>
</div>
<div class="row captcha-modal-challenge">
<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>
<button class="btn btn-primary" id="verify">Verify</button>
<button class="btn btn-link btn-control pull-left" id="modal-collapse">Report a problem</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>
</div>
</div>
......@@ -87,115 +166,7 @@ $(document).ready(function() {
</div>
</div><!-- /.error-footer -->
<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>
</div>
<div class="row captcha-modal-challenge">
<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="rc-imageselect-incorrect-response" style="display:none">Multiple correct solutions required - please solve more.</div>
<div class="rc-imageselect-error-select-more" style="display:none">Please select all matching images.</div>
<div class="rc-imageselect-error-dynamic-more" style="display:none">Please also check the new images.</div>
</div>
</div>
<div class="rc-footer">
<div class="rc-separator">
</div>
<div class="rc-controls" role="region" aria-label="recaptcha controls">
<div class="primary-controls">
<div class="rc-buttons">
<div class="button-holder reload-button-holder">
<div id="recaptcha-reload-button" tabindex="0" style="-moz-user-select: none;" role="button" title="Get a new challenge" class="rc-button goog-inline-block rc-button-reload">
</div>
</div>
<div class="button-holder audio-button-holder">
<div id="recaptcha-audio-button" tabindex="0" style="-moz-user-select: none;" role="button" title="Get an audio challenge" class="rc-button goog-inline-block rc-button-audio">
</div>
</div>
<div class="button-holder image-button-holder">
<div id="recaptcha-image-button" tabindex="0" style="-moz-user-select: none; display: none;" role="button" title="Get a visual challenge" class="rc-button goog-inline-block rc-button-image">
</div>
</div>
<div class="button-holder help-button-holder">
<div id="recaptcha-help-button" tabindex="0" style="-moz-user-select: none;" role="button" aria-pressed="false" title="Help" class="rc-button goog-inline-block rc-button-help">
</div>
</div>
</div>
<div class="verify-button-holder">
<div id="recaptcha-verify-button" tabindex="0" style="-moz-user-select: none;" role="button" class="rc-button-default goog-inline-block">Verify</div>
</div>
<div style="clear:both">
</div>
<div tabindex="0" style="-moz-user-select: none;" role="button" class="rc-report-problem-text goog-inline-block goog-link-button">Report a problem</div>
</div>
<div class="secondary-controls" style="display:none">
<div class="report-captcha-button-holder">
<div tabindex="0" id="recaptcha-report-captcha-button" aria-disabled="true" style="-moz-user-select: none;" role="button" class="rc-button-default rc-button-default-disabled goog-inline-block rc-report-captcha-button">REPORT CAPTCHA</div>
</div>
<div class="rc-separator">
</div>
</div>
</div>
<div class="rc-challenge-help" style="display:none" tabindex="0">
</div>
<div class="rc-report-problem-section" style="display:none">
<div class="rc-report-problem-header">Why are you reporting this CAPTCHA?<div class="rc-report-close">
<div id=":1" tabindex="0" style="-moz-user-select: none;" role="button" title="Close report a problem" class="rc-button goog-inline-block">
</div>
</div>
</div>
<div class="rc-report-problem-options">
<div tabindex="0" data-name="" aria-checked="false" style="-moz-user-select: none;" class="jfk-radiobutton" data-value="1" role="radio">
<span class="jfk-radiobutton-radio">
</span>
<div class="jfk-radiobutton-label">Low quality content</div>
</div>
<br>
<div data-name="" aria-checked="false" style="-moz-user-select: none;" class="jfk-radiobutton" data-value="2" role="radio">
<span class="jfk-radiobutton-radio">
</span>
<div class="jfk-radiobutton-label">Pornographic or violent content</div>
</div>
<br>
<div tabindex="0" data-name="" aria-checked="false" style="-moz-user-select: none;" class="jfk-radiobutton" data-value="3" role="radio">
<span class="jfk-radiobutton-radio">
</span>
<div class="jfk-radiobutton-label">No valid solution</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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