docs: Gradient Examples ( Fixes #13 )

StartAutomating · StartAutomating · commit 71acee52c0b5 · 2025-12-29T13:47:42.000-08:00
diff --git a/Examples/ConicGradient.html b/Examples/ConicGradient.html
@@ -0,0 +1,3 @@
+<html><head><style>
+body { max-width: 100vw; width: 100vh; background:conic-gradient(#4488ff, #224488)}
+</style></head></html>
diff --git a/Examples/ConicGradient.html.ps1 b/Examples/ConicGradient.html.ps1
@@ -0,0 +1,17 @@
+<#
+.SYNOPSIS
+    Simple Conic Gradient Example    
+.DESCRIPTION
+    Creates a page with a simple conic gradient
+.EXAMPLE
+    ./ConicGradient.html.ps1 > ./ConicGradient.html
+#>
+if ($PSScriptRoot) { Push-Location $PSScriptRoot}
+
+$gradient = Gradient 'conic' '#4488ff', '#224488'
+
+"<html><head><style>"
+"body { max-width: 100vw; width: 100vh; background:$gradient}"
+"</style></head></html>"
+
+if ($PSScriptRoot) { Pop-Location }
diff --git a/Examples/Gradient.html b/Examples/Gradient.html
@@ -0,0 +1,3 @@
+<html><head><style>
+body { max-width: 100vw; width: 100vh; background:radial-gradient(#4488ff, #224488)}
+</style></head></html>
diff --git a/Examples/Gradient.html.ps1 b/Examples/Gradient.html.ps1
@@ -0,0 +1,17 @@
+<#
+.SYNOPSIS
+    Simple Gradient Example    
+.DESCRIPTION
+    Creates a page with a simple gradient
+.EXAMPLE
+    ./Gradient.html.ps1 > ./Gradient.html
+#>
+if ($PSScriptRoot) { Push-Location $PSScriptRoot}
+
+$gradient = Gradient '#4488ff', '#224488'
+
+"<html><head><style>"
+"body { max-width: 100vw; width: 100vh; background:$gradient}"
+"</style></head></html>"
+
+if ($PSScriptRoot) { Pop-Location }
diff --git a/Examples/LinearGradient.html b/Examples/LinearGradient.html
@@ -0,0 +1,3 @@
+<html><head><style>
+body { max-width: 100vw; width: 100vh; background:linear-gradient(#4488ff, #224488)}
+</style></head></html>
diff --git a/Examples/LinearGradient.html.ps1 b/Examples/LinearGradient.html.ps1
@@ -0,0 +1,17 @@
+<#
+.SYNOPSIS
+    Simple Linear Gradient Example    
+.DESCRIPTION
+    Creates a page with a simple linear gradient
+.EXAMPLE
+    ./LinearGradient.html.ps1 > ./LinearGradient.html
+#>
+if ($PSScriptRoot) { Push-Location $PSScriptRoot}
+
+$gradient = Gradient 'linear' '#4488ff', '#224488'
+
+"<html><head><style>"
+"body { max-width: 100vw; width: 100vh; background:$gradient}"
+"</style></head></html>"
+
+if ($PSScriptRoot) { Pop-Location }
diff --git a/Examples/RandomConicGradient.html b/Examples/RandomConicGradient.html
@@ -0,0 +1,3 @@
+<html><head><style>
+body { max-width: 100vw; width: 100vh; background:conic-gradient(#59ab56, #2b31b7, #843c46, #f941ef)}
+</style></head></html>
diff --git a/Examples/RandomConicGradient.html.ps1 b/Examples/RandomConicGradient.html.ps1
@@ -0,0 +1,24 @@
+<#
+.SYNOPSIS
+    Random Conic Gradient Example    
+.DESCRIPTION
+    Creates a page with a random gradient
+.EXAMPLE
+    ./RandomConicGradient.html.ps1 > ./RandomConicGradient.html
+#>
+param([byte]$GradientColorMax = 4)
+if ($PSScriptRoot) { Push-Location $PSScriptRoot}
+
+# Make a random 2-N color gradient
+$gradient = @(
+    'conic'
+    foreach ($n in 1..(Get-Random -Min 2 -Max $GradientColorMax)) {
+        "#{0:x6}" -f (Get-Random -Max 0xffffff)
+    }
+) | Gradient
+
+"<html><head><style>"
+"body { max-width: 100vw; width: 100vh; background:$gradient}"
+"</style></head></html>"
+
+if ($PSScriptRoot) { Pop-Location }
diff --git a/Examples/RandomGradient.html b/Examples/RandomGradient.html
@@ -0,0 +1,3 @@
+<html><head><style>
+body { max-width: 100vw; width: 100vh; background:radial-gradient(#519a94, #d800e1)}
+</style></head></html>
diff --git a/Examples/RandomGradient.html.ps1 b/Examples/RandomGradient.html.ps1
@@ -0,0 +1,23 @@
+<#
+.SYNOPSIS
+    Random Gradient Example    
+.DESCRIPTION
+    Creates a page with a random gradient
+.EXAMPLE
+    ./RandomGradient.html.ps1 > ./RandomGradient.html
+#>
+param([byte]$GradientColorMax = 4)
+if ($PSScriptRoot) { Push-Location $PSScriptRoot}
+
+# Make a random 2-N color gradient
+$gradient = @(
+    foreach ($n in 1..(Get-Random -Min 2 -Max $GradientColorMax)) {
+        "#{0:x6}" -f (Get-Random -Max 0xffffff)
+    }
+) | Gradient
+
+"<html><head><style>"
+"body { max-width: 100vw; width: 100vh; background:$gradient}"
+"</style></head></html>"
+
+if ($PSScriptRoot) { Pop-Location }
diff --git a/Examples/RandomLinearGradient.html b/Examples/RandomLinearGradient.html
@@ -0,0 +1,3 @@
+<html><head><style>
+body { max-width: 100vw; width: 100vh; background:linear-gradient(#0e2ba0, #d810f5, #a17968)}
+</style></head></html>
diff --git a/Examples/RandomLinearGradient.html.ps1 b/Examples/RandomLinearGradient.html.ps1
@@ -0,0 +1,24 @@
+<#
+.SYNOPSIS
+    Random Linear Gradient Example    
+.DESCRIPTION
+    Creates a page with a random gradient
+.EXAMPLE
+    ./RandomLinearGradient.html.ps1 > ./RandomLinearGradient.html
+#>
+param([byte]$GradientColorMax = 4)
+if ($PSScriptRoot) { Push-Location $PSScriptRoot}
+
+# Make a random 2-N color gradient
+$gradient = @(
+    'linear'
+    foreach ($n in 1..(Get-Random -Min 2 -Max $GradientColorMax)) {
+        "#{0:x6}" -f (Get-Random -Max 0xffffff)
+    }
+) | Gradient
+
+"<html><head><style>"
+"body { max-width: 100vw; width: 100vh; background:$gradient}"
+"</style></head></html>"
+
+if ($PSScriptRoot) { Pop-Location }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<html><head><style>`
	`2`	`+body { max-width: 100vw; width: 100vh; background:conic-gradient(#4488ff, #224488)}`
	`3`	`+</style></head></html>`