-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
156 lines (155 loc) · 10.4 KB
/
Copy pathindex.html
File metadata and controls
156 lines (155 loc) · 10.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solving Hermite's Problem: Interactive Paper</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📊</text></svg>">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/paper-viewer.css">
<style>
body { background: #f7fafd; }
.hero {
background: linear-gradient(120deg, #e3f2fd 60%, #fff 100%);
padding: 3rem 1rem 2rem 1rem;
text-align: center;
border-radius: 0 0 2rem 2rem;
box-shadow: 0 2px 16px rgba(44,62,80,0.07);
}
.hero h1 { font-size: 2.7rem; font-weight: 800; color: #0d6efd; }
.hero p { font-size: 1.3rem; color: #333; max-width: 700px; margin: 1rem auto; }
.hero .btn { font-size: 1.2rem; padding: 0.75rem 2rem; }
.methods-section { background: #fff; border-radius: 1rem; box-shadow: 0 2px 8px rgba(44,62,80,0.05); padding: 2rem 1rem; margin-top: 2rem; }
.method-card { transition: transform 0.2s; border: none; box-shadow: 0 2px 8px rgba(44,62,80,0.07); border-radius: 1rem; }
.method-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 6px 24px rgba(44,62,80,0.13); }
.method-icon { font-size: 2.5rem; color: #0d6efd; margin-bottom: 0.5rem; }
.quickstart-section, .featured-tools-section { margin-top: 2.5rem; }
.quickstart-step { display: flex; align-items: flex-start; margin-bottom: 1.5rem; }
.quickstart-step .step-icon { font-size: 2rem; color: #0d6efd; margin-right: 1rem; }
.featured-tool-card { border: none; border-radius: 1rem; box-shadow: 0 2px 8px rgba(44,62,80,0.07); transition: transform 0.2s; }
.featured-tool-card:hover { transform: translateY(-4px) scale(1.02); }
.sticky-footer { position: fixed; left: 0; right: 0; bottom: 0; background: #e3f2fd; color: #333; text-align: center; padding: 0.5rem 0; font-size: 1rem; z-index: 1000; box-shadow: 0 -2px 8px rgba(44,62,80,0.07); }
</style>
</head>
<body>
<div class="hero">
<h1>Solving Hermite's Problem</h1>
<p>Explore three novel, interactive approaches for the complete characterization of cubic irrationals. Dive into projective geometry, matrix theory, and periodicity detection—all in one modern, accessible paper.</p>
<a href="paper-viewer.html" class="btn btn-primary btn-lg"><i class="bi bi-book"></i> Launch Interactive Paper Viewer</a>
</div>
<div class="container mt-4 mb-5">
<div class="row">
<div class="col-12">
<ul class="nav nav-tabs" id="mainTabs" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#tab-content" type="button" role="tab">Overview</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="methods-tab" data-bs-toggle="tab" data-bs-target="#tab-content" type="button" role="tab">The Three Methods</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="interactive-tab" data-bs-toggle="tab" data-bs-target="#tab-content" type="button" role="tab">Interactive Tools</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="resources-tab" data-bs-toggle="tab" data-bs-target="#tab-content" type="button" role="tab">Resources</button></li>
</ul>
<div id="tab-content" class="tab-content p-4 bg-white rounded-bottom shadow-sm" style="min-height: 350px;">
<!-- Tab content will be loaded here -->
</div>
</div>
</div>
<div class="quickstart-section mt-5">
<h3>Quick Start</h3>
<div class="quickstart-step"><span class="step-icon"><i class="bi bi-1-circle"></i></span> <span>Read the <strong>Overview</strong> to understand Hermite's Problem and its significance.</span></div>
<div class="quickstart-step"><span class="step-icon"><i class="bi bi-2-circle"></i></span> <span>Explore the <strong>Three Methods</strong>—HAPD, Matrix, and sin²—each with interactive demos.</span></div>
<div class="quickstart-step"><span class="step-icon"><i class="bi bi-3-circle"></i></span> <span>Try the <strong>Interactive Tools</strong> to experiment with polynomials and algorithms.</span></div>
<div class="quickstart-step"><span class="step-icon"><i class="bi bi-4-circle"></i></span> <span>Check <strong>Resources</strong> for code, references, and further reading.</span></div>
</div>
<div class="featured-tools-section mt-5">
<h3>Featured Interactive Tools</h3>
<div class="row g-4 mt-2">
<div class="col-md-4">
<div class="card featured-tool-card p-3">
<div class="d-flex align-items-center mb-2"><i class="bi bi-graph-up method-icon"></i><span class="ms-2 fw-bold">Cubic Polynomial Explorer</span></div>
<div>Visualize and manipulate cubic polynomials and their roots in real time.</div>
<a href="paper-viewer.html#cubic-explorer" class="btn btn-outline-primary btn-sm mt-2">Try Now</a>
</div>
</div>
<div class="col-md-4">
<div class="card featured-tool-card p-3">
<div class="d-flex align-items-center mb-2"><i class="bi bi-diagram-3 method-icon"></i><span class="ms-2 fw-bold">Projective Space Visualization</span></div>
<div>Explore the geometric structure of periodicity in projective space.</div>
<a href="paper-viewer.html#projective-space" class="btn btn-outline-primary btn-sm mt-2">Try Now</a>
</div>
</div>
<div class="col-md-4">
<div class="card featured-tool-card p-3">
<div class="d-flex align-items-center mb-2"><i class="bi bi-calculator method-icon"></i><span class="ms-2 fw-bold">Matrix Trace Calculator</span></div>
<div>Compute trace sequences and detect periodicity for companion matrices.</div>
<a href="paper-viewer.html#trace-calculator" class="btn btn-outline-primary btn-sm mt-2">Try Now</a>
</div>
</div>
</div>
</div>
</div>
<div class="sticky-footer">
<span>© 2025 Brandon Barclay • <a href="https://github.com/bbarclay/hermitesproblem" target="_blank">GitHub</a> • <a href="paper-viewer.html">Interactive Paper Viewer</a></span>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Dynamically load tab content from separate files
const tabFiles = {
'overview-tab': 'overview.html',
'methods-tab': 'methods.html',
'interactive-tab': 'interactive.html',
'resources-tab': 'resources.html'
};
function loadTab(tabId) {
const file = tabFiles[tabId] || 'overview.html';
document.getElementById('tab-content').innerHTML = '<div class="text-center p-5"><div class="spinner-border text-primary" role="status"></div><p class="mt-2">Loading content...</p></div>';
// Try to load from root path first
fetch(file)
.then(response => {
if (!response.ok) {
// If that fails, try loading from /githubpages/
throw new Error('Loading from root path failed, trying alternate path');
}
return response.text();
})
.then(html => {
document.getElementById('tab-content').innerHTML = html;
console.log(`Successfully loaded tab: ${tabId} from ${file}`);
})
.catch(error => {
// Try alternate path
console.warn(`First attempt failed, trying alternate path: /githubpages/${file}`);
return fetch(`/githubpages/${file}`)
.then(response => {
if (!response.ok) {
throw new Error(`Failed to load tab content (${response.status} ${response.statusText})`);
}
return response.text();
})
.then(html => {
document.getElementById('tab-content').innerHTML = html;
console.log(`Successfully loaded tab: ${tabId} from /githubpages/${file}`);
})
.catch(finalError => {
console.error(`Error loading tab ${tabId} from all paths:`, finalError);
document.getElementById('tab-content').innerHTML = `
<div class="alert alert-danger">
<h4><i class="bi bi-exclamation-triangle"></i> Error Loading Content</h4>
<p>Sorry, we couldn't load the content for this tab. Please try again later.</p>
<p><small>Technical details: ${finalError.message}</small></p>
<button class="btn btn-sm btn-outline-primary mt-2" onclick="window.location.reload()">Reload Page</button>
</div>
`;
});
});
}
document.querySelectorAll('.nav-link').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.nav-link').forEach(b => b.classList.remove('active'));
this.classList.add('active');
loadTab(this.id);
});
});
// Load default tab
loadTab('overview-tab');
</script>
</body>
</html>