-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (127 loc) · 7.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html lang="it">
<head>
<link rel="shortcut icon" href="res/sito/favicon.ico" type="image/x-icon">
<link rel="icon" href="res/sito/favicon.ico" type="image/x-icon">
<title>I Corti di LGL - Concorso racconti Librogame</title>
<meta name="description" content='"I corti di LibrogamesLand", il concorso annuale dedicato racconti "Librogame"'>
<meta name="author" content="Luca Fabbian">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/runcss/dist/runcss.min.css">
<script src="https://cdn.jsdelivr.net/npm/runcss/dist/runcss.min.js" defer watch></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script>
window.local ={
year: null,
archive: {},
}
// carica lista dei file dalla cache e li rende "reattivi"
document.addEventListener('alpine:init', () => {
const key = 'corti-list'
window.local = Alpine.reactive({
...window.local,
...JSON.parse(localStorage[key] ?? '{}')
})
Alpine.effect( () => localStorage[key] = JSON.stringify(window.local))
})
// scarica lista dei file attuali da github
;(async() => {
const archive = {}
const {tree} = await fetch('https://api.github.com/repos/librogamesland/corti/git/trees/main?recursive=1').then( r => r.json())
for(const {path} of tree){
if(!path.startsWith('2')) continue
const [year, file, subfile] = path.split('/')
if(!(year in archive)) archive[year] = {corti: [], res: []}
if(file === 'corti' && subfile){ archive[year].corti.push(subfile) }
else{ archive[year].res.push(file) }
}
local.archive = archive
if(local.year === null) local.year = Object.keys(archive).sort((a,b) => b-a)[0]
})()
</script>
</head>
<body runcss-cloak>
<div style="background-image:url(res/sito/background.webp); background-repeat:repeat; background-position: center top;">
<img class="max-h-52 mx-auto p-10" src="res/sito/banner.webp" alt="I Corti di LGL - Concorso di narrativa a bivi">
</div>
<div class="bg-[#333] text-white">
<ul id="navbar" class="flex mx-auto max-w-4xl px-10 portrait:justify-center">
<li><a class="landscape:px-6 portrait:px-3 py-6 block hover:bg-black" href="#home">Home</a></li>
<li><a class="landscape:px-6 portrait:px-3 py-6 block hover:bg-black" href="#archivio">Archivio</a></li>
<li><a class="landscape:px-6 portrait:px-3 py-6 block hover:bg-black" href="http://librogame.net/index.php/forum/forum?id=15"
target="_blank" rel="noopener">Forum LGL<img class="inline-block w-4" src="res/sito/link.svg"
alt="(link esterno)" height="12px" style="margin-left: 7px;"></a></li>
</ul>
</div>
<div id="about" class="bg-[#f1f1f1] dark:text-white dark:bg-gray-950">
<div class="max-w-4xl px-10 py-12 flex mx-auto space-x-8 portrait:pt-4">
<div class="space-y-5">
<h1 class="hidden landscape:block text-4xl pb-4">Chi siamo?
<hr>
</h1>
<p>"I corti di <a href="http://librogame.net" rel="noopener" target="_blank">Librogame's Land</a>" è il
più grande concorso italiano dedicato ai racconti interattivi (librogame).</p>
<p>Gestito dalla community con il supporto delle case editrici del settore, il concorso consente agli autori
di sfidarsi su un tema che cambia di anno in anno, sottoponendo i propri racconti brevi e brevissimi al
giudizio
del pubblico.
<p>Per tutte le novità sul concorso vi rimandiamo
<b>alla pagina <a href="https://facebook.com/cortilgl" target="_blank" class="text-blue-700">Facebook</a> apposita o, in alternativa, al <a
class="text-blue-700" target="_blank" href="http://www.librogame.net/index.php/forum/forum?id=15">Forum di LGL</a>.
</b>
</p>
</div>
<iframe id="social" title="Pagina Facebook dei corti" class="w-[403px] portrait:hidden" style="flex-shrink: 0;"
src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FcortiLGL%2F&tabs=timeline%2Cevents%2Cmessages&width=403&height=600&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=902520256865547"
width="403" height="600" frameborder="0" allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</div>
<div id="archivio" class="dark:bg-black" x-data>
<div class="max-w-4xl px-10 mx-auto py-8">
<div class="pt-12 pb-10 flex items-center portrait:flex-col">
<h1 class="text-3xl dark:text-white">Archivio racconti</h1>
<a class="text-base text-white bg-green-600 hover:bg-green-800 landscape:ml-4 px-5 py-3 rounded-lg" href="https://github.com/librogamesland/corti/archive/main.zip" rel="noopener"
target="_blank" download>Scarica <span class="hidden landscape:inline">tutto come file</span> .zip (~250MB)</a>
</div>
<template x-if="local.year !== null && local.archive[local.year]">
<div class="flex portrait:flex-col">
<select class="landscape:hidden my-4 px-2 py-4 text-xl rounded-md" x-model="local.year">
<template x-for="anno in Object.keys(local.archive).sort((a,b) => b-a)">
<option :value="anno" x-text="'Edizione ' + anno"></option>
</template>
</select>
<div class="portrait:hidden mr-8">
<template x-for="anno of Object.keys(local.archive).sort((a,b) => b-a)">
<button class="pl-8 pr-20 py-2 block hover:bg-gray-400 bg-[#ccc] dark:bg-gray-800 dark:hover:bg-gray-700 mb-[3px] font-bold text-gray-800 dark:text-white text-xl"
@click="local.year = anno" x-text="anno"></button>
</template>
</div>
<div class="w-full">
<h1 class="text-2xl font-bold mb-4 portrait:hidden dark:text-white" x-text="'Edizione ' + local.year"></h1>
<template x-if="local.archive[local.year].res.includes('libro.pdf')">
<a class="block text-blue-800 dark:text-blue-500 w-full py-2 px-1 rounded-md hover:bg-slate-300 hover:dark:bg-slate-800 mb-4"
:href="`https://librogamesland.github.io/corti/${local.year}/libro.pdf`" target="_blank" rel="noopener"
x-text="'Libro dei corti ' + local.year"></a>
</template>
<template x-if="local.archive[local.year].res.includes('bando.pdf')">
<a class="block text-blue-800 dark:text-blue-500 w-full py-2 px-1 rounded-md hover:bg-slate-300 hover:dark:bg-slate-800 mb-4"
:href="`https://librogamesland.github.io/corti/${local.year}/bando.pdf`" target="_blank" rel="noopener"
x-text="'Bando edizione ' + local.year"></a>
</template>
<template x-for="corto in local.archive[local.year].corti">
<a class="block text-blue-800 dark:text-blue-500 w-full py-2 px-1 rounded-md hover:bg-slate-300 hover:dark:bg-slate-800"
target="_blank" rel="noopener"
:href="`https://librogamesland.github.io/corti/${local.year}/corti/${corto}`" x-text="corto"></a>
</template>
</div>
</div>
</template>
</div>
</div>
<div id="footer" class="bg-[#155cac] pt-14 pb-16 text-white flex">
<p class="mx-auto">@ 2021 Librogame's Land</p>
</div>
</body>
</html>