diff --git a/data/scripts/colors.js b/data/scripts/colors.js index 31d7e1b6..4cf3091b 100644 --- a/data/scripts/colors.js +++ b/data/scripts/colors.js @@ -9,7 +9,7 @@ function changeColor() { document.documentElement.style.setProperty("--shifting-color-1", "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")") var lightColors = indexToColor(currentColorIndex + lightLead) document.documentElement.style.setProperty("--shifting-color-1-light", "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")") - currentColorIndex += 153 / 60 //The second number is how many seconds it takes to do a full loop + currentColorIndex += 153 / 180 //The second number is how many seconds it takes to do a full loop } function indexToColor(colorIndex) { var red = 0, green = 0, blue = 0 diff --git a/data/scripts/main.js b/data/scripts/main.js index f7c098e9..e20cde18 100644 --- a/data/scripts/main.js +++ b/data/scripts/main.js @@ -883,6 +883,7 @@ function textCodeTutorial() { // //textCodeTutorial() textCodeTutorial() +loadSampleImages() @@ -900,3 +901,34 @@ function filterFramePicker(classToShow) { } } } + + +function loadSampleImages() { + var availableSamples = 6; + var samplesToLoad = [0,0,0]; + for (var i = 1; i <= samplesToLoad.length; i ++) { + var sampleImage = new Image() + sampleImage.customVarIndex = i; + var randomIndex = 0; + sampleImage.onload = function() { + document.getElementById(("sample" + this.customVarIndex)).src = this.src; + } + while(samplesToLoad[i - 1] == 0) { + randomIndex = Math.floor(Math.random() * (availableSamples)) + 1; + if (!samplesToLoad.includes(randomIndex)) { + samplesToLoad[i - 1] = randomIndex; + } + } + sampleImage.src = "data/site/images/samples/" + randomIndex + ".png"; + } +} + + + + + + + + + + diff --git a/data/site/images/samples/1.png b/data/site/images/samples/1.png new file mode 100644 index 00000000..4a5a0c9d Binary files /dev/null and b/data/site/images/samples/1.png differ diff --git a/data/site/images/samples/2.png b/data/site/images/samples/2.png new file mode 100644 index 00000000..51e64f5e Binary files /dev/null and b/data/site/images/samples/2.png differ diff --git a/data/site/images/samples/3.png b/data/site/images/samples/3.png new file mode 100644 index 00000000..c74b22ba Binary files /dev/null and b/data/site/images/samples/3.png differ diff --git a/data/site/images/samples/4.png b/data/site/images/samples/4.png new file mode 100644 index 00000000..7ebfbbe9 Binary files /dev/null and b/data/site/images/samples/4.png differ diff --git a/data/site/images/samples/5.png b/data/site/images/samples/5.png new file mode 100644 index 00000000..33f3517f Binary files /dev/null and b/data/site/images/samples/5.png differ diff --git a/data/site/images/samples/6.png b/data/site/images/samples/6.png new file mode 100644 index 00000000..727633bf Binary files /dev/null and b/data/site/images/samples/6.png differ diff --git a/data/site/styles.css b/data/site/styles.css index 78e91e4f..b10237a7 100644 --- a/data/site/styles.css +++ b/data/site/styles.css @@ -220,6 +220,12 @@ footer a:hover { font-size: 10pt; } } +/*The screen is big enough for the samples to lay side by side*/ +@media screen and (min-width: 750pt) { + .samples { + grid-template-columns: 33.33% 33.33% 33.33% !important; + } +} /*These control tooltips for mobile devices vs. desktops/laptops*/ /*@media screen and (min-width: 1024px) { .tooltip:hover .tooltiptext { @@ -443,3 +449,24 @@ input[type="checkbox"], .frameOption, .maskOption, .button { .visitorCountTrigger:hover + .visitorCount { display:inline-block; } + + + +.samples { + display: grid; + grid-template-columns: 100%; + align-items: center; +} +.samples img { + width: 90%; + margin: 0 auto; + height: auto; +} + + + + + + + + diff --git a/index.html b/index.html index dbc4c184..78e9d416 100644 --- a/index.html +++ b/index.html @@ -171,6 +171,14 @@ If you have any questions please don't hesitate to email me at:
Even if you made a cool card and want to share, I'd love to see it! +