01 / Getting started
Alderford is a fictional city portal template with three home layouts, civic information pages, and a matching administration workspace. It uses HTML, Bootstrap CSS, authored CSS, and vanilla JavaScript. No Node installation, build process, database, or server framework is needed for the demonstration.
Front-end demonstration, not a live municipal system. All records are fictional. Writes are saved only in this browser's local storage. There is no secure login, live city connection, email delivery, payment collection, or multi-user database. Do not enter real resident data.
Start the local preview
Extract the ZIP, open a terminal in the extracted project folder, and run:
python -m http.server 8000 --bind 127.0.0.1
Open http://localhost:8000 for the public site and http://localhost:8000/admin/index.html for the workspace. On systems that use python3, use that command instead. Keep the same host and port so both sides share the demo store. Stop the server with Ctrl+C.
Directly opening an HTML file may show the layout, but browser storage behavior under file:// varies. Use a local HTTP server for the complete demonstration. Static hosting works too: upload the project contents together, preserving folder paths.
Open the workspace
The demo entry page deliberately has no password form. Choose Enter demo workspace, or open the dashboard directly. A decorative login page would not secure these static files.
02 / Included pages
Public portal / 25 pages
The legacy filename projects-grid.html is retained to keep incoming template links compatible. Detail pages read their record identifier from the query string, for example blog-post.html?id=NW-101.
Administration / 14 screens
This documentation is a separate HTML page. The footer and admin help screen link here.
03 / Content & demo data
The default content is in assets/js/demo-data.js. The shared store is implemented in assets/js/core.js using the key alderford.portal.v1. Admin editors and public forms use the same data when served from the same origin.
What the workspace does
- Create, edit, remove, search, sort, paginate and export civic records.
- Publish or draft news, services, events, projects, departments and documents. Only published content appears in public directories.
- Review demo resident requests, update their status and add a public tracker note. The tracker omits contact details and private descriptions.
- View locally submitted messages and demo subscribers. These actions do not send email.
- Upload up to eight JPG, PNG or WebP images of at most 1 MB each, subject to browser storage limits. Uploads remain inside that browser, not in the project folder.
- Update the city name, contact details, tagline, main homepage headline and announcement. Export or restore a JSON backup, or reset to the original dataset.
Try a complete request journey
Open Report an issue, enter fictional details, submit, and copy the reference. Open the admin request list, edit that record, change its status, and save a public update. Return to Track a request in the same browser and enter the reference. ALD-2601 is also a seeded example.
Downloads and portability
Documents download as text files, event details export an ICS calendar entry, and admin tables export filtered CSV data. Dashboard charts are calculated from local request records; they are not visitor analytics. JSON backup/import moves the demonstration data between browsers. Clearing browser storage or resetting the demo removes local changes.
To change the starting data for every new visitor, edit demo-data.js. Admin changes are local and do not rewrite source files. Existing browsers must reset or clear the old demo store to see changed seed content. Static About, FAQ and team content is edited in its HTML file or the profile data in public.js.
04 / Design system
Raleway headings, Josefin Sans body text, sand-gold accents, deep navy, and cream sections remain the foundation. The public portal retains the top information bar, white navigation, photographic hero, overlapping utility cards, editorial sections and civic footer. The admin translates those elements into a sidebar, compact header, charts, cards, tables and modal editors.
Shared CSS variables are at the start of assets/css/portal.css. The admin adds assets/css/admin.css. SVG icons are inline and defined in core.js; there is no icon font dependency. Fonts are requested from Google Fonts through CSS, with system sans-serif fallbacks. Font binaries are not included in this package.
Focus outlines, skip links, labeled forms, reduced-motion support and responsive navigation are included. These are implementation features, not a claim of WCAG certification. Conduct an accessibility audit using final content before launch.
05 / Images, sizes & credits
About the photos: The eight demo photographs are free Pexels images, included in assets/images/ and cropped to the sizes below. Replace all photos with your own city imagery before launch. The photos are illustrative and do not depict a real city called Alderford.
Re-download the original crops (optional)
python -m pip install -r tools/requirements.txt
python tools/download-images.py
python tools/download-images.py --check
The downloader uses the recorded Pexels image URLs, verifies that source dimensions are sufficient, crops to the target aspect ratio, and writes optimized progressive JPEGs. It does not upscale small sources. Successfully saved photos are switched to local paths; failed downloads keep the remote source and local fallback. Re-run after resolving a network failure. Use --force to replace existing downloaded photos. The tool does not bypass access restrictions or change third-party usage rights.
Recommended sizes for this layout
Use 1920 × 723 px for homepage hero photography; 1920 × 426 px for inner-page banners; 1280 × 960 px for the city-introduction image; and 1000 × 680 px for editorial, event and project cards. These are layout-specific export targets, not universal Pexels requirements. Keep the subject away from crop edges because cards use object-fit: cover.
Source information is also available in assets/images/sources.json and the admin media library. The delivered offline files are fallback-hero.jpg, fallback-inner.jpg, fallback-city.jpg, and fallback-streets.jpg. The city fallback is 1200 × 900 px, while its replacement Pexels target is 1280 × 960 px.
For the current terms, review the Pexels license and each source page. The photo credits do not imply endorsement by photographers, pictured people, cities, or property owners. No Pixabay images were included.
06 / Customization guide
Branding and content
Use Settings for supported local demo branding fields. For a distributable rebrand, update the seed settings, the HTML metadata and static copy, the SVG favicon, and shared logo markup. Search across the project for Alderford to find static references that are not store-backed. The sidebar and public headings use the same design tokens, so a palette update can be made centrally.
Images
Run the image downloader before deployment to avoid relying on remote photo availability. To choose another photo, update its record in sources.json, maintain the target size, and re-run with --force. For your own local files, use your chosen file path and update the corresponding media configuration. Uploaded admin images are a local demo convenience, not a production media pipeline.
Code organization
assets/css/portal.css Shared design system + public layouts
assets/css/admin.css Matching administration workspace
assets/js/demo-data.js Fictional seed data
assets/js/core.js Store, escaping, icons, media, helpers
assets/js/public.js Public directories, details and forms
assets/js/admin.js Editors, tables, uploads, settings
assets/js/media-config.js Remote/local photo configuration
assets/images/sources.json Photo source manifest
tools/download-images.py Local photo downloader/crop utility
No legacy SCSS compile task is required. All authored CSS and JavaScript are delivered as readable source. Bootstrap is retained for the original framework foundation; the authored CSS defines the visual identity.
07 / Before connecting a real city
This package is a UI template. A live service needs an application backend and operational review. Keep the demo clearly labeled until those systems exist.
- Replace the local store with authenticated server APIs and a database. Enforce roles and permissions server-side; hiding the admin link is not security.
- Add input validation, request limits, abuse protection, audit trails and secure file storage. Handle real contact details according to the city's privacy and retention policies.
- Implement verified request ownership or another appropriate access model for tracking. Random-looking references alone are not access control.
- Add email or other notifications only through a configured, secured delivery service. Do not expose API keys in browser JavaScript.
- Review uploaded files on the server, set appropriate size and type limits, and generate optimized public image variants.
- Replace all fictional city information, dates, contacts, addresses, departments, privacy notices, and team profiles with approved content. Use official service and emergency information for the real jurisdiction.
- Complete accessibility, security, browser, content, photo-rights and mobile testing before production launch. Configure HTTPS and real monitoring.
The included contact addresses use reserved demonstration domains. Buttons do not collect payments, submit permit applications to a government, or notify an emergency service. Sample legal/privacy wording is not a ready-to-use policy.
08 / Testing & handover
The template has been checked in current Chromium-based browsers at desktop, tablet and phone widths. Always re-test after customizing, and on the browsers your audience uses.
For a manual pass, submit a fictional request, update it in the workspace, track it publicly, publish and unpublish an article, export and restore a backup, and test at mobile and desktop widths. Verify images load locally after running the downloader. Test final URLs on your chosen static host or backend implementation.
When debugging local edits, first confirm the public site and admin use the same origin. Browser storage is separated by protocol, hostname and port. Export a backup before clearing data. A storage-full error is reported rather than silently claiming a save succeeded.
09 / Credits & notices
Fonts: Raleway and Josefin Sans, loaded from Google Fonts (SIL Open Font License). CSS framework: Bootstrap (MIT License). Photography: Pexels, used under the Pexels license; photographer credits are listed in the table above.
All city names, staff roles, records and metrics in the demonstration are fictional. Photos are illustrative. This template does not represent a real public authority.