CSSy: centrowanie, nachodzenie tekstu na obrazek AJAX: modyfikacja zapytań do (CC)
parent
2bfe8581a3
commit
af5cc621e7
|
@ -1,5 +1,5 @@
|
|||
$(function() {
|
||||
$.getJSON('https://ajax.googleapis.com/ajax/services/search/images?v=1.0&callback=?', {'q':words.join(' || ')}, function(data) {
|
||||
$.getJSON('https://ajax.googleapis.com/ajax/services/search/images?v=1.0&imgsz=medium|large|xlarge|xxlarge&rsz=8&as_rights=(cc_publicdomain|cc_attribute|cc_sharealike|cc_nonderived).-(cc_noncommertial)&as_filetype=jpg|png|gif&safe=moderate&callback=?', {'q':words.join(' || ')}, function(data) {
|
||||
results = data.responseData.results;
|
||||
//for(var i in results)
|
||||
{
|
||||
|
|
|
@ -1,27 +1,63 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>HellYeah mind derailer</title>
|
||||
<title>So.I.am-a.cat mind derailer</title>
|
||||
<style>
|
||||
span {
|
||||
font-size: 25px;
|
||||
color: #eee;
|
||||
}
|
||||
body {
|
||||
|
||||
|
||||
body
|
||||
{
|
||||
text-align: center;
|
||||
background: #2b2b2b;
|
||||
@font-face{
|
||||
font-family: "TPBAFK"; src: url("http://so.i.am-a.cat/phont/gr81.ttf") format('truetype');
|
||||
}
|
||||
}
|
||||
#word1
|
||||
{
|
||||
z-index:0;
|
||||
font-family: "TPBAFK";
|
||||
position:relative;
|
||||
margin-top: 25px;
|
||||
font-size: 46px;
|
||||
font-variant: small-caps;
|
||||
color: #eee;
|
||||
text-shadow: 1px 1px 1px black, -1px -1px 1px black, -1px 1px 1px black, 1px -1px 1px black;/*1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black, 2px 2px black, -2px 2px black, 2px -2px black, -2px -2px black, 0px 2px black, -2px 0px black, 0px -2px black, 2px 0px black, 3px 3px black, -3px 3px black, 3px -3px black, -3px -3px black, 4px 4px black, -4px 4px black, 4px -4px black, -4px -4px black, 2px 4px black, -4px 2px black, 2px -4px black, 4px 2px black;*/
|
||||
}
|
||||
#word2
|
||||
{
|
||||
z-index:0;
|
||||
font-family: 'TPBAFK';
|
||||
position:relative;
|
||||
font-size: 46px;
|
||||
font-variant: small-caps;
|
||||
color: #eee;
|
||||
text-shadow: 1px 1px 1px black, -1px -1px 1px black, -1px 1px 1px black, 1px -1px 1px black;/*1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black, 2px 2px black, -2px 2px black, 2px -2px black, -2px -2px black, 0px 2px black, -2px 0px black, 0px -2px black, 2px 0px black, 3px 3px black, -3px 3px black, 3px -3px black, -3px -3px black, 4px 4px black, -4px 4px black, 4px -4px black, -4px -4px black, 2px 4px black, -4px 2px black, 2px -4px black, 4px 2px black;*/
|
||||
}
|
||||
#image_wrapper
|
||||
{
|
||||
margin-top: -56px;
|
||||
margin-bottom: -60px;
|
||||
max-height: 580px;
|
||||
overflow: hidden;
|
||||
z-index:1;
|
||||
}
|
||||
#image_wrapper img
|
||||
{
|
||||
width: 520px;
|
||||
}
|
||||
img { width: 300px; }
|
||||
.foot {
|
||||
font-size: 8px;
|
||||
color: #666;
|
||||
margin-top: 50px;
|
||||
margin-top: 20px;
|
||||
z-index:1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<span id="word1">{{ words[0]|e }}</span><br />
|
||||
<script>words = {{ words|jsonify }}; </script>
|
||||
<span id="word1">{{ words[0]|e }}</span>
|
||||
<div id="image_wrapper"></div>
|
||||
<span id="word2">{{ words[1]|e }}</span>
|
||||
<span id="word2">{{ words[1]|e }}</span><br />
|
||||
<div class="foot">Copyright © RiddleKiller Ltd.</div>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-1.7.2.min.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/penis.js') }}"></script>
|
||||
|
|
|
@ -0,0 +1,54 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>HellYeah mind derailer</title>
|
||||
<style>
|
||||
n1 {
|
||||
z-index:1;
|
||||
position:absolute;
|
||||
vertical-align:30%;
|
||||
}
|
||||
n2 {
|
||||
z-index:1;
|
||||
position:absolute;
|
||||
vertical-align:bottom;
|
||||
}
|
||||
span {
|
||||
font-size: 40px;
|
||||
font-variant: small-caps;
|
||||
color: #eee;/*
|
||||
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
|
||||
|
||||
text-shadow: -4px 0 black, 0 4px black, 4px 0 black, 0 -4px black;
|
||||
|
||||
text-shadow: -6px 0 black, 0 6px black, 6px 0 black, 0 -6px black; */
|
||||
text-shadow: 1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black, 2px 2px black, -2px 2px black, 2px -2px black, -2px -2px black, 0px 2px black, -2px 0px black, 0px -2px black, 2px 0px black;
|
||||
}
|
||||
body {
|
||||
background: #2b2b2b;
|
||||
text-align: center;
|
||||
@font-face{ font-family: TPBAFK; src url("../fonts/TPBAFK-Regular.ttf")}
|
||||
}
|
||||
img { width: 500px; max-height: 640px; z-index:0;}
|
||||
.foot {
|
||||
font-size: 8px;
|
||||
color: #666;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>words = {{ words|jsonify }}; </script>
|
||||
<div id="image_wrapper">
|
||||
<n1>
|
||||
<span id="word1">{{ words[0]|e }}</span1>
|
||||
</n1> <br />
|
||||
<n2>
|
||||
<span id="word2">{{ words[1]|e }}</span2>
|
||||
</n2>
|
||||
</div>
|
||||
<div class="foot">Copyright © RiddleKiller Ltd.</div>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-1.7.2.min.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/penis.js') }}"></script>
|
||||
<!--<script type="text/javascript" src="{{ url_for('static', filename='js/home.js') }}"></script>-->
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue