bring FileUploadPage top the new layout

frontend/src/locales/de

@@ -21,6 +21,18 @@ export default {
     dontHaveAccount: 'Noch kein Konto?',
     registerHere: 'Hier registrieren'
   },
+  import: {
+    title: 'Daten importieren',
+    description: 'Laden Sie Charakterdaten aus VTT- oder CSV-Dateien hoch.',
+    charVTT: 'Charakter VTT',
+    charCSV: 'Charakter CSV (optional)',
+    vttHelp: 'JSON- oder CSV-Datei mit Charakterdaten',
+    csvHelp: 'Optionale CSV-Datei mit zusätzlichen Daten',
+    upload: 'Hochladen',
+    invalidFileType: 'Ungültiger Dateityp. Nur .csv und .json Dateien sind erlaubt.',
+    uploadSuccess: 'Dateien erfolgreich hochgeladen!',
+    uploadFailed: 'Fehler beim Hochladen der Dateien.'
+  },
   DatasheetView:'Datenblatt',
   SkillView: 'Fertigkeiten',
   WeaponView: 'Waffen',

frontend/src/locales/en

@@ -21,6 +21,18 @@ export default {
     dontHaveAccount: "Don't have an account?",
     registerHere: 'Register here'
   },
+  import: {
+    title: 'Import Data',
+    description: 'Upload character data from VTT or CSV files.',
+    charVTT: 'Character VTT',
+    charCSV: 'Character CSV (optional)',
+    vttHelp: 'JSON or CSV file with character data',
+    csvHelp: 'Optional CSV file with additional data',
+    upload: 'Upload',
+    invalidFileType: 'Invalid file type. Only .csv and .json files are allowed.',
+    uploadSuccess: 'Files uploaded successfully!',
+    uploadFailed: 'Failed to upload files.'
+  },
   DatasheetView:'Datasheet',
   SkillView: 'Skills',
   WeaponView: 'Weapons',

frontend/src/views/FileUploadPage.vue

@@ -1,20 +1,56 @@
 <template>
-  <div class="upload-page">
+  <div class="fullwidth-page">
-    <h2>Import Data</h2>
+    <div class="card" style="max-width: 600px; margin: 40px auto;">
-    <br/>
+      <div class="page-header">
-    <form @submit.prevent="handleUpload">
+        <h2>{{ $t('import.title') }}</h2>
-      <div>
-        <label for="file_vtt">Char VTT:</label>
-        <input type="file" id="file_vtt" @change="onFileChange($event, 1)" />
       </div>
-      <div>
+      
-        <label for="file_csv">Char CSV (optional):</label>
+      <p class="text-muted">{{ $t('import.description') }}</p>
-        <input type="file" id="file_csv" @change="onFileChange($event, 2)" />
+      
+      <form @submit.prevent="handleUpload">
+        <div class="form-group">
+          <label for="file_vtt">{{ $t('import.charVTT') }}</label>
+          <input 
+            type="file" 
+            id="file_vtt" 
+            class="form-control" 
+            @change="onFileChange($event, 1)"
+            accept=".json,.csv"
+            required
+          />
+          <small class="form-text">{{ $t('import.vttHelp') }}</small>
+        </div>
+        
+        <div class="form-group">
+          <label for="file_csv">{{ $t('import.charCSV') }}</label>
+          <input 
+            type="file" 
+            id="file_csv" 
+            class="form-control" 
+            @change="onFileChange($event, 2)"
+            accept=".json,.csv"
+          />
+          <small class="form-text">{{ $t('import.csvHelp') }}</small>
+        </div>
+        
+        <button 
+          type="submit" 
+          class="btn btn-primary" 
+          style="width: 100%; margin-top: 10px;"
+          :disabled="!file_vtt"
+        >
+          {{ $t('import.upload') }}
+        </button>
+      </form>
+      
+      <div v-if="error" class="badge badge-danger" style="width: 100%; margin-top: 15px; text-align: center; display: block;">
+        {{ error }}
       </div>
-      <button type="submit" :disabled="!file_vtt">Upload</button>
+      
-    </form>
+      <div v-if="success" class="badge badge-success" style="width: 100%; margin-top: 15px; text-align: center; display: block;">
-    <p v-if="error" class="error">{{ error }}</p>
+        {{ success }}
-    <p v-if="success" class="success">{{ success }}</p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -43,7 +79,7 @@ export default {
 
       // Validate file type
       if (!this.isValidFileType(file)) {
-        this.error = "Invalid file type. Only .csv and .json files are allowed.";
+        this.error = this.$t('import.invalidFileType');
         return;
       }
       this.error = ""; // Clear any previous error
@@ -67,10 +103,10 @@ export default {
           },
         });
 
-        this.success = "Files uploaded successfully!";
+        this.success = this.$t('import.uploadSuccess');
         this.error = "";
       } catch (err) {
-        this.error = err.response?.data?.error || "Failed to upload files.";
+        this.error = err.response?.data?.error || this.$t('import.uploadFailed');
         this.success = "";
       }
     },
@@ -78,17 +114,16 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
-.upload-page {
+.text-muted {
-  padding: var(--padding-lg);
+  color: #6c757d;
-  margin-top: 2%;
+  margin-bottom: 20px;
 }
 
-.error {
+.form-text {
-  color: red;
+  display: block;
-}
+  margin-top: 0.25rem;
-
+  color: #6c757d;
-.success {
+  font-size: 0.875rem;
-  color: green;
 }
 </style>