Skip to content

Commit 6f0d7ee

Browse files
melvincarvalhomelvincarvalho
committed
first
1 parent bbf9dea commit 6f0d7ee

File tree

7 files changed

+1181
-0
lines changed

7 files changed

+1181
-0
lines changed

‎bookmark.html‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Bookmark App</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<script>
9+
tailwind.config = {
10+
theme: {
11+
extend: {
12+
colors: {
13+
lightblue: '#8ecae6',
14+
purple: '#9d8df1'
15+
}
16+
}
17+
}
18+
}
19+
</script>
20+
<style>
21+
body {
22+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
23+
min-height: 100vh;
24+
}
25+
.bookmark-card {
26+
transition: all 0.3s ease;
27+
}
28+
.bookmark-card:hover {
29+
transform: translateY(-5px);
30+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
31+
}
32+
</style>
33+
</head>
34+
<body class="font-sans">
35+
<div id="app" class="container mx-auto px-4 py-8"></div>
36+
37+
<script type="module">
38+
import {
39+
h,
40+
render,
41+
Component
42+
} from 'https://unpkg.com/preact@10.13.1/dist/preact.module.js'
43+
import htm from 'https://unpkg.com/htm@3.1.1/dist/htm.module.js'
44+
45+
// Initialize htm with Preact
46+
const html = htm.bind(h)
47+
48+
// Import navbar
49+
import Navbar from './navbar.js'
50+
51+
class BookmarkApp extends Component {
52+
constructor() {
53+
super()
54+
this.state = {
55+
bookmarks: [],
56+
newBookmark: { title: '', url: '' }
57+
}
58+
59+
// Load bookmarks from storage
60+
this.loadBookmarks()
61+
}
62+
63+
loadBookmarks() {
64+
// Try to load from nosdav first (if available)
65+
if (window.nosdav) {
66+
// This is a placeholder for nosdav integration
67+
// Actual implementation would depend on nosdav API
68+
console.log('nosdav available, loading bookmarks...')
69+
// For now, fall back to localStorage
70+
this.loadFromLocalStorage()
71+
} else {
72+
// Fall back to localStorage
73+
this.loadFromLocalStorage()
74+
}
75+
}
76+
77+
loadFromLocalStorage() {
78+
const savedBookmarks = localStorage.getItem('bookmarks')
79+
if (savedBookmarks) {
80+
this.setState({ bookmarks: JSON.parse(savedBookmarks) })
81+
}
82+
}
83+
84+
saveBookmarks(bookmarks) {
85+
// Try to save to nosdav first (if available)
86+
if (window.nosdav) {
87+
// This is a placeholder for nosdav integration
88+
console.log('nosdav available, saving bookmarks...')
89+
// For now, also save to localStorage as fallback
90+
localStorage.setItem('bookmarks', JSON.stringify(bookmarks))
91+
} else {
92+
// Fall back to localStorage
93+
localStorage.setItem('bookmarks', JSON.stringify(bookmarks))
94+
}
95+
}
96+
97+
handleInputChange = e => {
98+
const { name, value } = e.target
99+
this.setState({
100+
newBookmark: {
101+
...this.state.newBookmark,
102+
[name]: value
103+
}
104+
})
105+
}
106+
107+
addBookmark = e => {
108+
e.preventDefault()
109+
const { title, url } = this.state.newBookmark
110+
111+
if (!title || !url) return
112+
113+
const updatedBookmarks = [
114+
...this.state.bookmarks,
115+
{
116+
id: Date.now(),
117+
title,
118+
url: url.startsWith('http') ? url : `https://${url}`
119+
}
120+
]
121+
122+
this.setState({
123+
bookmarks: updatedBookmarks,
124+
newBookmark: { title: '', url: '' }
125+
})
126+
127+
this.saveBookmarks(updatedBookmarks)
128+
}
129+
130+
removeBookmark = id => {
131+
const updatedBookmarks = this.state.bookmarks.filter(
132+
bookmark => bookmark.id !== id
133+
)
134+
this.setState({ bookmarks: updatedBookmarks })
135+
this.saveBookmarks(updatedBookmarks)
136+
}
137+
138+
render() {
139+
return html`
140+
<${Navbar} />
141+
<div class="max-w-4xl mx-auto mt-8 text-center">
142+
<h1
143+
class="text-4xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-lightblue to-purple"
144+
>
145+
Bookmark Manager
146+
</h1>
147+
148+
<form
149+
onSubmit=${this.addBookmark}
150+
class="mb-8 p-6 bg-white rounded-lg shadow-md"
151+
>
152+
<div class="mb-4">
153+
<input
154+
type="text"
155+
name="title"
156+
value=${this.state.newBookmark.title}
157+
onInput=${this.handleInputChange}
158+
placeholder="Website Title"
159+
class="w-full md:w-2/3 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple focus:border-transparent"
160+
/>
161+
</div>
162+
<div class="mb-4">
163+
<input
164+
type="text"
165+
name="url"
166+
value=${this.state.newBookmark.url}
167+
onInput=${this.handleInputChange}
168+
placeholder="Website URL"
169+
class="w-full md:w-2/3 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple focus:border-transparent"
170+
/>
171+
</div>
172+
<button
173+
type="submit"
174+
class="px-6 py-2 bg-gradient-to-r from-lightblue to-purple text-white rounded-md hover:opacity-90 transition-opacity"
175+
>
176+
Add Bookmark
177+
</button>
178+
</form>
179+
180+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
181+
${this.state.bookmarks.map(
182+
bookmark => html`
183+
<div
184+
key=${bookmark.id}
185+
class="bookmark-card bg-white p-4 rounded-lg shadow-md"
186+
>
187+
<h3 class="text-xl font-semibold mb-2 text-gray-800">
188+
${bookmark.title}
189+
</h3>
190+
<a
191+
href=${bookmark.url}
192+
target="_blank"
193+
rel="noopener noreferrer"
194+
class="text-blue-500 hover:underline block mb-3 truncate"
195+
>
196+
${bookmark.url}
197+
</a>
198+
<button
199+
onClick=${() => this.removeBookmark(bookmark.id)}
200+
class="px-4 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors"
201+
>
202+
Remove
203+
</button>
204+
</div>
205+
`
206+
)}
207+
</div>
208+
209+
${this.state.bookmarks.length === 0 &&
210+
html`
211+
<div class="mt-8 p-6 bg-white rounded-lg shadow-md">
212+
<p class="text-gray-500">No bookmarks yet. Add some!</p>
213+
</div>
214+
`}
215+
</div>
216+
`
217+
}
218+
}
219+
220+
// Render the app
221+
render(html`<${BookmarkApp} />`, document.getElementById('app'))
222+
</script>
223+
</body>
224+
</html>

