Skip to content

Instantly share code, notes, and snippets.

@ugreg

ugreg/dabblet.css

Last active September 7, 2017 18:34
Show Gist options
  • Save ugreg/94a66c1892325bcf3386 to your computer and use it in GitHub Desktop.
Save ugreg/94a66c1892325bcf3386 to your computer and use it in GitHub Desktop.
Download ZIP
Woah GEAUXHACK
Raw
dabblet.css
* {
font-family: Calibri;
}
@media (max-width: 970px){
.wrapper {
padding-top:50px;
margin-bottom: 100px;
}
h1.mainheader {
list-style-type: none;
text-align: center;
font-size: 22pt;
padding:5px 10px;
margin-left: -11px;
width:100%;
margin-top:-8px;
border:7px #feffff;
border-style: solid hidden solid;
box-shadow: 0px 1px 5px #aaaaaa;
background-color: rgba(250, 25, 25, 0.98);
position: fixed;
z-index:2;
}
.coordsheader {
list-style-type: none;
text-align: center;
font-size: 6pt;
padding:5px 2px 1px;
margin-left: -11px;
width:100%;
margin-top:50px;
border-top:3px solid #FF8569;
border-bottom:2px solid #FFAA5C;
background-color: rgba(250, 250, 250, 0.98);
position: fixed;
z-index:1;
}
form p{
padding:50px;
margin:0px;
font-size:30pt;
text-align:center;
}
input[type=text] {
padding:20px 70px;
border:2px solid #ffeeef;
border-radius:60px;
position:center;
display:block;
margin:0 auto;
}
button {
padding: 10px 30px;
border-radius:7px;
margin-top: 10px;
border: 0px;
font-size: 10pt;
font-family:'VT323';
display:block;
cursor: pointer;
}
.disclaimer {
font-family:Consolas;
padding:10px;
color:#ff7f5f;
font-size:7pt;
text-align:center;
}
.circle {
border-radius: 50%;
height: 140px;
width: 140px;
background-color: #eee;
position:absolute;
margin:10px;
}
.block {
height:350px;
padding-left:14px;
margin-right: -8px;
margin-left: -15px;
}
h1.dataheader {
position:absolute;
margin-left:180px;
}
.datacontainer {
position:absolute;
margin-left:180px;
margin-top:250px;
}
}
@media (min-width: 971px){
.wrapper {
padding-top:100px;
margin-bottom: 100px;
}
.footerwrapper {
margin: 10px;
}
h1.mainheader {
list-style-type: none;
text-align: center;
font-size: 52px;
padding:15px 10px;
margin-left: -11px;
width:100%;
margin-top:-8px;
box-shadow: 0px 3px 5px #aaaaaa;
background-color: rgba(250, 250, 250, 0.95);
position: fixed;
z-index:2;
}
.coordsheader {
list-style-type: none;
text-align: center;
font-size: 12px;
padding:5px 2px 10px;
margin-left: -11px;
width:100%;
margin-top:85px;
border-top:5px solid #FF8569;
border-bottom:5px solid #FFAA5C;
background-color: rgba(250, 250, 250, 0.98);
position: fixed;
z-index:1;
}
form p{
padding:50px;
margin:0px 0px 10px 0px;
font-size:90px;
text-align:center;
}
input[type=text] {
padding:20px 100px;
border:2px solid #ffeeef;
border-radius:60px;
display:inline block;
margin-right:10px;
margin-left: 20%;
vertical-align: middle;
font-size: 30pt;
text-align: center;
width: 40%;
}
button {
padding: 20px 30px;
border-radius:19px;
margin: 0 auto;
border: 0px;
font-size: 25pt;
cursor: pointer;
}
.disclaimer {
font-family:Consolas;
padding:10px;
color:#ff7f5f;
font-size:8pt;
text-align:center;
}
.circle {
border-radius: 50%;
height: 280px;
width: 280px;
background-color: #eee;
position:absolute;
margin:60px;
}
.block {
height:460px;
padding-left:14px;
margin-right: -8px;
margin-left: -15px;
}
h1.dataheader {
position:absolute;
margin-left:400px;
}
.datacontainer {
position:absolute;
margin-left:400px;
margin-top:100px;
}
}
hr {
border:0px;
height:0px;
border-top: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.footer {
padding:1px;
margin-right: -18px;
margin-left: -19px;
font-size:10px;
text-align:center;
background-color: #eee;
}
Raw
dabblet.html
<!DOCTYPE html>
<html>
<head>
<title>Geaux Hack</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style type="text/css">
@media (max-width: 1320px){
#map-canvas { height: 300px; width: 90%; margin-left: 5%;}
}
@media (min-width: 1321px){
#map-canvas { height: 400px; width: 700px; float: right; margin-top: -450px}
}
</style>
<script src = "http://code.jquery.com/jquery-2.1.0.min.js">
</script>
<script>
$(function() {
var ip = '';
$.ajax({
url: ('http://freegeoip.net/json/' + ip),
dataType: 'json',
success: function(result) {
$('#currentCoordinates').append(
'<b>Current Location:</b> '+
'<i>IP</i>: ' + result.ip +
' | <i>Country</i>: ' + result.country_name +
' | <i>City, State</i>: ' + result.city + ', ' + result.region_name + ' ' + result.zipcode
);
}
});
});
</script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWne3pcz4odVMy-Z7FjGd_8fqyWkjnQNY">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(30.4500, -91.1400),
scrollwheel: false,
zoom: 7
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
function fireClicked(){
if($('#ipaddress').val().length === 14 || 15){
console.log($('#ipaddress').val());
for(var i=0; i < $('#ipaddress').val().length; i++){
}
}else{
console.log("invalid so sorry :c");
}
}
</script>
</head>
<body>
<h1 class="mainheader"> G.I.M.P.</h1>
<div class="coordsheader">
<div id='currentCoordinates'><!-- Current coords will appears here --></div>
</div>
<div class="wrapper">
<div class="block" style="background-color:#E85A54;">
<form>
<p>Enter your IP</p> <br>
<input type="text" id="ipaddress" name="ipaddress" placeholder="Type IP here">
<button type="button" onclick="fireClicked()">Fire!</button>
</form>
<p class="disclaimer">Fear not, this information is deleted once processing is complete...</p>
</div>
<hr>
<div class="block">
<div class="circle" style="background-color:#FF8569"></div>
<h1 class="dataheader">Location Data</h1>
<p class="datacontainer">
-
</p>
</div>
<hr>
<div id="map-canvas"></div>
<hr>
<div class="block">
<div class="circle" style="background-color:#F46169"></div>
<h1 class="dataheader">Other Data</h1>
<p class="datacontainer">
-
</p>
</div>
<hr>
<div class="block">
<div class="circle"style="background-color:#FF8551"></div>
<h1 class="dataheader">Other Data</h1>
<p class="datacontainer">
-
</p>
</div>
</div>
<div class="footerwrapper">
<div class="footer">
<p>Developed By: G I M P</p>
</div>
</div>
</body>
</html>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment