Monthly Archives: May 2025

Root index file

Leave a comment

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″ />

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

<title>Ray2407 PWA Hub</title>

<!– PWA Manifest –>

<link rel=”manifest” href=”manifest.json” />

<style>

body {

font-family: Arial, sans-serif;

padding: 1rem;

max-width: 600px;

margin: auto;

}

h1 {

text-align: center;

margin-bottom: 0.5rem;

}

ul {

list-style: none;

padding-left: 0;

}

li {

margin: 0.5rem 0;

}

a {

text-decoration: none;

color: #0078D7;

font-weight: bold;

}

a:hover {

text-decoration: underline;

}

footer {

margin-top: 2rem;

text-align: center;

font-size: 0.85rem;

color: #666;

}

</style>

</head>

<body>

<h1>Ray2407 Progressive Web Apps</h1>

<p>Welcome! Below are my collection of PWAs. Click any to open:</p>

<ul>

<li><a href=”./” aria-label=”Main Code Scanner PWA”>Main Code Scanner (Root)</a></li>

<li><a href=”./1/” aria-label=”Second PWA”>1 – Notes App</a></li>

<li><a href=”./2/” aria-label=”Third PWA”>2 – Countdown Timer</a></li>

<li><a href=”./3/” aria-label=”Daily Journal”>3 – Daily Journal</a></li>

<li><a href=”./4/” aria-label=”Weather Forecast”>4 – Weather Forecast</a></li>

<li><a href=”./5/” aria-label=”Habit Tracker”>5 – Habit Tracker</a></li>

<li><a href=”./6/” aria-label=”To-Do List”>6 – To-Do List</a></li>

<li><a href=”./7/” aria-label=”Pomodoro Timer”>7 – Pomodoro Timer</a></li>

<li><a href=”./8/” aria-label=”Expense Tracker”>8 – Expense Tracker</a></li>

<li><a href=”./9/” aria-label=”Voice Recorder”>9 – Voice Recorder</a></li>

<li><a href=”./10/” aria-label=”Flashcards App”>10 – Flashcards App</a></li>

<li><a href=”./11/” aria-label=”Gratitude Journal”>11 – Gratitude Journal</a></li>

<li><a href=”./12/” aria-label=”Fitness Log”>12 – Fitness Log</a></li>

<li><a href=”./13/” aria-label=”Language Learner”>13 – Language Learner</a></li>

<li><a href=”./14/” aria-label=”Mood Tracker”>14 – Mood Tracker</a></li>

<li><a href=”./15/” aria-label=”Prayer List”>15 – Prayer List</a></li>

</ul>

<footer>© 2025 Ray2407 | Powered by PWA Technology</footer>

<script>

// Register service worker for PWA support

if (‘serviceWorker’ in navigator) {

navigator.serviceWorker.register(‘sw.js’).then(() => {

console.log(‘Service Worker registered’);

}).catch((err) => {

console.error(‘Service Worker registration failed:’, err);

});

}

</script>

</body>

</html>

PWA style news website

Leave a comment

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>News Website</title>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<meta name=”theme-color” content=”#ffffff”>

<link rel=”icon” href=”icon.png”>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

}

h1 {

color: #333;

}

.table-container {

overflow-x: auto;

}

table {

width: 100%;

border-collapse: collapse;

min-width: 600px;

}

th, td {

border: 1px solid #999;

padding: 10px;

text-align: left;

}

th {

background-color: #f2f2f2;

}

</style>

</head>

<body>

<h1>News Website</h1>

<div class=”table-container”>

<table>

<tr>

<th>What</th>

<th>When</th>

<th>Where</th>

<th>Who</th>

<th>Why</th>

</tr>

<?php

$filename = “news.csv”;

if (file_exists($filename) && ($handle = fopen($filename, “r”)) !== FALSE) {

fgetcsv($handle); // Skip header row

while (($data = fgetcsv($handle, 1000, “,”)) !== FALSE) {

echo “<tr>”;

foreach ($data as $cell) {

echo “<td>” . htmlspecialchars($cell) . “</td>”;

}

echo “</tr>”;

}

fclose($handle);

} else {

echo “<tr><td colspan=’5′>Error: news.csv not found or unreadable.</td></tr>”;

}

?>

</table>

</div>

<script>

// Inline manifest creation using Blob

const manifest = {

“name”: “News Website”,

“short_name”: “News”,

“start_url”: “./index.php”,

“display”: “standalone”,

“background_color”: “#ffffff”,

“theme_color”: “#ffffff”,

“icons”: [

{

“src”: “icon.png”,

“sizes”: “192×192”,

“type”: “image/png”

},

{

“src”: “icon.png”,

“sizes”: “512×512”,

“type”: “image/png”

}

]

};

const blob = new Blob([JSON.stringify(manifest)], { type: ‘application/json’ });

const manifestURL = URL.createObjectURL(blob);

const link = document.createElement(‘link’);

link.rel = ‘manifest’;

link.href = manifestURL;

document.head.appendChild(link);

// Register the service worker from inside this file

const swCode = `

const CACHE_NAME = ‘news-pwa-v1’;

const urlsToCache = [

‘./index.php’,

‘./news.csv’,

‘./icon.png’

];

self.addEventListener(‘install’, event => {

event.waitUntil(

caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))

);

});

self.addEventListener(‘fetch’, event => {

event.respondWith(

caches.match(event.request)

.then(response => response || fetch(event.request))

);

});

`;

const swBlob = new Blob([swCode], { type: ‘application/javascript’ });

const swUrl = URL.createObjectURL(swBlob);

if (‘serviceWorker’ in navigator) {

navigator.serviceWorker.register(swUrl)

.then(reg => console.log(‘✅ Service Worker registered:’, reg.scope))

.catch(err => console.error(‘❌ Service Worker registration failed:’, err));

}

</script>

</body>

</html>

Simple 2 file news website

Leave a comment

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>News Website</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

}

h1 {

color: #333;

}

.table-container {

overflow-x: auto;

}

table {

width: 100%;

border-collapse: collapse;

min-width: 600px;

}

th, td {

border: 1px solid #999;

padding: 10px;

text-align: left;

}

th {

background-color: #f2f2f2;

}

</style>

</head>

<body>

<h1>News Website</h1>

<div class=”table-container”>

<table>

<tr>

<th>What</th>

<th>When</th>

<th>Where</th>

<th>Who</th>

<th>Why</th>

</tr>

<?php

$filename = “news.csv”;

if (file_exists($filename) && ($handle = fopen($filename, “r”)) !== FALSE) {

// Skip the header row

fgetcsv($handle);

// Read and output the rest of the rows

while (($data = fgetcsv($handle, 1000, “,”)) !== FALSE) {

echo “<tr>”;

foreach ($data as $cell) {

echo “<td>” . htmlspecialchars($cell) . “</td>”;

}

echo “</tr>”;

}

fclose($handle);

} else {

echo “<tr><td colspan=’5′>Error: news.csv not found or unreadable.</td></tr>”;

}

?>

</table>

</div>

</body>

</html>