Skip to content

Commit 444dfe9

Browse files
quinten-technolabquinten-technolab
committed
Add initial implementation of MaterialLab Playground with documentation, dynamic themes, and draggable widgets
1 parent 73169f3 commit 444dfe9

File tree

5 files changed

+829
-0
lines changed

5 files changed

+829
-0
lines changed

‎doc/0.0.8/index.html‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>MaterialLab Documentation</title>
7+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
8+
<style>
9+
body {
10+
font-family: Arial, sans-serif;
11+
padding: 2rem;
12+
background: #f7f7f7;
13+
color: #333;
14+
max-width: 960px;
15+
margin: auto;
16+
}
17+
h1, h2 {
18+
color: #2c3e50;
19+
}
20+
section {
21+
margin-bottom: 2rem;
22+
}
23+
.material-icons {
24+
font-size: 1em;
25+
vertical-align: middle;
26+
margin-right: 5px;
27+
}
28+
code {
29+
background: #eee;
30+
padding: 2px 6px;
31+
border-radius: 4px;
32+
font-family: monospace;
33+
}
34+
.icon-label {
35+
display: flex;
36+
align-items: center;
37+
margin-bottom: 0.5rem;
38+
}
39+
</style>
40+
</head>
41+
<body>
42+
43+
<h1>📘 MaterialLab Playground Documentation</h1>
44+
<p>Version: <strong>v0.0.8-rc</strong></p>
45+
<p>This is a browser-based drag-and-drop widget playground with theme customization and persistent background support.</p>
46+
47+
<section>
48+
<h2>🎛 UI Elements</h2>
49+
<div class="icon-label"><span class="material-icons">add_circle</span> <strong>Add Widget:</strong> Prompts for a widget type (weather, clock, battery).</div>
50+
<div class="icon-label"><span class="material-icons">upload_file</span> <strong>Upload Background:</strong> Opens file picker to set a custom background image.</div>
51+
<div class="icon-label"><span class="material-icons">delete</span> <strong>Clear Background:</strong> Removes the current background and theme palette.</div>
52+
</section>
53+
54+
<section>
55+
<h2>🧩 Widgets</h2>
56+
<p>Widgets are draggable elements with headers and content. Supported types:</p>
57+
<ul>
58+
<li><strong>Weather:</strong> Displays temperature and weather for <code>Leiden</code> using OpenWeatherMap API.</li>
59+
<li><strong>Clock:</strong> Digital clock that updates every second.</li>
60+
<li><strong>Battery:</strong> Static battery percentage placeholder (future: dynamic status).</li>
61+
</ul>
62+
</section>
63+
64+
<section>
65+
<h2>🖼 Background Support</h2>
66+
<p>Users can upload an image as a full-screen background:</p>
67+
<ul>
68+
<li>Image is scaled down for performance (<code>max 1920x1680</code>).</li>
69+
<li>Saved in <code>localStorage</code> as JPEG Data URL.</li>
70+
<li>Image is styled as <code>cover</code> with <code>center</code> alignment.</li>
71+
</ul>
72+
</section>
73+
74+
<section>
75+
<h2>🎨 Dynamic Theme Palette</h2>
76+
<p>Based on the uploaded background image:</p>
77+
<ul>
78+
<li>Extracts an average color from the image.</li>
79+
<li>Generates primary, secondary, header, and contrast text colors.</li>
80+
<li>Applies them via CSS variables:</li>
81+
</ul>
82+
<pre><code>--primaryColor
83+
--secondaryColor
84+
--onPrimaryColor
85+
--headerColor</code></pre>
86+
<p>Saved to <code>localStorage</code> for persistence.</p>
87+
</section>
88+
89+
<section>
90+
<h2>🖱 Drag & Drop</h2>
91+
<p>Widgets can be freely moved around using the <code>drag_indicator</code> icon.</p>
92+
<ul>
93+
<li>Position is absolute within the widget container.</li>
94+
<li>Draggable functionality is initialized on widget creation.</li>
95+
</ul>
96+
</section>
97+
98+
<section>
99+
<h2>🗑 Remove Widget</h2>
100+
<p>Each widget has a <code>delete</code> icon to remove it from the DOM.</p>
101+
</section>
102+
103+
<section>
104+
<h2>💾 Persistence</h2>
105+
<p>The following are saved and restored automatically:</p>
106+
<ul>
107+
<li><code>backgroundImage</code> (JPEG data URL)</li>
108+
<li><code>themePalette</code> (JSON with color values)</li>
109+
</ul>
110+
</section>
111+
112+
<section>
113+
<h2>📡 Weather API</h2>
114+
<p>Uses <a href="https://openweathermap.org/api" target="_blank">OpenWeatherMap</a> to fetch real-time weather.</p>
115+
<p><strong>API Key Required:</strong> Replace <code>API_KEY</code> in JavaScript with your own.</p>
116+
</section>
117+
118+
<section>
119+
<h2>🧭 Planned Features (Future)</h2>
120+
<ul>
121+
<li>Live battery status via <code>navigator.getBattery()</code></li>
122+
<li>Widget saving/loading state</li>
123+
<li>Resizable widgets</li>
124+
<li>Custom widget types / plugins</li>
125+
</ul>
126+
</section>
127+
128+
<footer>
129+
<p><em>MaterialLab v0.0.8-rc – Made for experimenting and customization lovers.</em></p>
130+
</footer>
131+
132+
</body>
133+
</html>

