Provide context clues for user

frontend/web/css/site.css

@@ -216,12 +216,12 @@ a.desc:after {
     padding: 0;
     margin: 20px 0;
 }
-  
+
 /* Pagination item styles */
 .pagination li {
     margin: 0 5px;
 }
-  
+
 /* Pagination link styles */
 .pagination li a, .pagination li span {
     display: flex;
@@ -238,7 +238,7 @@ a.desc:after {
     font-weight: bold;
     transition: background-color 0.3s, color 0.3s;
 }
-  
+
 .pagination li.active.disabled a,
 .pagination li.disabled.active a {
     background-color: black;

frontend/web/css/upload.css

@@ -0,0 +1,22 @@
+#upload-title {
+    font-size: 2rem;
+    font-weight: bold;
+    min-height: 50px;
+    display: inline-block;
+    transition: color 0.2s ease-in-out;
+}
+
+#gesture-area {
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10+ and Edge */
+    user-select: none; /* Standard syntax */
+    -webkit-touch-callout: none; /* Prevents default callout on hold in iOS */
+}
+
+
+.gesture-area {
+    border: 2px dashed #ccc;
+    padding: 20px;
+    margin-bottom: 10px;
+    text-align: center;
+}