generated from tonytins/frontpage25
Initial commit
This commit is contained in:
commit
f825693b8e
6 changed files with 497 additions and 0 deletions
237
.gitignore
vendored
Normal file
237
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,237 @@
|
|||
# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,macos,linux,windows,node
|
||||
# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,macos,linux,windows,node
|
||||
|
||||
### Linux ###
|
||||
*~
|
||||
|
||||
# temporary files which can be created if a process still has a handle open of a deleted file
|
||||
.fuse_hidden*
|
||||
|
||||
# KDE directory preferences
|
||||
.directory
|
||||
|
||||
# Linux trash folder which might appear on any partition or disk
|
||||
.Trash-*
|
||||
|
||||
# .nfs files are created when an open file is removed but is still being accessed
|
||||
.nfs*
|
||||
|
||||
### macOS ###
|
||||
# General
|
||||
.DS_Store
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
|
||||
# Icon must end with two \r
|
||||
Icon
|
||||
|
||||
|
||||
# Thumbnails
|
||||
._*
|
||||
|
||||
# Files that might appear in the root of a volume
|
||||
.DocumentRevisions-V100
|
||||
.fseventsd
|
||||
.Spotlight-V100
|
||||
.TemporaryItems
|
||||
.Trashes
|
||||
.VolumeIcon.icns
|
||||
.com.apple.timemachine.donotpresent
|
||||
|
||||
# Directories potentially created on remote AFP share
|
||||
.AppleDB
|
||||
.AppleDesktop
|
||||
Network Trash Folder
|
||||
Temporary Items
|
||||
.apdisk
|
||||
|
||||
### macOS Patch ###
|
||||
# iCloud generated files
|
||||
*.icloud
|
||||
|
||||
### Node ###
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
### Node Patch ###
|
||||
# Serverless Webpack directories
|
||||
.webpack/
|
||||
|
||||
# Optional stylelint cache
|
||||
|
||||
# SvelteKit build / generate output
|
||||
.svelte-kit
|
||||
|
||||
### VisualStudioCode ###
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
!.vscode/*.code-snippets
|
||||
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
|
||||
# Built Visual Studio Code Extensions
|
||||
*.vsix
|
||||
|
||||
### VisualStudioCode Patch ###
|
||||
# Ignore all local history of files
|
||||
.history
|
||||
.ionide
|
||||
|
||||
### Windows ###
|
||||
# Windows thumbnail cache files
|
||||
Thumbs.db
|
||||
Thumbs.db:encryptable
|
||||
ehthumbs.db
|
||||
ehthumbs_vista.db
|
||||
|
||||
# Dump file
|
||||
*.stackdump
|
||||
|
||||
# Folder config file
|
||||
[Dd]esktop.ini
|
||||
|
||||
# Recycle Bin used on file shares
|
||||
$RECYCLE.BIN/
|
||||
|
||||
# Windows Installer files
|
||||
*.cab
|
||||
*.msi
|
||||
*.msix
|
||||
*.msm
|
||||
*.msp
|
||||
|
||||
# Windows shortcuts
|
||||
*.lnk
|
||||
|
||||
# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode,macos,linux,windows,node
|
||||
24
LICENSE
Normal file
24
LICENSE
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
This is free and unencumbered software released into the public domain.
|
||||
|
||||
Anyone is free to copy, modify, publish, use, compile, sell, or
|
||||
distribute this software, either in source code form or as a compiled
|
||||
binary, for any purpose, commercial or non-commercial, and by any
|
||||
means.
|
||||
|
||||
In jurisdictions that recognize copyright laws, the author or authors
|
||||
of this software dedicate any and all copyright interest in the
|
||||
software to the public domain. We make this dedication for the benefit
|
||||
of the public at large and to the detriment of our heirs and
|
||||
successors. We intend this dedication to be an overt act of
|
||||
relinquishment in perpetuity of all present and future rights to this
|
||||
software under copyright law.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
|
||||
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
|
||||
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
For more information, please refer to <https://unlicense.org>
|
||||
5
public/content/home.html
Normal file
5
public/content/home.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<h2>Welcome to the Home Page</h2>
|
||||
<p>
|
||||
This is the home page content, dynamically loaded from an external HTML
|
||||
file.
|
||||
</p>
|
||||
34
public/index.html
Normal file
34
public/index.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Frontpage 25</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Frontpage 25</h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<nav id="sidebar">
|
||||
<!-- Menu will be injected by JS -->
|
||||
</nav>
|
||||
|
||||
<section id="content">
|
||||
<h2>Welcome to the Future of the Past</h2>
|
||||
<p>
|
||||
This is a modern website with a 2003 aesthetic. You're
|
||||
welcome.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 Frontpage 25</p>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
83
public/script.js
Normal file
83
public/script.js
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
// Mobile menu toggle
|
||||
const menuToggle = document.createElement("div");
|
||||
menuToggle.className = "menu-toggle";
|
||||
menuToggle.textContent = "☰ Menu";
|
||||
document.body.insertBefore(menuToggle, document.body.firstChild);
|
||||
|
||||
const sidebar = document.getElementById("sidebar");
|
||||
|
||||
menuToggle.addEventListener("click", () => {
|
||||
sidebar.classList.toggle("active");
|
||||
});
|
||||
|
||||
// Create the menu dynamically
|
||||
const menuContainer = document.getElementById("sidebar");
|
||||
const menuData = {
|
||||
pages: [
|
||||
{
|
||||
Name: "home",
|
||||
Label: "Home",
|
||||
Contents: "content/home.html",
|
||||
},
|
||||
{
|
||||
Name: "about",
|
||||
Label: "About",
|
||||
Contents: "content/about.html",
|
||||
},
|
||||
{
|
||||
Name: "services",
|
||||
Label: "Services",
|
||||
Contents: "content/services.html",
|
||||
},
|
||||
{
|
||||
Name: "contact",
|
||||
Label: "Contact",
|
||||
Contents: "content/contact.html",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Generate the menu
|
||||
menuData.pages.forEach((page) => {
|
||||
const listContainer = document.createElement("ul");
|
||||
const list = document.createElement("li");
|
||||
const link = document.createElement("a");
|
||||
link.href = `#${page.Name}`;
|
||||
link.textContent = page.Label;
|
||||
link.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
loadPage(page.Name);
|
||||
});
|
||||
listContainer.appendChild(list);
|
||||
list.appendChild(link);
|
||||
menuContainer.appendChild(listContainer);
|
||||
});
|
||||
|
||||
// Load the content dynamically
|
||||
function loadPage(name) {
|
||||
const page = menuData.pages.find((p) => p.Name === name);
|
||||
if (!page) return;
|
||||
|
||||
fetch(page.Contents)
|
||||
.then((response) => response.text())
|
||||
.then((html) => {
|
||||
document.getElementById("content").innerHTML = html;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error loading content:", error);
|
||||
document.getElementById("content").innerHTML =
|
||||
`<p>Failed to load ${page.Label} content.</p>`;
|
||||
});
|
||||
}
|
||||
|
||||
// Handle hash changes
|
||||
window.addEventListener("hashchange", () => {
|
||||
const hash = window.location.hash.substring(1) || "home";
|
||||
loadPage(hash);
|
||||
});
|
||||
|
||||
// Load the default page
|
||||
window.addEventListener("load", () => {
|
||||
const hash = window.location.hash.substring(1) || "home";
|
||||
loadPage(hash);
|
||||
});
|
||||
114
public/style.css
Normal file
114
public/style.css
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
/* Reset some defaults */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Arial;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Trebuchet MS", sans-serif;
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #003366;
|
||||
color: #fff;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
padding: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 200px;
|
||||
background-color: #cccccc;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
background-color: #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#content {
|
||||
flex: 1;
|
||||
padding: 1em;
|
||||
background-color: #fff;
|
||||
margin-left: 1em;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
background-color: #003366;
|
||||
color: #fff;
|
||||
margin-top: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Mobile menu */
|
||||
@media (max-width: 768px) {
|
||||
main {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: block;
|
||||
background: #003366;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue