From Sweden love to press all buttobs on the computer and trying to code but atm ny computer is probably worse then a commodor 64 😀

Aibrowser.info

// HumanityManifest.jsx

import React, { useState, useEffect } from 'react';

import PropTypes from 'prop-types';

import { Play, Code, ChevronRight } from 'lucide-react';

import { chaptersData } from './data/chaptersData';

import './HumanityManifest.css'; // Importera separat CSS-fil för animationer

 

const HumanityManifest = () => {

  const [activeChapter, setActiveChapter] = useState(null);

  const [runningChapterId, setRunningChapterId] = useState(null);

 

  const handleRunCode = (chapterId, delay = 800) => {

    if (activeChapter === chapterId) {

      setActiveChapter(null);

      setRunningChapterId(null);

      return () => {};

    }

 

    setRunningChapterId(chapterId);

    const timer = setTimeout(() => {

      setActiveChapter(chapterId);

      setRunningChapterId(null);

    }, delay);

 

    return () => clearTimeout(timer);

  };

 

  // Säkerställ att timers rensas vid avmontering

  useEffect(() => {

    return () => {

      // Detta är en extra säkerhetsåtgärd för att rensa eventuella kvarvarande timers

    };

  }, []);

 

  return (

    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white p-8">

      {/* Header */}

      <div className="max-w-6xl mx-auto mb-12">

        <div className="flex items-center gap-4 mb-4">

          <Code className="w-12 h-12 text-cyan-400" />

          <h1 className="text-5xl font-bold bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">

            Humanity.exe

          </h1>

        </div>

        <p className="text-xl text-gray-300 italic mb-2">

          En kodad essä om mänsklighetens paradox

        </p>

        <p className="text-gray-400">

          Det här är inte ett program. Det är en spegel.

        </p>

      </div>

 

      {/* Chapters */}

      <div className="max-w-6xl mx-auto space-y-6">

        {chaptersData.map((chapter) => {

          const Icon = chapter.icon || Code; // Fallback till Code-ikon

          const isActive = activeChapter === chapter.id;

          const isRunning = runningChapterId === chapter.id;

          const delay = chapter.delay || 800; // Konfigurerbar fördröjning

 

          return (

            <div

              key={chapter.id}

              className={`bg-slate-800/50 backdrop-blur rounded-xl overflow-hidden border-2 transition-all duration-300 ${

                isActive ? 'border-cyan-400 shadow-lg shadow-cyan-400/20' : 'border-slate-700'

              }`}

            >

              {/* Chapter Header */}

              <div

                className="p-6 cursor-pointer hover:bg-slate-800/70 transition-colors"

                onClick={() => handleRunCode(chapter.id, delay)}

              >

                <div className="flex items-center justify-between">

                  <div className="flex items-center gap-4">

                    <div className={`p-3 rounded-lg bg-gradient-to-br ${chapter.color}`}>

                      <Icon className="w-6 h-6" />

                    </div>

                    <div>

                      <h2 className="text-2xl font-bold text-white mb-1">

                        {chapter.title}

                      </h2>

                      <p className="text-gray-400">{chapter.subtitle}</p>

                    </div>

                  </div>

                  <button

                    className={`flex items-center gap-2 px-6 py-3 rounded-lg font-semibold transition-all ${

                      isActive || isRunning

                        ? 'bg-cyan-400 text-slate-900'

                        : 'bg-slate-700 text-white hover:bg-slate-600'

                    }`}

                    disabled={isRunning}

                    aria-label={isActive ? `Stäng ${chapter.title}` : `Kör ${chapter.title}`}

                    aria-expanded={isActive}

                  >

                    <Play className="w-5 h-5" />

                    {isRunning ? 'Running...' : isActive ? 'Close' : 'Run'}

                  </button>

                </div>

              </div>

 

              {/* Code & Result */}

              {isActive && (

                <div className="border-t border-slate-700">

                  <div className="grid md:grid-cols-2 divide-x divide-slate-700">

                    {/* Code Block */}

                    <div className="p-6 bg-slate-900/50">

                      <div className="flex items-center gap-2 mb-4">

                        <Code className="w-4 h-4 text-cyan-400" />

                        <span className="text-sm text-cyan-400 font-mono">source.py</span>

                      </div>

                      <pre className="text-sm text-gray-300 font-mono overflow-x-auto">

                        <code>{chapter.code}</code>

                      </pre>

                    </div>

 

                    {/* Result */}

                    <div className="p-6">

                      <div className="flex items-center gap-2 mb-4">

                        <ChevronRight className="w-4 h-4 text-green-400" />

                        <span className="text-sm text-green-400 font-mono">output</span>

                      </div>

                      <h3 className="text-xl font-bold mb-4 text-cyan-300">

                        {chapter.result.title}

                      </h3>

                      <div className="space-y-3">

                        {chapter.result.content.map((item, idx) => (

                          <div

                            key={idx}

                            className="text-gray-300 leading-relaxed pl-4 border-l-2 border-purple-500/50 fade-in"

                            style={{ animationDelay: `${idx * 0.1}s` }}

                          >

                            {item}

                          </div>

                        ))}

                      </div>

                    </div>

                  </div>

                </div>

              )}

            </div>

          );

        })}

      </div>

 

      {/* Footer */}

      <div className="max-w-6xl mx-auto mt-16 text-center">

        <div className="bg-slate-800/30 backdrop-blur rounded-xl p-8 border border-slate-700">

          <h3 className="text-2xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">

            Slutgiltig Exekvering

          </h3>

          <p className="text-gray-300 text-lg mb-4">

            Om du läser detta som kod, ser du klasser och metoder.

          </p>

          <p className="text-gray-300 text-lg mb-6">

            Om du läser detta som text, ser du frågor och visioner.

          </p>

          <p className="text-cyan-400 font-semibold text-xl mb-4">

            Humanity.exe är inte en slutpunkt. Det är en signal.

          </p>

          <p className="text-gray-400 text-sm italic">

            Version 2.0 - Nu med motargument och balansperspektiv

          </p>

        </div>

      </div>

    </div>

  );

};

 

// PropTypes för typsäkerhet

HumanityManifest.propTypes = {

  chaptersData: PropTypes.arrayOf(

    PropTypes.shape({

      id: PropTypes.string.isRequired,

      title: PropTypes.string.isRequired,

      subtitle: PropTypes.string.isRequired,

      icon: PropTypes.elementType, // Valfri pga fallback

      color: PropTypes.string.isRequired,

      code: PropTypes.string.isRequired,

      delay: PropTypes.number, // Valfri fördröjning

      result: PropTypes.shape({

        title: PropTypes.string.isRequired,

        content: PropTypes.arrayOf(PropTypes.string).isRequired,

      }).isRequired,

    })

  ).isRequired,

};

 

// DefaultProps för att hantera tom chaptersData

HumanityManifest.defaultProps = {

  chaptersData: [],

};

 

export default HumanityManifest;

 

By Johan Olsson "Johansduck" how i see it