Profile Preview

Use a webpage and the following script to create a Profile Preview button that will allow users to see what their profile will look like before they submit it.

Setup a webpage, I called mine Profile Preview, that has the same code as your skin's Main Profile HTML Template. When you view the webpage, it will look wrong because the profile fields do not work in webpages. This is good. Now, update the script to reflect your page number for the preview. Updated it here: `const response = await fetch("index.php?act=Pages&pid=4");`

There is some css in the script. You can edit it there or take it out. Change the icons to match icons on your skin. Take it from here!

I have not tested this script with a lot of more complex profiles, especially like radio buttons and dropdowns, so please let me know if you run into issues. This may show users looking at the webpage when they are previewing profile changes in the online list.

<script>document.addEventListener("DOMContentLoaded", async function () { // Run only on the correct page const urlParams = new URLSearchParams(window.location.search); if (!(urlParams.get("act") === "UserCP" && urlParams.get("CODE") === "01")) return; // Locate "Amend my profile" button and insert "Preview Profile" button const amendButton = document.querySelector('input[type="submit"][value="Amend my profile"]'); if (!amendButton) return; const previewButton = document.createElement("button"); previewButton.textContent = "Preview Profile"; previewButton.classList.add("forminput"); previewButton.style.marginLeft = "10px"; // Prevent form submission when clicked previewButton.addEventListener("click", function (event) { event.preventDefault(); openProfilePreview(); }); amendButton.parentNode.insertBefore(previewButton, amendButton.nextSibling); async function openProfilePreview() { try { const response = await fetch("index.php?act=Pages&pid=4"); const profileTemplate = await response.text(); const parsedTemplate = parseProfileTemplate(profileTemplate); createPreviewPopup(parsedTemplate); } catch (error) { console.error("Failed to load profile template:", error); } } function parseProfileTemplate(template) { return template.replace(/<!-- \|([\w\d_]+)\| -->/g, (match, fieldName) => { const inputElement = document.querySelector(`[name="${fieldName}"]`); if (!inputElement) return match; if (inputElement.type === "radio") { const checkedRadio = document.querySelector(`[name="${fieldName}"]:checked`); return checkedRadio ? checkedRadio.value : match; } else if (inputElement.tagName === "SELECT") { return inputElement.options[inputElement.selectedIndex]?.text || match; } else { return inputElement.value || match; } }); } function createPreviewPopup(content) { let popup = document.getElementById("profilePreviewPopup"); if (popup) popup.remove(); popup = document.createElement("div"); popup.id = "profilePreviewPopup"; popup.innerHTML = ` <div id="profilePreviewHeader"> <span id="previewTitle">Profile Preview</span> <div id="previewControls"> <button id="minimizePreview" title="Minimize">➖</button> <button id="refreshPreview" title="Refresh">🔄</button> <button id="closePreview" title="Close">✖</button> </div> </div> <iframe id="profilePreviewFrame"></iframe> `; document.body.appendChild(popup); const iframe = document.getElementById("profilePreviewFrame"); iframe.srcdoc = content; // Fix: Ensure the minimize button exists before adding event const minimizeBtn = document.getElementById("minimizePreview"); if (!minimizeBtn) { console.error("Minimize button not found!"); return; } document.getElementById("closePreview").addEventListener("click", () => popup.remove()); document.getElementById("refreshPreview").addEventListener("click", openProfilePreview); // Fix: Ensure the toggle button correctly switches between ➖ and ➕ minimizeBtn.addEventListener("click", () => { popup.classList.toggle("minimized"); if (popup.classList.contains("minimized")) { minimizeBtn.textContent = "➕"; // Show plus when minimized } else { minimizeBtn.textContent = "➖"; // Show minus when expanded } }); applyPopupStyles(); } function applyPopupStyles() { const style = document.createElement("style"); style.innerHTML = ` /* Fullscreen Popup */ #profilePreviewPopup { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); width: 80%; height: 90vh; background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 8px; overflow: hidden; z-index: 10000; display: flex; flex-direction: column; border: 1px solid #333; transition: all 0.3s ease-in-out; } /* Header */ #profilePreviewHeader { display: flex; justify-content: space-between; align-items: center; background: #222; color: white; padding: 10px 15px; font-size: 16px; } /* Right-aligned buttons */ #previewControls { display: flex; gap: 8px; } /* Buttons */ #previewControls button { background: transparent; border: none; color: white; cursor: pointer; font-size: 18px; padding: 2px 5px; transition: opacity 0.2s ease-in-out; } #previewControls button:hover { opacity: 0.7; } /* iFrame (Preview Content) */ #profilePreviewFrame { flex-grow: 1; width: 100%; height: 100%; border: none; } /* Minimized Mode (Bottom Right) */ .minimized { position: fixed !important; width: 300px !important; height: 50px !important; bottom: 10px; right: 10px; left: auto !important; top: auto !important; transform: none !important; background: #222 !important; color: white; display: flex; align-items: center; justify-content: space-between; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); cursor: pointer; overflow: hidden; } /* Hide iframe when minimized */ .minimized #profilePreviewFrame { display: none; } /* Adjust text and buttons */ .minimized #previewTitle { color: white; font-size: 14px; flex-grow: 1; text-align: left; padding-left: 10px; } .minimized #previewControls { display: flex; gap: 5px; } .minimized #previewControls button { font-size: 14px; color: white; } `; document.head.appendChild(style); } }); </script> Copy CodeReset CodeContent Locked