rmheade.github.io/graph.html at main · Alexx743/rmheade.github.io · GitHub

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
<!doctype html>
<html lang="en">
<head>
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/x-icon" src="favicon.ico">
<title>StudyBuddy - Graphing Calculator</title>
<style>
  :root{
    --bg:#f6f8fb;
    --card:#ffffff;
    --muted:#6b7280;
    --accent:#2563eb;
    --success:#10b981;
    --danger:#ef4444;
    --radius:12px;
    --text:#0f172a;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }

  [data-theme="dark"] {
    --bg:#0f172a;
    --card:#1e293b;
    --muted:#94a3b8;
    --text:#f1f5f9;
  }

  *{box-sizing:border-box}
  /* Adjusted body to use 100vh for full viewport height and removed padding/margins */
  body{
    margin:0;
    background:linear-gradient(180deg,var(--bg), var(--bg));
    color:var(--text);
    min-height:100vh;
    transition:background 0.3s, color 0.3s;
    overflow: hidden; /* Prevent scrolling if only the calculator is present */
  }

  /* The main wrapper is no longer needed, but re-purposing it for full screen content */
  .wrap{
    max-width: none; /* Full width */
    margin: 0; /* No margin */
    padding: 0; /* No padding */
    min-height: 100vh; /* Full height */
    display: flex; /* For flexible alignment */
    flex-direction: column;
  }

  /* --- Original styles kept for theme toggling and calculator background --- */
  .card{background:var(--card);border-radius:var(--radius);box-shadow:0 6px 22px rgba(16,24,40,0.06);padding:18px;margin-bottom:14px;transition:background 0.3s}
  [data-theme="dark"] .card{background:var(--card)} /* Ensure card background transitions with theme */
</style>

<script>
// Theme Management System - Retained for dark mode support for the calculator
class ThemeManager {
  constructor() {
    this.theme = localStorage.getItem('studybuddy-theme') || 'light';
    this.init();
  }

  init() {
    this.applyTheme(this.theme);
    // Removed setupButton since the button is removed from HTML
    this.listenForExternalChanges();
  }

  applyTheme(theme) {
    this.theme = theme || 'light';
    document.documentElement.setAttribute('data-theme', this.theme);
    localStorage.setItem('studybuddy-theme', this.theme);
    // Removed updateButton
    this.broadcastToIframes();
  }

  toggle() {
    const newTheme = this.theme === 'light' ? 'dark' : 'light';
    this.applyTheme(newTheme);
  }

  broadcastToIframes() {
    const iframes = document.querySelectorAll('iframe');
    iframes.forEach(iframe => {
      try {
        iframe.contentWindow.postMessage({
          type: 'THEME_CHANGED',
          theme: this.theme
        }, '*');
      } catch (e) {
        // Silently fail for cross-origin iframes
      }
    });
  }

  listenForExternalChanges() {
    window.addEventListener('message', (event) => {
      if (event.data && event.data.type === 'THEME_CHANGED') {
        this.applyTheme(event.data.theme);
      }
      // Respond to iframes asking for current theme
      if (event.data && event.data.type === 'GET_THEME') {
        event.source.postMessage({
          type: 'THEME_CHANGED',
          theme: this.theme
        }, '*');
      }
      // Listen for messages from iframes
      window.addEventListener("message", (event) => {
        if (event.data && event.data.type === "tilde-pressed") {
            window.location.href = "/";
        }
      if (!event.data) return;
      if (event.data === 'closeLogin') {
        document.getElementById("loginModal").style.display = "none";
      }
      // if notebook broadcasted deck changes
      if (event.data.type === 'DECKS_UPDATED') {
        // This file does not manage decks, so do nothing.
      }
    });
    });
  }
}

// Initialize on DOM ready
document.addEventListener('DOMContentLoaded', () => {
  new ThemeManager();
});
</script>
<script src="https://www.desmos.com/api/v1.11/calculator.js?apiKey=7818f71cc1ad45a5a36652e908b62deb"></script>
</head>
<body>
<div class="wrap">
  <div class="notebook-content-wrapper" style="flex-grow: 1; border: none; border-radius: 0;">
    <div class="card" style="border:none; border-radius:0; box-shadow:none; padding: 0;">

      <div id="calculator" style="width: 100%; height: 100vh; border-radius: 0; overflow: hidden;"></div>

    </div>
  </div>
</div>

<script>
    var elt = document.getElementById('calculator');

// 1. Correctly check for the 'data-theme' attribute on the <html> element
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';

// 2. Define the configuration object once
var options = {
  keypad: true,
  expressions: true,
  settingsMenu: true,
  zoomButtons: true,
  // 3. Set the 'invertedColors' option directly from the 'isDark' boolean
  invertedColors: isDark
};

// 4. Initialize the calculator once
var calculator = Desmos.GraphingCalculator(elt, options);

// Set up an observer to watch for theme changes on the <html> tag
const observer = new MutationObserver((mutationsList, observer) => {
    for(const mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
            const newIsDark = document.documentElement.getAttribute('data-theme') === 'dark';

            // Update the calculator's settings without reloading the component
            calculator.updateSettings({

              invertedColors: newIsDark
            });
        }
    }
});

// Start observing the <html> element for changes to its attributes
observer.observe(document.documentElement, { attributes: true });
</script>
</body>
</html>