culture-compass / index.html
guicybercode's picture
Clarify app-level privacy wording
b1d9d4f verified
Raw
History Blame Contribute Delete
9.04 kB
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#1E3A5F">
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; script-src 'self'; style-src 'self'; connect-src https://huggingface.co; img-src 'self' data:; font-src 'self'; object-src 'none'; base-uri 'none'; form-action 'none'; frame-src 'none'; media-src 'none'; worker-src 'none'"
>
<meta name="referrer" content="no-referrer">
<meta
name="description"
content="Explore atividades multilíngues experimentais sobre matemática, filosofia, tecnologia e ética."
data-i18n-content="metaDescription"
>
<meta property="og:type" content="website">
<meta property="og:title" content="Culture Compass">
<meta
property="og:description"
content="Um explorador editorial multilíngue para dois microdatasets experimentais."
data-i18n-content="metaDescription"
>
<meta name="twitter:card" content="summary">
<title>Culture Compass — exploração editorial multilíngue</title>
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="styles.css">
<script src="app.js" defer></script>
</head>
<body>
<noscript>
<p class="noscript-notice">
Culture Compass precisa de JavaScript para carregar os datasets públicos.
</p>
</noscript>
<a class="skip-link" href="#main-content" data-i18n="skipLink">
Ir para o conteúdo principal
</a>
<header class="site-header">
<div class="shell header-grid">
<div class="brand" aria-label="Culture Compass">
<span class="brand-mark" aria-hidden="true">CC</span>
<span class="brand-name">Culture Compass</span>
</div>
<div class="interface-language">
<label for="ui-language" data-i18n="interfaceLanguage">
Idioma da interface
</label>
<select id="ui-language" name="ui-language">
<option value="pt-BR">Português (Brasil)</option>
<option value="en">English</option>
<option value="zh-CN">简体中文</option>
</select>
</div>
</div>
</header>
<main id="main-content" tabindex="-1">
<section class="hero shell" aria-labelledby="page-title">
<p class="eyebrow" data-i18n="eyebrow">Laboratório editorial multilíngue</p>
<div class="hero-grid">
<div class="hero-copy">
<h1 id="page-title" data-i18n="heroTitle">
Ideias para matemática, tecnologia e ética
</h1>
<p class="hero-intro" data-i18n="heroIntro">
Explore atividades para reflexão com filtros claros de idioma e tema.
</p>
</div>
<aside class="draft-notice" aria-labelledby="draft-title">
<p class="notice-index" aria-hidden="true">01 / 01</p>
<h2 id="draft-title" data-i18n="draftTitle">Aviso de uso</h2>
<p data-i18n="draftText">
Rascunhos experimentais gerados por IA. Revisão humana é necessária antes de uso educacional, em modelos ou como material curado.
</p>
</aside>
</div>
</section>
<section class="explorer shell" aria-labelledby="explorer-title">
<div class="section-heading">
<p class="section-number" aria-hidden="true">01</p>
<div>
<h2 id="explorer-title" data-i18n="explorerTitle">Escolha uma direção</h2>
<p data-i18n="explorerIntro">
A interface e o conteúdo têm seletores independentes.
</p>
</div>
</div>
<form id="explorer-controls" class="controls" aria-describedby="controls-help">
<p id="controls-help" class="visually-hidden" data-i18n="controlsHelp">
Alterar um filtro atualiza a atividade exibida.
</p>
<div class="control-field">
<label for="dataset-select" data-i18n="datasetLabel">Dataset</label>
<select id="dataset-select" name="dataset">
<option value="japan" lang="en">Japan Math Philosophy Prompts</option>
<option value="iceland" lang="en">Iceland Tech &amp; Christian Ethics Prompts</option>
</select>
</div>
<div class="control-field">
<label for="content-language" data-i18n="contentLanguageLabel">
Idioma do conteúdo
</label>
<select id="content-language" name="content-language">
<option value="pt-BR" lang="pt-BR">Português (Brasil)</option>
<option value="en" lang="en">English</option>
<option value="ja" lang="ja">日本語</option>
</select>
</div>
<div class="control-field control-topic">
<label for="topic-select" data-i18n="topicLabel">Tema ou tópico</label>
<select id="topic-select" name="topic">
<option value="all">Todos os temas</option>
</select>
</div>
<button id="random-button" class="primary-button" type="button">
<span data-i18n="randomButton">Sortear atividade</span>
<span class="button-rule" aria-hidden="true"></span>
</button>
</form>
</section>
<section class="results shell" aria-labelledby="activity-heading">
<div class="section-heading results-heading">
<p class="section-number" aria-hidden="true">02</p>
<div>
<h2 id="activity-heading" data-i18n="activityHeading">Atividade selecionada</h2>
<p id="result-summary" data-i18n="resultIntro">
O texto abaixo vem diretamente do dataset-fonte.
</p>
</div>
</div>
<p
id="live-status"
class="visually-hidden"
role="status"
aria-live="polite"
aria-atomic="true"
></p>
<div id="result-region" aria-busy="true">
<div id="state-panel" class="state-panel" role="region" aria-labelledby="state-title">
<div class="state-lines" aria-hidden="true">
<span></span><span></span><span></span>
</div>
<h3 id="state-title" tabindex="-1" data-i18n="loadingTitle">Carregando atividades</h3>
<p id="state-message" data-i18n="loadingMessage">
Buscando o arquivo público no Hugging Face.
</p>
<button id="retry-button" class="secondary-button" type="button" hidden>
<span data-i18n="retryButton">Tentar novamente</span>
</button>
</div>
<article id="activity-card" class="activity-card" hidden>
<header class="activity-header">
<div class="activity-kicker-row">
<p id="activity-context" class="activity-context"></p>
<p id="record-position" class="record-position"></p>
</div>
<h3 id="activity-title" tabindex="-1"></h3>
<div class="status-list" aria-label="Status editorial" data-i18n-aria="statusListLabel">
<span class="status-badge" data-i18n="aiDraftBadge">Rascunho gerado por IA</span>
<span class="status-badge status-badge-review" data-i18n="reviewBadge">
Revisão humana necessária
</span>
</div>
</header>
<div id="activity-body" class="activity-body"></div>
<footer class="activity-footer">
<p data-i18n="sourceDisclosure">
Confira contexto, limitações e licença no repositório original.
</p>
<a
id="source-link"
class="source-link"
href="https://huggingface.co/datasets/guicybercode/japan-math-philosophy-prompts"
target="_blank"
rel="noopener noreferrer"
>
<span data-i18n="sourceLink">Abrir dataset-fonte no Hugging Face</span>
<span aria-hidden="true"></span>
</a>
</footer>
</article>
</div>
</section>
</main>
<footer class="site-footer">
<div class="shell footer-grid">
<p>
<span>Culture Compass</span>
<span data-i18n="footerNote">Interface estática, sem rastreamento próprio.</span>
</p>
<nav aria-label="Datasets-fonte" data-i18n-aria="footerNavLabel">
<a href="https://huggingface.co/datasets/guicybercode/japan-math-philosophy-prompts" lang="en">Japan + Math</a>
<a href="https://huggingface.co/datasets/guicybercode/iceland-tech-christian-ethics-prompts" lang="en">Iceland + Ethics</a>
</nav>
</div>
</footer>
</body>
</html>