big improvement to lightshow lol panel pages

StoneOrbits · Dec 28, 2024 · f348cca · f348cca
1 parent d94a4bf
commit f348cca
Show file tree

Hide file tree

Showing 7 changed files with 337 additions and 3 deletions.
diff --git a/docs/lightshow_lol_animation.md b/docs/lightshow_lol_animation.md
@@ -5,9 +5,46 @@ nav_order: 0
 parent: Lightshow.lol
 ---
 
+<style>
+  .panel-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+    margin: 0 auto;
+    margin-top: 50px;
+    max-width: 40%;
+  }
+
+  .panel-link {
+    background-color: #2e2e2e;
+    border-radius: 8px;
+    text-decoration: none;
+    color: #ffffff;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: transform 0.2s;
+    border: 1px solid #080808;
+  }
+
+  .panel-link:hover {
+    transform: scale(1.02);
+  }
+
+  .panel-title {
+    margin-bottom: 8px;
+    font-weight: bold;
+  }
+
+  .panel-img {
+    max-width: 100%;
+  }
+</style>
+
 # Preview Animation
 
-<div style="text-align: center; margin: 20px">
+<div style="float: right; margin: 20px; max-width: 40%">
   <img src="assets/images/lightshow-lol-animation.png">
 </div>
 
@@ -23,3 +60,10 @@ The five animation shape options are self-explanatory, but the six slider option
 - **Blur**: This controls the appearance of the blink on the screen, increasing softness and diffusion.
 - **Radius**: This controls the size of the animation pattern on the screen.
 - **Spread**: With many LEDs, this controls the distance between LEDs in the preview.
+
+<div class="panel-grid">
+  <a href="lightshow_lol_device_controls.html" class="panel-link">
+    <span class="panel-title">🔗 Next Device Control →</span>
+    <img src="assets/images/lightshow-lol-device.png" class="panel-img">
+  </a>
+</div>
diff --git a/docs/lightshow_lol_color_picker.md b/docs/lightshow_lol_color_picker.md
@@ -4,7 +4,42 @@ title: Color Picker
 nav_order: 6
 parent: Lightshow.lol
 ---
+<style>
+  .panel-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+    margin: 0 auto;
+    margin-top: 50px;
+    max-width: 80%;
+  }
 
+  .panel-link {
+    background-color: #2e2e2e;
+    border-radius: 8px;
+    text-decoration: none;
+    color: #ffffff;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: transform 0.2s;
+    border: 1px solid #080808;
+  }
+
+  .panel-link:hover {
+    transform: scale(1.02);
+  }
+
+  .panel-title {
+    margin-bottom: 8px;
+    font-weight: bold;
+  }
+
+  .panel-img {
+    max-width: 100%;
+  }
+</style>
 # Color Picker
 
 <img style="float:right;max-width:40%;margin:10px;" src="assets/images/lightshow-lol-color-picker.png">
@@ -14,4 +49,19 @@ The **Color Picker** is a detailed interface for picking new colors for a colors
 ### Key Features
 
 - **Precision Control:** Fine-tune colors with RGB/HEX inputs.
-- **Quick Adjustments:** Easily modify brightness, saturation, and hue.
+- **Quick Adjustments:** Easily modify brightness, saturation, and hue.
+
+The color picker is opened by selecting a color in the colorset, and it can be closed unlike most other panels. The color picker will update the color of the last color that was clicked in the colorset.
+
+When a device is connected it will display a live preview of the color being chosen as the user navigates the color picker.
+
+<div class="panel-grid">
+  <a href="lightshow_lol_colorset.html" class="panel-link">
+    <span class="panel-title">← Colorset Panel 🔗</span>
+    <img src="assets/images/lightshow-lol-colorset.png" class="panel-img">
+  </a>
+  <a href="lightshow_lol_animation.html" class="panel-link">
+    <span class="panel-title">🔗 Animation Panel →</span>
+    <img src="assets/images/lightshow-lol-animation.png" class="panel-img">
+  </a>
+</div>
diff --git a/docs/lightshow_lol_colorset.md b/docs/lightshow_lol_colorset.md
@@ -4,10 +4,64 @@ title: Colorset Controls
 nav_order: 5
 parent: Lightshow.lol
 ---
+<style>
+  .panel-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+    margin: 0 auto;
+    margin-top: 50px;
+    max-width: 80%;
+  }
 
+  .panel-link {
+    background-color: #2e2e2e;
+    border-radius: 8px;
+    text-decoration: none;
+    color: #ffffff;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: transform 0.2s;
+    border: 1px solid #080808;
+  }
+
+  .panel-link:hover {
+    transform: scale(1.02);
+  }
+
+  .panel-title {
+    margin-bottom: 8px;
+    font-weight: bold;
+  }
+
+  .panel-img {
+    max-width: 100%;
+  }
+</style>
 # Colorset Controls
 
 <img style="float:right;max-width:40%;margin:10px;" src="assets/images/lightshow-lol-colorset.png">
 
 The **Colorset Panel** represents the list of colors for the selected leds of the current mode.
 
