CSSy: centrowanie, nachodzenie tekstu na obrazek AJAX: modyfikacja zapytań do (CC)

master
B_Rt 2013-03-08 20:10:22 +01:00
parent 2bfe8581a3
commit af5cc621e7
3 changed files with 101 additions and 11 deletions

View File

@ -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)
{

View File

@ -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 &copy; 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>

54
templates/homeLOL.html Normal file
View File

@ -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 &copy; 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>