<head>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ padding: 20px;
+ background-color: #f9f9f9;
+ }
+
+ .container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .text-large {
+ text-align: center;
+ }
+
+ .file-upload-container {
+ border: 2px dashed #ccc;
+ padding: 20px;
+ width: 400px;
+ margin-bottom: 20px;
+ background-color: white;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+ .file-list {
+ list-style: none;
+ padding: 0;
+ }
+
+ .file-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin: 10px 0;
+ background-color: #f0f0f0;
+ padding: 10px;
+ border-radius: 4px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+ }
+ .file-item:hover {
+ transform: scale(1.05);
+ }
+ .file-item img.preview {
+ max-width: 50px;
+ max-height: 50px;
+ margin-left: 10px;
+ }
+ .file-type-icon {
+ margin-right: 10px;
+ width: 20px;
+ height: 20px;
+ }
+ .remove-btn {
+ cursor: pointer;
+ color: red;
+ font-size: 18px;
+ font-weight: bold;
+ }
+ .drag-area {
+ border: 2px dashed #66cc66;
+ padding: 60px;
+ text-align: center;
+ margin-bottom: 20px;
+ background-color: #e9f7e9;
+ border-radius: 8px;
+ cursor: pointer;
+ }
+ </style>
</head>
Created
January 13, 2025 02:28
-
-
Save GeekyGeeky/81911dd3dc847f61ecc071bb13de55c6 to your computer and use it in GitHub Desktop.
Interactive Drag and Drop
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment