-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.html
More file actions
140 lines (129 loc) · 8.74 KB
/
Copy pathapp.html
File metadata and controls
140 lines (129 loc) · 8.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="DesignDesk — All-in-one project management platform for interior designers. Track procurement, schedules, budgets, invoicing, and client communication in one place.">
<meta name="theme-color" content="#6366f1">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://js.stripe.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; img-src 'self' data: blob:; connect-src 'self' https://api.stripe.com; frame-src https://js.stripe.com; object-src 'none'; base-uri 'self'; form-action 'self';">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta http-equiv="X-Frame-Options" content="DENY">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta http-equiv="Permissions-Policy" content="camera=(), microphone=(), geolocation=(), payment=(self)">
<link rel="manifest" href="app/manifest.json">
<link rel="apple-touch-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%236366f1'/%3E%3Cstop offset='100%25' stop-color='%23a855f7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='180' height='180' rx='40' fill='url(%23g)'/%3E%3Cpath d='M45 68h90M45 90h68M45 112h45' stroke='white' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Open Graph / Social -->
<meta property="og:type" content="website">
<meta property="og:title" content="DesignDesk — Interior Design Project Management">
<meta property="og:description" content="All-in-one project management for interior designers. Procurement tracking, Gantt scheduling, invoicing, mood boards, floor plans, AI assistant, and client portals.">
<meta property="og:image" content="https://designdesk.app/og-image.png">
<meta property="og:url" content="https://designdesk.app">
<meta name="twitter:card" content="summary_large_image">
<title>DesignDesk — Interior Design Project Management</title>
<!-- Favicon (inline SVG data URI) -->
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%236366f1'/%3E%3Cstop offset='100%25' stop-color='%23a855f7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='8' fill='url(%23g)'/%3E%3Cpath d='M9 10h6v4H9zM17 10h6v4h-6zM9 16h6v6H9zM17 16h6v6h-6z' fill='white' opacity='.9' rx='1'/%3E%3C/svg%3E">
<!-- Preconnect to Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
<!-- Stripe.js -->
<script src="https://js.stripe.com/v3/" async></script>
<!-- App Styles -->
<link rel="stylesheet" href="app/styles/app.css">
<link rel="stylesheet" href="app/styles/pricing-billing.css">
</head>
<body>
<!-- Skip to content (accessibility) -->
<a href="#app-main" class="skip-to-content">Skip to main content</a>
<!-- Noscript fallback -->
<noscript>
<div style="display:flex;align-items:center;justify-content:center;min-height:100vh;padding:40px;text-align:center;font-family:'Inter',sans-serif;color:#1e293b;background:#f8fafc;">
<div style="max-width:400px;">
<div style="width:64px;height:64px;margin:0 auto 16px;border-radius:16px;background:linear-gradient(135deg,#6366f1,#a855f7);display:flex;align-items:center;justify-content:center;">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="5" width="10" height="6" rx="1" fill="white" opacity="0.9"/>
<rect x="18" y="5" width="10" height="6" rx="1" fill="white" opacity="0.9"/>
<rect x="4" y="15" width="10" height="12" rx="1" fill="white" opacity="0.9"/>
<rect x="18" y="15" width="10" height="12" rx="1" fill="white" opacity="0.9"/>
</svg>
</div>
<h1 style="font-size:22px;font-weight:700;margin-bottom:8px;">DesignDesk requires JavaScript</h1>
<p style="font-size:14px;color:#64748b;line-height:1.6;">Please enable JavaScript in your browser settings to use DesignDesk. This application relies on JavaScript for all interactive features including project management, scheduling, and real-time collaboration.</p>
</div>
</div>
</noscript>
<!-- Initial loading skeleton (visible before JS loads, hidden by JS) -->
<div class="initial-loading" id="initial-loading">
<div class="skeleton-sidebar">
<!-- Logo area -->
<div style="display:flex;align-items:center;gap:10px;margin-bottom:20px;">
<div class="skeleton skeleton-avatar" style="width:28px;height:28px;border-radius:8px;"></div>
<div class="skeleton skeleton-text" style="width:100px;height:16px;margin:0;"></div>
</div>
<!-- Project selector -->
<div class="skeleton skeleton-text" style="width:60px;height:10px;margin-bottom:6px;"></div>
<div class="skeleton" style="height:32px;border-radius:8px;margin-bottom:20px;"></div>
<!-- Nav items -->
<div class="skeleton" style="height:34px;border-radius:8px;margin-bottom:4px;"></div>
<div class="skeleton" style="height:34px;border-radius:8px;margin-bottom:4px;"></div>
<div class="skeleton" style="height:34px;border-radius:8px;margin-bottom:4px;"></div>
<div class="skeleton" style="height:34px;border-radius:8px;margin-bottom:4px;"></div>
<div class="skeleton" style="height:34px;border-radius:8px;margin-bottom:4px;"></div>
<div class="skeleton" style="height:34px;border-radius:8px;margin-bottom:4px;"></div>
<div class="skeleton" style="height:34px;border-radius:8px;margin-bottom:4px;"></div>
<div class="skeleton" style="height:34px;border-radius:8px;margin-bottom:4px;"></div>
</div>
<div class="skeleton-content">
<!-- Topbar skeleton -->
<div class="skeleton-topbar" style="display:flex;align-items:center;justify-content:space-between;">
<div class="skeleton skeleton-text" style="width:180px;height:16px;margin:0;"></div>
<div style="display:flex;gap:12px;align-items:center;">
<div class="skeleton" style="width:180px;height:32px;border-radius:8px;"></div>
<div class="skeleton skeleton-avatar"></div>
</div>
</div>
<!-- Page title -->
<div class="skeleton skeleton-text" style="width:200px;height:22px;margin-bottom:24px;"></div>
<!-- Stat cards -->
<div class="skeleton-stats">
<div class="skeleton skeleton-stat"></div>
<div class="skeleton skeleton-stat"></div>
<div class="skeleton skeleton-stat"></div>
<div class="skeleton skeleton-stat"></div>
</div>
<!-- Dashboard panels -->
<div class="skeleton-panels">
<div class="skeleton skeleton-chart"></div>
<div class="skeleton skeleton-chart"></div>
<div class="skeleton skeleton-chart"></div>
<div class="skeleton skeleton-chart"></div>
</div>
</div>
</div>
<!-- App shell (hidden until JS loads) -->
<div class="app-layout" id="app-layout" style="display:none;">
<aside class="app-sidebar" id="app-sidebar"></aside>
<div class="sidebar-backdrop" id="sidebar-backdrop"></div>
<div class="app-content">
<header class="app-topbar" id="app-topbar"></header>
<main class="app-main" id="app-main">
<div class="view-loading"><div class="loading-spinner"></div></div>
</main>
</div>
</div>
<div id="modal-container" class="modal-container"></div>
<div id="toast-container" class="toast-container"></div>
<div id="offline-banner" class="offline-banner" style="display:none;">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/><path d="M5 5l6 6M11 5l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
You're offline. Changes are saved locally.
</div>
<script type="module">
// Show app shell, hide skeleton once JS is executing
document.getElementById('initial-loading').style.display = 'none';
document.getElementById('app-layout').style.display = '';
</script>
<script type="module" src="app/main.js"></script>
</body>
</html>