Commit 0bb0a7c3 authored by Étienne Oz's avatar Étienne Oz 🖖

version 2018-2019

parent 904b16e8
......@@ -6,8 +6,6 @@
<title>Wwwahou</title>
<link rel="stylesheet" type="text/css" href="style/reset.css" />
<link rel="stylesheet" type="text/css" href="style/main.css" />
<!-- <link rel="stylesheet/less" type="text/css" href="style/main.less" /> -->
<script type="text/javascript" src="js/lib/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/lib/less.min.js"></script>
</head>
<body>
......@@ -5,17 +5,14 @@
include('inc/functions.php');
include('inc/head.php');
$url = file_get_contents('https://api.zotero.org/users/1756997/collections/7DWKWTHG/items/?format=json&limit=100');
$url2 = file_get_contents('https://api.zotero.org/users/1756997/collections/7DWKWTHG/items/?format=json&start=100&limit=100');
$url3 = file_get_contents('https://api.zotero.org/users/1756997/collections/7DWKWTHG/items/?format=json&start=200&limit=100');
$url = file_get_contents('https://api.zotero.org/groups/2249230/items?limit=100');
$array = json_decode($url, TRUE);
$array2 = json_decode($url2, TRUE);
$array3 = json_decode($url3, TRUE);
$items = array_merge($array, $array2, $array3);
$items = array_merge($array);
$allTags = [];
$authors = [];
foreach ($items as $item) {
$tags = $item['data']['tags'];
foreach ($tags as $tag) {
......@@ -25,12 +22,27 @@
}
}
?>
<div class="wtf">
?
<div class="infos">
<p>
<strong>wwwahou </strong>
regroupe une sélection de site web des étudiants en Bachelor de l'option Arts Numériques de l'école Arts² à Mons dans le cadre du cours de culture web. Ils ont chacun été choisis car ils représentent un intérêt en terme de design, artistique ou autre.</p>
<p>Développé grace à l'API de <a href="http://zotero.org/">Zotero</a>.</p>
<p><a href="https://gitlab.com/EtienneOz/wwwahou/">sources</a> </p>
</div>
</div>
<?php
$allTags = array_unique($allTags);
echo '<ul class="tags">';
echo '<li><h1>Wwwahou </h1></li>';
foreach ($allTags as $tag) {
if ($tag != 'notShowed' && $tag != 'cambreOk' && $tag != 'pourMoi' && substr($tag, 0, 4) != 'auth') {
echo '~ <li class="tag '. $tag .'">' . $tag . '</li> ';
}
}
echo '</ul>';
......@@ -46,7 +58,7 @@
# code...
echo '<div class="item';
foreach ($tags as $tag) {
if ($tag['tag'] != 'notShowed' && $tag['tag'] != 'cambreOk' && $tag['tag'] != 'pourMoi') {
if ($tag['tag'] != 'notShowed' && $tag['tag'] != 'cambreOk' && $tag['tag'] != 'pourMoi' && substr($tag['tag'], 0, 4) != 'auth') {
echo ' ' . $tag['tag'];
}
}
......@@ -56,11 +68,16 @@
echo '<a href=" ' . $url . '" target="_blank">' . ($title ? $title : '----') . '</a>';
echo '<sup>';
foreach ($tags as $tag) {
if ($tag['tag'] != 'notShowed' && $tag['tag'] != 'cambreOk' && $tag['tag'] != 'pourMoi') {
if ($tag['tag'] != 'notShowed' && $tag['tag'] != 'cambreOk' && $tag['tag'] != 'pourMoi' && substr($tag['tag'], 0, 4) != 'auth') {
echo ' <span>' . $tag['tag'] . '</span>';
}
}
echo '</sup>';
foreach ($tags as $tag) {
if (substr($tag['tag'], 0, 4) == 'auth') {
echo '<span class="author"> proposé par ' . substr($tag['tag'], 7) . '</span>';
}
}
echo '</span>';
echo ' <p>'. $abstract . '</p>';
// echo '<div class="img"><img data-src="'. $url .'" /></div>';
......
......@@ -54,6 +54,21 @@ function classContent(item){
})
}
function spanLetters(el){
el.each(function(){
var letters = $(this).html().split('');
for (var i = 0; i < letters.length; i++) {
if (letters[i] == ' ') {
letters[i] = '<span>&nbsp;</span>';
}
letters[i] = '<span>' + letters[i] + '</span>';
}
var newLink = letters.join('');
$(this).html(newLink);
})
}
function marginItems(item){
var i = .1;
var j = $(window).width() / 1.5;
......@@ -72,3 +87,18 @@ function marginItems(item){
}
})
}
function letterSpace(item){
var i = 0;
item.each(function(){
$(this).children('span').css({'letter-spacing': i + 'em'})
i = i + .01;
})
}
function about(el){
el.click(function(){
$(this).children('.infos').toggle();
})
}
......@@ -7,4 +7,7 @@ $(document).ready(function(){
showAbstract(item);
classContent(item);
marginItems(item)
spanLetters($('.author'));
letterSpace($('.author'));
about($('.wtf'));
})
......@@ -3,6 +3,37 @@ body{
font-size: 12px;
}
.wtf{
position: fixed;
right: 10px;
top: 10px;
cursor: pointer;
font-weight: bold;
z-index: 10;
}
.wtf .infos{
display: none;
position: fixed;
width: 40%;
left: 30%;
top: 10px;
background: white;
border: 1px solid;
padding: 10px;
color: darkgreen;
transform: skewX(-20deg);
font-size: 18px;
}
.wtf p{
display: block;
}
.wtf p strong{
color: black;
}
ul li,
ul li h1{
display: inline;
......@@ -44,7 +75,7 @@ ul li:after{
display: none;
}
p{
.item p{
display: none;
position: absolute;
background: white;
......@@ -73,8 +104,8 @@ sup span{
z-index: 10;
bottom: 10px;
right: 25px;
width: 100vw;
height: 50vw;
width: 150vw;
height: 75vw;
transform: scale(.35) skew(0deg) !important;
transform-origin: 100% 100%;
background: white !important;
......
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