Create HAR index html, css, tsx and js #2

mcochranca · 2024-10-10T21:12:00Z

1. index.html

This is the main HTML file that serves as the entry point of your application.

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta Tags -->
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Page Title -->
  <title>Human Activity Recognition (HAR) System</title>

  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" />

  <!-- Preconnect for Performance Optimization -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

  <!-- Google Fonts (Optional) -->
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
    rel="stylesheet"
  />

  <!-- Meta Tags for SEO -->
  <meta
    name="description"
    content="A scalable, ontology-based, fully probabilistic Human Activity Recognition system."
  />
  <meta
    name="keywords"
    content="Human Activity Recognition, HAR, Ontology, Probabilistic Reasoning, AI, Machine Learning"
  />

  <!-- Open Graph Meta Tags for Social Sharing (Optional) -->
  <meta property="og:title" content="Human Activity Recognition (HAR) System" />
  <meta
    property="og:description"
    content="A scalable, ontology-based, fully probabilistic Human Activity Recognition system."
  />
  <meta property="og:image" content="/images/har-system-thumbnail.png" />
  <meta property="og:url" content="https://yourdomain.com" />
  <meta name="twitter:card" content="summary_large_image" />
</head>
<body class="antialiased text-gray-800">
  <!-- Root Div for React -->
  <div id="root"></div>

  <!-- Vite Script -->
  <!-- The script tag is automatically injected by Vite during development and build -->
</body>
</html>

Notes:

Fonts and Styles:
- Uses the "Inter" font for a modern look.
- Tailwind CSS styles are included via index.css imported in your React app.
SEO and Social Sharing:
- Meta tags for search engine optimization.
- Open Graph tags for better link previews on social media.
Accessibility:
- The lang attribute is set to "en" for English.
- The viewport meta tag ensures responsiveness on mobile devices.

2. index.css

This CSS file includes Tailwind CSS directives and custom styles for your application.

/* src/index.css */

/* Import Tailwind CSS directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Global Styles */

/* Body Styles */
body {
  @apply bg-gray-50 text-gray-800 font-sans;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-semibold text-gray-900;
}

/* Links */
a {
  @apply text-blue-600 hover:text-blue-800 transition-colors duration-200;
}

/* Loader Styles */
.loader {
  border-top-color: #3490dc; /* Customize the color as needed */
  animation: spinner 1.5s linear infinite;
  border: 8px solid #f3f3f3; /* Light gray border */
  border-radius: 50%;
  width: 64px;
  height: 64px;
  margin: auto;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

/* Custom Button Styles (Optional) */
.button {
  @apply inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.button-primary {
  @apply text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
}

.button-secondary {
  @apply text-blue-700 bg-blue-100 hover:bg-blue-200 focus:ring-blue-500;
}

Notes:

Tailwind CSS Directives:
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
Custom Styles:
- Global styles for body, headings, and links.
- Loader styles for the loading spinner.
- Optional custom button styles using Tailwind's @apply directive.

3. index.tsx

This is the entry point of your React application.

// src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css'; // Import Tailwind CSS and custom styles

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Notes:

Imports:
- React and ReactDOM for rendering the app.
- App component from ./App.
- index.css for global styles.
Rendering:
- Uses ReactDOM.render to mount the App component into the root div.
- Wrapped in React.StrictMode for highlighting potential problems.

4. App.tsx

The main application component that sets up routing and context providers.

// src/App.tsx

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import { AuthProvider, useAuth } from './context/AuthContext';
import LoadingSpinner from './components/LoadingSpinner';
import ErrorBoundary from './components/ErrorBoundary';

// Lazy-loaded components
const UserDashboard = lazy(() => import('./pages/UserDashboard'));
const AdminDashboard = lazy(() => import('./pages/AdminDashboard'));
const AxiomEditor = lazy(() => import('./pages/AxiomEditor'));
const LoginPage = lazy(() => import('./pages/LoginPage'));
const NotFoundPage = lazy(() => import('./pages/NotFoundPage'));

const ProtectedRoute: React.FC<{ children: JSX.Element }> = ({ children }) => {
  const { isAdmin } = useAuth();
  return isAdmin ? children : <Navigate to="/login" />;
};

const App: React.FC = () => {
  return (
    <AuthProvider>
      <Router>
        <ErrorBoundary>
          <Suspense fallback={<LoadingSpinner />}>
            <Routes>
              <Route path="/" element={<UserDashboard />} />
              <Route path="/login" element={<LoginPage />} />
              <Route
                path="/admin/*"
                element={
                  <ProtectedRoute>
                    <AdminRoutes />
                  </ProtectedRoute>
                }
              />
              <Route path="*" element={<NotFoundPage />} />
            </Routes>
          </Suspense>
        </ErrorBoundary>
      </Router>
    </AuthProvider>
  );
};

const AdminRoutes: React.FC = () => (
  <Routes>
    <Route path="/" element={<AdminDashboard />} />
    <Route path="axioms" element={<AxiomEditor />} />
    {/* Add more admin routes here */}
  </Routes>
);

export default App;

Notes:

Routing:
- Uses react-router-dom for client-side routing.
- Sets up routes for user dashboard, admin dashboard, login page, etc.
Lazy Loading:
- Components are loaded lazily using React.lazy and Suspense to improve performance.
Authentication:
- ProtectedRoute component checks if the user is an admin before granting access to admin routes.
Error Handling:
- ErrorBoundary component catches JavaScript errors and displays a fallback UI.

The text was updated successfully, but these errors were encountered:

mcochranca added this to OpenHAR Oct 10, 2024

mcochranca self-assigned this Oct 10, 2024

mcochranca converted this from a draft issue Oct 10, 2024

mcochranca added the documentation Improvements or additions to documentation label Oct 10, 2024

mcochranca pinned this issue Oct 10, 2024

mcochranca moved this from Backlog to Ready in OpenHAR Dec 6, 2024

mcochranca moved this from Ready to In progress in OpenHAR Dec 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create HAR index html, css, tsx and js #2

Create HAR index html, css, tsx and js #2

mcochranca commented Oct 10, 2024

Create HAR index html, css, tsx and js #2

Create HAR index html, css, tsx and js #2

Comments

mcochranca commented Oct 10, 2024

1. index.html

2. index.css

3. index.tsx

4. App.tsx