Lamp page updates moving code
This commit is contained in:
Dan
parent
a05e9bf10b
commit
8faf555629
11 changed files with 1013 additions and 879 deletions
386
assets/js/adoptables/lavalamp-adoptable.js
Normal file
386
assets/js/adoptables/lavalamp-adoptable.js
Normal file
|
|
@ -0,0 +1,386 @@
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const previewContainers = {
|
||||||
|
flex: document.getElementById("lavalamp-preview-flex"),
|
||||||
|
small: document.getElementById("lavalamp-preview-100"),
|
||||||
|
large: document.getElementById("lavalamp-preview-200"),
|
||||||
|
};
|
||||||
|
const bgColor1Input = document.getElementById("bg-color-1");
|
||||||
|
const bgColor2Input = document.getElementById("bg-color-2");
|
||||||
|
const blobColor1Input = document.getElementById("blob-color-1");
|
||||||
|
const blobColor2Input = document.getElementById("blob-color-2");
|
||||||
|
const caseColorInput = document.getElementById("case-color");
|
||||||
|
const blobCountInput = document.getElementById("blob-count");
|
||||||
|
const speedInput = document.getElementById("speed");
|
||||||
|
const blobSizeInput = document.getElementById("blob-size");
|
||||||
|
const pixelateInput = document.getElementById("pixelate");
|
||||||
|
const pixelSizeInput = document.getElementById("pixel-size");
|
||||||
|
const pixelSizeGroup = document.getElementById("pixel-size-group");
|
||||||
|
const blobCountValue = document.getElementById("blob-count-value");
|
||||||
|
const speedValue = document.getElementById("speed-value");
|
||||||
|
const blobSizeValue = document.getElementById("blob-size-value");
|
||||||
|
const pixelSizeValue = document.getElementById("pixel-size-value");
|
||||||
|
const getCodeBtn = document.getElementById("get-code-btn");
|
||||||
|
const embedCodeSection = document.getElementById("embed-code-section");
|
||||||
|
const embedCodeDisplay = document.getElementById("embed-code-display");
|
||||||
|
const copyCodeBtn = document.getElementById("copy-code-btn");
|
||||||
|
const copyStatus = document.getElementById("copy-status");
|
||||||
|
|
||||||
|
let lampInstances = {
|
||||||
|
flex: { lampElements: {}, blobs: [] },
|
||||||
|
small: { lampElements: {}, blobs: [] },
|
||||||
|
large: { lampElements: {}, blobs: [] },
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialize the preview lamps
|
||||||
|
function initPreview() {
|
||||||
|
Object.keys(previewContainers).forEach((key, index) => {
|
||||||
|
const previewContainer = previewContainers[key];
|
||||||
|
const gooFilterId = `goo-preview-${key}`;
|
||||||
|
|
||||||
|
// Create SVG filters
|
||||||
|
const svg = document.createElementNS(
|
||||||
|
"http://www.w3.org/2000/svg",
|
||||||
|
"svg",
|
||||||
|
);
|
||||||
|
svg.style.position = "absolute";
|
||||||
|
svg.style.width = "0";
|
||||||
|
svg.style.height = "0";
|
||||||
|
const pixelateFilterId = `pixelate-preview-${key}`;
|
||||||
|
svg.innerHTML = `
|
||||||
|
<defs>
|
||||||
|
<filter id="${gooFilterId}">
|
||||||
|
<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
|
||||||
|
<feColorMatrix
|
||||||
|
in="blur"
|
||||||
|
mode="matrix"
|
||||||
|
values="
|
||||||
|
1 0 0 0 0
|
||||||
|
0 1 0 0 0
|
||||||
|
0 0 1 0 0
|
||||||
|
0 0 0 18 -7"
|
||||||
|
result="goo"
|
||||||
|
/>
|
||||||
|
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
|
||||||
|
</filter>
|
||||||
|
<filter id="${pixelateFilterId}" x="0%" y="0%" width="100%" height="100%">
|
||||||
|
<feFlood x="0" y="0" height="1" width="1"/>
|
||||||
|
<feComposite width="4" height="4" class="pixelate-composite"/>
|
||||||
|
<feTile result="a"/>
|
||||||
|
<feComposite in="SourceGraphic" in2="a" operator="in"/>
|
||||||
|
<feMorphology operator="dilate" radius="2" class="pixelate-morphology"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const container = document.createElement("div");
|
||||||
|
container.className = "lavalamp-adoptable";
|
||||||
|
container.style.width = "100%";
|
||||||
|
container.style.height = "100%";
|
||||||
|
|
||||||
|
const lampCap = document.createElement("div");
|
||||||
|
lampCap.className = "lamp-cap";
|
||||||
|
|
||||||
|
const lampBody = document.createElement("div");
|
||||||
|
lampBody.className = "lamp-body";
|
||||||
|
|
||||||
|
const blobsContainer = document.createElement("div");
|
||||||
|
blobsContainer.className = "blobs-container";
|
||||||
|
// Initially set the goo filter, will be adjusted after layout
|
||||||
|
blobsContainer.style.filter = `url(#${gooFilterId})`;
|
||||||
|
|
||||||
|
const lampBase = document.createElement("div");
|
||||||
|
lampBase.className = "lamp-base";
|
||||||
|
|
||||||
|
lampBody.appendChild(blobsContainer);
|
||||||
|
container.appendChild(svg);
|
||||||
|
container.appendChild(lampCap);
|
||||||
|
container.appendChild(lampBody);
|
||||||
|
container.appendChild(lampBase);
|
||||||
|
previewContainer.appendChild(container);
|
||||||
|
|
||||||
|
lampInstances[key].lampElements = {
|
||||||
|
container,
|
||||||
|
lampCap,
|
||||||
|
lampBody,
|
||||||
|
lampBase,
|
||||||
|
blobsContainer,
|
||||||
|
svg,
|
||||||
|
pixelateFilterId,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// Apply initial styles
|
||||||
|
updatePreview();
|
||||||
|
|
||||||
|
// Adjust goo filter for small lamps after layout
|
||||||
|
adjustGooFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust goo filters based on container width (matches embedded script logic)
|
||||||
|
function adjustGooFilters() {
|
||||||
|
Object.keys(lampInstances).forEach((key) => {
|
||||||
|
const instance = lampInstances[key];
|
||||||
|
const { lampElements } = instance;
|
||||||
|
|
||||||
|
if (!lampElements.lampBody) return;
|
||||||
|
|
||||||
|
const containerWidth = lampElements.lampBody.offsetWidth;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a blob element for a specific instance
|
||||||
|
function createBlob(lampBody, lampHeight) {
|
||||||
|
const blob = document.createElement("div");
|
||||||
|
blob.className = "blob";
|
||||||
|
|
||||||
|
const containerWidth = lampBody.offsetWidth;
|
||||||
|
const containerHeight = lampHeight || lampBody.offsetHeight;
|
||||||
|
|
||||||
|
const blobSizeMultiplier = parseFloat(blobSizeInput.value);
|
||||||
|
const size =
|
||||||
|
(Math.random() * 0.15 + 0.25) * containerWidth * blobSizeMultiplier;
|
||||||
|
const duration = (Math.random() * 8 + 12) / parseFloat(speedInput.value);
|
||||||
|
|
||||||
|
const maxX = containerWidth - size;
|
||||||
|
const startX = Math.random() * maxX;
|
||||||
|
|
||||||
|
blob.style.width = `${size}px`;
|
||||||
|
blob.style.height = `${size}px`;
|
||||||
|
blob.style.left = `${startX}px`;
|
||||||
|
blob.style.bottom = "10px";
|
||||||
|
blob.style.position = "absolute";
|
||||||
|
|
||||||
|
blob.style.setProperty("--duration", `${duration}s`);
|
||||||
|
blob.style.setProperty("--start-x", "0px");
|
||||||
|
blob.style.setProperty("--start-y", "0px");
|
||||||
|
blob.style.setProperty(
|
||||||
|
"--mid1-x",
|
||||||
|
`${(Math.random() * 0.3 - 0.15) * containerWidth}px`,
|
||||||
|
);
|
||||||
|
blob.style.setProperty(
|
||||||
|
"--mid1-y",
|
||||||
|
`${-(Math.random() * 0.15 + 0.25) * containerHeight}px`,
|
||||||
|
);
|
||||||
|
blob.style.setProperty(
|
||||||
|
"--mid2-x",
|
||||||
|
`${(Math.random() * 0.4 - 0.2) * containerWidth}px`,
|
||||||
|
);
|
||||||
|
blob.style.setProperty(
|
||||||
|
"--mid2-y",
|
||||||
|
`${-(Math.random() * 0.2 + 0.5) * containerHeight}px`,
|
||||||
|
);
|
||||||
|
blob.style.setProperty(
|
||||||
|
"--mid3-x",
|
||||||
|
`${(Math.random() * 0.3 - 0.15) * containerWidth}px`,
|
||||||
|
);
|
||||||
|
blob.style.setProperty(
|
||||||
|
"--mid3-y",
|
||||||
|
`${-(Math.random() * 0.15 + 0.8) * containerHeight}px`,
|
||||||
|
);
|
||||||
|
blob.style.setProperty(
|
||||||
|
"--scale1",
|
||||||
|
(Math.random() * 0.3 + 1.0).toFixed(2),
|
||||||
|
);
|
||||||
|
blob.style.setProperty(
|
||||||
|
"--scale2",
|
||||||
|
(Math.random() * 0.3 + 0.85).toFixed(2),
|
||||||
|
);
|
||||||
|
blob.style.setProperty(
|
||||||
|
"--scale3",
|
||||||
|
(Math.random() * 0.3 + 0.95).toFixed(2),
|
||||||
|
);
|
||||||
|
blob.style.animationDelay = `${Math.random() * -20}s`;
|
||||||
|
|
||||||
|
return blob;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update blob count for all instances
|
||||||
|
function updateBlobCount() {
|
||||||
|
const count = parseInt(blobCountInput.value);
|
||||||
|
|
||||||
|
Object.keys(lampInstances).forEach((key) => {
|
||||||
|
const instance = lampInstances[key];
|
||||||
|
const { lampElements, blobs } = instance;
|
||||||
|
|
||||||
|
if (!lampElements.blobsContainer) return;
|
||||||
|
|
||||||
|
while (blobs.length > count) {
|
||||||
|
const blob = blobs.pop();
|
||||||
|
lampElements.blobsContainer.removeChild(blob);
|
||||||
|
}
|
||||||
|
while (blobs.length < count) {
|
||||||
|
const blob = createBlob(lampElements.lampBody);
|
||||||
|
updateBlobColors(blob);
|
||||||
|
blobs.push(blob);
|
||||||
|
lampElements.blobsContainer.appendChild(blob);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update blob colors
|
||||||
|
function updateBlobColors(blob) {
|
||||||
|
const color1 = blobColor1Input.value;
|
||||||
|
const color2 = blobColor2Input.value;
|
||||||
|
blob.style.background = `radial-gradient(circle at 30% 30%, ${color1}, ${color2})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust brightness helper
|
||||||
|
function adjustBrightness(color, percent) {
|
||||||
|
const num = parseInt(color.replace("#", ""), 16);
|
||||||
|
const amt = Math.round(2.55 * percent);
|
||||||
|
const R = (num >> 16) + amt;
|
||||||
|
const G = ((num >> 8) & 0x00ff) + amt;
|
||||||
|
const B = (num & 0x0000ff) + amt;
|
||||||
|
return (
|
||||||
|
"#" +
|
||||||
|
(
|
||||||
|
0x1000000 +
|
||||||
|
(R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
|
||||||
|
(G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
|
||||||
|
(B < 255 ? (B < 1 ? 0 : B) : 255)
|
||||||
|
)
|
||||||
|
.toString(16)
|
||||||
|
.slice(1)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the preview for all instances
|
||||||
|
function updatePreview() {
|
||||||
|
Object.keys(lampInstances).forEach((key) => {
|
||||||
|
const instance = lampInstances[key];
|
||||||
|
const { lampElements, blobs } = instance;
|
||||||
|
|
||||||
|
if (!lampElements.lampBody) return;
|
||||||
|
|
||||||
|
// Update background gradient
|
||||||
|
lampElements.lampBody.style.background = `linear-gradient(180deg, ${bgColor1Input.value} 0%, ${bgColor2Input.value} 100%)`;
|
||||||
|
|
||||||
|
// Update cap and base color
|
||||||
|
const baseColor = caseColorInput.value;
|
||||||
|
lampElements.lampCap.style.background = `linear-gradient(180deg, ${adjustBrightness(baseColor, 40)} 0%, ${baseColor} 50%, ${adjustBrightness(baseColor, -20)} 100%)`;
|
||||||
|
lampElements.lampBase.style.background = `linear-gradient(180deg, ${baseColor} 0%, ${adjustBrightness(baseColor, -20)} 40%, ${adjustBrightness(baseColor, -40)} 100%)`;
|
||||||
|
lampElements.lampBase.style.borderTop = `1px solid ${adjustBrightness(bgColor2Input.value, -30)}`;
|
||||||
|
|
||||||
|
// Update all blob colors
|
||||||
|
blobs.forEach((blob) => updateBlobColors(blob));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update blob count
|
||||||
|
updateBlobCount();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update pixelation filters for all instances
|
||||||
|
function updatePixelation() {
|
||||||
|
const isPixelated = pixelateInput.checked;
|
||||||
|
const pixelSize = parseInt(pixelSizeInput.value);
|
||||||
|
|
||||||
|
Object.keys(lampInstances).forEach((key) => {
|
||||||
|
const instance = lampInstances[key];
|
||||||
|
const { lampElements } = instance;
|
||||||
|
|
||||||
|
if (isPixelated) {
|
||||||
|
// Update the filter in the SVG
|
||||||
|
const filter = lampElements.svg.querySelector(
|
||||||
|
`#${lampElements.pixelateFilterId}`,
|
||||||
|
);
|
||||||
|
const composite = filter.querySelector("feComposite[width]");
|
||||||
|
const morphology = filter.querySelector("feMorphology");
|
||||||
|
|
||||||
|
composite.setAttribute("width", pixelSize);
|
||||||
|
composite.setAttribute("height", pixelSize);
|
||||||
|
morphology.setAttribute("radius", Math.floor(pixelSize / 2));
|
||||||
|
|
||||||
|
// Apply filter to container
|
||||||
|
lampElements.container.style.filter = `url(#${lampElements.pixelateFilterId})`;
|
||||||
|
} else {
|
||||||
|
// Remove filter
|
||||||
|
lampElements.container.style.filter = "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate embed code
|
||||||
|
function generateEmbedCode() {
|
||||||
|
const siteUrl = window.location.origin;
|
||||||
|
let pixelateAttrs = "";
|
||||||
|
if (pixelateInput.checked) {
|
||||||
|
pixelateAttrs = '\n data-pixelate="true"';
|
||||||
|
if (parseInt(pixelSizeInput.value) !== 4) {
|
||||||
|
pixelateAttrs += `\n data-pixel-size="${pixelSizeInput.value}"`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return `<script src="${siteUrl}/js/adoptables/lavalamp.js"
|
||||||
|
data-bg-color-1="${bgColor1Input.value}"
|
||||||
|
data-bg-color-2="${bgColor2Input.value}"
|
||||||
|
data-blob-color-1="${blobColor1Input.value}"
|
||||||
|
data-blob-color-2="${blobColor2Input.value}"
|
||||||
|
data-case-color="${caseColorInput.value}"
|
||||||
|
data-blob-count="${blobCountInput.value}"
|
||||||
|
data-speed="${speedInput.value}"
|
||||||
|
data-blob-size="${blobSizeInput.value}"${pixelateAttrs}><\/script>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event listeners
|
||||||
|
bgColor1Input.addEventListener("input", updatePreview);
|
||||||
|
bgColor2Input.addEventListener("input", updatePreview);
|
||||||
|
blobColor1Input.addEventListener("input", updatePreview);
|
||||||
|
blobColor2Input.addEventListener("input", updatePreview);
|
||||||
|
caseColorInput.addEventListener("input", updatePreview);
|
||||||
|
|
||||||
|
blobCountInput.addEventListener("input", function () {
|
||||||
|
blobCountValue.textContent = this.value;
|
||||||
|
updatePreview();
|
||||||
|
});
|
||||||
|
|
||||||
|
speedInput.addEventListener("input", function () {
|
||||||
|
speedValue.textContent = parseFloat(this.value).toFixed(1);
|
||||||
|
// Speed changes require recreating blobs for all instances
|
||||||
|
Object.keys(lampInstances).forEach((key) => {
|
||||||
|
const instance = lampInstances[key];
|
||||||
|
instance.blobs.forEach((blob) =>
|
||||||
|
instance.lampElements.blobsContainer.removeChild(blob),
|
||||||
|
);
|
||||||
|
instance.blobs = [];
|
||||||
|
});
|
||||||
|
updatePreview();
|
||||||
|
});
|
||||||
|
|
||||||
|
blobSizeInput.addEventListener("input", function () {
|
||||||
|
blobSizeValue.textContent = parseFloat(this.value).toFixed(1);
|
||||||
|
// Size changes require recreating blobs for all instances
|
||||||
|
Object.keys(lampInstances).forEach((key) => {
|
||||||
|
const instance = lampInstances[key];
|
||||||
|
instance.blobs.forEach((blob) =>
|
||||||
|
instance.lampElements.blobsContainer.removeChild(blob),
|
||||||
|
);
|
||||||
|
instance.blobs = [];
|
||||||
|
});
|
||||||
|
updatePreview();
|
||||||
|
});
|
||||||
|
|
||||||
|
pixelateInput.addEventListener("change", function () {
|
||||||
|
// Show/hide pixel size slider
|
||||||
|
if (this.checked) {
|
||||||
|
pixelSizeGroup.style.display = "block";
|
||||||
|
} else {
|
||||||
|
pixelSizeGroup.style.display = "none";
|
||||||
|
}
|
||||||
|
updatePixelation();
|
||||||
|
});
|
||||||
|
|
||||||
|
pixelSizeInput.addEventListener("input", function () {
|
||||||
|
pixelSizeValue.textContent = this.value;
|
||||||
|
updatePixelation();
|
||||||
|
});
|
||||||
|
|
||||||
|
getCodeBtn.addEventListener("click", function () {
|
||||||
|
embedCodeDisplay.textContent = generateEmbedCode();
|
||||||
|
embedCodeSection.style.display = "block";
|
||||||
|
embedCodeSection.scrollIntoView({ behavior: "smooth" });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize
|
||||||
|
initPreview();
|
||||||
|
})();
|
||||||
|
|
@ -324,12 +324,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"] {
|
|
||||||
width: auto;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
accent-color: #0096ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Custom file input styling
|
// Custom file input styling
|
||||||
input[type="file"] {
|
input[type="file"] {
|
||||||
|
|
@ -486,123 +480,15 @@
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox-label {
|
// Button styles are now in partials/form-controls.scss
|
||||||
display: flex;
|
// Only page-specific overrides here
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 0;
|
|
||||||
color: rgba(100, 180, 255, 0.8);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #66ccff;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"] {
|
|
||||||
margin: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary,
|
.btn-primary,
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: 600;
|
|
||||||
border: 1px solid rgba(0, 150, 255, 0.5);
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: -100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
transparent,
|
|
||||||
rgba(0, 150, 255, 0.3),
|
|
||||||
transparent
|
|
||||||
);
|
|
||||||
transition: left 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::before {
|
|
||||||
left: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: linear-gradient(
|
|
||||||
135deg,
|
|
||||||
rgba(0, 120, 200, 0.3) 0%,
|
|
||||||
rgba(0, 100, 180, 0.2) 100%
|
|
||||||
);
|
|
||||||
color: #66ccff;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: linear-gradient(
|
|
||||||
135deg,
|
|
||||||
rgba(0, 150, 255, 0.4) 0%,
|
|
||||||
rgba(255, 100, 0, 0.3) 100%
|
|
||||||
);
|
|
||||||
border-color: rgba(0, 150, 255, 0.8);
|
|
||||||
box-shadow:
|
|
||||||
0 0 20px rgba(0, 150, 255, 0.4),
|
|
||||||
0 0 30px rgba(255, 120, 0, 0.2);
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 0 10px rgba(0, 150, 255, 0.6);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
background: linear-gradient(
|
|
||||||
135deg,
|
|
||||||
rgba(0, 100, 180, 0.2) 0%,
|
|
||||||
rgba(0, 80, 150, 0.15) 100%
|
|
||||||
);
|
|
||||||
color: #66ccff;
|
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: linear-gradient(
|
|
||||||
135deg,
|
|
||||||
rgba(0, 120, 200, 0.3) 0%,
|
|
||||||
rgba(255, 100, 0, 0.2) 100%
|
|
||||||
);
|
|
||||||
border-color: rgba(0, 150, 255, 0.6);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 0 8px rgba(0, 150, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Custom tooltip styles
|
// Custom tooltip styles
|
||||||
|
|
|
||||||
199
assets/sass/pages/lavalamp-adoptable.scss
Normal file
199
assets/sass/pages/lavalamp-adoptable.scss
Normal file
|
|
@ -0,0 +1,199 @@
|
||||||
|
// Lava Lamp Adoptable Generator Page Styles
|
||||||
|
// Namespaced to avoid conflicts with existing navigation lava lamp styles
|
||||||
|
|
||||||
|
.adoptable-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
|
||||||
|
@include media-down(md) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: sticky;
|
||||||
|
top: 2rem;
|
||||||
|
align-self: flex-start;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
|
@include media-down(lg) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-wrapper {
|
||||||
|
border: 2px solid #333;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1rem;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(45deg, #ccc 25%, transparent 25%),
|
||||||
|
linear-gradient(-45deg, #ccc 25%, transparent 25%),
|
||||||
|
linear-gradient(45deg, transparent 75%, #ccc 75%),
|
||||||
|
linear-gradient(-45deg, transparent 75%, #ccc 75%);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
background-position:
|
||||||
|
0 0,
|
||||||
|
0 10px,
|
||||||
|
10px -10px,
|
||||||
|
-10px 0px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-flexible {
|
||||||
|
width: 40px;
|
||||||
|
height: 75px;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-100 {
|
||||||
|
width: 100px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-200 {
|
||||||
|
width: 200px;
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #666;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lavalamp-preview-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-section {
|
||||||
|
h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Page-specific overrides - make buttons full width in this layout
|
||||||
|
#lavalamp-adoptable-app .control-group button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adoptable Lava Lamp Component Styles
|
||||||
|
// Namespaced under .lavalamp-adoptable to avoid conflicts with navigation lava lamp
|
||||||
|
.lavalamp-adoptable {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.lamp-cap {
|
||||||
|
width: 60%;
|
||||||
|
height: 8%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 50% 50% 0 0;
|
||||||
|
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lamp-body {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
clip-path: polygon(20% 0, 80% 0, 100% 101%, 0% 101%);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent 0%,
|
||||||
|
rgba(255, 255, 255, 0.15) 20%,
|
||||||
|
rgba(255, 255, 255, 0.05) 40%,
|
||||||
|
transparent 60%
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blobs-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blob {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: lavalamp-float var(--duration) ease-in-out infinite;
|
||||||
|
opacity: 0.95;
|
||||||
|
mix-blend-mode: normal;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lamp-base {
|
||||||
|
width: 100%;
|
||||||
|
height: 15%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 0 0 50% 50%;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 5% rgba(255, 255, 255, 0.2),
|
||||||
|
inset 0 -2px 5% rgba(0, 0, 0, 0.5);
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animation for adoptable lava lamp blobs (different from navigation lava lamp)
|
||||||
|
@keyframes lavalamp-float {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translate(var(--start-x), var(--start-y)) scale(1);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translate(var(--mid1-x), var(--mid1-y))
|
||||||
|
scale(var(--scale1, 1.1));
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(var(--mid2-x), var(--mid2-y))
|
||||||
|
scale(var(--scale2, 0.9));
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translate(var(--mid3-x), var(--mid3-y))
|
||||||
|
scale(var(--scale3, 1.05));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -551,6 +551,45 @@
|
||||||
animation: equalizer-2 1s ease-in-out infinite 0.2s;
|
animation: equalizer-2 1s ease-in-out infinite 0.2s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Adoptables icon - gift box style
|
||||||
|
&.adoptables {
|
||||||
|
background: #000;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
|
border: 3px solid #fff;
|
||||||
|
|
||||||
|
// Ribbon vertical stripe
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -3px;
|
||||||
|
bottom: -3px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 20%;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bow on top
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -8px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 35px;
|
||||||
|
height: 18px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50% 50% 0 0;
|
||||||
|
box-shadow: -12px 0 0 #fff, 12px 0 0 #fff;
|
||||||
|
animation: bow-sparkle 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes float-blob {
|
@keyframes float-blob {
|
||||||
|
|
@ -593,6 +632,18 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes bow-sparkle {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
filter: brightness(1);
|
||||||
|
transform: translateX(-50%) scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
filter: brightness(1.2);
|
||||||
|
transform: translateX(-50%) scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Single Resource Page
|
// Single Resource Page
|
||||||
.resource-single {
|
.resource-single {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
@ -1385,133 +1436,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-form {
|
// Stats form styles are now in partials/form-controls.scss
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
@include media-up(md) {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
|
|
||||||
label {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #66ccff;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
|
||||||
text-shadow: 0 0 8px rgba(0, 150, 255, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
input,
|
|
||||||
select {
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
border: 1px solid rgba(0, 150, 255, 0.4);
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
|
||||||
background: rgba(5, 15, 30, 0.7);
|
|
||||||
color: rgba(200, 220, 255, 0.95);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: rgba(0, 150, 255, 0.7);
|
|
||||||
box-shadow:
|
|
||||||
0 0 15px rgba(0, 150, 255, 0.3),
|
|
||||||
inset 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
||||||
background: rgba(5, 15, 30, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: rgba(100, 150, 200, 0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
option {
|
|
||||||
background: rgba(5, 15, 30, 0.95);
|
|
||||||
color: rgba(200, 220, 255, 0.95);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
padding: 0.75rem 2rem;
|
|
||||||
background: linear-gradient(
|
|
||||||
135deg,
|
|
||||||
rgba(0, 120, 200, 0.3) 0%,
|
|
||||||
rgba(0, 100, 180, 0.2) 100%
|
|
||||||
);
|
|
||||||
color: #66ccff;
|
|
||||||
border: 1px solid rgba(0, 150, 255, 0.5);
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: 600;
|
|
||||||
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
align-self: flex-end;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: -100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
transparent,
|
|
||||||
rgba(0, 150, 255, 0.3),
|
|
||||||
transparent
|
|
||||||
);
|
|
||||||
transition: left 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: linear-gradient(
|
|
||||||
135deg,
|
|
||||||
rgba(0, 150, 255, 0.4) 0%,
|
|
||||||
rgba(255, 100, 0, 0.3) 100%
|
|
||||||
);
|
|
||||||
border-color: rgba(0, 150, 255, 0.8);
|
|
||||||
box-shadow:
|
|
||||||
0 0 20px rgba(0, 150, 255, 0.4),
|
|
||||||
0 0 30px rgba(255, 120, 0, 0.2);
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 0 10px rgba(0, 150, 255, 0.6);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
left: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
box-shadow: 0 0 15px rgba(0, 150, 255, 0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-results {
|
.stats-results {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
||||||
336
assets/sass/partials/_form-controls.scss
Normal file
336
assets/sass/partials/_form-controls.scss
Normal file
|
|
@ -0,0 +1,336 @@
|
||||||
|
// Reusable Form Controls for Resources Pages
|
||||||
|
// Aperture Science / Portal-themed form inputs and controls
|
||||||
|
|
||||||
|
// Form Groups
|
||||||
|
.form-group,
|
||||||
|
.control-group {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #66ccff;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||||
|
text-shadow: 0 0 8px rgba(0, 150, 255, 0.4);
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
|
||||||
|
// Override for checkbox labels (when checkbox is inside label)
|
||||||
|
&:has(input[type="checkbox"]) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-transform: none;
|
||||||
|
font-size: 1rem;
|
||||||
|
text-shadow: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="email"],
|
||||||
|
input[type="number"],
|
||||||
|
input[type="color"],
|
||||||
|
select {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border: 1px solid rgba(0, 150, 255, 0.4);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||||
|
background: rgba(5, 15, 30, 0.7);
|
||||||
|
color: rgba(200, 220, 255, 0.95);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: rgba(0, 150, 255, 0.7);
|
||||||
|
box-shadow:
|
||||||
|
0 0 15px rgba(0, 150, 255, 0.3),
|
||||||
|
inset 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||||
|
background: rgba(5, 15, 30, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: rgba(100, 150, 200, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Color inputs
|
||||||
|
input[type="color"] {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Range inputs (sliders)
|
||||||
|
input[type="range"] {
|
||||||
|
width: 100%;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
height: 6px;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(0, 100, 180, 0.3) 0%,
|
||||||
|
rgba(0, 150, 255, 0.5) 100%
|
||||||
|
);
|
||||||
|
border-radius: 3px;
|
||||||
|
outline: none;
|
||||||
|
border: 1px solid rgba(0, 150, 255, 0.4);
|
||||||
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
// Webkit browsers (Chrome, Safari, Edge)
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(0, 150, 255, 0.9) 0%,
|
||||||
|
rgba(0, 120, 200, 0.8) 100%
|
||||||
|
);
|
||||||
|
border: 2px solid rgba(0, 150, 255, 0.6);
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow:
|
||||||
|
0 0 10px rgba(0, 150, 255, 0.5),
|
||||||
|
0 2px 4px rgba(0, 0, 0, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(0, 180, 255, 1) 0%,
|
||||||
|
rgba(255, 120, 0, 0.6) 100%
|
||||||
|
);
|
||||||
|
box-shadow:
|
||||||
|
0 0 15px rgba(0, 150, 255, 0.8),
|
||||||
|
0 0 20px rgba(255, 120, 0, 0.3);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Firefox
|
||||||
|
&::-moz-range-thumb {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(0, 150, 255, 0.9) 0%,
|
||||||
|
rgba(0, 120, 200, 0.8) 100%
|
||||||
|
);
|
||||||
|
border: 2px solid rgba(0, 150, 255, 0.6);
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow:
|
||||||
|
0 0 10px rgba(0, 150, 255, 0.5),
|
||||||
|
0 2px 4px rgba(0, 0, 0, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(0, 180, 255, 1) 0%,
|
||||||
|
rgba(255, 120, 0, 0.6) 100%
|
||||||
|
);
|
||||||
|
box-shadow:
|
||||||
|
0 0 15px rgba(0, 150, 255, 0.8),
|
||||||
|
0 0 20px rgba(255, 120, 0, 0.3);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-range-track {
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(0, 100, 180, 0.3) 0%,
|
||||||
|
rgba(0, 150, 255, 0.5) 100%
|
||||||
|
);
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid rgba(0, 150, 255, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Checkboxes
|
||||||
|
input[type="checkbox"] {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
background: rgba(5, 15, 30, 0.7);
|
||||||
|
border: 2px solid rgba(0, 150, 255, 0.4);
|
||||||
|
border-radius: 3px;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(0, 150, 255, 0.5) 0%,
|
||||||
|
rgba(0, 120, 200, 0.4) 100%
|
||||||
|
);
|
||||||
|
border-color: rgba(0, 150, 255, 0.7);
|
||||||
|
box-shadow:
|
||||||
|
0 0 10px rgba(0, 150, 255, 0.4),
|
||||||
|
inset 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked::after {
|
||||||
|
content: "✓";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
color: #66ccff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-shadow: 0 0 5px rgba(0, 150, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: rgba(0, 150, 255, 0.6);
|
||||||
|
box-shadow:
|
||||||
|
0 0 8px rgba(0, 150, 255, 0.3),
|
||||||
|
inset 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: rgba(0, 150, 255, 0.8);
|
||||||
|
box-shadow:
|
||||||
|
0 0 12px rgba(0, 150, 255, 0.5),
|
||||||
|
inset 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Select dropdowns
|
||||||
|
select {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
option {
|
||||||
|
background: rgba(5, 15, 30, 0.95);
|
||||||
|
color: rgba(200, 220, 255, 0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shared button base styles
|
||||||
|
.btn-primary,
|
||||||
|
.btn-secondary {
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||||
|
border: 1px solid rgba(0, 150, 255, 0.5);
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
rgba(0, 150, 255, 0.3),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
transition: left 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::before {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Primary Button
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(0, 120, 200, 0.3) 0%,
|
||||||
|
rgba(0, 100, 180, 0.2) 100%
|
||||||
|
);
|
||||||
|
color: #66ccff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(0, 150, 255, 0.4) 0%,
|
||||||
|
rgba(255, 100, 0, 0.3) 100%
|
||||||
|
);
|
||||||
|
border-color: rgba(0, 150, 255, 0.8);
|
||||||
|
box-shadow:
|
||||||
|
0 0 20px rgba(0, 150, 255, 0.4),
|
||||||
|
0 0 30px rgba(255, 120, 0, 0.2);
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 0 10px rgba(0, 150, 255, 0.6);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Secondary Button
|
||||||
|
.btn-secondary {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(0, 100, 180, 0.2) 0%,
|
||||||
|
rgba(0, 80, 150, 0.15) 100%
|
||||||
|
);
|
||||||
|
color: #66ccff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(0, 120, 200, 0.3) 0%,
|
||||||
|
rgba(255, 100, 0, 0.2) 100%
|
||||||
|
);
|
||||||
|
border-color: rgba(0, 150, 255, 0.6);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 0 8px rgba(0, 150, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stats Form (specific layout for forms in stats apps)
|
||||||
|
.stats-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
@include media-up(md) {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
@import "animations";
|
@import "animations";
|
||||||
|
|
||||||
@import "partials/global-styles";
|
@import "partials/global-styles";
|
||||||
|
@import "partials/form-controls";
|
||||||
|
|
||||||
@import "partials/neon-sign";
|
@import "partials/neon-sign";
|
||||||
@import "partials/music";
|
@import "partials/music";
|
||||||
|
|
@ -27,6 +28,7 @@
|
||||||
@import "pages/media";
|
@import "pages/media";
|
||||||
@import "pages/resources";
|
@import "pages/resources";
|
||||||
@import "pages/button-generator";
|
@import "pages/button-generator";
|
||||||
|
@import "pages/lavalamp-adoptable";
|
||||||
|
|
||||||
@import url(https://fonts.bunny.net/css?family=abel:400|barlow-condensed:400,500|caveat:400|lato:300,300i,400,400i|neonderthaw:400);
|
@import url(https://fonts.bunny.net/css?family=abel:400|barlow-condensed:400,500|caveat:400|lato:300,300i,400,400i|neonderthaw:400);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,18 +8,26 @@ draft: true
|
||||||
---
|
---
|
||||||
|
|
||||||
- ❄️ It's been pretty cold and we've had the lightest sprinkling of snow.
|
- ❄️ It's been pretty cold and we've had the lightest sprinkling of snow.
|
||||||
|
- 🏠️ We've started getting the house ready to go on the market ahead of a move this year.
|
||||||
- 📱 I did a mobile pass on some of the pages on this website, it works a bit better on phones now.
|
- 📱 I did a mobile pass on some of the pages on this website, it works a bit better on phones now.
|
||||||
- 🟠 Added the [resources](/resources) section with a script to pull weekly last.fm stats (see example output below!)
|
- 🟠 Added the [resources](/resources) section with a script to pull weekly last.fm stats (see example output below!)
|
||||||
- 🆒 Started working on an [88x31 button creator](/resources/button-generator/), it's got a decent amount of functionality so far.
|
- 🆒 Started working on an [88x31 button creator](/resources/button-generator/), it's got a decent amount of functionality so far.
|
||||||
|
- 🎁 Added an adoptables section to the resources page, at the moment there's just a [lavalamp generator](/resources/adoptables/) there but I have plans for more!
|
||||||
|
|
||||||
## Links I Found Interesting
|
## Links I Found Interesting
|
||||||
|
|
||||||
- [enclose.horse](https://enclose.horse/) - A daily game where you have to enclose a horse in the largest possible field.
|
- [enclose.horse](https://enclose.horse/) - A daily game where you have to enclose a horse in the largest possible field.
|
||||||
|
|
||||||
## Music
|
## Weekly Listening Stats
|
||||||
|
|
||||||
## Next Week
|
**Total Tracks:** 378
|
||||||
|
|
||||||
Not necessary
|
**Top 5 Artists:**
|
||||||
|
|
||||||
|
- [Lazerhawk](https://www.last.fm/music/Lazerhawk) - 37 plays
|
||||||
|
- [Kavinsky](https://www.last.fm/music/Kavinsky) - 27 plays
|
||||||
|
- [Alien Ant Farm](https://www.last.fm/music/Alien+Ant+Farm) - 26 plays
|
||||||
|
- [Linkin Park](https://www.last.fm/music/Linkin+Park) - 15 plays
|
||||||
|
- [Perturbator](https://www.last.fm/music/Perturbator) - 15 plays
|
||||||
|
|
||||||
Until next week!
|
Until next week!
|
||||||
|
|
|
||||||
10
content/updates/2026-01-11-button-generator.md
Normal file
10
content/updates/2026-01-11-button-generator.md
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
---
|
||||||
|
title: "2026 01 11 Button Generator"
|
||||||
|
date: 2026-01-11T08:32:16Z
|
||||||
|
tags: []
|
||||||
|
description: ""
|
||||||
|
build:
|
||||||
|
render: never
|
||||||
|
---
|
||||||
|
|
||||||
|
Added an 88x31 button generator to the resources section - it can do animated gifs too!
|
||||||
|
|
@ -39,5 +39,11 @@
|
||||||
<script src="{{ "js/gif.js" | relURL }}"></script>
|
<script src="{{ "js/gif.js" | relURL }}"></script>
|
||||||
<script type="module" src="{{ "js/button-generator/main.js" | relURL }}"></script>
|
<script type="module" src="{{ "js/button-generator/main.js" | relURL }}"></script>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
<!-- Lava Lamp Adoptable - only load if page content contains lavalamp-adoptable shortcode -->
|
||||||
|
{{ if or (findRE "{{<\\s*lavalamp-adoptable" .RawContent) (findRE "{{%\\s*lavalamp-adoptable" .RawContent) }}
|
||||||
|
{{ $lavalampAdoptable := resources.Get "js/adoptables/lavalamp-adoptable.js" | resources.Minify | resources.Fingerprint }}
|
||||||
|
<script src="{{ $lavalampAdoptable.RelPermalink }}" integrity="{{ $lavalampAdoptable.Data.Integrity }}"></script>
|
||||||
|
{{ end }}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,18 @@
|
||||||
{{ $filtered := slice }}
|
{{ $filtered := slice }}
|
||||||
{{ range $remaining }}
|
{{ range $remaining }}
|
||||||
{{ $path := .RelPermalink }}
|
{{ $path := .RelPermalink }}
|
||||||
{{ if and (not (strings.Contains $path "/terminal.js")) (not (strings.Contains $path "/init.js")) (not (strings.Contains $path "/button-generator.js")) }}
|
{{ if and (not (strings.Contains $path "/terminal.js")) (not (strings.Contains $path "/init.js")) (not (strings.Contains $path "/button-generator.js")) (not (strings.Contains $path "/adoptables/")) }}
|
||||||
{{ $filtered = $filtered | append . }}
|
{{ $filtered = $filtered | append . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ $allFiles := slice $terminalShell | append $filtered | append $init | append $commandFiles | append $subfolderFiles }}
|
{{ $filteredSubfolders := slice }}
|
||||||
|
{{ range $subfolderFiles }}
|
||||||
|
{{ $path := .RelPermalink }}
|
||||||
|
{{ if not (strings.Contains $path "/adoptables/") }}
|
||||||
|
{{ $filteredSubfolders = $filteredSubfolders | append . }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ $allFiles := slice $terminalShell | append $filtered | append $init | append $commandFiles | append $filteredSubfolders }}
|
||||||
{{ $terminalBundle := $allFiles | resources.Concat "js/terminal-bundle.js" | resources.Minify | resources.Fingerprint }}
|
{{ $terminalBundle := $allFiles | resources.Concat "js/terminal-bundle.js" | resources.Minify | resources.Fingerprint }}
|
||||||
<!-- prettier-ignore-end -->
|
<!-- prettier-ignore-end -->
|
||||||
<script
|
<script
|
||||||
|
|
|
||||||
|
|
@ -122,634 +122,3 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
.adoptable-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 2rem;
|
|
||||||
margin: 2rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.adoptable-container {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-section h3 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.preview-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-wrapper {
|
|
||||||
border: 2px solid #333;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 1rem;
|
|
||||||
background-image:
|
|
||||||
linear-gradient(45deg, #ccc 25%, transparent 25%),
|
|
||||||
linear-gradient(-45deg, #ccc 25%, transparent 25%),
|
|
||||||
linear-gradient(45deg, transparent 75%, #ccc 75%),
|
|
||||||
linear-gradient(-45deg, transparent 75%, #ccc 75%);
|
|
||||||
background-size: 20px 20px;
|
|
||||||
background-position:
|
|
||||||
0 0,
|
|
||||||
0 10px,
|
|
||||||
10px -10px,
|
|
||||||
-10px 0px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-flexible {
|
|
||||||
width: 40px;
|
|
||||||
height: 75px;
|
|
||||||
padding: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-100 {
|
|
||||||
width: 100px;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-200 {
|
|
||||||
width: 200px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-label {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #666;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lavalamp-preview-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls-section h3 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-group {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-group label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-group input[type="color"] {
|
|
||||||
width: 100%;
|
|
||||||
height: 40px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-group input[type="range"] {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary,
|
|
||||||
.btn-secondary {
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: #007bff;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background: #0056b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: #6c757d;
|
|
||||||
color: white;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: #545b62;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Lava Lamp Styles */
|
|
||||||
.lavalamp-adoptable {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lavalamp-adoptable .lamp-cap {
|
|
||||||
width: 60%;
|
|
||||||
height: 8%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
border-radius: 50% 50% 0 0;
|
|
||||||
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lavalamp-adoptable .lamp-body {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
flex: 1;
|
|
||||||
clip-path: polygon(20% 0, 80% 0, 100% 101%, 0% 101%);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lavalamp-adoptable .lamp-body::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
transparent 0%,
|
|
||||||
rgba(255, 255, 255, 0.15) 20%,
|
|
||||||
rgba(255, 255, 255, 0.05) 40%,
|
|
||||||
transparent 60%
|
|
||||||
);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lavalamp-adoptable .blobs-container {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lavalamp-adoptable .blob {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: lavalamp-float var(--duration) ease-in-out infinite;
|
|
||||||
opacity: 0.95;
|
|
||||||
mix-blend-mode: normal;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lavalamp-adoptable .lamp-base {
|
|
||||||
width: 100%;
|
|
||||||
height: 15%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
border-radius: 0 0 50% 50%;
|
|
||||||
box-shadow:
|
|
||||||
inset 0 2px 5% rgba(255, 255, 255, 0.2),
|
|
||||||
inset 0 -2px 5% rgba(0, 0, 0, 0.5);
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes lavalamp-float {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
transform: translate(var(--start-x), var(--start-y)) scale(1);
|
|
||||||
}
|
|
||||||
25% {
|
|
||||||
transform: translate(var(--mid1-x), var(--mid1-y))
|
|
||||||
scale(var(--scale1, 1.1));
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translate(var(--mid2-x), var(--mid2-y))
|
|
||||||
scale(var(--scale2, 0.9));
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: translate(var(--mid3-x), var(--mid3-y))
|
|
||||||
scale(var(--scale3, 1.05));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
(function () {
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
const previewContainers = {
|
|
||||||
flex: document.getElementById("lavalamp-preview-flex"),
|
|
||||||
small: document.getElementById("lavalamp-preview-100"),
|
|
||||||
large: document.getElementById("lavalamp-preview-200"),
|
|
||||||
};
|
|
||||||
const bgColor1Input = document.getElementById("bg-color-1");
|
|
||||||
const bgColor2Input = document.getElementById("bg-color-2");
|
|
||||||
const blobColor1Input = document.getElementById("blob-color-1");
|
|
||||||
const blobColor2Input = document.getElementById("blob-color-2");
|
|
||||||
const caseColorInput = document.getElementById("case-color");
|
|
||||||
const blobCountInput = document.getElementById("blob-count");
|
|
||||||
const speedInput = document.getElementById("speed");
|
|
||||||
const blobSizeInput = document.getElementById("blob-size");
|
|
||||||
const pixelateInput = document.getElementById("pixelate");
|
|
||||||
const pixelSizeInput = document.getElementById("pixel-size");
|
|
||||||
const pixelSizeGroup = document.getElementById("pixel-size-group");
|
|
||||||
const blobCountValue = document.getElementById("blob-count-value");
|
|
||||||
const speedValue = document.getElementById("speed-value");
|
|
||||||
const blobSizeValue = document.getElementById("blob-size-value");
|
|
||||||
const pixelSizeValue = document.getElementById("pixel-size-value");
|
|
||||||
const getCodeBtn = document.getElementById("get-code-btn");
|
|
||||||
const embedCodeSection = document.getElementById("embed-code-section");
|
|
||||||
const embedCodeDisplay = document.getElementById("embed-code-display");
|
|
||||||
const copyCodeBtn = document.getElementById("copy-code-btn");
|
|
||||||
const copyStatus = document.getElementById("copy-status");
|
|
||||||
|
|
||||||
let lampInstances = {
|
|
||||||
flex: { lampElements: {}, blobs: [] },
|
|
||||||
small: { lampElements: {}, blobs: [] },
|
|
||||||
large: { lampElements: {}, blobs: [] },
|
|
||||||
};
|
|
||||||
|
|
||||||
// Initialize the preview lamps
|
|
||||||
function initPreview() {
|
|
||||||
Object.keys(previewContainers).forEach((key, index) => {
|
|
||||||
const previewContainer = previewContainers[key];
|
|
||||||
const gooFilterId = `goo-preview-${key}`;
|
|
||||||
|
|
||||||
// Create SVG filters
|
|
||||||
const svg = document.createElementNS(
|
|
||||||
"http://www.w3.org/2000/svg",
|
|
||||||
"svg",
|
|
||||||
);
|
|
||||||
svg.style.position = "absolute";
|
|
||||||
svg.style.width = "0";
|
|
||||||
svg.style.height = "0";
|
|
||||||
const pixelateFilterId = `pixelate-preview-${key}`;
|
|
||||||
svg.innerHTML = `
|
|
||||||
<defs>
|
|
||||||
<filter id="${gooFilterId}">
|
|
||||||
<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
|
|
||||||
<feColorMatrix
|
|
||||||
in="blur"
|
|
||||||
mode="matrix"
|
|
||||||
values="
|
|
||||||
1 0 0 0 0
|
|
||||||
0 1 0 0 0
|
|
||||||
0 0 1 0 0
|
|
||||||
0 0 0 18 -7"
|
|
||||||
result="goo"
|
|
||||||
/>
|
|
||||||
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
|
|
||||||
</filter>
|
|
||||||
<filter id="${pixelateFilterId}" x="0%" y="0%" width="100%" height="100%">
|
|
||||||
<feFlood x="0" y="0" height="1" width="1"/>
|
|
||||||
<feComposite width="4" height="4" class="pixelate-composite"/>
|
|
||||||
<feTile result="a"/>
|
|
||||||
<feComposite in="SourceGraphic" in2="a" operator="in"/>
|
|
||||||
<feMorphology operator="dilate" radius="2" class="pixelate-morphology"/>
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
`;
|
|
||||||
|
|
||||||
const container = document.createElement("div");
|
|
||||||
container.className = "lavalamp-adoptable";
|
|
||||||
container.style.width = "100%";
|
|
||||||
container.style.height = "100%";
|
|
||||||
|
|
||||||
const lampCap = document.createElement("div");
|
|
||||||
lampCap.className = "lamp-cap";
|
|
||||||
|
|
||||||
const lampBody = document.createElement("div");
|
|
||||||
lampBody.className = "lamp-body";
|
|
||||||
|
|
||||||
const blobsContainer = document.createElement("div");
|
|
||||||
blobsContainer.className = "blobs-container";
|
|
||||||
// Initially set the goo filter, will be adjusted after layout
|
|
||||||
blobsContainer.style.filter = `url(#${gooFilterId})`;
|
|
||||||
|
|
||||||
const lampBase = document.createElement("div");
|
|
||||||
lampBase.className = "lamp-base";
|
|
||||||
|
|
||||||
lampBody.appendChild(blobsContainer);
|
|
||||||
container.appendChild(svg);
|
|
||||||
container.appendChild(lampCap);
|
|
||||||
container.appendChild(lampBody);
|
|
||||||
container.appendChild(lampBase);
|
|
||||||
previewContainer.appendChild(container);
|
|
||||||
|
|
||||||
lampInstances[key].lampElements = {
|
|
||||||
container,
|
|
||||||
lampCap,
|
|
||||||
lampBody,
|
|
||||||
lampBase,
|
|
||||||
blobsContainer,
|
|
||||||
svg,
|
|
||||||
pixelateFilterId,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// Apply initial styles
|
|
||||||
updatePreview();
|
|
||||||
|
|
||||||
// Adjust goo filter for small lamps after layout
|
|
||||||
adjustGooFilters();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Adjust goo filters based on container width (matches embedded script logic)
|
|
||||||
function adjustGooFilters() {
|
|
||||||
Object.keys(lampInstances).forEach((key) => {
|
|
||||||
const instance = lampInstances[key];
|
|
||||||
const { lampElements } = instance;
|
|
||||||
|
|
||||||
if (!lampElements.lampBody) return;
|
|
||||||
|
|
||||||
const containerWidth = lampElements.lampBody.offsetWidth;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create a blob element for a specific instance
|
|
||||||
function createBlob(lampBody, lampHeight) {
|
|
||||||
const blob = document.createElement("div");
|
|
||||||
blob.className = "blob";
|
|
||||||
|
|
||||||
const containerWidth = lampBody.offsetWidth;
|
|
||||||
const containerHeight = lampHeight || lampBody.offsetHeight;
|
|
||||||
|
|
||||||
const blobSizeMultiplier = parseFloat(blobSizeInput.value);
|
|
||||||
const size =
|
|
||||||
(Math.random() * 0.15 + 0.25) * containerWidth * blobSizeMultiplier;
|
|
||||||
const duration = (Math.random() * 8 + 12) / parseFloat(speedInput.value);
|
|
||||||
|
|
||||||
const maxX = containerWidth - size;
|
|
||||||
const startX = Math.random() * maxX;
|
|
||||||
|
|
||||||
blob.style.width = `${size}px`;
|
|
||||||
blob.style.height = `${size}px`;
|
|
||||||
blob.style.left = `${startX}px`;
|
|
||||||
blob.style.bottom = "10px";
|
|
||||||
blob.style.position = "absolute";
|
|
||||||
|
|
||||||
blob.style.setProperty("--duration", `${duration}s`);
|
|
||||||
blob.style.setProperty("--start-x", "0px");
|
|
||||||
blob.style.setProperty("--start-y", "0px");
|
|
||||||
blob.style.setProperty(
|
|
||||||
"--mid1-x",
|
|
||||||
`${(Math.random() * 0.3 - 0.15) * containerWidth}px`,
|
|
||||||
);
|
|
||||||
blob.style.setProperty(
|
|
||||||
"--mid1-y",
|
|
||||||
`${-(Math.random() * 0.15 + 0.25) * containerHeight}px`,
|
|
||||||
);
|
|
||||||
blob.style.setProperty(
|
|
||||||
"--mid2-x",
|
|
||||||
`${(Math.random() * 0.4 - 0.2) * containerWidth}px`,
|
|
||||||
);
|
|
||||||
blob.style.setProperty(
|
|
||||||
"--mid2-y",
|
|
||||||
`${-(Math.random() * 0.2 + 0.5) * containerHeight}px`,
|
|
||||||
);
|
|
||||||
blob.style.setProperty(
|
|
||||||
"--mid3-x",
|
|
||||||
`${(Math.random() * 0.3 - 0.15) * containerWidth}px`,
|
|
||||||
);
|
|
||||||
blob.style.setProperty(
|
|
||||||
"--mid3-y",
|
|
||||||
`${-(Math.random() * 0.15 + 0.8) * containerHeight}px`,
|
|
||||||
);
|
|
||||||
blob.style.setProperty(
|
|
||||||
"--scale1",
|
|
||||||
(Math.random() * 0.3 + 1.0).toFixed(2),
|
|
||||||
);
|
|
||||||
blob.style.setProperty(
|
|
||||||
"--scale2",
|
|
||||||
(Math.random() * 0.3 + 0.85).toFixed(2),
|
|
||||||
);
|
|
||||||
blob.style.setProperty(
|
|
||||||
"--scale3",
|
|
||||||
(Math.random() * 0.3 + 0.95).toFixed(2),
|
|
||||||
);
|
|
||||||
blob.style.animationDelay = `${Math.random() * -20}s`;
|
|
||||||
|
|
||||||
return blob;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update blob count for all instances
|
|
||||||
function updateBlobCount() {
|
|
||||||
const count = parseInt(blobCountInput.value);
|
|
||||||
|
|
||||||
Object.keys(lampInstances).forEach((key) => {
|
|
||||||
const instance = lampInstances[key];
|
|
||||||
const { lampElements, blobs } = instance;
|
|
||||||
|
|
||||||
if (!lampElements.blobsContainer) return;
|
|
||||||
|
|
||||||
while (blobs.length > count) {
|
|
||||||
const blob = blobs.pop();
|
|
||||||
lampElements.blobsContainer.removeChild(blob);
|
|
||||||
}
|
|
||||||
while (blobs.length < count) {
|
|
||||||
const blob = createBlob(lampElements.lampBody);
|
|
||||||
updateBlobColors(blob);
|
|
||||||
blobs.push(blob);
|
|
||||||
lampElements.blobsContainer.appendChild(blob);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update blob colors
|
|
||||||
function updateBlobColors(blob) {
|
|
||||||
const color1 = blobColor1Input.value;
|
|
||||||
const color2 = blobColor2Input.value;
|
|
||||||
blob.style.background = `radial-gradient(circle at 30% 30%, ${color1}, ${color2})`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Adjust brightness helper
|
|
||||||
function adjustBrightness(color, percent) {
|
|
||||||
const num = parseInt(color.replace("#", ""), 16);
|
|
||||||
const amt = Math.round(2.55 * percent);
|
|
||||||
const R = (num >> 16) + amt;
|
|
||||||
const G = ((num >> 8) & 0x00ff) + amt;
|
|
||||||
const B = (num & 0x0000ff) + amt;
|
|
||||||
return (
|
|
||||||
"#" +
|
|
||||||
(
|
|
||||||
0x1000000 +
|
|
||||||
(R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
|
|
||||||
(G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
|
|
||||||
(B < 255 ? (B < 1 ? 0 : B) : 255)
|
|
||||||
)
|
|
||||||
.toString(16)
|
|
||||||
.slice(1)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update the preview for all instances
|
|
||||||
function updatePreview() {
|
|
||||||
Object.keys(lampInstances).forEach((key) => {
|
|
||||||
const instance = lampInstances[key];
|
|
||||||
const { lampElements, blobs } = instance;
|
|
||||||
|
|
||||||
if (!lampElements.lampBody) return;
|
|
||||||
|
|
||||||
// Update background gradient
|
|
||||||
lampElements.lampBody.style.background = `linear-gradient(180deg, ${bgColor1Input.value} 0%, ${bgColor2Input.value} 100%)`;
|
|
||||||
|
|
||||||
// Update cap and base color
|
|
||||||
const baseColor = caseColorInput.value;
|
|
||||||
lampElements.lampCap.style.background = `linear-gradient(180deg, ${adjustBrightness(baseColor, 40)} 0%, ${baseColor} 50%, ${adjustBrightness(baseColor, -20)} 100%)`;
|
|
||||||
lampElements.lampBase.style.background = `linear-gradient(180deg, ${baseColor} 0%, ${adjustBrightness(baseColor, -20)} 40%, ${adjustBrightness(baseColor, -40)} 100%)`;
|
|
||||||
lampElements.lampBase.style.borderTop = `1px solid ${adjustBrightness(bgColor2Input.value, -30)}`;
|
|
||||||
|
|
||||||
// Update all blob colors
|
|
||||||
blobs.forEach((blob) => updateBlobColors(blob));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update blob count
|
|
||||||
updateBlobCount();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update pixelation filters for all instances
|
|
||||||
function updatePixelation() {
|
|
||||||
const isPixelated = pixelateInput.checked;
|
|
||||||
const pixelSize = parseInt(pixelSizeInput.value);
|
|
||||||
|
|
||||||
Object.keys(lampInstances).forEach((key) => {
|
|
||||||
const instance = lampInstances[key];
|
|
||||||
const { lampElements } = instance;
|
|
||||||
|
|
||||||
if (isPixelated) {
|
|
||||||
// Update the filter in the SVG
|
|
||||||
const filter = lampElements.svg.querySelector(
|
|
||||||
`#${lampElements.pixelateFilterId}`,
|
|
||||||
);
|
|
||||||
const composite = filter.querySelector("feComposite[width]");
|
|
||||||
const morphology = filter.querySelector("feMorphology");
|
|
||||||
|
|
||||||
composite.setAttribute("width", pixelSize);
|
|
||||||
composite.setAttribute("height", pixelSize);
|
|
||||||
morphology.setAttribute("radius", Math.floor(pixelSize / 2));
|
|
||||||
|
|
||||||
// Apply filter to container
|
|
||||||
lampElements.container.style.filter = `url(#${lampElements.pixelateFilterId})`;
|
|
||||||
} else {
|
|
||||||
// Remove filter
|
|
||||||
lampElements.container.style.filter = "";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generate embed code
|
|
||||||
function generateEmbedCode() {
|
|
||||||
const siteUrl = window.location.origin;
|
|
||||||
let pixelateAttrs = "";
|
|
||||||
if (pixelateInput.checked) {
|
|
||||||
pixelateAttrs = '\n data-pixelate="true"';
|
|
||||||
if (parseInt(pixelSizeInput.value) !== 4) {
|
|
||||||
pixelateAttrs += `\n data-pixel-size="${pixelSizeInput.value}"`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return `<script src="${siteUrl}/js/adoptables/lavalamp.js"
|
|
||||||
data-bg-color-1="${bgColor1Input.value}"
|
|
||||||
data-bg-color-2="${bgColor2Input.value}"
|
|
||||||
data-blob-color-1="${blobColor1Input.value}"
|
|
||||||
data-blob-color-2="${blobColor2Input.value}"
|
|
||||||
data-case-color="${caseColorInput.value}"
|
|
||||||
data-blob-count="${blobCountInput.value}"
|
|
||||||
data-speed="${speedInput.value}"
|
|
||||||
data-blob-size="${blobSizeInput.value}"${pixelateAttrs}><\/script>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Event listeners
|
|
||||||
bgColor1Input.addEventListener("input", updatePreview);
|
|
||||||
bgColor2Input.addEventListener("input", updatePreview);
|
|
||||||
blobColor1Input.addEventListener("input", updatePreview);
|
|
||||||
blobColor2Input.addEventListener("input", updatePreview);
|
|
||||||
caseColorInput.addEventListener("input", updatePreview);
|
|
||||||
|
|
||||||
blobCountInput.addEventListener("input", function () {
|
|
||||||
blobCountValue.textContent = this.value;
|
|
||||||
updatePreview();
|
|
||||||
});
|
|
||||||
|
|
||||||
speedInput.addEventListener("input", function () {
|
|
||||||
speedValue.textContent = parseFloat(this.value).toFixed(1);
|
|
||||||
// Speed changes require recreating blobs for all instances
|
|
||||||
Object.keys(lampInstances).forEach((key) => {
|
|
||||||
const instance = lampInstances[key];
|
|
||||||
instance.blobs.forEach((blob) =>
|
|
||||||
instance.lampElements.blobsContainer.removeChild(blob),
|
|
||||||
);
|
|
||||||
instance.blobs = [];
|
|
||||||
});
|
|
||||||
updatePreview();
|
|
||||||
});
|
|
||||||
|
|
||||||
blobSizeInput.addEventListener("input", function () {
|
|
||||||
blobSizeValue.textContent = parseFloat(this.value).toFixed(1);
|
|
||||||
// Size changes require recreating blobs for all instances
|
|
||||||
Object.keys(lampInstances).forEach((key) => {
|
|
||||||
const instance = lampInstances[key];
|
|
||||||
instance.blobs.forEach((blob) =>
|
|
||||||
instance.lampElements.blobsContainer.removeChild(blob),
|
|
||||||
);
|
|
||||||
instance.blobs = [];
|
|
||||||
});
|
|
||||||
updatePreview();
|
|
||||||
});
|
|
||||||
|
|
||||||
pixelateInput.addEventListener("change", function () {
|
|
||||||
// Show/hide pixel size slider
|
|
||||||
if (this.checked) {
|
|
||||||
pixelSizeGroup.style.display = "block";
|
|
||||||
} else {
|
|
||||||
pixelSizeGroup.style.display = "none";
|
|
||||||
}
|
|
||||||
updatePixelation();
|
|
||||||
});
|
|
||||||
|
|
||||||
pixelSizeInput.addEventListener("input", function () {
|
|
||||||
pixelSizeValue.textContent = this.value;
|
|
||||||
updatePixelation();
|
|
||||||
});
|
|
||||||
|
|
||||||
getCodeBtn.addEventListener("click", function () {
|
|
||||||
embedCodeDisplay.textContent = generateEmbedCode();
|
|
||||||
embedCodeSection.style.display = "block";
|
|
||||||
embedCodeSection.scrollIntoView({ behavior: "smooth" });
|
|
||||||
});
|
|
||||||
|
|
||||||
// Initialize
|
|
||||||
initPreview();
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue