Hugging Face's logo

Spaces:
guicybercode
/
culture-compass
Running

App Files Community
culture-compass
File size: 9,043 Bytes
9c25c61
0fbbe82
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b1d9d4f
0fbbe82
 
 
 
 
 
 
 
9c25c61
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!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>