-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathreadme.html
More file actions
259 lines (238 loc) · 19 KB
/
Copy pathreadme.html
File metadata and controls
259 lines (238 loc) · 19 KB
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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>NGSS Explorer | PhilM013</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
ollama: { bg: '#ffffff', snow: '#fafafa', gray: '#e5e5e5', border: '#d4d4d4', stone: '#737373', mid: '#525252', nearBlack: '#262626', black: '#000000' }
},
fontFamily: { sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }
}
}
}
</script>
<style type="text/tailwindcss">
@layer base {
body { @apply bg-ollama-bg text-ollama-nearBlack font-sans selection:bg-ollama-gray; }
h1, h2, h3 { @apply text-ollama-black font-medium tracking-tight; }
}
@layer components {
.container-custom { @apply max-w-[800px] mx-auto px-6; }
.btn-pill-black { @apply px-8 py-3 bg-ollama-black text-white rounded-full transition-all duration-200 flex items-center justify-center gap-2 font-medium hover:opacity-90 active:scale-[0.98]; }
.btn-pill-white { @apply px-8 py-3 bg-white text-ollama-mid border border-ollama-border rounded-full transition-all duration-200 flex items-center justify-center gap-2 font-medium hover:bg-ollama-snow active:scale-[0.98]; }
.tag-pill { @apply px-2.5 py-0.5 rounded-full bg-ollama-gray text-ollama-stone text-[11px] font-medium uppercase tracking-wider; }
.tech-pill { @apply px-2 py-0.5 rounded-full bg-ollama-snow border border-ollama-gray text-ollama-stone text-[10px] font-medium; }
.visual-block { @apply border border-ollama-gray rounded-xl bg-ollama-snow p-8 flex flex-col gap-4 my-10 relative overflow-hidden; }
}
* { box-shadow: none !important; }
.prose pre { @apply bg-ollama-snow border border-ollama-gray rounded-xl p-6 overflow-x-auto my-8; }
.prose code { @apply text-ollama-black bg-ollama-gray px-1.5 py-0.5 rounded-md text-sm font-mono font-medium; }
.prose pre code { @apply bg-transparent text-ollama-nearBlack p-0 text-sm leading-relaxed; }
.prose h1, .prose h2, .prose h3 { @apply text-ollama-black font-medium mt-12 mb-6; }
.prose h1 { @apply text-4xl border-b border-ollama-gray pb-6 mb-10; }
.prose h2 { @apply text-2xl border-b border-ollama-gray/50 pb-3 mb-8; }
.prose p { @apply mb-8 text-ollama-stone leading-relaxed text-lg font-normal; }
.prose ul, .prose ol { @apply mb-8 pl-6 text-ollama-stone text-lg space-y-3; }
.prose ul { @apply list-disc marker:text-ollama-mid; }
.prose ol { @apply list-decimal marker:text-ollama-mid; }
.prose a { @apply text-ollama-black transition-colors underline decoration-ollama-border underline-offset-4 hover:decoration-ollama-black; }
.prose blockquote { @apply border-l-2 border-ollama-black pl-8 italic text-ollama-mid py-2 my-8; }
.prose table { @apply w-full text-left border-collapse my-10 border border-ollama-gray block overflow-x-auto; }
.prose th, .prose td { @apply border border-ollama-gray p-4; }
.prose th { @apply bg-ollama-snow text-ollama-black font-medium; }
.prose td { @apply text-ollama-stone; }
.prose img { @apply max-w-full rounded-xl border border-ollama-gray my-10 mx-auto; }
.prose hr { @apply border-ollama-gray my-12; }
</style>
</head>
<body class="antialiased overflow-x-hidden min-h-screen flex flex-col">
<nav class="py-4 md:py-5 bg-white/80 backdrop-blur-sm sticky top-0 z-50 border-b border-ollama-snow">
<div class="container-custom flex items-center justify-between">
<a href="../index.html" class="flex items-center gap-2 text-ollama-stone hover:text-ollama-black transition-colors font-medium">
<span class="iconify" data-icon="lucide:arrow-left"></span>
<span>Back</span>
</a>
<div class="flex items-center gap-3 font-medium text-lg absolute left-1/2 -translate-x-1/2 pointer-events-none">
<span class="iconify text-ollama-black" data-icon="lucide:compass"></span>
<span>NGSS Explorer</span>
</div>
<div class="flex items-center gap-4">
<a href="index.html" class="btn-pill-black text-sm px-5 py-2">Launch App</a>
</div>
</div>
</nav>
<main class="flex-grow pt-8 md:pt-10 pb-14 md:pb-16">
<div class="container-custom">
<div class="text-center mb-10 md:mb-12 space-y-4 md:space-y-5">
<div class="flex justify-center">
<div class="w-10 h-10 rounded-full border border-ollama-gray flex items-center justify-center p-2">
<span class="iconify text-xl text-ollama-black" data-icon="lucide:compass"></span>
</div>
</div>
<h1 class="text-2xl md:text-3xl">NGSS Explorer</h1>
<p class="text-sm md:text-base text-ollama-stone max-w-2xl mx-auto leading-relaxed">Interactive tool for exploring Next Gen Science Standards with AI analysis.</p>
<div class="flex flex-wrap justify-center gap-1.5 pt-1">
<span class="tech-pill px-3 py-1 text-xs">Gemini AI</span><span class="tech-pill px-3 py-1 text-xs">JSON Data</span><span class="tech-pill px-3 py-1 text-xs">D3.js</span>
</div>
</div>
<div class="space-y-16">
<div class="visual-block">
<div class="absolute top-0 right-0 p-8 opacity-[0.03] pointer-events-none">
<span class="iconify text-[200px]" data-icon="lucide:compass"></span>
</div>
<div class="relative z-10">
<h4 class="text-ollama-black font-medium mb-2 uppercase tracking-widest text-xs">Core Architecture</h4>
<h3 class="text-2xl mb-4">Standards Discovery Architecture</h3>
<p class="text-ollama-stone text-lg max-w-lg mb-8">Indexed NGSS datasets and structured browsing flows accelerate curriculum exploration across dimensions and links.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 h-48">
<div class="border border-ollama-gray bg-white rounded-xl flex items-center justify-center p-4 text-center">
<span class="text-ollama-stone text-xs font-mono uppercase tracking-tighter leading-tight">Standards Data<br>& Index Cache</span>
</div>
<div class="border border-ollama-black bg-ollama-gray rounded-xl flex items-center justify-center p-4 text-center">
<span class="text-ollama-black text-xs font-mono font-bold uppercase tracking-tighter leading-tight">Query Logic<br>& Link Traversal</span>
</div>
<div class="border border-ollama-gray bg-white rounded-xl flex items-center justify-center p-4 text-center">
<span class="text-ollama-stone text-xs font-mono uppercase tracking-tighter leading-tight">Explorer UI<br>& Insight Panels</span>
</div>
</div>
</div>
</div>
<div id="readme-content" class="prose max-w-none"></div>
<div class="visual-block border-ollama-black/20">
<h4 class="text-ollama-black font-medium mb-2 uppercase tracking-widest text-xs">Technical Integration</h4>
<h3 class="text-2xl mb-6">Standardized Tooling</h3>
<div class="flex flex-wrap gap-8 items-center justify-center md:justify-start">
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 rounded-full border border-ollama-gray flex items-center justify-center">
<span class="iconify text-xl" data-icon="lucide:zap"></span>
</div>
<span class="text-[10px] font-bold uppercase tracking-widest text-ollama-stone">Gemini AI</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 rounded-full border border-ollama-gray flex items-center justify-center">
<span class="iconify text-xl" data-icon="lucide:zap"></span>
</div>
<span class="text-[10px] font-bold uppercase tracking-widest text-ollama-stone">JSON Data</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 rounded-full border border-ollama-gray flex items-center justify-center">
<span class="iconify text-xl" data-icon="lucide:zap"></span>
</div>
<span class="text-[10px] font-bold uppercase tracking-widest text-ollama-stone">D3.js</span>
</div>
</div>
</div>
</div>
<div class="mt-32 pt-16 border-t border-ollama-gray">
<h3 class="text-3xl mb-10 text-center font-medium">Explore More Projects</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<a href="../FlipbookAI/readme.html" class="group block p-6 border border-ollama-gray rounded-xl bg-white hover:border-ollama-black transition-all duration-200">
<div class="w-10 h-10 rounded-lg bg-ollama-snow border border-ollama-gray flex items-center justify-center mb-4 group-hover:bg-ollama-gray transition-colors">
<span class="iconify text-xl text-ollama-black" data-icon="lucide:book-open"></span>
</div>
<h4 class="text-lg font-medium mb-2">FlipbookAI</h4>
<p class="text-ollama-stone text-sm leading-relaxed line-clamp-2">PDF viewer with a flipbook style and AI-powered document interrogation features.</p>
</a>
<a href="../ArchieIDE/readme.html" class="group block p-6 border border-ollama-gray rounded-xl bg-white hover:border-ollama-black transition-all duration-200">
<div class="w-10 h-10 rounded-lg bg-ollama-snow border border-ollama-gray flex items-center justify-center mb-4 group-hover:bg-ollama-gray transition-colors">
<span class="iconify text-xl text-ollama-black" data-icon="lucide:cpu"></span>
</div>
<h4 class="text-lg font-medium mb-2">ArchieIDE</h4>
<p class="text-ollama-stone text-sm leading-relaxed line-clamp-2">Full-featured browser IDE with "Archie" AI assistant, virtual file system, and collab.</p>
</a>
<a href="../ThinkTank/readme.html" class="group block p-6 border border-ollama-gray rounded-xl bg-white hover:border-ollama-black transition-all duration-200">
<div class="w-10 h-10 rounded-lg bg-ollama-snow border border-ollama-gray flex items-center justify-center mb-4 group-hover:bg-ollama-gray transition-colors">
<span class="iconify text-xl text-ollama-black" data-icon="lucide:brain"></span>
</div>
<h4 class="text-lg font-medium mb-2">ThinkTank</h4>
<p class="text-ollama-stone text-sm leading-relaxed line-clamp-2">AI-powered study tool aligned with NGSS for interactive learning sessions.</p>
</a>
</div>
</div>
<div class="mt-32 pt-12 flex flex-col items-center gap-8">
<div class="flex flex-wrap justify-center gap-4">
<a href="index.html" class="btn-pill-black px-12">Launch Application</a>
<a href="https://github.com/philm013/philm013.github.io/tree/main/NGSS-Explorer" target="_blank" class="btn-pill-white px-12">View Source</a>
</div>
</div>
</div>
</main>
<footer class="py-12 border-t border-ollama-gray text-center bg-ollama-snow">
<div class="container-custom text-ollama-stone text-sm font-medium">
<p>© 2026 PhilM013. Minimalism as a Service.</p>
</div>
</footer>
<script>
const rawMarkdown = `# NGSS 3D + PE Explorer
The NGSS 3D + PE Explorer is a comprehensive, client-side web application designed for educators, curriculum developers, and instructional coaches. It provides a powerful and intuitive interface to explore, analyze, and organize the Next Generation Science Standards (NGSS) in a deeply interconnected way.
This tool operates as a Single Page Application (SPA). It fetches data from remote JSON endpoints upon first load and then caches it for fast, offline-capable browsing. AI features require an active internet connection and a user-provided API key.
## Key Features
### 1. Three Powerful Views
- **PE Explorer:** A searchable, filterable database of all NGSS Performance Expectations (PEs). Expand any PE to see its full details, including clarification statements, assessment boundaries, and a formatted breakdown of its three dimensions.
- **3D Explorer:** A vertical progression view showing how each Science and Engineering Practice (SEP), Disciplinary Core Idea (DCI), and Crosscutting Concept (CCC) evolves from Kindergarten through High School.
- **Matrix View:** A customizable heatmap that visualizes where specific 3D elements appear across grade levels, serving as a high-level curriculum mapping tool.
### 2. AI-Powered Analysis & Deconstruction (Google Gemini)
- **Contextual Analysis:** Automatically color-codes a PE's description to visually identify the integrated SEPs (blue), DCIs (orange), and CCCs (green).
- **Evidence Statement Deconstruction:** A key feature that uses AI to break down complex Evidence Statements into granular, observable student skills, or "facets," and maps them to the specific 3D elements they address.
- **Interactive AI Editor:** After an AI analysis, select any highlighted text to open a toolbar and manually re-classify or re-format the AI's output, giving you full control.
### 3. Smart Navigation and Curriculum Planning
- **Smart Linking:** The application is deeply interconnected. Click on any colored 3D element within a PE's details to instantly jump to the 3D Explorer, which will highlight that specific element and show every other PE that utilizes it (a "reverse lookup").
- **Curriculum Bundling:** Select multiple PEs to create custom "bundles." The tool generates a summary view of all 3D elements covered by the group, aiding in cohesive unit planning.
- **Save & Share Bundles:** Bundles can be named and saved to your browser's local storage for future retrieval. They can also be used as filters in the PE Explorer.
### 4. User Experience
- **Interactive Guided Tour:** A built-in tutorial (powered by **Shepherd.js**) walks new users through the interface, explaining filters, views, and AI tools step-by-step.
- **Stateful URLs:** The application's state (current view, filters, expanded items) is encoded in the URL. This allows any view to be bookmarked, shared with colleagues, or refreshed without losing your place.
- **Data Privacy & Caching:** Your API key and saved bundles are stored in \`localStorage\`. Core NGSS data and AI analysis results are cached in \`IndexedDB\` to reduce API costs and provide a snappy experience on subsequent visits.
## Technical Specifications
- **Architecture:** A client-side Single Page Application (SPA) built with vanilla **HTML, CSS, and JavaScript (ES Modules)**. No backend is required.
- **AI Integration:** Uses the **Google Generative AI SDK (\`@google/generative-ai\`)** for all language model interactions. Supports models like \`gemini-flash-latest\` and \`gemini-2.5-pro\`.
- **Data Source:** Fetches optimized NGSS JSON data files from an external repository on first load.
- **Persistence:**
- **IndexedDB:** Caches the static NGSS dataset and the results of AI analyses to minimize network requests and API calls.
- **LocalStorage:** Stores user settings (API Key, selected model) and saved curriculum bundles.
- **UI Libraries:**
- **Shepord.js:** Powers the interactive guided tour for new users.
## How to Use
1. **Open \`index.html\`** in a modern web browser (e.g., Chrome, Firefox, Edge).
2. **Take the Tour:** On your first visit, click the "❓" button to start the interactive tour for a quick overview of the main features.
3. **Set API Key:** To enable the AI features, click the **"Settings"** button, enter your Google Gemini API key, and click "Save."
4. **Explore:**
- Use the **PE Explorer** to filter and find standards. Click any row to expand it and see its details.
- Click on a blue, orange, or green element link within the details to jump to the **3D Explorer**.
- Use the **Matrix View** and the "Select/Refine Rows" button to create a high-level curriculum map.
5. **Analyze and Deconstruct:**
- In a PE's detail view, click **"Analyze with Full Context"** to have the AI highlight the three dimensions in the description.
- Open the **"View Evidence Statements"** modal and click **"Deconstruct into 3D Facets"** to get a detailed breakdown of student skills.`;
async function renderReadme() {
let markdownToRender = rawMarkdown;
try {
const candidates = ['README.md', 'readme.md'];
for (const file of candidates) {
const response = await fetch(file, { cache: 'no-store' });
if (response.ok) {
markdownToRender = await response.text();
break;
}
}
} catch (error) {
// Fall back to embedded markdown when external files are unavailable.
}
if ((markdownToRender || '').trim()) {
document.getElementById('readme-content').innerHTML = marked.parse(markdownToRender);
} else {
document.getElementById('readme-content').innerHTML = '<div class="text-center py-24 border border-dashed border-ollama-gray rounded-xl"><span class="iconify text-5xl text-ollama-gray mb-6 mx-auto" data-icon="lucide:file-question"></span><h3 class="text-xl font-medium text-ollama-stone text-center m-0">No documentation found.</h3></div>';
}
}
renderReadme();
</script>
</body>
</html>