-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathexamples.html
More file actions
181 lines (172 loc) · 6.67 KB
/
examples.html
File metadata and controls
181 lines (172 loc) · 6.67 KB
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4VMEHN8W95"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4VMEHN8W95');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Examples - Document Categorization API Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="navbar container" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="index.html">
<img src="https://www.marketscanai.com/wp-content/uploads/2025/03/marketai-logo-2.png"
alt="MarketScanAI Logo">
<strong>Document Categorizer</strong> by MarketScanAI
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item" href="index.html">Home</a>
<a class="navbar-item is-active" href="examples.html">Examples</a>
<a class="navbar-item" href="request.html">Request Access</a>
<a class="navbar-item" href="about.html">About</a>
</div>
</div>
</nav>
</header>
<section class="section">
<div class="container" style="max-width: 70%; margin: 0 auto;">
<h1 class="title">Examples</h1>
<div class="box">
<main>
<!-- First Example -->
<div class="columns is-vcentered mb-6">
<div class="column is-4">
<figure class="image">
<img src="examples/example1.png" alt="Annual Tax Report Example" class="example-image" data-target="modal-example1">
</figure>
</div>
<div class="column">
<h3 class="title is-4">Annual Tax Report Analysis</h3>
<div class="content">
<p>In this example, our API analyzed an annual tax report document and:</p>
<ul>
<li>Identified document type: Tax Return Statement</li>
<li>Selected category: "Financial Documents"</li>
<li>Suggested additional taxonomies:
<ul>
<li>Tax Documentation</li>
<li>Annual Reports</li>
<li>Financial Statements</li>
<li>Regulatory Compliance</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Second Example -->
<div class="columns is-vcentered">
<div class="column is-4">
<figure class="image">
<img src="examples/example2.png" alt="Bank Payment Confirmation Example" class="example-image" data-target="modal-example2">
</figure>
</div>
<div class="column">
<h3 class="title is-4">Bank Payment Confirmation</h3>
<div class="content">
<p>The API processed a bank payment confirmation and:</p>
<ul>
<li>Identified document type: Payment Transaction Record</li>
<li>Selected category: "Banking Documents"</li>
<li>Suggested additional taxonomies:
<ul>
<li>Payment Receipts</li>
<li>Transaction Records</li>
<li>Financial Transfers</li>
<li>Account Statements</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</main>
</div>
</div>
</section>
<footer class="footer custom-footer">
<hr />
<div class="content has-text-centered is-flex is-justify-content-space-between">
<div>
<a href="https://marketscanai.com" class="footer-link">
© 2025 MarketScanAi.com
</a>
</div>
<div>
<a href="https://x.com/marketscanai" class="footer-link">
Follow us on X
</a>
</div>
</div>
</footer>
<!-- Modal for Example 1 -->
<div id="modal-example1" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<p class="image">
<img src="examples/example1.png" alt="Example 1 Full Size">
</p>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<!-- Modal for Example 2 -->
<div id="modal-example2" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<p class="image">
<img src="examples/example2.png" alt="Example 2 Full Size">
</p>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<script src="navigation.js"></script>
<script>
// Modal functionality
document.addEventListener('DOMContentLoaded', () => {
// Get all images with modal functionality
const modalImages = document.querySelectorAll('.example-image');
modalImages.forEach(image => {
image.addEventListener('click', () => {
const targetModal = document.getElementById(image.dataset.target);
targetModal.classList.add('is-active');
});
});
// Close modal functionality
const modalCloseButtons = document.querySelectorAll('.modal-background, .modal-close');
modalCloseButtons.forEach(closeButton => {
closeButton.addEventListener('click', () => {
closeButton.closest('.modal').classList.remove('is-active');
});
});
// Close modal on escape key
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
const activeModal = document.querySelector('.modal.is-active');
if (activeModal) {
activeModal.classList.remove('is-active');
}
}
});
});
</script>
</body>
</html>