+### Key Features
+
+- **Drag and Drop** Drag to rearrange colors in your colorset.
+- **Dynamic Color Picker:** Click to modify the color with the Color Picker
+
+There is a maximum of 8 colors in a colorset, black is considered 'off' which can be used to extend gaps in the pattern.
+
+<div class="panel-grid">
+  <a href="lightshow_lol_pattern.html" class="panel-link">
+    <span class="panel-title">← Pattern Panel 🔗</span>
+    <img src="assets/images/lightshow-lol-pattern.png" class="panel-img">
+  </a>
+  <a href="lightshow_lol_color_picker.html" class="panel-link">
+    <span class="panel-title">🔗 Color Picker →</span>
+    <img src="assets/images/lightshow-lol-color-picker.png" class="panel-img">
+  </a>
+</div>
+
+
diff --git a/docs/lightshow_lol_device_controls.md b/docs/lightshow_lol_device_controls.md
@@ -4,7 +4,42 @@ title: Device Controls
 nav_order: 1
 parent: Lightshow.lol
 ---
+<style>
+  .panel-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+    margin: 0 auto;
+    margin-top: 50px;
+    max-width: 80%;
+  }
 
+  .panel-link {
+    background-color: #2e2e2e;
+    border-radius: 8px;
+    text-decoration: none;
+    color: #ffffff;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: transform 0.2s;
+    border: 1px solid #080808;
+  }
+
+  .panel-link:hover {
+    transform: scale(1.02);
+  }
+
+  .panel-title {
+    margin-bottom: 8px;
+    font-weight: bold;
+  }
+
+  .panel-img {
+    max-width: 100%;
+  }
+</style>
 # Device Controls
 
 <img style="float:right;max-width:40%;margin:10px;" src="assets/images/lightshow-lol-device.png">
@@ -17,4 +52,13 @@ The **Device Controls Panel** is very simple, offering only two purposes: **sele
 
 In both cases, whether **Selecting** or **Connecting** a device, the **LED Selection Panel** will appear, this will be covered below.
 
-
+<div class="panel-grid">
+  <a href="lightshow_lol_animation.html" class="panel-link">
+    <span class="panel-title">← Prev Animation Panel 🔗</span>
+    <img src="assets/images/lightshow-lol-animation.png" class="panel-img">
+  </a>
+  <a href="lightshow_lol_modes.html" class="panel-link">
+    <span class="panel-title">🔗 Next Modes Panel →</span>
+    <img src="assets/images/lightshow-lol-modes.png" class="panel-img">
+  </a>
+</div>
diff --git a/docs/lightshow_lol_led_selection.md b/docs/lightshow_lol_led_selection.md
@@ -4,7 +4,42 @@ title: Led Selection
 nav_order: 3
 parent: Lightshow.lol
 ---
+<style>
+  .panel-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+    margin: 0 auto;
+    margin-top: 50px;
+    max-width: 80%;
+  }
 
+  .panel-link {
+    background-color: #2e2e2e;
+    border-radius: 8px;
+    text-decoration: none;
+    color: #ffffff;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: transform 0.2s;
+    border: 1px solid #080808;
+  }
+
+  .panel-link:hover {
+    transform: scale(1.02);
+  }
+
+  .panel-title {
+    margin-bottom: 8px;
+    font-weight: bold;
+  }
+
+  .panel-img {
+    max-width: 100%;
+  }
+</style>
 # LED Selection Panel
 
 <img style="float:right;max-width:40%;margin:10px;" src="assets/images/lightshow-lol-led-select.png">
@@ -17,3 +52,14 @@ The **LED Selection Panel** allows you to interact with and assign configuration
 - **Individual Customization:** Select individual LEDs to assign patterns and colors.
 - **Batch Selection:** Group LEDs for simultaneous modifications.
 
+<div class="panel-grid">
+  <a href="lightshow_lol_modes.html" class="panel-link">
+    <span class="panel-title">← Modes Panel 🔗</span>
+    <img src="assets/images/lightshow-lol-modes.png" class="panel-img">
+  </a>
+  <a href="lightshow_lol_pattern.html" class="panel-link">
+    <span class="panel-title">🔗 Pattern Panel →</span>
+    <img src="assets/images/lightshow-lol-pattern.png" class="panel-img">
+  </a>
+</div>
+
diff --git a/docs/lightshow_lol_modes.md b/docs/lightshow_lol_modes.md
@@ -4,7 +4,42 @@ title: Modes List
 nav_order: 2
 parent: Lightshow.lol
 ---
+<style>
+  .panel-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+    margin: 0 auto;
+    margin-top: 50px;
+    max-width: 80%;
+  }
 
+  .panel-link {
+    background-color: #2e2e2e;
+    border-radius: 8px;
+    text-decoration: none;
+    color: #ffffff;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: transform 0.2s;
+    border: 1px solid #080808;
+  }
+
+  .panel-link:hover {
+    transform: scale(1.02);
+  }
+
+  .panel-title {
+    margin-bottom: 8px;
+    font-weight: bold;
+  }
+
+  .panel-img {
+    max-width: 100%;
+  }
+</style>
 # Modes List
 
 <img style="float:right;max-width:40%;margin:10px;" src="assets/images/lightshow-lol-modes.png">
@@ -18,3 +53,15 @@ The **Modes Panel** organizes and manages your lightshow's overall structure. A
 - **Import/Export:** Import existing modes from your device or export them for sharing.
 - **Sharing:** Quickly share your mode with the Vortex Community.
 
+
+<div class="panel-grid">
+  <a href="lightshow_lol_device_controls.html" class="panel-link">
+    <span class="panel-title">← Device Control 🔗</span>
+    <img src="assets/images/lightshow-lol-device.png" class="panel-img">
+  </a>
+  <a href="lightshow_lol_led_selection.html" class="panel-link">
+    <span class="panel-title">🔗 Led Selection →</span>
+    <img src="assets/images/lightshow-lol-led-select.png" class="panel-img">
+  </a>
+</div>
+