place resize anchors

src/pages/profile_page.html

@@ -88,17 +88,6 @@
             ></div>
         </div>
     </div>
-
-    <!--<div id="password_errors">
-        <div class="password_error">Error 1</div>
-        <div class="password_error">Error 2</div>
-    </div>
-
-    <div id="password_warnings">
-        <div class="password_error">Error 1</div>
-        <div class="password_error">Error 2</div>
-    </div>-->
-
     <button id="final_change_password_button">Change Password</button>
 </div>
 
@@ -107,7 +96,12 @@
         <img id="new_profile_image" alt="new-profile-image" />
         <div id="darken_part"></div>
     </div>
-    <div id="resize_photo_box"></div>
+    <div id="resize_photo_box">
+        <div id="top_left_resize" class="resize_anchor"></div>
+        <div id="top_right_resize" class="resize_anchor"></div>
+        <div id="bottom_left_resize" class="resize_anchor"></div>
+        <div id="bottom_right_resize" class="resize_anchor"></div>
+    </div>
     <button id="confirm_change">Confirm Change</button>
 </div>
 

static/profile_page.css

@@ -200,23 +200,26 @@
     z-index: 4;
 }
 
-/*
-
-#resize_photo_box:hover {
-    cursor: grab;
-}
-
-#new_profile_image {
-    height: 350px;
-    position: absolute;
-    transform: translateX(5px) translateY(5px);
-    object-fit: cover;
-}
-
-
-#image_container {
-    height: 350px;
-    width: fit-content;
-    position: absolute;
+.resize_anchor {
     background-color: red;
-}*/
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    pointer-events: none;
+}
+
+#top_left_resize {
+    transform: translateX(-50%) translateY(-50%);
+}
+
+#top_right_resize {
+    transform: translateX(340px) translateY(-50%);
+}
+
+#bottom_left_resize {
+    transform: translateY(340px) translateX(-50%);
+}
+
+#bottom_right_resize {
+    transform: translateX(340px) translateY(340px);
+}