Skip to content

Commit 892a8eb

Browse files
harshil1712harshil1712
committed
update the html code
1 parent bc001f0 commit 892a8eb

File tree

1 file changed

+126
-106
lines changed

1 file changed

+126
-106
lines changed

‎src/content/docs/r2/tutorials/summarize-pdf.mdx‎

Lines changed: 126 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -74,114 +74,134 @@ Next, create a `public` directory and add an `index.html` file. The `index.html`
7474
<summary>
7575
Select to view the HTML code
7676
</summary>
77+
7778
```html
78-
<!DOCTYPE html>
79+
<!doctype html>
7980
<html lang="en">
80-
<head>
81-
<meta charset="UTF-8">
82-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
83-
<title>PDF Summarizer</title>
84-
<style>
85-
body {
86-
font-family: Arial, sans-serif;
87-
display: flex;
88-
flex-direction: column;
89-
min-height: 100vh;
90-
margin: 0;
91-
background-color: #f0f0f0;
92-
}
93-
.content {
94-
flex: 1;
95-
display: flex;
96-
justify-content: center;
97-
align-items: center;
98-
}
99-
.upload-container {
100-
background-color: white;
101-
padding: 20px;
102-
border-radius: 8px;
103-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
104-
}
105-
.upload-button {
106-
background-color: #4CAF50;
107-
color: white;
108-
padding: 10px 15px;
109-
border: none;
110-
border-radius: 4px;
111-
cursor: pointer;
112-
font-size: 16px;
113-
}
114-
.upload-button:hover {
115-
background-color: #45a049;
116-
}
117-
footer {
118-
background-color: #333;
119-
color: white;
120-
text-align: center;
121-
padding: 10px;
122-
width: 100%;
123-
}
124-
footer a {
125-
color: #4CAF50;
126-
text-decoration: none;
127-
margin: 0 10px;
128-
}
129-
footer a:hover {
130-
text-decoration: underline;
131-
}
132-
</style>
133-
</head>
134-
<body>
135-
<div class="content">
136-
<div class="upload-container">
137-
<h2>Upload PDF File</h2>
138-
<form id="uploadForm" onsubmit="return handleSubmit(event)">
139-
<input type="file" id="pdfFile" name="pdfFile" accept=".pdf" required>
140-
<button type="submit" id="uploadButton" class="upload-button">Upload</button>
141-
</form>
142-
</div>
143-
</div>
144-
145-
<footer>
146-
<a href="https://github.com/yourusername/your-repo" target="_blank">GitHub Repo</a>
147-
<a href="https://example.com/docs" target="_blank">Documentation</a>
148-
<a href="https://example.com/api" target="_blank">API Reference</a>
149-
<a href="https://example.com/community" target="_blank">Community</a>
150-
</footer>
151-
152-
<script>
153-
handleSubmit = async (event) => {
154-
event.preventDefault();
155-
156-
// Disable the upload button and show a loading message
157-
const uploadButton = document.getElementById('uploadButton');
158-
uploadButton.disabled = true;
159-
uploadButton.textContent = 'Uploading...';
160-
161-
// get form data
162-
const formData = new FormData(event.target);
163-
const file = formData.get('pdfFile');
164-
165-
if (file) {
166-
// call /api/upload endpoint and send the file
167-
await fetch('/api/upload', {
168-
method: 'POST',
169-
body: formData
170-
})
171-
172-
event.target.reset();
173-
174-
} else {
175-
console.log('No file selected');
176-
}
177-
uploadButton.disabled = false;
178-
uploadButton.textContent = 'Upload';
179-
}
180-
</script>
181-
182-
</body>
81+
<head>
82+
<meta charset="UTF-8" />
83+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
84+
<title>PDF Summarizer</title>
85+
<style>
86+
body {
87+
font-family: Arial, sans-serif;
88+
display: flex;
89+
flex-direction: column;
90+
min-height: 100vh;
91+
margin: 0;
92+
background-color: #fefefe;
93+
}
94+
.content {
95+
flex: 1;
96+
display: flex;
97+
justify-content: center;
98+
align-items: center;
99+
}
100+
.upload-container {
101+
background-color: #f0f0f0;
102+
padding: 20px;
103+
border-radius: 8px;
104+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
105+
}
106+
.upload-button {
107+
background-color: #4caf50;
108+
color: white;
109+
padding: 10px 15px;
110+
border: none;
111+
border-radius: 4px;
112+
cursor: pointer;
113+
font-size: 16px;
114+
}
115+
.upload-button:hover {
116+
background-color: #45a049;
117+
}
118+
footer {
119+
background-color: #f0f0f0;
120+
color: white;
121+
text-align: center;
122+
padding: 10px;
123+
width: 100%;
124+
}
125+
footer a {
126+
color: #333;
127+
text-decoration: none;
128+
margin: 0 10px;
129+
}
130+
footer a:hover {
131+
text-decoration: underline;
132+
}
133+
</style>
134+
</head>
135+
<body>
136+
<div class="content">
137+
<div class="upload-container">
138+
<h2>Upload PDF File</h2>
139+
<form id="uploadForm" onsubmit="return handleSubmit(event)">
140+
<input
141+
type="file"
142+
id="pdfFile"
143+
name="pdfFile"
144+
accept=".pdf"
145+
required
146+
/>
147+
<button type="submit" id="uploadButton" class="upload-button">
148+
Upload
149+
</button>
150+
</form>
151+
</div>
152+
</div>
153+
154+
<footer>
155+
<a
156+
href="https://developers.cloudflare.com/r2/buckets/event-notifications/"
157+
target="_blank"
158+
>R2 Event Notification</a
159+
>
160+
<a
161+
href="https://developers.cloudflare.com/queues/get-started/#3-create-a-queue"
162+
target="_blank"
163+
>Cloudflare Queues</a
164+
>
165+
<a href="https://developers.cloudflare.com/workers-ai/" target="_blank"
166+
>Workers AI</a
167+
>
168+
<a
169+
href="https://github.com/harshil1712/pdf-summarizer-r2-event-notification"
170+
target="_blank"
171+
>GitHub Repo</a
172+
>
173+
</footer>
174+
175+
<script>
176+
handleSubmit = async (event) => {
177+
event.preventDefault();
178+
179+
// Disable the upload button and show a loading message
180+
const uploadButton = document.getElementById("uploadButton");
181+
uploadButton.disabled = true;
182+
uploadButton.textContent = "Uploading...";
183+
184+
// get form data
185+
const formData = new FormData(event.target);
186+
const file = formData.get("pdfFile");
187+
188+
if (file) {
189+
// call /api/upload endpoint and send the file
190+
await fetch("/api/upload", {
191+
method: "POST",
192+
body: formData,
193+
});
194+
195+
event.target.reset();
196+
} else {
197+
console.log("No file selected");
198+
}
199+
uploadButton.disabled = false;
200+
uploadButton.textContent = "Upload";
201+
};
202+
</script>
203+
</body>
183204
</html>
184-
185205
```
186206

187207
</details>
@@ -190,7 +210,7 @@ To view the front-end of your application, run the following command and navigat
190210

191211
```sh
192212
npm run dev
193-
````
213+
```
194214

195215
```output
196216
⛅️ wrangler 3.80.2

0 commit comments

Comments
 (0)