body.html
Changed around line 1
+
+
Math Genius
+
Generate detailed math courses with LaTeX and Markdown support.
+
+
+
+
+
Available Courses
+
+ Calculus
+
+
+
+
+
Course Content
+
+
+
+
+
+
+
+
+
+
+
Math Genius - Your personal math tutor.
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://mathgenius.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Math Genius - Generate Detailed Math Courses
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "8f4e4d2d-7809-43a3-96d7-70510444da9b",
+ "object": "chat.completion",
+ "created": 1735339662,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nmathgenius.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://mathgenius.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Math Genius - Generate Detailed Math Courses\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n \n\n\n \n \n\n \n \n\n \n \n\n\n---style.css---\n:root {\n --primary-color: #4CAF50;\n --secondary-color: #2196F3;\n --background-color: #f5f5f5;\n --text-color: #333;\n --whiteboard-width: 300px;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n margin: 0;\n padding: 0;\n color: var(--text-color);\n background-color: var(--background-color);\n line-height: 1.6;\n}\n\nheader {\n background-color: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nmain {\n display: flex;\n flex-wrap: wrap;\n gap: 2rem;\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n#course-list {\n flex: 1;\n min-width: 250px;\n}\n\n#course-content {\n flex: 3;\n min-width: 300px;\n}\n\n#whiteboard {\n position: fixed;\n right: 0;\n top: 0;\n width: var(--whiteboard-width);\n height: 100vh;\n background-color: white;\n box-shadow: -2px 0 5px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n padding: 1rem;\n}\n\n#whiteboard.hidden {\n transform: translateX(var(--whiteboard-width));\n}\n\n#drawing-area {\n width: 100%;\n height: calc(100vh - 60px);\n border: 1px solid #ddd;\n background-color: #fff;\n}\n\n#toggle-whiteboard {\n position: absolute;\n left: -50px;\n top: 20px;\n background-color: var(--secondary-color);\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n cursor: pointer;\n border-radius: 5px 0 0 5px;\n}\n\n@media (max-width: 768px) {\n main {\n flex-direction: column;\n }\n \n #whiteboard {\n width: 100%;\n height: 300px;\n bottom: 0;\n top: auto;\n }\n \n #whiteboard.hidden {\n transform: translateY(300px);\n }\n \n #toggle-whiteboard {\n left: 20px;\n top: -40px;\n border-radius: 5px 5px 0 0;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const whiteboard = document.getElementById('whiteboard');\n const toggleButton = document.getElementById('toggle-whiteboard');\n const courseLinks = document.querySelectorAll('#course-list a');\n const courseDetails = document.getElementById('course-details');\n\n // Whiteboard toggle functionality\n toggleButton.addEventListener('click', () => {\n whiteboard.classList.toggle('hidden');\n });\n\n // Course navigation functionality\n courseLinks.forEach(link => {\n link.addEventListener('click', function(e) {\n e.preventDefault();\n const courseId = this.getAttribute('href').substring(1);\n loadCourseContent(courseId);\n });\n });\n\n // Basic drawing functionality\n const drawingArea = document.getElementById('drawing-area');\n let isDrawing = false;\n\n drawingArea.addEventListener('mousedown', () => {\n isDrawing = true;\n });\n\n drawingArea.addEventListener('mouseup', () => {\n isDrawing = false;\n });\n\n drawingArea.addEventListener('mousemove', (e) => {\n if (isDrawing) {\n const dot = document.createElement('div');\n dot.style.position = 'absolute';\n dot.style.left = `${e.offsetX}px`;\n dot.style.top = `${e.offsetY}px`;\n dot.style.width = '5px';\n dot.style.height = '5px';\n dot.style.backgroundColor = 'black';\n drawingArea.appendChild(dot);\n }\n });\n\n // Load initial course content\n loadCourseContent('course1');\n\n function loadCourseContent(courseId) {\n // This would be replaced with actual course content loading\n const courses = {\n course1: `
Math Genius
\nGenerate detailed math courses with LaTeX and Markdown support.
\nLinear Algebra
\nIntroduction to vectors, matrices, and linear transformations.
\n$$\\\\begin{bmatrix}1 & 2\\\\\\\\3 & 4\\\\end{bmatrix}$$
`,\n course2: `Calculus
\nUnderstanding limits, derivatives, and integrals.
\n$$\\\\int_{a}^{b} f(x) dx$$
`,\n course3: `Probability & Statistics
\nExploring probability distributions and statistical analysis.
\n$$P(A|B) = \\\\frac{P(B|A)P(A)}{P(B)}$$
`\n };\n courseDetails.innerHTML = courses[courseId];\n MathJax.typeset();\n }\n});\n---end---"+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 305,
+ "completion_tokens": 1385,
+ "total_tokens": 1690,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 305
+ },
+ "system_fingerprint": "fp_f1afce2943"
+ }
readme.scroll
Changed around line 1
+ # mathgenius1.scroll.pub
+ Website generated by DeepSeek from prompt: I want a single page webapp that generates full detailed math courses, supporting latex and markdown style, can click on the course and it takes me to said course, and on the right side i want a sliding whiteboard with similar to tldraw, i can hide it whenever i don't need it and pop it back up when i need it
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ const whiteboard = document.getElementById('whiteboard');
+ const toggleButton = document.getElementById('toggle-whiteboard');
+ const courseLinks = document.querySelectorAll('#course-list a');
+ const courseDetails = document.getElementById('course-details');
+
+ // Whiteboard toggle functionality
+ toggleButton.addEventListener('click', () => {
+ whiteboard.classList.toggle('hidden');
+ });
+
+ // Course navigation functionality
+ courseLinks.forEach(link => {
+ link.addEventListener('click', function(e) {
+ e.preventDefault();
+ const courseId = this.getAttribute('href').substring(1);
+ loadCourseContent(courseId);
+ });
+ });
+
+ // Basic drawing functionality
+ const drawingArea = document.getElementById('drawing-area');
+ let isDrawing = false;
+
+ drawingArea.addEventListener('mousedown', () => {
+ isDrawing = true;
+ });
+
+ drawingArea.addEventListener('mouseup', () => {
+ isDrawing = false;
+ });
+
+ drawingArea.addEventListener('mousemove', (e) => {
+ if (isDrawing) {
+ const dot = document.createElement('div');
+ dot.style.position = 'absolute';
+ dot.style.left = `${e.offsetX}px`;
+ dot.style.top = `${e.offsetY}px`;
+ dot.style.width = '5px';
+ dot.style.height = '5px';
+ dot.style.backgroundColor = 'black';
+ drawingArea.appendChild(dot);
+ }
+ });
+
+ // Load initial course content
+ loadCourseContent('course1');
+
+ function loadCourseContent(courseId) {
+ // This would be replaced with actual course content loading
+ const courses = {
+ course1: `
Linear Algebra
+
Introduction to vectors, matrices, and linear transformations.
+
$$\\begin{bmatrix}1 & 2\\\\3 & 4\\end{bmatrix}$$
`,+ course2: `
Calculus
+
Understanding limits, derivatives, and integrals.
+
$$\\int_{a}^{b} f(x) dx$$
`,+ course3: `
Probability & Statistics
+
Exploring probability distributions and statistical analysis.
+
$$P(A|B) = \\frac{P(B|A)P(A)}{P(B)}$$
`+ };
+ courseDetails.innerHTML = courses[courseId];
+ MathJax.typeset();
+ }
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #4CAF50;
+ --secondary-color: #2196F3;
+ --background-color: #f5f5f5;
+ --text-color: #333;
+ --whiteboard-width: 300px;
+ }
+
+ body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ margin: 0;
+ padding: 0;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ line-height: 1.6;
+ }
+
+ header {
+ background-color: var(--primary-color);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+ }
+
+ main {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2rem;
+ padding: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ #course-list {
+ flex: 1;
+ min-width: 250px;
+ }
+
+ #course-content {
+ flex: 3;
+ min-width: 300px;
+ }
+
+ #whiteboard {
+ position: fixed;
+ right: 0;
+ top: 0;
+ width: var(--whiteboard-width);
+ height: 100vh;
+ background-color: white;
+ box-shadow: -2px 0 5px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+ padding: 1rem;
+ }
+
+ #whiteboard.hidden {
+ transform: translateX(var(--whiteboard-width));
+ }
+
+ #drawing-area {
+ width: 100%;
+ height: calc(100vh - 60px);
+ border: 1px solid #ddd;
+ background-color: #fff;
+ }
+
+ #toggle-whiteboard {
+ position: absolute;
+ left: -50px;
+ top: 20px;
+ background-color: var(--secondary-color);
+ color: white;
+ border: none;
+ padding: 0.5rem 1rem;
+ cursor: pointer;
+ border-radius: 5px 0 0 5px;
+ }
+
+ @media (max-width: 768px) {
+ main {
+ flex-direction: column;
+ }
+
+ #whiteboard {
+ width: 100%;
+ height: 300px;
+ bottom: 0;
+ top: auto;
+ }
+
+ #whiteboard.hidden {
+ transform: translateY(300px);
+ }
+
+ #toggle-whiteboard {
+ left: 20px;
+ top: -40px;
+ border-radius: 5px 5px 0 0;
+ }
+ }