index.html

<!doctype html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Drag & Drop Collage Maker</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  <link rel="stylesheet" href="https://use.typekit.net/xpy5krv.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  <meta name="description" content="Collage maker where you can drag images from you files and move, resize, rotate, move to the front, or delete to create a collage.">

</head>

<body>

  <div class="main">
    <div class="info">
      <h1>Drag & Drop Collage Builder</h1>
      <p>Choose any image from your files and drag it onto this page to build a collage.</p>
    </div>

    <div class="tools">
        <h2 style="display: inline-block; margin-right: 20px;">Select a Tool:</h2>
        <select id="toolchooser">
            <option>Move</option>
            <option>Resize</option>
            <option>Rotate</option>
            <option>Bring to Front</option>
            <option>Delete</option>
        </select>
        <button id="showInstructions"><span class="material-symbols-outlined" style="margin-right: 5px;">help</span>  Show Instructions</button>
        <div id="instructionsContainer" style="display: none;">
          <div id="instructionsContent instructions">
            <button id="closeInstructions"><span class="material-symbols-outlined">cancel</span></button>
            <ul>
              <li><strong>Moving:</strong> Click and drag an image to move it.</li>
              <li><strong>Resizing:</strong> Click and drag up on the image to make it <strong>bigger</strong> and click and drag down to make it <strong>smaller</strong>.</li>
              <li><strong>Rotating:</strong> Click and drag up to rotate image <strong>counter-clockwise</strong> and click and drag down to rotate image <strong>clockwise</strong>.</li>
              <li><strong>Bring to Front:</strong> Click an image to bring it to the front.</li>
              <li><strong>Delete:</strong> Click an image to delete it.</li>
            </ul>
          </div>
        </div>
    </div>

    <div class="saveclear">
      <button id="clearButton">Clear</button>
      <button id="saveButton">Save</button>
    </div>

  </div>

  <div class="collage" id="collage">
    <img src="img/cutecat.jpg" alt="cute cat!">
    <img src="img/cutecat2.jpg" alt="another cute cat">
    <img src="img/cutecat3.jpg" alt="omg its another cute cat">
    <img src="img/cutecat4.webp" alt="okay last cute cat hehe">
  </div>


  <script src="js/script.js"></script>
</body>

</html>
	<!doctype html>
	<html class="no-js" lang="en">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Drag & Drop Collage Maker</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
	<link rel="stylesheet" href="https://use.typekit.net/xpy5krv.css">
	<link rel="stylesheet" href="css/style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
	<meta name="description" content="Collage maker where you can drag images from you files and move, resize, rotate, move to the front, or delete to create a collage.">

	</head>

	<body>

	<div class="main">
	<div class="info">
	<h1>Drag & Drop Collage Builder</h1>
	<p>Choose any image from your files and drag it onto this page to build a collage.</p>
	</div>

	<div class="tools">
	<h2 style="display: inline-block; margin-right: 20px;">Select a Tool:</h2>
	<select id="toolchooser">
	<option>Move</option>
	<option>Resize</option>
	<option>Rotate</option>
	<option>Bring to Front</option>
	<option>Delete</option>
	</select>
	<button id="showInstructions"><span class="material-symbols-outlined" style="margin-right: 5px;">help</span> Show Instructions</button>
	<div id="instructionsContainer" style="display: none;">
	<div id="instructionsContent instructions">
	<button id="closeInstructions"><span class="material-symbols-outlined">cancel</span></button>
	<ul>
	<li><strong>Moving:</strong> Click and drag an image to move it.</li>
	<li><strong>Resizing:</strong> Click and drag up on the image to make it <strong>bigger</strong> and click and drag down to make it <strong>smaller</strong>.</li>
	<li><strong>Rotating:</strong> Click and drag up to rotate image <strong>counter-clockwise</strong> and click and drag down to rotate image <strong>clockwise</strong>.</li>
	<li><strong>Bring to Front:</strong> Click an image to bring it to the front.</li>
	<li><strong>Delete:</strong> Click an image to delete it.</li>
	</ul>
	</div>
	</div>
	</div>

	<div class="saveclear">
	<button id="clearButton">Clear</button>
	<button id="saveButton">Save</button>
	</div>

	</div>

	<div class="collage" id="collage">
	<img src="img/cutecat.jpg" alt="cute cat!">
	<img src="img/cutecat2.jpg" alt="another cute cat">
	<img src="img/cutecat3.jpg" alt="omg its another cute cat">
	<img src="img/cutecat4.webp" alt="okay last cute cat hehe">
	</div>


	<script src="js/script.js"></script>
	</body>

	</html>