samples

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

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";
+    }
+}
+
+
+
+
+
+
+
+
+
+

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;
+}
+
+
+
+
+
+
+
+

index.html

@@ -171,6 +171,14 @@
                 If you have any questions please don't hesitate to email me at: <div class="truncate"><a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">CardConjurerMTG@gmail.com</a></div>Even if you made a cool card and want to share, I'd love to see it!
 			</div>
 		</div>
+        <div class="layer">
+            <div class="title">Check Out Some Samples!</div>
+            <div class="samples">
+                <img id="sample1" alt="loading sample...">
+                <img id="sample2" alt="loading sample...">
+                <img id="sample3" alt="loading sample...">
+            </div>
+        </div>
 	</div>
 </body>
 <footer>