search

mcochranca / HAR

Created with LOVE <3
https://sagelyf.com
1 stars 2 forks source link

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

Open mcochranca opened 1 week ago

mcochranca commented 1 week ago

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:

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:

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:

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: