https://foodreceip.netlify.app/

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=8dfcec7f-2e7d-4699-a937-37a203c5285c
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <title>Gallery Index - Find Your Ideas</title>
10    <meta name="description" content="A collection of the best inspirations presented in various interesting articles.">
11    <meta name="keywords" content="gallery, inspiration, ideas, articles, thumbnail">
12    <meta name="google-site-verification" content="5lPUGwnkioxU9SYpPHNsBOcOlXgt7NJ_fxSHmkiyYKc" />
13    <link rel="stylesheet" href="/style.css">
14    <style>
15        body {
16            font-family: Arial, sans-serif;
17            margin: 0;
18            padding: 0;
19        }
20        .header, .footer {
21            text-align: center;
22            padding: 20px;
23            background-color: #f4f4f4;
24        }
25        .grid-container {
26            display: grid;
27            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
28            gap: 20px;
29            padding: 20px;
30        }
31        .grid-item {
32            text-align: center;
33            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
34            border-radius: 8px;
35            overflow: hidden;
36        }
37        .grid-item img {
38            width: 100%;
39            height: auto;
40            display: block;
41        }
42        .grid-item h3 {
43            margin: 10px 0;
44            padding: 0 10px;
45            font-size: 18px;
46        }
47    </style>
48<meta name="msvalidate.01" content="9CDF82B08FE6DF49DDDC3BF93D9A022D" /><meta name="google-site-verification" content="_ynAj8s3IYoEavbdFp786xJsD2MmXfjKXuxTuX-vx7s" /></head>
49<body>
50    <!-- Header -->
51    <header class="header">
52        <h1>Gallery Index</h1>
53        <p>A Collection of Inspirational Articles with Thumbnail Images</p>
54    </header>
55
56    <!-- Main Content -->
57    <main>
58        <div class="grid-container" id="postGrid">
59            <!-- Content will be dynamically loaded -->
60        </div>
61    </main>
62
63    <!-- Footer -->
64    <footer class="footer">
65        <p>&copy; <span id="year"></span> Find Your Ideas. All rights reserved.</p>
66    </footer>
67
68    <!-- Script -->
69   

69<script>
70    // Function to read the list of files from post.txt
71    async function loadPostFiles() {
72        const response = await fetch('/post.txt');
73        const text = await response.text();
74
75        // Split the text into an array based on lines
76        const postFiles = text.split('\n').map(line => line.trim()).filter(line => line.length > 0);
77
78        return postFiles;
79    }
80
81    // Function to fetch and display posts
82    async function displayPosts() {
83        const postGrid = document.getElementById('postGrid');
84
85        // Load post.txt file
86        const postFiles = await loadPostFiles();
87
88        // Randomize file order
89        postFiles.sort(() => Math.random() - 0.5);
90
91        // Display only 20 random files
92        const selectedFiles = postFiles.slice(0, 20);
93
94        for (const file of selectedFiles) {
95            try {
96                const response = await fetch(file);
97                const text = await response.text();
98
99                // Parse HTML to find the first image and title
100                const parser = new DOMParser();
101                const doc = parser.parseFromString(text, "text/html");
102                const img = doc.querySelector("img");
103                const title = doc.querySelector("h3")?.textContent || "No Title";
104
105                // Create grid item
106                const gridItem = document.createElement('div');
107                gridItem.classList.add('grid-item');
108
109                gridItem.innerHTML = `
110                    <a href="${file}">
111                        <img src="${img?.src || '/placeholder.jpg'}" alt="${title}">
112                        <h3>${title}</h3>
113                    </a>
114                `;
115
116                postGrid.appendChild(gridItem);
117            } catch (error) {
118                console.error(`Error loading ${file}:`, error);
119            }
120        }
121    }
122
123    // Set current year in footer
124    document.getElementById('year').textContent = new Date().getFullYear();
125
126    // Load posts on page load
127    displayPosts();
128</script>

128
129
130</body>
131</html>