<div class="tweak">
<header class="notice">
            <p>This page has been loaded with minimal graphics to keep things snappy. If you'd like to things to be fancier, feel free to enhance this page.</p>
            <button id="enhance-btn" onmouseup="enhanceImgsandStyles()" onClick="enhanceImgsandStyles()">Enhance</button>
        </header>

        <main>

            <section>
                <h1>PoC - Image Replacement</h1>
                <p>I wanted to build a way for anyone who visits one of my pages to get a fast page load and offer them the ability to enhance the page and load in higher res images IF they want to do so.</p>
            </section>


            <section>
                <h2>Section Title</h2>
                <img src="https://jeremycaudle.com/floorshotJC.jpeg" class="replaceable float-left" data-rpc-src="https://jeremycaudle.com/ygg/resources/55c58e7d-5a79-4ea6-88a6-180cd6a93c80.jpeg" width="150" height="150" />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et nisl dictum, lobortis quam sit amet, blandit velit. Etiam ex arcu, tristique at nibh non, bibendum pellentesque nisi. Donec in congue erat. Sed viverra commodo purus, mollis vestibulum justo imperdiet et. Praesent nec ultricies lorem. Fusce gravida lacus non eros condimentum blandit. Sed vel elit non massa lobortis dictum. Sed sodales est in est auctor laoreet.</p>
            </section>

            <section>
                <h2>Section Title</h2>
                <img src="https://jeremycaudle.com/floorshotJC.jpeg" class="replaceable float-right" data-rpc-src="https://jeremycaudle.com/ygg/resources/55c58e7d-5a79-4ea6-88a6-180cd6a93c80.jpeg" width="150" height="150" />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et nisl dictum, lobortis quam sit amet, blandit velit. Etiam ex arcu, tristique at nibh non, bibendum pellentesque nisi. Donec in congue erat. Sed viverra commodo purus, mollis vestibulum justo imperdiet et. Praesent nec ultricies lorem. Fusce gravida lacus non eros condimentum blandit. Sed vel elit non massa lobortis dictum. Sed sodales est in est auctor laoreet.</p>
            </section>

            <section>
                <h2>Section Title</h2>
                <div class="cols">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et nisl dictum, lobortis quam sit amet, blandit velit. Etiam ex arcu, tristique at nibh non, bibendum pellentesque nisi. Donec in congue erat. Sed viverra commodo purus, mollis vestibulum justo imperdiet et. Praesent nec ultricies lorem. Fusce gravida lacus non eros condimentum blandit. Sed vel elit non massa lobortis dictum. Sed sodales est in est auctor laoreet. </p>
                    <img src="https://jeremycaudle.com/floorshotJC.jpeg" class="replaceable" data-rpc-src="https://jeremycaudle.com/ygg/resources/55c58e7d-5a79-4ea6-88a6-180cd6a93c80.jpeg" width="50" height="50" />
                </div>
            </section>


        </main>
</div>
        <script>

            function enhanceImgsandStyles() {
                let bodytag = document.getElementsByClassName('tweak');
                bodytag[0].style.opacity = "0";
                alert("Enhancing page...");
                replaceableImgs = document.getElementsByClassName('replaceable');
                const bob = "Bob";
                console.log(replaceableImgs);
                for (let i = 0; i < replaceableImgs.length; i++) {
                    // console.log(replaceableImgs[i]);
                    // alert(`There are ${replaceableImgs.length} images detected.`);
                    let repimg = replaceableImgs[i].getAttribute('data-rpc-src');
                    replaceableImgs[i].src = repimg;
                    // alert(repimg);
                    // alert(replaceableImgs[i].src);
                }
                bodytag[0].style.opacity = "100";
                let noticetext = document.getElementsByClassName('notice');
                noticetext[0].innerHTML = `<em style="text-align:center;">Now it's all fancy. I hope you like it. :)</em>`;
                return;
            }

        </script>

.tweak header {margin: 1rem; padding: .5rem 1rem; background-color: red; display: grid; grid-template-columns: 2fr minmax( 7em, .25fr);}
                .tweak main {margin: 1rem;}
                .tweak button { min-height: 2.5rem; align-self: center; border-radius: .5rem; border-width: 1px; text-transform: uppercase; font-weight:500; letter-spacing: 1px;}
                .tweak h1 {font-size: 3rem; margin-bottom: 1rem;}
                .tweak h2 {margin-top: 2rem;}
                .tweak main p {max-width: 30em;}
                .cols {columns: 2;}
                .cols p {margin: 0 0 1rem 0;}
                .float-right {float:right;}
                .float-right::after {content: ''; float:none; clear: both;}
                .float-left {float:left; margin-right: 1rem;}
                .float-left::after {content: ''; float:none; clear: both;}