Skip to content

Commit 3e39ea7

Browse files
rijulshrestharijulshrestha
committed
Updated applet and the html page
1 parent 2141a1b commit 3e39ea7

File tree

2 files changed

+151
-97
lines changed

2 files changed

+151
-97
lines changed

‎sites/labs/public/File-Upload-Download-Applet-Demo/NoteAppletDemo.jar‎

121 Bytes
Binary file not shown.

‎sites/labs/public/File-Upload-Download-Applet-Demo/index.html‎

Lines changed: 151 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,154 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1" />
6-
<title>CheerpJ Upload/Download Applet Demo</title>
7-
8-
<style>
9-
:root {
10-
--header-height: 60px;
11-
--bg-color: #f0f2f5;
12-
--text-color: #333;
13-
--header-bg: #ffffff;
14-
--border-color: #ddd;
15-
}
16-
17-
* {
18-
box-sizing: border-box;
19-
}
20-
21-
body {
22-
font-family:
23-
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
24-
Arial, sans-serif;
25-
margin: 0;
26-
padding: 0;
27-
background-color: var(--bg-color);
28-
color: var(--text-color);
29-
height: 100vh;
30-
display: flex;
31-
flex-direction: column;
32-
overflow: hidden;
33-
/* Prevent body scroll, let applet handle it if needed */
34-
}
35-
36-
header {
37-
background-color: var(--header-bg);
38-
border-bottom: 1px solid var(--border-color);
39-
padding: 0 20px;
40-
height: auto;
41-
min-height: var(--header-height);
42-
display: flex;
43-
flex-direction: column;
44-
justify-content: center;
45-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
46-
z-index: 10;
47-
}
48-
49-
h1 {
50-
margin: 10px 0 5px 0;
51-
font-size: 1.5rem;
52-
font-weight: 600;
53-
text-align: center;
54-
}
55-
56-
code {
57-
background: #eee;
58-
padding: 2px 4px;
59-
border-radius: 4px;
60-
font-size: 0.85em;
61-
font-family:
62-
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
63-
"Liberation Mono", monospace;
64-
}
65-
66-
#applet-container {
67-
flex: 1;
68-
/* Take remaining space */
69-
position: relative;
70-
width: 100%;
71-
height: 100%;
72-
background: #fff;
73-
}
74-
75-
cheerpj-applet {
76-
display: block;
77-
width: 100%;
78-
height: 100%;
79-
border: none;
80-
}
81-
</style>
82-
</head>
83-
84-
<body>
85-
<header>
86-
<h1>File Upload/Download Applet Demo</h1>
87-
</header>
88-
89-
<div id="applet-container">
90-
<cheerpj-applet
91-
archive="NoteAppletDemo.jar"
92-
code="NoteApplet"
93-
width="100%"
94-
height="100%"
95-
>
96-
Your browser cannot handle the applet tag!
97-
</cheerpj-applet>
98-
</div>
99-
</body>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>CheerpJ Demo | File Upload & Download</title>
8+
<!-- <script src="https://cjrtnc.leaningtech.com/4.2/loader.js"></script> -->
9+
10+
<style>
11+
:root {
12+
--cj-primary: #ff6b00;
13+
--cj-dark: #1d3557;
14+
--cj-light: #f1faee;
15+
--text-main: #333;
16+
--header-height: 64px;
17+
--footer-height: 32px;
18+
}
19+
20+
* {
21+
box-sizing: border-box;
22+
}
23+
24+
body {
25+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
26+
margin: 0;
27+
padding: 0;
28+
background-color: var(--cj-light);
29+
color: var(--text-main);
30+
height: 100vh;
31+
display: flex;
32+
flex-direction: column;
33+
overflow: hidden;
34+
}
35+
36+
header {
37+
background-color: #ffffff;
38+
border-bottom: 1px solid #e1e4e8;
39+
height: var(--header-height);
40+
display: flex;
41+
align-items: center;
42+
justify-content: space-between;
43+
padding: 0 24px;
44+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
45+
z-index: 10;
46+
}
47+
48+
.brand {
49+
display: flex;
50+
align-items: center;
51+
gap: 12px;
52+
}
53+
54+
.brand-logo {
55+
font-weight: 800;
56+
font-size: 1.5rem;
57+
color: var(--cj-dark);
58+
letter-spacing: -0.5px;
59+
}
60+
61+
.brand-logo span {
62+
color: var(--cj-primary);
63+
}
64+
65+
.demo-badge {
66+
background-color: var(--cj-primary);
67+
color: #ffffff;
68+
/* White text */
69+
padding: 4px 10px;
70+
border-radius: 999px;
71+
/* Pill shape */
72+
font-size: 0.70rem;
73+
font-weight: 700;
74+
text-transform: uppercase;
75+
letter-spacing: 0.5px;
76+
border: none;
77+
}
78+
79+
.header-content {
80+
display: flex;
81+
flex-direction: column;
82+
justify-content: center;
83+
}
84+
85+
.header-title {
86+
font-size: 1.1rem;
87+
font-weight: 600;
88+
color: var(--cj-dark);
89+
margin: 0;
90+
}
91+
92+
.header-subtitle {
93+
font-size: 0.85rem;
94+
color: #666;
95+
margin-top: 2px;
96+
}
97+
98+
#applet-container {
99+
flex: 1;
100+
position: relative;
101+
width: 100%;
102+
background: #fff;
103+
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
104+
}
105+
106+
footer {
107+
height: var(--footer-height);
108+
background: #fff;
109+
border-top: 1px solid #e1e4e8;
110+
display: flex;
111+
align-items: center;
112+
justify-content: flex-end;
113+
padding: 0 24px;
114+
font-size: 0.8rem;
115+
color: #888;
116+
}
117+
118+
cheerpj-applet {
119+
display: block;
120+
width: 100%;
121+
height: 100%;
122+
border: none;
123+
}
124+
</style>
125+
</head>
126+
127+
<body>
128+
<header>
129+
<div class="brand">
130+
<div class="brand-logo">Cheerp<span>J</span></div>
131+
<span class="demo-badge">Applet Demo</span>
132+
</div>
133+
<div class="header-content">
134+
<h1 class="header-title">File Upload & Download</h1>
135+
<div class="header-subtitle">Seamless Java Applet Integration</div>
136+
</div>
137+
</header>
138+
139+
<div id="applet-container">
140+
<cheerpj-applet archive="NoteAppletDemo.jar" code="NoteApplet" width="100%" height="100%">
141+
Your browser cannot handle the applet tag!
142+
</cheerpj-applet>
143+
</div>
144+
145+
<footer>
146+
&copy; 2026 Leaning Technologies
147+
</footer>
148+
149+
<script type="module">
150+
await cheerpjInit();
151+
</script>
152+
</body>
153+
100154
</html>

0 commit comments

Comments
 (0)