Neocities Layout

Welcome to my website!

The windows are draggable and have both minimize and maximize buttons! (it even functions on mobile)

Full Code

<div id="codeWindow1" class="draggable">
  <div class="header">
    <span class="title">sprinkles</span>
    <div class="buttons">
      <button class="minimizeBtn">-</button>
      <button class="maximizeBtn">+</button>
 
    </div>
  </div>
 
  <img src="https://i.ibb.co/SJzVGmv/Untitled-06-17-2023-09-09-21.gif" alt="Untitled-06-17-2023-09-09-21" border="0">
 
  
</div>

<div id="codeWindow2" class="draggable">
  <div class="header">
    <span class="title">Hi!</span>
    <div class="buttons">
      <button class="minimizeBtn">-</button>
      <button class="maximizeBtn">+</button>
    </div>
  </div>
 
  <h2>Welcome to my website!</h2>
 The windows are draggable and have both minimize and maximize buttons! (it even functions on mobile)
 
</div>

<div id="bottomBar">
  <button id="menuButton" class="reopenBtn">start</button>
</div>

<div id="menu">
 <center> <div id="menuContent">
  <p>  <a href="https://codepen.io/Sarah-Moses/pen/qBwZGgQ" target="_blank" rel="noopener noreferrer" style="text-decoration: none; color:#5499C7 ;">Game Template</a></p></div>
     <div id="menuContent">
  <p>  <a href="https://codepen.io/Voidlux/pen/MWRyObX" target="_blank" rel="noopener noreferrer" style="text-decoration: none;color:#5499C7 ; ">Background Changer</a></p>
   </div></center>
</div>
</body>
     
    <style> body{
  background-image: url(https://i.ibb.co/HXXjmqx/Untitled78-20240307053448.png);
  background-color: #CCCCFF ;
}
.draggable {
    position: fixed;
    width: 300px;
    height: 300px;
    background-color: lightblue;
    border: 1px solid cyan;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    color: deeppink;

}
.draggable img {
    max-width: 90%;
    max-height: 90%;
}

.header {
    background-color: deeppink;
    padding: 10px;
    cursor: move;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
  }

.title {
    font-weight: bold;
    color: lightblue;
  }

.buttons {
    float: right;
  }

button {
    border: none;
    background: hotpink;
    cursor: pointer;
    font-size: 20px;
    padding: 0 8px;
    color: cyan;
    border-radius: 10px;
  }

.reopenBtn {
    background-color: deeppink;
    border: none;
    padding: 5px;
    color: lightblue;
    border-radius: 10px;
    height: 40px;
    margin: 3px;
    display: inline-block;
    position:;
  }
.reopenBtn:hover {
    background-color: hotpink; /* Change background color on hover */
    color: cyan; /* Change text color on hover */
}
  #bottomBar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: lightblue;
    padding: 5px;
    text-align: center;
    height: 20px;
    border: solid 1px cyan;
    padding-bottom: 25px;
      display: flex;
    justify-content: flex-start;
  }

html {
    font-family: monospace;
  } /* Styles for windows and buttons are unchanged */
 
#codeWindow2{
  left:200px;
  top:100px;
}
#menu {
    position: fixed;
    bottom: 50px;
    left: 10px;
    padding: 3px;
    background-color: lightblue;
    border: 1px solid cyan;
    border-radius: 10px;
    display: none;
  color: deeppink;
  }
#menuContent {
    color: deeppink;
    font-size: 15px;
    margin-bottom: 1px; 
  border: solid 2px #85C1E9 ;
  background-color: ;
  border-radius:10px;

/* Adjust as 
  
 needed */
  }
/* Hover state */
#menuContent:hover {
    background-color: #85C1E9  ; /* Change background color on hover */
    color: white; /* Change text color on hover */
}

/* Active state */
#menuContent:active {
    background-color: darkpink; /* Change background color when clicked */
}
*::-webkit-scrollbar {
        width: 10px; /* Width of the scrollbar */
    }

*::-webkit-scrollbar-track {
        background: lightblue; /* Color of the track */
    }

*::-webkit-scrollbar-thumb {
        background: deeppink; /* Color of the handle */
    }

