CPL-0.2.0: web/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CPL - Categorical Programming Language</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4ec9b0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css">
<style>
:root {
--color-primary: #4ec9b0;
--color-primary-dim: rgba(78, 201, 176, 0.3);
--color-bg: #1e1e1e;
--color-bg-elevated: #2a2a2a;
--color-border: #333;
--color-text: #d4d4d4;
--color-text-muted: #888;
--color-text-subtle: #666;
--color-error: #d32f2f;
--color-error-bg: #5a1e1e;
--color-error-text: #ff6b6b;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--color-border);
}
h1 {
margin: 0 0 0.5rem 0;
font-size: 2rem;
color: var(--color-primary);
}
a {
color: var(--color-primary);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.subtitle {
font-size: 1rem;
color: var(--color-text-muted);
margin: 0;
}
#terminal-container {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 1rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
#terminal {
height: 600px;
}
#loading {
text-align: center;
padding: 2rem;
font-size: 1.1rem;
color: var(--color-primary);
}
#loading.hidden {
display: none;
}
.spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid var(--color-primary-dim);
border-radius: 50%;
border-top-color: var(--color-primary);
animation: spin 1s ease-in-out infinite;
margin-right: 0.5rem;
vertical-align: middle;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.error {
background: var(--color-error-bg);
border: 1px solid var(--color-error);
border-radius: 4px;
padding: 1rem;
margin-top: 1rem;
color: var(--color-error-text);
}
.error-title {
font-weight: bold;
margin-bottom: 0.5rem;
}
.info {
background: var(--color-bg-elevated);
border: 1px solid var(--color-primary);
border-radius: 4px;
padding: 1rem;
margin-top: 1rem;
font-size: 0.9rem;
}
.info h3 {
margin-top: 0;
color: var(--color-primary);
font-size: 1rem;
}
.info ul {
margin: 0.5rem 0;
padding-left: 1.5rem;
}
.info code {
background: var(--color-border);
padding: 0.2rem 0.4rem;
border-radius: 3px;
font-family: 'Courier New', monospace;
}
.info-cta {
margin-top: 1.5rem;
text-align: center;
font-size: 1rem;
}
footer {
text-align: center;
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
color: var(--color-text-subtle);
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>CPL - Categorical Programming Language</h1>
<p class="subtitle">WebAssembly Edition</p>
</header>
<div id="loading">
<div class="spinner"></div>
Loading CPL interpreter...
</div>
<div id="terminal-container" style="display: none;">
<div id="terminal"></div>
</div>
<div class="info">
<h3>Quick Start</h3>
<p>Try these commands in the terminal:</p>
<ul>
<li><code>help</code> - Show all available commands</li>
<li><code>load samples/examples.cpl</code> - Load a built-in sample file demonstrating common data types and functions</li>
<li><code>load</code> - Open file picker to load a local file</li>
<li><code>edit</code> - Enter multi-line editing mode (end with semicolon)</li>
<li><code>simp pi1.pair(0, s.0)</code> - Evaluate an expression</li>
<li><code>let uncurry(f) = eval . prod(f, I)</code> - Define a function</li>
<li><code>reset</code> - Reset all definitions</li>
</ul>
<p class="info-cta">
📚 <strong>New to CPL?</strong> Check out the
<a href="tutorial.html">Tutorial (English)</a> |
<a href="tutorial_ja.html">チュートリアル (日本語)</a>
</p>
</div>
<footer>
<p>
CPL Implementation by Masahiro Sakai |
<a href="https://github.com/msakai/cpl" target="_blank">GitHub Repository</a>
</p>
</footer>
</div>
<script type="module" src="cpl-terminal.js"></script>
</body>
</html>