57 lines
2.0 KiB
Vue
57 lines
2.0 KiB
Vue
<script setup>
|
|
useSeoMeta({
|
|
title: 'IDconvert — Convert InDesign to Word',
|
|
description: 'Convert IDML files to editable Word documents. No InDesign required. Pre-conversion scan report included.',
|
|
})
|
|
|
|
const upload = useUploadStore()
|
|
const auth = useAuthStore()
|
|
|
|
onMounted(async () => {
|
|
await auth.fetchMe()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-[calc(100vh-60px)] bg-gray-100 px-4 py-12">
|
|
<div class="max-w-[680px] mx-auto">
|
|
|
|
<!-- Hero -->
|
|
<div v-if="upload.status === 'idle' || upload.status === 'error'" class="text-center mb-8">
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-3">Convert InDesign to Word.</h1>
|
|
<p class="text-lg text-gray-500">Upload your <span class="font-mono text-sm bg-gray-200 px-1.5 py-0.5 rounded">idconvert_export.json</span> to start.</p>
|
|
</div>
|
|
|
|
<!-- Upload zone -->
|
|
<template v-if="upload.status === 'idle' || upload.status === 'error'">
|
|
<UploadZone />
|
|
|
|
<!-- Validation error -->
|
|
<Transition name="fade">
|
|
<div v-if="upload.status === 'error' && upload.error !== 'INSUFFICIENT_CREDITS'"
|
|
class="mt-4 bg-red-50 border border-red-200 rounded-lg px-4 py-3 flex items-start gap-3">
|
|
<span class="text-red-500 flex-shrink-0 mt-0.5">✕</span>
|
|
<div class="flex-1 text-sm text-gray-800">{{ upload.error }}</div>
|
|
<button @click="upload.reset()" class="text-sm text-[#1a56db] hover:underline flex-shrink-0">Try again</button>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<!-- Scanning / Scanned -->
|
|
<ScanReport v-if="['scanning', 'scanned', 'converting'].includes(upload.status)" />
|
|
|
|
<!-- Processing overlay -->
|
|
<ProcessingState v-if="upload.status === 'converting'" />
|
|
|
|
<!-- Download -->
|
|
<DownloadState v-if="upload.status === 'complete'" />
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
|
|
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
|
</style>
|