-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathical.html
135 lines (121 loc) · 7.93 KB
/
ical.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
<!DOCTYPE html>
<html lang="sk-SK">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="build.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
<title>iCalendar - KockatýKalendár.sk</title>
<meta name="theme-color" content="#4299e1">
<meta name="description" content="Pridajte si mat/fyz/inf akcie priamo do vášho kalendára.">
<meta property="og:image" content="img/social.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:title" content="KockatýKalendár.sk" />
<meta property="og:description" content="Pridajte si mat/fyz/inf akcie priamo do vášho kalendára." />
<meta property="og:site_name" content="KockatýKalendár.sk" />
</head>
<body class="antialiased max-h-screen h-screen flex flex-col">
<header class="bg-blue-500 text-white">
<nav class="px-4 md:px-6 flex justify-center md:justify-between items-center py-4 flex-col md:flex-row">
<a href="index.html" class="font-bold text-xl mb-1 md:mb-0">KockatýKalendár.sk</a>
<ul class="flex font-bold">
<li class="mr-3">
<a class="inline-block border border-white rounded py-1 px-3 bg-blue-500 text-white
hover:text-blue-500 hover:border-gray-200 hover:bg-gray-200" href="index.html">O nás</a>
<a class="inline-block border border-white rounded py-1 px-3 bg-blue-500 text-white
hover:text-blue-500 hover:border-gray-200 hover:bg-gray-200" href="terminy.html">Akcie</a>
<a class="inline-block border border-blue-700 rounded py-1 px-3 bg-blue-700 text-white" href="ical.html">Export</a>
</li>
</ul>
</nav>
</header>
<main class="overflow-y-scroll">
<div class="mx-auto max-w-4xl p-8">
<h2 class="font-bold mt-8 mb-6 text-center text-3xl">Kockatý Kalendár v tvojom kalendári</h2>
<div class="mx-auto max-w-2xl text-center">
<p>
Kockatý Kalendár okrem webového rozhrania ponúka aj možnosť si pridať udalosti do tvojho Google Kalendára,
Outlooku a pod. Môžeš si vybrať, ktoré akcie chceš vo svojom kalendári mať.
</p>
</div>
<h2 class="font-bold mt-12 text-center text-2xl">Predvoľby kalendára</h2>
<div x-data="{ school: 'any', science: 'any' }">
<h3 class="font-bold mt-8 mb-4 text-lg uppercase text-gray-700 tracking-wide">Ročník</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-center text-lg font-bold">
<div class="shadow border rounded-full px-2 py-4 cursor-pointer" :class="{ 'bg-blue-500 text-white': school === 'any' }" @click="school = 'any'">
Všetky
</div>
<div class="shadow border rounded-full px-2 py-4 cursor-pointer" :class="{ 'bg-blue-500 text-white': school === 'zs' }" @click="school = 'zs'">
Základná škola
</div>
<div class="shadow border rounded-full px-2 py-4 cursor-pointer" :class="{ 'bg-blue-500 text-white': school === 'ss' }" @click="school = 'ss'">
Stredná škola
</div>
</div>
<h3 class="font-bold mt-8 mb-4 text-lg uppercase text-gray-700 tracking-wide">Veda</h3>
<div class="mx-auto max-w-4xl grid grid-cols-1 md:grid-cols-5 gap-3 text-center text-md font-bold">
<div class="shadow border rounded-full px-2 py-4 cursor-pointer" :class="{ 'bg-blue-500 text-white': science === 'any' }" @click="science = 'any'">
Všetky
</div>
<div class="shadow border rounded-full px-2 py-4 cursor-pointer" :class="{ 'bg-blue-500 text-white': science === 'mat' }" @click="science = 'mat'">
Matematika
</div>
<div class="shadow border rounded-full px-2 py-4 cursor-pointer" :class="{ 'bg-blue-500 text-white': science === 'fyz' }" @click="science = 'fyz'">
Fyzika
</div>
<div class="shadow border rounded-full px-2 py-4 cursor-pointer" :class="{ 'bg-blue-500 text-white': science === 'inf' }" @click="science = 'inf'">
Informatika
</div>
<div class="shadow border rounded-full px-2 py-4 cursor-pointer" :class="{ 'bg-blue-500 text-white': science === 'other' }" @click="science = 'other'">
Ostatné
</div>
</div>
<h2 class="font-bold mt-12 mb-6 text-center text-2xl">Adresa zvoleného kalendára</h2>
<div class="bg-gray-400 px-4 py-3 rounded-lg text-2xl font-mono">https://ical.kockatykalendar.sk/<span x-text="school"></span>/<span x-text="science"></span>.ics</div>
<p class="text-sm text-gray-700 mt-2">Ak chceš v kalendári viacero vied / ročníkov, pridaj každý zvlášť.</p>
</div>
<h2 class="font-bold mt-12 text-center text-3xl">Ako na to?</h2>
<p class="mx-auto max-w-2xl text-center mt-6">
Kockatý Kalendár si môžeš jednoducho pridať do svojho kalendára. Nevieš, ako na to? Nevadí! Pripravili sme si pre teba
krátke návody.
</p>
</div>
<div class="mx-auto container p-8 mb-12">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 justify-center">
<div class="border rounded-lg p-8 shadow">
<h2 class="mb-2 font-bold text-2xl">Google Calendar</h2>
<ol class="list-decimal ml-6 space-y-1">
<li>Otvoríš <a href="https://calendar.google.com" class="underline text-blue-600" rel="noopener" target="_blank">calendar.google.com</a></li>
<li>Na ľavej strane v zozname kalendárov klikni na "+"</li>
<li>Zvol možnosť pridania podľa URL adresy</li>
<li>Nakopíruj vyššie uvedenú adresu</li>
<li>Pridaj kalendár</li>
<li class="font-bold text-green-500">Hotovo.</li>
</ol>
</div>
<div class="border rounded-lg p-8 shadow">
<h2 class="mb-2 font-bold text-2xl">Outlook</h2>
<ol class="list-decimal ml-6 space-y-1">
<li>Otvoríš si <a href="https://outlook.office.com/calendar/" class="underline text-blue-600" rel="noopener" target="_blank">Outlook Kalendár</a></li>
<li>Na ľavej strane klikni na "Pridať kalendár"</li>
<li>Zvol možnosť "Prihlásiť sa na odber z webu"</li>
<li>Nakopíruj vyššie uvedenú adresu</li>
<li>Zvoľ si farbu a názov kalendára</li>
<li>Stlač importovať</li>
<li class="font-bold text-green-500">Hotovo.</li>
</ol>
</div>
<div class="border rounded-lg p-8 shadow text-gray-600">
<h2 class="mb-2 font-bold text-2xl">Niečo iné?</h2>
<p>
Ak používaš niečo iné, čo by sme sem mali doplniť, <a href="mailto:[email protected]" class="underline text-blue-400">daj nám vedieť!</a>
</p>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<script async defer data-website-id="e76c1f53-9376-4047-8c8e-45cc01532075" src="https://stats.p-mat.sk/umami.js"></script>
</body>
</html>