‎doc/index.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>MaterialLab Docs</title>
7+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
8+
<style>
9+
body {
10+
font-family: 'Roboto', sans-serif;
11+
background-color: #f8f9fa;
12+
margin: 0;
13+
padding: 2rem;
14+
}
15+
h1 {
16+
text-align: center;
17+
color: #333;
18+
}
19+
.version-list {
20+
max-width: 600px;
21+
margin: 2rem auto;
22+
padding: 1rem;
23+
background: white;
24+
border-radius: 8px;
25+
box-shadow: 0 0 10px rgba(0,0,0,0.05);
26+
}
27+
.version-item {
28+
padding: 1rem;
29+
border-bottom: 1px solid #eee;
30+
}
31+
.version-item:last-child {
32+
border-bottom: none;
33+
}
34+
.version-link {
35+
text-decoration: none;
36+
color: #1976d2;
37+
font-weight: bold;
38+
}
39+
.version-link:hover {
40+
text-decoration: underline;
41+
}
42+
</style>
43+
</head>
44+
<body>
45+
<h1>📘 MaterialLab Documentation</h1>
46+
<div class="version-list">
47+
<div class="version-item">
48+
<a class="version-link" href="/doc/0.0.8/index.html">📄 Version 0.0.8-rc</a>
49+
<p>Initial release with dynamic theme, draggable widgets, weather API, and more.</p>
50+
</div>
51+
<!-- Future versions can be added here -->
52+
</div>
53+
</body>
54+
</html>

‎index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>MaterialLab</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link rel="stylesheet"
9+
href="https://fonts.googleapis.com/icon?family=Material+Icons" />
10+
</head>
11+
<body>
12+
<header>
13+
<h1 class="logo">MaterialLab Playground</h1>
14+
<!-- Small text with version and rc -->
15+
<span class="version">v0.0.8-rc</span>
16+
<!-- Add Widget button launches a prompt to choose widget type -->
17+
<span class="material-icons" id="addWidget">add_circle</span>
18+
<!-- Clicking this icon opens the background selector -->
19+
<span class="material-icons" id="fileManager">upload_file</span>
20+
<!-- Clear Background Button -->
21+
<span class="material-icons" id="clearBackground">delete</span>
22+
<!-- Documentation -->
23+
<span class="material-icons" id="documentationLink">help_outline</span>
24+
<!-- Hidden file input used for background selection -->
25+
<input type="file" id="backgroundInput" accept="image/*" style="display: none;" />
26+
</header>
27+
28+
<main>
29+
<section class="editor-container">
30+
<div id="widgetContainer" class="widget-container">
31+
<!-- Example draggable widget (default type: weather) -->
32+
<!-- <div class="widget" data-type="weather" id="widget1" style="left: 400px; top: 20px;">
33+
<div class="widget-header">
34+
<span class="widget-title">
35+
<i class="material-icons widget-icon">wb_sunny</i>
36+
Weather
37+
</span>
38+
<span class="material-icons widget-remove">delete</span>
39+
<span class="material-icons widget-drag-handle">drag_indicator</span>
40+
</div>
41+
<div class="widget-content">
42+
<p>25°C, Clear Sky</p>
43+
</div>
44+
</div> -->
45+
</div>
46+
</section>
47+
</main>
48+
49+
<script src="script.js"></script>
50+
</body>
51+
</html>

0 commit comments

Comments
 (0)