1405 lines
48 KiB
HTML
1405 lines
48 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<!--
|
|
Description: Project dashboard page for listing, creating, opening, and managing user projects.
|
|
Inside functions: addActivity, applyTheme, openProject, loadProfile, loadProjects, loadTechnologies, loadActivity
|
|
Developer : Qin Yue @ 2026
|
|
Organization : OptiHK Limited
|
|
-->
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>mxPIC EDA Dashboard</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--bg-main: #06101d;
|
|
--bg-card: #0f1a2c;
|
|
--bg-elevated: #121f33;
|
|
--bg-panel: #17253b;
|
|
--text-main: #f6f8fb;
|
|
--text-muted: #97a6ba;
|
|
--accent: #5dd8f3;
|
|
--accent-hover: #2563eb;
|
|
--accent-green: #34d399;
|
|
--accent-warm: #d97706;
|
|
--border: #2a394f;
|
|
--border-strong: #496078;
|
|
--danger: #ef4444;
|
|
--panel-soft: #091320;
|
|
--folder-icon: #f8c14a;
|
|
--shadow: rgba(0, 0, 0, 0.32);
|
|
--focus-ring: rgba(93, 216, 243, 0.28);
|
|
}
|
|
|
|
body.light-mode {
|
|
--bg-main: #f4f7fb;
|
|
--bg-card: #ffffff;
|
|
--bg-elevated: #ffffff;
|
|
--bg-panel: #eef4fa;
|
|
--text-main: #142235;
|
|
--text-muted: #5f7085;
|
|
--accent: #1d4ed8;
|
|
--accent-hover: #0f766e;
|
|
--accent-green: #15803d;
|
|
--accent-warm: #b45309;
|
|
--border: #d6e0eb;
|
|
--border-strong: #b6c4d4;
|
|
--panel-soft: #f8fafc;
|
|
--folder-icon: #38bdf8;
|
|
--shadow: rgba(37, 99, 235, 0.1);
|
|
--focus-ring: rgba(29, 78, 216, 0.2);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'IBM Plex Sans', "Segoe UI", sans-serif;
|
|
background:
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
|
|
linear-gradient(0deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
|
|
var(--bg-main);
|
|
background-size: 48px 48px, 48px 48px, auto;
|
|
color: var(--text-main);
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
body.light-mode {
|
|
background:
|
|
linear-gradient(90deg, rgba(29, 78, 216, 0.04) 1px, transparent 1px),
|
|
linear-gradient(0deg, rgba(29, 78, 216, 0.04) 1px, transparent 1px),
|
|
var(--bg-main);
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
.project-card:focus-within {
|
|
outline: 3px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
header {
|
|
width: 100%;
|
|
min-height: 64px;
|
|
background: rgba(15, 26, 44, 0.92);
|
|
padding: 12px 34px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 18px;
|
|
border-bottom: 1px solid var(--border);
|
|
backdrop-filter: blur(14px);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
}
|
|
|
|
body.light-mode header {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.brand {
|
|
font-size: 1.12rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.brand .company-hk {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.company-wordmark {
|
|
display: inline-flex;
|
|
gap: 0;
|
|
white-space: nowrap;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-hover) 62%, var(--accent-warm));
|
|
position: relative;
|
|
box-shadow: 0 0 0 5px rgba(93, 216, 243, 0.08);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.brand-mark::before,
|
|
.brand-mark::after {
|
|
content: "";
|
|
position: absolute;
|
|
background: #ffffff;
|
|
opacity: 0.92;
|
|
}
|
|
|
|
.brand-mark::before {
|
|
left: 7px;
|
|
right: 7px;
|
|
top: 14px;
|
|
height: 2px;
|
|
}
|
|
|
|
.brand-mark::after {
|
|
top: 7px;
|
|
bottom: 7px;
|
|
left: 14px;
|
|
width: 2px;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.theme-toggle,
|
|
.logout-btn,
|
|
.secondary-btn,
|
|
.profile-action,
|
|
.open-project-btn,
|
|
.delete-project-btn {
|
|
border: 1px solid var(--border);
|
|
background: var(--panel-soft);
|
|
color: var(--text-main);
|
|
border-radius: 8px;
|
|
min-height: 36px;
|
|
padding: 0 13px;
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.1s ease;
|
|
}
|
|
|
|
.theme-toggle {
|
|
min-width: 92px;
|
|
}
|
|
|
|
.logout-btn:hover,
|
|
.secondary-btn:hover,
|
|
.profile-action:hover,
|
|
.open-project-btn:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1320px;
|
|
margin: 0 auto;
|
|
padding: 34px 16px 30px;
|
|
}
|
|
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 18px;
|
|
align-items: end;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.eyebrow {
|
|
color: var(--text-muted);
|
|
font-family: 'IBM Plex Mono', Consolas, monospace;
|
|
font-size: 0.76rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-weight: 700;
|
|
margin: 0;
|
|
font-size: clamp(1.9rem, 3.4vw, 3rem);
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.hero-copy {
|
|
margin: 10px 0 0;
|
|
color: var(--text-muted);
|
|
max-width: 680px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.primary-btn {
|
|
min-height: 44px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
|
|
color: #04101f;
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
padding: 0 18px;
|
|
box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
transition: transform 0.1s ease, opacity 0.2s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.primary-btn:hover:not(:disabled) {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.primary-btn:active:not(:disabled) {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.primary-btn:disabled {
|
|
cursor: wait;
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.plus-icon {
|
|
font-family: 'IBM Plex Mono', Consolas, monospace;
|
|
font-size: 1.1rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 300px;
|
|
gap: 18px;
|
|
align-items: start;
|
|
}
|
|
|
|
.panel {
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
|
|
var(--bg-elevated);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
box-shadow: 0 14px 30px var(--shadow);
|
|
}
|
|
|
|
.panel-header {
|
|
min-height: 54px;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.panel-title {
|
|
margin: 0;
|
|
font-size: 0.86rem;
|
|
font-family: 'IBM Plex Mono', Consolas, monospace;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.panel-body {
|
|
padding: 16px;
|
|
}
|
|
|
|
.project-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
margin: 0;
|
|
}
|
|
|
|
.project-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
min-height: 92px;
|
|
padding: 14px 16px;
|
|
border-radius: 8px;
|
|
display: grid;
|
|
grid-template-columns: minmax(240px, 1fr) minmax(0, 1.35fr) 128px;
|
|
gap: 14px;
|
|
align-items: center;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.project-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background: linear-gradient(180deg, var(--accent), var(--accent-green));
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.project-card:hover {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 16px 34px rgba(37, 99, 235, 0.16);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.project-card.empty-project-card {
|
|
min-height: 112px;
|
|
grid-template-columns: 1fr;
|
|
place-items: center;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.project-top {
|
|
display: grid;
|
|
grid-template-columns: 32px minmax(0, 1fr);
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.project-icon {
|
|
width: 32px;
|
|
height: 25px;
|
|
position: relative;
|
|
border-radius: 6px;
|
|
background: linear-gradient(135deg, var(--folder-icon), var(--accent-green));
|
|
box-shadow: inset 0 -7px 0 rgba(255, 255, 255, 0.16);
|
|
}
|
|
|
|
.project-icon::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 4px;
|
|
top: -5px;
|
|
width: 14px;
|
|
height: 7px;
|
|
background: var(--folder-icon);
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
|
|
.project-name {
|
|
display: block;
|
|
font-weight: 700;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.project-subtitle {
|
|
color: var(--text-muted);
|
|
font-size: 0.8rem;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.project-chips {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
.chip {
|
|
min-height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--panel-soft);
|
|
color: var(--text-muted);
|
|
padding: 0 9px;
|
|
font-size: 0.76rem;
|
|
font-family: 'IBM Plex Mono', Consolas, monospace;
|
|
font-weight: 700;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.chip strong {
|
|
color: var(--text-main);
|
|
flex: 0 0 auto;
|
|
font-weight: 700;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.chip-value {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.project-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
min-width: 128px;
|
|
}
|
|
|
|
.open-project-btn {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.delete-project-btn {
|
|
color: #fecaca;
|
|
border-color: rgba(239, 68, 68, 0.45);
|
|
background: rgba(239, 68, 68, 0.08);
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
body.light-mode .delete-project-btn {
|
|
color: #991b1b;
|
|
}
|
|
|
|
.delete-project-btn:hover {
|
|
background: rgba(239, 68, 68, 0.16);
|
|
border-color: var(--danger);
|
|
color: #ffffff;
|
|
}
|
|
|
|
body.light-mode .delete-project-btn:hover {
|
|
color: #991b1b;
|
|
}
|
|
|
|
.side-stack {
|
|
display: grid;
|
|
gap: 18px;
|
|
}
|
|
|
|
.profile-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.profile-item {
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--panel-soft);
|
|
padding: 11px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.profile-item label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: var(--text-muted);
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.profile-value {
|
|
color: var(--text-main);
|
|
font-weight: 700;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.profile-item select {
|
|
width: 100%;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-main);
|
|
font: inherit;
|
|
font-weight: 700;
|
|
outline: none;
|
|
}
|
|
|
|
.profile-item select option {
|
|
background: var(--bg-card);
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.activity-list {
|
|
display: grid;
|
|
gap: 10px;
|
|
max-height: 320px;
|
|
overflow: auto;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.activity-item {
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--panel-soft);
|
|
padding: 10px 11px;
|
|
}
|
|
|
|
.activity-message {
|
|
color: var(--text-main);
|
|
font-size: 0.88rem;
|
|
line-height: 1.42;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.activity-meta {
|
|
color: var(--text-muted);
|
|
font-family: 'IBM Plex Mono', Consolas, monospace;
|
|
font-size: 0.7rem;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.activity-item.success {
|
|
border-color: rgba(52, 211, 153, 0.36);
|
|
}
|
|
|
|
.activity-item.error {
|
|
border-color: rgba(239, 68, 68, 0.46);
|
|
}
|
|
|
|
footer {
|
|
padding: 22px 0 0;
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(5, 11, 22, 0.74);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100;
|
|
backdrop-filter: blur(10px);
|
|
padding: 16px;
|
|
}
|
|
|
|
.modal-backdrop.open {
|
|
display: flex;
|
|
}
|
|
|
|
.modal-panel {
|
|
width: min(480px, 100%);
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
|
|
var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 22px;
|
|
box-shadow: 0 28px 86px var(--shadow);
|
|
}
|
|
|
|
.modal-panel h3 {
|
|
margin: 0 0 6px 0;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.modal-copy {
|
|
color: var(--text-muted);
|
|
margin: 0 0 18px;
|
|
line-height: 1.5;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.modal-field {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.modal-field label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
color: var(--text-muted);
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.modal-panel input,
|
|
.modal-panel select {
|
|
width: 100%;
|
|
min-height: 44px;
|
|
background: var(--panel-soft);
|
|
color: var(--text-main);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 11px;
|
|
outline: none;
|
|
}
|
|
|
|
.modal-panel input:focus,
|
|
.modal-panel select:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
}
|
|
|
|
.field-error,
|
|
.modal-status {
|
|
display: none;
|
|
margin-top: 7px;
|
|
color: #fecaca;
|
|
font-size: 0.82rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
body.light-mode .field-error,
|
|
body.light-mode .modal-status {
|
|
color: #991b1b;
|
|
}
|
|
|
|
.field-error.show,
|
|
.modal-status.show {
|
|
display: block;
|
|
}
|
|
|
|
.modal-actions {
|
|
margin-top: 18px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
@media (max-width: 920px) {
|
|
.dashboard-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.side-stack {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
header {
|
|
padding: 12px 16px;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header-actions {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.container {
|
|
padding: 26px 16px 24px;
|
|
}
|
|
|
|
.hero {
|
|
grid-template-columns: 1fr;
|
|
align-items: start;
|
|
}
|
|
|
|
.hero-actions {
|
|
width: 100%;
|
|
}
|
|
|
|
.hero-actions .primary-btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.project-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.project-card {
|
|
grid-template-columns: 1fr;
|
|
min-height: 0;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.side-stack {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.project-actions,
|
|
.modal-actions {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<div class="brand">
|
|
<div class="brand-mark" aria-hidden="true"></div>
|
|
MxPic - by <span class="company-wordmark">Opti<span class="company-hk">HK</span></span>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="theme-toggle" id="theme-toggle" type="button" aria-label="Switch color theme">Light mode</button>
|
|
<a href="/logout" class="logout-btn">Logout</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<section class="hero">
|
|
<div>
|
|
<div class="eyebrow">Workspace dashboard</div>
|
|
<h1>Welcome back, {{ username }}</h1>
|
|
<p class="hero-copy">Open a saved photonic layout, start a new PDK-backed project, or review recent account activity before entering the canvas editor.</p>
|
|
</div>
|
|
<form id="new-project-form" class="hero-actions">
|
|
<button type="submit" class="primary-btn">
|
|
<span class="plus-icon" aria-hidden="true">+</span>
|
|
New PIC Layout
|
|
</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="dashboard-grid">
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">Projects</h2>
|
|
<span class="chip" id="project-count-chip"><strong>0</strong> projects</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<ul class="project-list" id="project-list" aria-live="polite">
|
|
<li class="project-card empty-project-card">Loading projects...</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="side-stack">
|
|
<section class="panel">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">Account</h2>
|
|
<button class="profile-action" type="button" id="open-password-modal">Change Password</button>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="profile-grid">
|
|
<div class="profile-item">
|
|
<label>User ID</label>
|
|
<div class="profile-value" id="profile-id">-</div>
|
|
</div>
|
|
<div class="profile-item">
|
|
<label>Account Name</label>
|
|
<div class="profile-value" id="profile-username">{{ username }}</div>
|
|
</div>
|
|
<div class="profile-item">
|
|
<label>Registration Date</label>
|
|
<div class="profile-value" id="profile-created">-</div>
|
|
</div>
|
|
<div class="profile-item">
|
|
<label>Credits</label>
|
|
<div class="profile-value" id="profile-credits">0</div>
|
|
</div>
|
|
<div class="profile-item">
|
|
<label>User Group</label>
|
|
<div class="profile-value" id="profile-group">-</div>
|
|
</div>
|
|
<div class="profile-item">
|
|
<label for="profile-occupation">Occupation</label>
|
|
<select id="profile-occupation" aria-label="Occupation"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">Recent Activity</h2>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="activity-list" id="activity-list" aria-live="polite">
|
|
<div class="activity-item">
|
|
<div class="activity-message">Loading recent activity...</div>
|
|
<div class="activity-meta">system</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
</section>
|
|
|
|
<footer>
|
|
Powered by mxPIC core
|
|
</footer>
|
|
</main>
|
|
|
|
<div class="modal-backdrop" id="technology-modal" aria-hidden="true">
|
|
<div class="modal-panel" role="dialog" aria-modal="true" aria-labelledby="create-project-title">
|
|
<h3 id="create-project-title">Create Project</h3>
|
|
<p class="modal-copy">Name the layout and choose the foundry technology that should scope the PDK library.</p>
|
|
<div class="modal-field">
|
|
<label for="project-name-input">Project Name</label>
|
|
<input id="project-name-input" type="text" value="mxpic_project_1" autocomplete="off" />
|
|
<div class="field-error" id="project-name-error">Enter a project name.</div>
|
|
</div>
|
|
<div class="modal-field">
|
|
<label for="technology-select">Technology</label>
|
|
<select id="technology-select"></select>
|
|
<div class="field-error" id="technology-error">Choose an available technology.</div>
|
|
</div>
|
|
<div class="modal-status" id="project-modal-status" role="alert"></div>
|
|
<div class="modal-actions">
|
|
<button class="secondary-btn" type="button" id="cancel-project">Cancel</button>
|
|
<button class="primary-btn" type="button" id="create-project">Create Project</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-backdrop" id="password-modal" aria-hidden="true">
|
|
<div class="modal-panel" role="dialog" aria-modal="true" aria-labelledby="password-title">
|
|
<h3 id="password-title">Change Password</h3>
|
|
<p class="modal-copy">Update the password used for this mxPIC workspace account.</p>
|
|
<div class="modal-field">
|
|
<label for="current-password-input">Current Password</label>
|
|
<input id="current-password-input" type="password" autocomplete="current-password" />
|
|
<div class="field-error" id="current-password-error">Enter your current password.</div>
|
|
</div>
|
|
<div class="modal-field">
|
|
<label for="new-password-input">New Password</label>
|
|
<input id="new-password-input" type="password" autocomplete="new-password" />
|
|
<div class="field-error" id="new-password-error">New password must be at least 6 characters.</div>
|
|
</div>
|
|
<div class="modal-field">
|
|
<label for="confirm-password-input">Confirm New Password</label>
|
|
<input id="confirm-password-input" type="password" autocomplete="new-password" />
|
|
<div class="field-error" id="confirm-password-error">Confirmation must match the new password.</div>
|
|
</div>
|
|
<div class="modal-status" id="password-modal-status" role="alert"></div>
|
|
<div class="modal-actions">
|
|
<button class="secondary-btn" type="button" id="cancel-password">Cancel</button>
|
|
<button class="primary-btn" type="button" id="save-password">Update Password</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const projectList = document.getElementById('project-list');
|
|
const projectCountChip = document.getElementById('project-count-chip');
|
|
const newProjectForm = document.getElementById('new-project-form');
|
|
const technologyModal = document.getElementById('technology-modal');
|
|
const technologySelect = document.getElementById('technology-select');
|
|
const projectNameInput = document.getElementById('project-name-input');
|
|
const projectNameError = document.getElementById('project-name-error');
|
|
const technologyError = document.getElementById('technology-error');
|
|
const projectModalStatus = document.getElementById('project-modal-status');
|
|
const createProjectButton = document.getElementById('create-project');
|
|
const cancelProjectButton = document.getElementById('cancel-project');
|
|
const passwordModal = document.getElementById('password-modal');
|
|
const openPasswordModalButton = document.getElementById('open-password-modal');
|
|
const cancelPasswordButton = document.getElementById('cancel-password');
|
|
const savePasswordButton = document.getElementById('save-password');
|
|
const currentPasswordInput = document.getElementById('current-password-input');
|
|
const newPasswordInput = document.getElementById('new-password-input');
|
|
const confirmPasswordInput = document.getElementById('confirm-password-input');
|
|
const currentPasswordError = document.getElementById('current-password-error');
|
|
const newPasswordError = document.getElementById('new-password-error');
|
|
const confirmPasswordError = document.getElementById('confirm-password-error');
|
|
const passwordModalStatus = document.getElementById('password-modal-status');
|
|
const profileId = document.getElementById('profile-id');
|
|
const profileUsername = document.getElementById('profile-username');
|
|
const profileCreated = document.getElementById('profile-created');
|
|
const profileCredits = document.getElementById('profile-credits');
|
|
const profileGroup = document.getElementById('profile-group');
|
|
const profileOccupation = document.getElementById('profile-occupation');
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const activityList = document.getElementById('activity-list');
|
|
let technologies = [];
|
|
let lastFocusedElement = null;
|
|
|
|
function applyTheme(mode) {
|
|
const isLight = mode === 'light';
|
|
document.body.classList.toggle('light-mode', isLight);
|
|
themeToggle.textContent = isLight ? 'Dark mode' : 'Light mode';
|
|
localStorage.setItem('mxpic-theme', mode);
|
|
}
|
|
|
|
function setButtonBusy(button, busy, busyLabel, readyLabel) {
|
|
button.disabled = busy;
|
|
button.textContent = busy ? busyLabel : readyLabel;
|
|
}
|
|
|
|
function showFieldError(element, show) {
|
|
element.classList.toggle('show', Boolean(show));
|
|
}
|
|
|
|
function setStatus(element, message) {
|
|
element.textContent = message || '';
|
|
element.classList.toggle('show', Boolean(message));
|
|
}
|
|
|
|
function formatTime(value) {
|
|
if (!value) return new Date().toLocaleTimeString();
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) return value;
|
|
return date.toLocaleString();
|
|
}
|
|
|
|
function clearActivity() {
|
|
activityList.innerHTML = '';
|
|
}
|
|
|
|
function addActivity(message, type = 'info', meta = 'just now') {
|
|
const item = document.createElement('div');
|
|
item.className = `activity-item ${type}`;
|
|
|
|
const messageEl = document.createElement('div');
|
|
messageEl.className = 'activity-message';
|
|
messageEl.textContent = message;
|
|
|
|
const metaEl = document.createElement('div');
|
|
metaEl.className = 'activity-meta';
|
|
metaEl.textContent = meta;
|
|
|
|
item.append(messageEl, metaEl);
|
|
activityList.prepend(item);
|
|
|
|
while (activityList.children.length > 12) {
|
|
activityList.lastElementChild.remove();
|
|
}
|
|
}
|
|
|
|
function describeLog(log) {
|
|
const parts = [log.action || 'activity'];
|
|
if (log.project) parts.push(`project: ${log.project}`);
|
|
if (log.cell) parts.push(`cell: ${log.cell}`);
|
|
return parts.join(' / ');
|
|
}
|
|
|
|
function openModal(modal, focusTarget) {
|
|
lastFocusedElement = document.activeElement;
|
|
modal.classList.add('open');
|
|
modal.setAttribute('aria-hidden', 'false');
|
|
window.setTimeout(() => focusTarget.focus(), 0);
|
|
}
|
|
|
|
function closeModal(modal) {
|
|
modal.classList.remove('open');
|
|
modal.setAttribute('aria-hidden', 'true');
|
|
if (lastFocusedElement && typeof lastFocusedElement.focus === 'function') {
|
|
lastFocusedElement.focus();
|
|
}
|
|
}
|
|
|
|
function getOpenModal() {
|
|
if (technologyModal.classList.contains('open')) return technologyModal;
|
|
if (passwordModal.classList.contains('open')) return passwordModal;
|
|
return null;
|
|
}
|
|
|
|
function trapModalFocus(event, modal) {
|
|
const focusable = Array.from(modal.querySelectorAll('button, input, select, [href], [tabindex]:not([tabindex="-1"])'))
|
|
.filter(element => !element.disabled && element.offsetParent !== null);
|
|
if (focusable.length === 0) return;
|
|
|
|
const first = focusable[0];
|
|
const last = focusable[focusable.length - 1];
|
|
if (event.shiftKey && document.activeElement === first) {
|
|
event.preventDefault();
|
|
last.focus();
|
|
} else if (!event.shiftKey && document.activeElement === last) {
|
|
event.preventDefault();
|
|
first.focus();
|
|
}
|
|
}
|
|
|
|
function openProject(name) {
|
|
window.location.href = `/canvas?project=${encodeURIComponent(name)}`;
|
|
}
|
|
|
|
async function loadActivity() {
|
|
try {
|
|
const response = await fetch('/api/logs?limit=8');
|
|
const data = await response.json();
|
|
clearActivity();
|
|
if (!response.ok) {
|
|
addActivity(data.error || 'Failed to load recent activity.', 'error', 'system');
|
|
return;
|
|
}
|
|
if (!data.logs || data.logs.length === 0) {
|
|
addActivity('No recent account activity yet.', 'info', 'system');
|
|
return;
|
|
}
|
|
data.logs.reverse().forEach(log => {
|
|
addActivity(describeLog(log), 'info', formatTime(log.created_at));
|
|
});
|
|
} catch (error) {
|
|
clearActivity();
|
|
addActivity('Failed to load recent activity.', 'error', 'system');
|
|
}
|
|
}
|
|
|
|
async function loadProfile() {
|
|
try {
|
|
const response = await fetch('/api/profile');
|
|
const profile = await response.json();
|
|
if (!response.ok) {
|
|
addActivity(profile.error || 'Failed to load profile.', 'error');
|
|
return;
|
|
}
|
|
profileId.textContent = profile.id;
|
|
profileUsername.textContent = profile.username;
|
|
profileCreated.textContent = profile.created_at || '-';
|
|
profileCredits.textContent = profile.credits ?? 0;
|
|
profileGroup.textContent = profile.user_group || 'user';
|
|
profileOccupation.innerHTML = '';
|
|
(profile.occupations || []).forEach(occupation => {
|
|
const option = document.createElement('option');
|
|
option.value = occupation;
|
|
option.textContent = occupation;
|
|
option.selected = occupation === profile.occupation;
|
|
profileOccupation.appendChild(option);
|
|
});
|
|
} catch (error) {
|
|
addActivity('Failed to load profile.', 'error');
|
|
}
|
|
}
|
|
|
|
async function loadProjects() {
|
|
try {
|
|
const response = await fetch('/api/projects');
|
|
const data = await response.json();
|
|
projectList.innerHTML = '';
|
|
|
|
if (!response.ok) {
|
|
const errorMessage = data.error || 'Failed to load projects.';
|
|
projectList.appendChild(renderEmptyState(errorMessage));
|
|
projectCountChip.innerHTML = '<strong>0</strong> projects';
|
|
addActivity(errorMessage, 'error');
|
|
return;
|
|
}
|
|
|
|
const projects = data.projects || [];
|
|
projectCountChip.innerHTML = `<strong>${projects.length}</strong> project${projects.length === 1 ? '' : 's'}`;
|
|
|
|
if (projects.length === 0) {
|
|
projectList.appendChild(renderEmptyState('No projects yet. Create a new PIC layout to begin.'));
|
|
return;
|
|
}
|
|
|
|
projects.forEach(project => {
|
|
projectList.appendChild(renderProjectCard(project));
|
|
});
|
|
} catch (error) {
|
|
projectList.innerHTML = '';
|
|
projectList.appendChild(renderEmptyState('Failed to load projects.'));
|
|
projectCountChip.innerHTML = '<strong>0</strong> projects';
|
|
}
|
|
}
|
|
|
|
function renderEmptyState(message) {
|
|
const empty = document.createElement('li');
|
|
empty.className = 'project-card empty-project-card';
|
|
|
|
const wrapper = document.createElement('div');
|
|
const title = document.createElement('strong');
|
|
title.textContent = message;
|
|
|
|
const hint = document.createElement('div');
|
|
hint.className = 'project-subtitle';
|
|
hint.textContent = 'Your saved layouts will appear here.';
|
|
|
|
wrapper.append(title, hint);
|
|
empty.appendChild(wrapper);
|
|
return empty;
|
|
}
|
|
|
|
function renderProjectCard(project) {
|
|
const item = document.createElement('li');
|
|
item.className = 'project-card';
|
|
|
|
const top = document.createElement('div');
|
|
top.className = 'project-top';
|
|
|
|
const icon = document.createElement('span');
|
|
icon.className = 'project-icon';
|
|
icon.setAttribute('aria-hidden', 'true');
|
|
|
|
const details = document.createElement('div');
|
|
const name = document.createElement('span');
|
|
name.className = 'project-name';
|
|
name.textContent = project.name;
|
|
|
|
const subtitle = document.createElement('div');
|
|
subtitle.className = 'project-subtitle';
|
|
subtitle.textContent = 'Photonic layout project';
|
|
|
|
details.append(name, subtitle);
|
|
top.append(icon, details);
|
|
|
|
const chips = document.createElement('div');
|
|
chips.className = 'project-chips';
|
|
const cellCount = project.cells ? project.cells.length : 0;
|
|
chips.appendChild(renderChip('Cells', `${cellCount}`));
|
|
chips.appendChild(renderChip('Technology', project.technology || 'Unassigned'));
|
|
|
|
const actions = document.createElement('div');
|
|
actions.className = 'project-actions';
|
|
|
|
const openButton = document.createElement('button');
|
|
openButton.className = 'open-project-btn';
|
|
openButton.type = 'button';
|
|
openButton.textContent = 'Open Project';
|
|
openButton.addEventListener('click', () => openProject(project.name));
|
|
|
|
const deleteButton = document.createElement('button');
|
|
deleteButton.className = 'delete-project-btn';
|
|
deleteButton.type = 'button';
|
|
deleteButton.textContent = 'Delete';
|
|
deleteButton.addEventListener('click', () => handleDeleteProject(project, deleteButton));
|
|
|
|
actions.append(openButton, deleteButton);
|
|
item.append(top, chips, actions);
|
|
return item;
|
|
}
|
|
|
|
function renderChip(label, value) {
|
|
const chip = document.createElement('span');
|
|
chip.className = 'chip';
|
|
|
|
const strong = document.createElement('strong');
|
|
strong.textContent = label;
|
|
|
|
const valueEl = document.createElement('span');
|
|
valueEl.className = 'chip-value';
|
|
valueEl.textContent = value;
|
|
valueEl.title = value;
|
|
|
|
chip.append(strong, valueEl);
|
|
return chip;
|
|
}
|
|
|
|
async function handleDeleteProject(project, deleteButton) {
|
|
if (deleteButton.dataset.confirm !== 'true') {
|
|
deleteButton.dataset.confirm = 'true';
|
|
deleteButton.textContent = 'Confirm';
|
|
addActivity(`Confirm deletion for "${project.name}".`, 'error');
|
|
window.setTimeout(() => {
|
|
deleteButton.dataset.confirm = 'false';
|
|
deleteButton.textContent = 'Delete';
|
|
}, 3200);
|
|
return;
|
|
}
|
|
|
|
setButtonBusy(deleteButton, true, 'Deleting', 'Delete');
|
|
const result = await fetch(`/api/projects/${encodeURIComponent(project.name)}`, {
|
|
method: 'DELETE'
|
|
});
|
|
if (!result.ok) {
|
|
deleteButton.dataset.confirm = 'false';
|
|
setButtonBusy(deleteButton, false, 'Deleting', 'Delete');
|
|
addActivity(`Delete failed for "${project.name}".`, 'error');
|
|
return;
|
|
}
|
|
addActivity(`Deleted project "${project.name}".`, 'success');
|
|
loadProjects();
|
|
loadActivity();
|
|
}
|
|
|
|
async function loadTechnologies() {
|
|
try {
|
|
const response = await fetch('/api/technologies');
|
|
const data = await response.json();
|
|
technologies = data.technologies || [];
|
|
technologySelect.innerHTML = '';
|
|
technologies.forEach(tech => {
|
|
const option = document.createElement('option');
|
|
option.value = tech.id;
|
|
option.textContent = tech.label;
|
|
technologySelect.appendChild(option);
|
|
});
|
|
if (technologies.length === 0) {
|
|
const option = document.createElement('option');
|
|
option.value = '';
|
|
option.textContent = 'No technology found';
|
|
technologySelect.appendChild(option);
|
|
}
|
|
} catch (error) {
|
|
technologies = [];
|
|
technologySelect.innerHTML = '<option value="">No technology found</option>';
|
|
addActivity('Failed to load technologies.', 'error');
|
|
}
|
|
}
|
|
|
|
profileOccupation.addEventListener('change', async () => {
|
|
const response = await fetch('/api/profile', {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ occupation: profileOccupation.value })
|
|
});
|
|
const result = await response.json();
|
|
if (!response.ok) {
|
|
addActivity(result.error || 'Failed to update occupation.', 'error');
|
|
loadProfile();
|
|
return;
|
|
}
|
|
addActivity(`Updated occupation to "${result.occupation}".`, 'success');
|
|
loadActivity();
|
|
});
|
|
|
|
newProjectForm.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
projectNameInput.value = 'mxpic_project_1';
|
|
setStatus(projectModalStatus, '');
|
|
showFieldError(projectNameError, false);
|
|
showFieldError(technologyError, false);
|
|
openModal(technologyModal, projectNameInput);
|
|
projectNameInput.select();
|
|
});
|
|
|
|
cancelProjectButton.addEventListener('click', () => closeModal(technologyModal));
|
|
|
|
createProjectButton.addEventListener('click', async () => {
|
|
const selectedTechnology = technologySelect.value;
|
|
const requestedName = projectNameInput.value.trim();
|
|
const hasName = requestedName.length > 0;
|
|
const hasTechnology = selectedTechnology.length > 0;
|
|
showFieldError(projectNameError, !hasName);
|
|
showFieldError(technologyError, !hasTechnology);
|
|
setStatus(projectModalStatus, '');
|
|
if (!hasName || !hasTechnology) return;
|
|
|
|
setButtonBusy(createProjectButton, true, 'Creating...', 'Create Project');
|
|
try {
|
|
const response = await fetch('/api/projects', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name: requestedName, technology: selectedTechnology })
|
|
});
|
|
const project = await response.json();
|
|
if (!response.ok) {
|
|
setStatus(projectModalStatus, project.error || 'Project creation failed.');
|
|
return;
|
|
}
|
|
addActivity(`Created project "${project.name}" with technology "${selectedTechnology}".`, 'success');
|
|
openProject(project.name);
|
|
} catch (error) {
|
|
setStatus(projectModalStatus, 'Project creation failed. Check the server connection.');
|
|
} finally {
|
|
setButtonBusy(createProjectButton, false, 'Creating...', 'Create Project');
|
|
}
|
|
});
|
|
|
|
openPasswordModalButton.addEventListener('click', () => {
|
|
currentPasswordInput.value = '';
|
|
newPasswordInput.value = '';
|
|
confirmPasswordInput.value = '';
|
|
setStatus(passwordModalStatus, '');
|
|
showFieldError(currentPasswordError, false);
|
|
showFieldError(newPasswordError, false);
|
|
showFieldError(confirmPasswordError, false);
|
|
openModal(passwordModal, currentPasswordInput);
|
|
});
|
|
|
|
cancelPasswordButton.addEventListener('click', () => closeModal(passwordModal));
|
|
|
|
savePasswordButton.addEventListener('click', async () => {
|
|
const currentPassword = currentPasswordInput.value;
|
|
const newPassword = newPasswordInput.value;
|
|
const confirmPassword = confirmPasswordInput.value;
|
|
const hasCurrent = currentPassword.length > 0;
|
|
const hasValidNew = newPassword.length >= 6;
|
|
const matches = newPassword === confirmPassword;
|
|
|
|
showFieldError(currentPasswordError, !hasCurrent);
|
|
showFieldError(newPasswordError, !hasValidNew);
|
|
showFieldError(confirmPasswordError, !matches);
|
|
setStatus(passwordModalStatus, '');
|
|
if (!hasCurrent || !hasValidNew || !matches) return;
|
|
|
|
setButtonBusy(savePasswordButton, true, 'Updating...', 'Update Password');
|
|
try {
|
|
const response = await fetch('/api/profile/password', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
current_password: currentPassword,
|
|
new_password: newPassword
|
|
})
|
|
});
|
|
const result = await response.json();
|
|
if (!response.ok) {
|
|
setStatus(passwordModalStatus, result.error || 'Password update failed.');
|
|
return;
|
|
}
|
|
closeModal(passwordModal);
|
|
addActivity('Password updated.', 'success');
|
|
loadActivity();
|
|
} catch (error) {
|
|
setStatus(passwordModalStatus, 'Password update failed. Check the server connection.');
|
|
} finally {
|
|
setButtonBusy(savePasswordButton, false, 'Updating...', 'Update Password');
|
|
}
|
|
});
|
|
|
|
[technologyModal, passwordModal].forEach(modal => {
|
|
modal.addEventListener('click', event => {
|
|
if (event.target === modal) closeModal(modal);
|
|
});
|
|
});
|
|
|
|
document.addEventListener('keydown', event => {
|
|
const openModalElement = getOpenModal();
|
|
if (!openModalElement) return;
|
|
if (event.key === 'Escape') {
|
|
closeModal(openModalElement);
|
|
return;
|
|
}
|
|
if (event.key === 'Tab') {
|
|
trapModalFocus(event, openModalElement);
|
|
}
|
|
});
|
|
|
|
themeToggle.addEventListener('click', () => {
|
|
applyTheme(document.body.classList.contains('light-mode') ? 'dark' : 'light');
|
|
});
|
|
|
|
applyTheme(localStorage.getItem('mxpic-theme') || 'dark');
|
|
loadTechnologies();
|
|
loadProfile();
|
|
loadProjects();
|
|
loadActivity();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|