*::-webkit-scrollbar-thumb:hover {
        background: hotpink; /* Color of the handle on hover */
    }

*::-webkit-scrollbar-corner {
        background: transparent; /* Color of the corner */
    }
    
    /* Optional: Hide scrollbar when not scrolling */
    *::-webkit-scrollbar-thumb:vertical {
        min-height: 30px; /* Set a minimum height for the scrollbar handle */
    }
textarea{
  width:90%;
  height:90px;
}
     </style>
     
   
     <script>// Make the windows draggable
  const windows = document.querySelectorAll(".draggable");
  windows.forEach(makeDraggable);

function makeDraggable(element) {
    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

element.querySelector('.header').addEventListener('mousedown', dragMouseDown);

function dragMouseDown(e) {
      e.preventDefault();
      pos3 = e.clientX;
      pos4 = e.clientY;
      document.addEventListener('mousemove', elementDrag);
      document.addEventListener('mouseup', closeDragElement);
    }

function elementDrag(e) {
      e.preventDefault();
      pos1 = pos3 - e.clientX;
      pos2 = pos4 - e.clientY;
      pos3 = e.clientX;
      pos4 = e.clientY;
      element.style.top = (element.offsetTop - pos2) + "px";
      element.style.left = (element.offsetLeft - pos1) + "px";
    }

function closeDragElement() {
      document.removeEventListener('mousemove', elementDrag);
      document.removeEventListener('mouseup', closeDragElement);
    }

// For mobile devices
    element.querySelector('.header').addEventListener('touchstart', touchStart, { passive: false });

function touchMove(e) {
      if (e.targetTouches.length === 1) {
        const touch = e.targetTouches[0];
        element.style.left = (touch.clientX - pos1) + 'px';
        element.style.top = (touch.clientY - pos2) + 'px';
      }
    }

element.addEventListener('touchend', touchEnd);

function touchEnd() {
      element.removeEventListener('touchmove', touchMove);
    }
  }

// Minimize and Maximize functionality
  const minimizeButtons = document.querySelectorAll(".minimizeBtn");
  const maximizeButtons = document.querySelectorAll(".maximizeBtn");

minimizeButtons.forEach(button => {
    button.addEventListener("click", function () {
      const windowToMinimize = this.closest(".draggable");
      windowToMinimize.style.display = "none";

// Create and append a reopen button to the bottom bar
      const bottomBar = document.getElementById("bottomBar");
      const reopenBtn = document.createElement("button");
      reopenBtn.textContent = windowToMinimize.querySelector(".title").textContent;
      reopenBtn.classList.add("reopenBtn");
      reopenBtn.addEventListener("click", function () {
        windowToMinimize.style.display = "block";
        this.remove();
      });
      bottomBar.appendChild(reopenBtn);
    });
  });

maximizeButtons.forEach(button => {
    button.addEventListener("click", function () {
      const windowToMaximize = this.closest(".draggable");
      if (!windowToMaximize.classList.contains('maximized')) {
        windowToMaximize.classList.add('maximized');
        windowToMaximize.dataset.originalWidth = windowToMaximize.style.width;
        windowToMaximize.dataset.originalHeight = windowToMaximize.style.height;
        windowToMaximize.dataset.originalTop = windowToMaximize.style.top;
        windowToMaximize.dataset.originalLeft = windowToMaximize.style.left;

const body = document.body;
        const html = document.documentElement;
        const maxHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
        const maxWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);

windowToMaximize.style.top = "0";
        windowToMaximize.style.left = "0";
        windowToMaximize.style.width = maxWidth + "px";
        windowToMaximize.style.height = maxHeight + "px";
      } else {
        windowToMaximize.classList.remove('maximized');
        windowToMaximize.style.width = windowToMaximize.dataset.originalWidth;
        windowToMaximize.style.height = windowToMaximize.dataset.originalHeight;
        windowToMaximize.style.top = windowToMaximize.dataset.originalTop;
        windowToMaximize.style.left = windowToMaximize.dataset.originalLeft;
      }
    });
  });
const menuButton = document.getElementById("menuButton");
const menu = document.getElementById("menu");

menuButton.addEventListener("click", function() {
  menu.style.display = menu.style.display === "none" ? "block" : "none";
     });</script>