SRH HQRE Website - README

This document provides information about the SRH HQRE (Symbiotic Reality Harmoniser Holographic Quantum Reality Engine) multi-page website.

Table of Contents

Overview

The SRH HQRE website is a comprehensive multi-page presentation of the Symbiotic Reality Harmoniser Holographic Quantum Reality Engine. It features detailed information about the technology, components, research, applications, and more, presented in an interactive and visually engaging format.

Note: This website is designed to be hosted on Neocities or any static web hosting service. No server-side processing is required.

Website Structure

The website consists of 10 separate HTML pages, each focusing on a specific aspect of the SRH HQRE:

Directory Structure

srh_hqre_website/
├── index.html
├── technology.html
├── components.html
├── models.html
├── simulation.html
├── mathematics.html
├── research.html
├── applications.html
├── faq.html
├── contact.html
├── css/
│   ├── base-styles.css
│   ├── enhanced-animations.css
│   ├── enhanced-colors.css
│   ├── enhanced-interactive.css
│   ├── enhanced-layout.css
│   ├── enhanced-typography.css
│   ├── performance-optimizations.css
│   ├── home-styles.css
│   ├── technology-styles.css
│   ├── components-styles.css
│   ├── models-styles.css
│   ├── simulation-styles.css
│   ├── mathematics-styles.css
│   ├── research-styles.css
│   ├── applications-styles.css
│   ├── faq-styles.css
│   └── contact-styles.css
├── js/
│   ├── navigation.js
│   ├── performance-optimizations.js
│   ├── quantum-particles.js
│   ├── interactive-diagrams.js
│   ├── 3d-models-simulations.js
│   └── mathematical-formulations.js
├── images/
│   └── (placeholder for images)
└── data/
    └── (placeholder for data files)

Features

Visual Design

Interactive Elements

Performance Optimizations

Installation

To install the SRH HQRE website on Neocities:

  1. Extract the zip file to your local computer
  2. Log in to your Neocities account
  3. Create a new folder for the SRH HQRE website (optional)
  4. Upload all files and folders, maintaining the directory structure
  5. Ensure the following folders exist:

Important: Maintaining the correct folder structure is essential for the website to function properly. All CSS files must be in the css/ folder and all JavaScript files must be in the js/ folder.

Customization

Changing Colors

The color scheme can be customized by modifying the CSS variables in css/enhanced-colors.css:

:root {
  /* Primary Colors */
  --primary-color: #4cc9f0;
  --primary-light: #7dd8f4;
  --primary-dark: #3aa8cc;
  
  /* Accent Colors */
  --accent-color: #7209b7;
  --accent-light: #8f3cc7;
  --accent-dark: #5a078f;
  /* ... */
}

Adding Content

To add new content to any page:

  1. Open the corresponding HTML file (e.g., technology.html)
  2. Locate the <main> section
  3. Add your content using the existing HTML structure as a guide

Adding Images

To add images:

  1. Upload your image files to the images/ folder
  2. Reference them in your HTML using the relative path: 
    <img src="images/your-image.jpg" alt="Description" class="your-class">
  3. For lazy loading, use the data-src attribute: 
    <img data-src="images/your-image.jpg" alt="Description" class="lazy-load">

Performance Optimizations

The website includes several performance optimizations:

Lazy Loading

Images and heavy components are lazy-loaded using Intersection Observer. To make an element lazy-loaded, add the lazy-load class:

<div class="lazy-load">Heavy content here</div>

Connection Speed Detection

The website detects the user's connection speed and adjusts content accordingly. To provide alternative content for slow connections:

<div class="heavy-resource">High-quality content</div>
<div class="light-alternative">Lightweight alternative</div>

Device Capability Detection

The website detects device capabilities (memory, CPU) and adjusts content. To provide alternatives for low-capability devices:

<div class="memory-intensive">Memory-heavy content</div>
<div class="memory-light-alternative">Lightweight alternative</div>

Browser Support

The website is compatible with all modern browsers:

For older browsers, the website includes fallbacks and graceful degradation:

Troubleshooting

Common Issues

Styles Not Loading

If styles are not loading correctly:

JavaScript Features Not Working

If interactive features are not working:

Images Not Displaying

If images are not displaying:

For any additional questions or support, please refer to the contact information provided on the Contact page.