---
title: "Uči uz AI"
toc: false
number-sections: false
lang: hr-HR
comments: false # bez Hypothesis na dodatku (izvjestaj-estetski M17)
format:
html:
page-layout: full
body-classes: ai-page
---
```{=html}
<header class="ai-head">
<span class="section-label">№ · POMAGALO ZA UČENJE</span>
<h1 class="ai-title">Pitaj umjetnu inteligenciju o ovoj knjizi</h1>
<p class="ai-lede">Cijelu knjigu ili pojedino poglavlje možete dati svojem asistentu
(ChatGPT, Claude, Gemini) i postavljati pitanja, tražiti sažetke ili provjeravati
razumijevanje. Pripremili smo čiste tekstualne verzije koje asistent lako čita.
Sve radi u vašem asistentu, bez prijave i bez troška.</p>
</header>
<div class="ai-rule" aria-hidden="true"><span>§</span></div>
<section class="ai-ladder" aria-label="Tri načina">
<div class="ai-card">
<span class="ai-num">01</span>
<span class="ai-card-name">Preuzmi i priloži</span>
<span class="ai-card-q">Preuzmite <code>.md</code> datoteku poglavlja i priložite je
u razgovor. Radi u svakom asistentu i ne traži pristup internetu. Najsigurnije.</span>
</div>
<div class="ai-card">
<span class="ai-num">02</span>
<span class="ai-card-name">Otvori u asistentu</span>
<span class="ai-card-q">Jedan klik otvara Claude ili ChatGPT s upisanim pitanjem i
poveznicom na poglavlje. Asistent treba pristup internetu da dohvati tekst.</span>
</div>
<div class="ai-card">
<span class="ai-num">03</span>
<span class="ai-card-name">Kopiraj poveznicu</span>
<span class="ai-card-q">Kopirajte poveznicu na tekst ili gotovu uputu i zalijepite je
u bilo koji asistent, uključujući Gemini.</span>
</div>
</section>
<div class="ai-sec-head">
<span class="section-label">№ I · JEDNO POGLAVLJE</span>
<h2>Pojedinačna poglavlja</h2>
</div>
```
Poglavlje je dovoljno malo da stane u svaki standardni (Gemini, ChatGPT ili Claude) chat i daje točne odgovore jer je
tekst usko vezan uz vaše pitanje. Odaberite poglavlje pa preuzmite tekst ili ga otvorite
u AI chatu.
```{ojs}
//| echo: false
manifest = FileAttachment("data/ai-exports.json").json()
```
```{ojs}
//| echo: false
viewof pog = Inputs.select(manifest.chapters, {
label: "Poglavlje",
format: c => c.title
})
```
```{ojs}
//| echo: false
{
const c = pog;
const tutor = manifest.promptShort; // kratka uputa za URL (puna je u polju niže)
const rel = "ai/" + c.slug + ".md"; // same-origin -> download radi i u pregledu
const q = encodeURIComponent(
tutor +
"\n\nTekst poglavlja nalazi se na ovoj poveznici, pročitaj ga i odgovaraj na temelju njega: " +
c.mdUrl
);
const copy = (txt, btn) => {
navigator.clipboard.writeText(txt);
const old = btn.textContent;
btn.textContent = "kopirano ✓";
setTimeout(() => { btn.textContent = old; }, 1400);
};
return htl.html`<div class="ai-actions">
<a class="ai-btn ai-btn--primary" href="${rel}" download>↓ preuzmi .md · ~${Math.round(c.tokensApprox/1000)}k tok.</a>
<a class="ai-btn" href="https://claude.ai/new?q=${q}" target="_blank" rel="noopener">↗ Claude</a>
<a class="ai-btn" href="https://chatgpt.com/?q=${q}" target="_blank" rel="noopener">↗ ChatGPT</a>
<button class="ai-btn" onclick=${(e) => copy(c.mdUrl, e.currentTarget)}>⧉ kopiraj poveznicu</button>
</div>`;
}
```
```{=html}
<div class="ai-sec-head">
<span class="section-label">№ II · VEĆI PAKETI</span>
<h2>Cijela knjiga i dijelovi</h2>
</div>
```
Za širi pregled poslužite se cijelom knjigom ili paketom jednog dijela. Cijela je knjiga
velik tekst, oko četvrt milijuna tokena, pa najbolje radi s asistentima velikog konteksta
poput Geminija ili Claudea s dugim kontekstom. Pojedini dio stane i u manje asistente.
```{ojs}
//| echo: false
{
return htl.html`<div class="ai-actions">
<a class="ai-btn ai-btn--primary" href="llms-full.txt" download>↓ cijela knjiga .txt</a>
<a class="ai-btn" href="llms.txt" target="_blank" rel="noopener">↗ karta (llms.txt)</a>
</div>
<div class="ai-chips">${
manifest.dios.map(d => htl.html`<a class="ai-chip" href="ai/dio-${d.n}.md" download>${d.label.replace(/:.*/, "")}</a>`)
}</div>`;
}
```
```{=html}
<div class="ai-sec-head">
<span class="section-label">№ III · UPUTA</span>
<h2>Gotov predložak za asistenta</h2>
</div>
```
Zalijepite ovu uputu prije nego što priložite tekst da asistent ostane uz knjigu i
odgovara na hrvatskom.
```{ojs}
//| echo: false
{
const copy = (txt, btn) => {
navigator.clipboard.writeText(txt);
const old = btn.textContent;
btn.textContent = "kopirano ✓";
setTimeout(() => { btn.textContent = old; }, 1400);
};
return htl.html`<figure class="ai-prompt">
<blockquote class="ai-prompt-text">${manifest.prompt}</blockquote>
<button class="ai-btn ai-btn--primary" onclick=${(e) => copy(manifest.prompt, e.currentTarget)}>⧉ kopiraj uputu</button>
</figure>`;
}
```
```{=html}
<footer class="ai-foot">
<p>AI ponekad griješi — provjerite važne tvrdnje u samom tekstu knjige. Otvaranje
poveznice u asistentu radi samo ako asistent ima pristup internetu, pa je preuzimanje
datoteke uvijek najsigurnije. Tekst je za osobno i obrazovno učenje uz navođenje izvora.</p>
</footer>
<style>
/* — STATECRAFT, minimalan registar usklađen s naslovnicom —
serif (Newsreader) za naslove i prozu, IBM Plex Mono za sve tehničke elemente
(gumbi, žetoni, brojevi, nazivi datoteka, predložak). Boje su odabrane da rade
i u svijetlom i u tamnom modu: naglasak je verdigris, prigušeni tekst nasljeđuje
boju tijela uz opacity, a tanke crte su neutralno sive. */
.ai-page #title-block-header { display: none; } /* koristimo vlastiti hero */
.ai-page #quarto-document-content { max-width: none; }
.ai-page main.content { max-width: 760px !important; margin-left: auto !important;
margin-right: auto !important; }
.ai-head { max-width: 720px; margin: 0 auto; text-align: center; }
.ai-head .section-label { color: #4A6B5C; }
.ai-title { font-family: "Newsreader", Georgia, serif; font-weight: 500;
font-size: clamp(1.9rem, 4.2vw, 2.8rem); line-height: 1.12; letter-spacing: -0.01em;
margin: .3rem 0 .7rem; }
.ai-lede { font-family: "Newsreader", Georgia, serif; font-size: 1.08rem; line-height: 1.62;
color: inherit; opacity: .85; margin: 0; }
/* editorial § razdjelnik */
.ai-rule { display: flex; align-items: center; gap: 1rem; max-width: 720px;
margin: 2rem auto; color: #C8985E; }
.ai-rule::before, .ai-rule::after { content: ""; flex: 1; height: 1px;
background: rgba(127,127,127,0.3); }
.ai-rule span { font-family: "Newsreader", Georgia, serif; font-size: 1.1rem; }
/* ladder — minimalne kartice s gornjom crtom, bez ispune */
.ai-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem 1.8rem; max-width: 860px; margin: 0 auto 1rem; }
.ai-card { display: flex; flex-direction: column; gap: .35rem; padding-top: .7rem;
border-top: 1.5px solid rgba(127,127,127,0.4); }
.ai-num { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-weight: 600;
font-size: 1.05rem; color: #4A6B5C; letter-spacing: .02em; }
.ai-card-name { font-family: "Public Sans", system-ui, sans-serif; font-weight: 700;
font-size: .98rem; color: inherit; }
.ai-card-q { font-family: "Newsreader", Georgia, serif; font-size: .95rem; line-height: 1.5;
color: inherit; opacity: .82; }
.ai-card code { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
font-size: .82em; background: rgba(127,127,127,0.15); padding: 0 .25rem; border-radius: 3px; }
/* section heads — labela + serif naslov, kao na naslovnici */
.ai-sec-head { margin: 2.6rem 0 .4rem; }
.ai-sec-head .section-label { color: #4A6B5C; }
.ai-page h2, .ai-sec-head h2 { font-family: "Newsreader", Georgia, serif; font-weight: 500;
font-size: 1.5rem; letter-spacing: -0.01em; margin: .1rem 0 0; }
/* tehnički gumbi — IBM Plex Mono; sekundarni je outline, primarni je ispunjen verdigris */
.ai-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0 .3rem; }
.ai-btn { font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
font-size: .8rem; font-weight: 500; letter-spacing: .005em; line-height: 1.3;
display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .8rem;
border-radius: 6px; border: 1px solid rgba(74,107,92,0.5); background: transparent;
color: #4A6B5C; text-decoration: none; cursor: pointer;
transition: border-color .15s, color .15s, background .15s; }
.ai-btn:hover { background: rgba(74,107,92,0.12); border-color: #4A6B5C; }
.ai-btn--primary { background: #4A6B5C; color: #F2EDE3; border-color: #4A6B5C; }
.ai-btn--primary:hover { background: #3B5749; color: #F2EDE3; }
/* DIO žetoni — mono, diskretni */
.ai-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.ai-chip { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: .74rem;
letter-spacing: .02em; padding: .32rem .6rem; border-radius: 999px;
border: 1px solid rgba(127,127,127,0.32); background: transparent; color: inherit;
opacity: .8; text-decoration: none; transition: border-color .15s, color .15s, opacity .15s; }
.ai-chip:hover { border-color: #4A6B5C; color: #4A6B5C; opacity: 1; }
/* predložak — mono "snippet" koji se kopira (svjetla kartica, namjerno, kao Atlas u tamnom) */
.ai-prompt { margin: 1rem 0; padding: 0; }
.ai-prompt-text { font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
font-size: .82rem; line-height: 1.65; color: #2B2620; background: #FBF8F1;
border: 1px solid rgba(28,25,22,0.12); border-left: 2px solid #4A6B5C;
border-radius: 6px; padding: .95rem 1.05rem; margin: 0 0 .7rem;
white-space: pre-wrap; max-height: 24rem; overflow: auto; }
/* OJS select u mono registru */
.ai-page .observablehq label, .ai-page label {
font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
font-size: .78rem !important; letter-spacing: .03em; text-transform: uppercase; opacity: .75; }
.ai-page select { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
font-size: .9rem !important; }
.ai-foot { margin: 2.8rem auto 1rem; padding-top: 1rem; border-top: 1px solid rgba(127,127,127,0.25); }
.ai-foot p { font-family: "Public Sans", system-ui, sans-serif; font-size: .84rem;
line-height: 1.55; color: inherit; opacity: .7; margin: 0; }
@media (max-width: 540px) {
.ai-ladder { grid-template-columns: 1fr; gap: 1.1rem; }
}
</style>
```