-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (126 loc) · 7.58 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landofile Editor</title>
<link rel="icon" href="icon.svg" type="image/svg+xml">
<script>
// Check for saved theme preference or use system preference
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Set initial theme
if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
document.documentElement.classList.add('dark');
}
// Listen for system theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) {
document.documentElement.classList.toggle('dark', e.matches);
// Dispatch theme change event
window.dispatchEvent(new CustomEvent('themechange', {
detail: { isDark: e.matches }
}));
}
});
// Set up theme toggle as soon as DOM is ready
document.addEventListener('DOMContentLoaded', () => {
const themeToggle = document.getElementById('theme-toggle');
if (themeToggle) {
// Remove disabled state
themeToggle.classList.remove('opacity-50', 'cursor-not-allowed');
themeToggle.disabled = false;
themeToggle.addEventListener('click', () => {
const isDark = document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
window.dispatchEvent(new CustomEvent('themechange', {
detail: { isDark }
}));
});
}
});
</script>
<link href="./src/index.css" rel="stylesheet">
<link href="./src/style.css" rel="stylesheet">
</head>
<body class="transition-colors">
<div class="container mx-auto px-4 py-8 min-h-screen max-w-[1440px] flex flex-col">
<div class="flex-1">
<header class="mb-8 flex justify-between items-center">
<div>
<div class="flex items-center gap-3">
<img src="icon.svg" alt="Lando Logo" class="w-14 h-14" />
<div>
<div class="flex items-center gap-2">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Landofile Editor</h1>
<span
class="px-2 py-0.5 text-sm font-medium bg-primary text-white rounded-full">Beta</span>
</div>
<p class="text-gray-600 dark:text-gray-400">A web-based YAML editor for Lando configuration
files</p>
</div>
</div>
</div>
<div class="flex items-center gap-4">
<a href="https://github.com/4lando/editor" target="_blank" rel="noopener noreferrer"
class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
aria-label="View source on GitHub">
<!-- GitHub icon -->
<svg class="h-6 w-6 text-gray-800 dark:text-gray-200" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" fill="currentColor">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
</a>
<button id="theme-toggle" disabled
class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors opacity-50 cursor-not-allowed">
<!-- Sun icon -->
<svg xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-800 dark:text-gray-200 hidden dark:block" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<!-- Moon icon -->
<svg xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-800 dark:text-gray-200 block dark:hidden" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
</div>
</header>
<div class="flex flex-col lg:flex-row gap-8 h-full">
<!-- Editor Container -->
<div class="flex-1 min-w-0 lg:max-w-[calc(100%-20rem)] relative">
<div
class="editor-wrapper w-full h-[600px] border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg relative overflow-hidden bg-white dark:bg-[#261D2D]">
<div id="editor-loader"
class="absolute inset-0 flex items-center justify-center transition-opacity duration-500 ease-out z-50 bg-white dark:bg-[#261D2D]">
<div class="flex flex-col items-center gap-3">
<div class="w-10 h-10 border-4 border-[#df4090] border-t-transparent rounded-full animate-spin">
</div>
<p class="text-gray-600 dark:text-gray-400">Loading editor...</p>
</div>
</div>
</div>
</div>
<!-- Info Panel -->
<aside
id="info-panel"
class="w-full lg:w-80 flex-shrink-0 bg-white dark:bg-[#261D2D] rounded-lg shadow-lg max-h-[600px] overflow-hidden">
</aside>
</div>
</div>
<footer class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
<p>
Validation powered by the <a href="https://github.com/4lando/lando-spec" target="_blank"
rel="noopener noreferrer" class="text-[#df4090] hover:underline">Lando Schema Specification</a>
</p>
</footer>
</div>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>