‎helloworld.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Hello World - Preact & HTM</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<script>
9+
tailwind.config = {
10+
theme: {
11+
extend: {
12+
colors: {
13+
softblue: '#a3c4f3',
14+
softpurple: '#cfbaf0'
15+
}
16+
}
17+
}
18+
}
19+
</script>
20+
<style>
21+
@keyframes pulse {
22+
0%,
23+
100% {
24+
opacity: 1;
25+
transform: scale(1);
26+
}
27+
50% {
28+
opacity: 0.9;
29+
transform: scale(1.05);
30+
}
31+
}
32+
.gradient-bg {
33+
background: linear-gradient(135deg, #a3c4f3, #cfbaf0);
34+
}
35+
.text-shadow {
36+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
37+
}
38+
.pulse-animation {
39+
animation: pulse 3s infinite ease-in-out;
40+
}
41+
</style>
42+
</head>
43+
<body class="min-h-screen flex flex-col gradient-bg">
44+
<div id="navbar"></div>
45+
46+
<div id="app" class="flex-grow flex items-center justify-center"></div>
47+
48+
<script type="module">
49+
import {
50+
h,
51+
render,
52+
Component
53+
} from 'https://unpkg.com/preact@10.13.1/dist/preact.module.js'
54+
import htm from 'https://unpkg.com/htm@3.1.1/dist/htm.module.js'
55+
import Navbar from './navbar.js'
56+
57+
// Initialize htm with Preact
58+
const html = htm.bind(h)
59+
60+
// Initialize the navbar
61+
const navbarContainer = document.getElementById('navbar')
62+
if (navbarContainer) {
63+
render(html`<${Navbar} />`, navbarContainer)
64+
}
65+
66+
// Create a simple Hello World component
67+
function HelloWorld() {
68+
return html`
69+
<div
70+
class="text-center p-8 bg-white bg-opacity-20 backdrop-blur-sm rounded-xl shadow-lg max-w-md mx-auto pulse-animation"
71+
>
72+
<h1
73+
class="text-4xl md:text-5xl font-bold mb-4 text-shadow text-white"
74+
>
75+
Hello, World!
76+
</h1>
77+
<p class="text-lg md:text-xl text-white opacity-90">
78+
Built with Preact & HTM
79+
</p>
80+
</div>
81+
`
82+
}
83+
84+
// Render the component to the DOM
85+
render(html`<${HelloWorld} />`, document.getElementById('app'))
86+
</script>
87+
</body>
88+
</html>

0 commit comments

Comments
 (0)