File size: 1,815 Bytes
93c87da
 
44154a0
 
 
 
 
 
 
93c87da
 
 
44154a0
93c87da
44154a0
 
93c87da
44154a0
 
93c87da
 
 
 
 
44154a0
e302e06
 
44154a0
 
 
 
 
93c87da
 
44154a0
 
 
 
 
93c87da
 
44154a0
 
 
 
 
 
 
 
 
93c87da
 
44154a0
 
93c87da
 
44154a0
 
 
93c87da
44154a0
93c87da
 
44154a0
 
 
 
 
 
93c87da
 
44154a0
37e0465
44154a0
 
37e0465
 
44154a0
 
 
93c87da
6c59b39
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #74ebd5, #ACB6E5);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    max-width: 700px;
    width: 90%;
    animation: fadeIn 1s ease-in;
}

h1 {
    margin-bottom: 20px;
    color: #333;
    font-weight: 600;
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

input[type="file"] {
    padding: 10px;
    background: #f5f5f5;
    border: 2px dashed #ccc;
    border-radius: 10px;
}

button {
    padding: 12px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover {
    background: #0056b3;
}

.preview img {
    max-width: 100%;
    max-height: 400px;
    border-radius: 10px;
    margin-top: 20px;
}

.output {
    margin-top: 30px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    word-break: break-word;
}

.error {
    margin-top: 20px;
    color: red;
    font-weight: bold;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px);}
    to { opacity: 1; transform: translateY(0);}
}

#result-img {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 4px;
}
#extracted-text {
  text-align: left;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ddd;
}
#spinner {
  /* Center the spinner overlay */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}