reactjs打造一个web操作系统桌面界面效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：reactjs打造一个web操作系统桌面界面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Mono">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Catamaran:900">

</head>

<body style="background: #2C2F33; font-family: arial;">
    <main id="reactapp">
    </main>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.16.13.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.16.13.js"></script>

    <script>

function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);}const MONO_FONT = {
  fontFamily: "Fira Mono, monospace" };


const SANS_FONT = {
  fontFamily: "Open Sans, sans-serif" };


const TITLE_FONT = {
  fontFamily: "Catamaran, sans-serif" };


const MONOKAI_COLOURS = [
"#F8F8F0", //	0 ghost-white
"#F8F8F2", //	1 light-ghost-white
"#CCC", //	2 light-gray
"#888", //	3 gray
"#49483E", //	4 brown-gray
"#282828", //	5 dark-gray
"#E6DB74", //	6 yellow
"#66D9EF", //	7 blue
"#F92672", //	8 pink
"#AE81FF", //	9 purple
"#75715E", //	10 brown
"#FD971F", //	11 orange
"#FFD569", //	12 light-orange
"#A6E22E", //	13 green
"#529B2F" //	14 sea-green
];

//                light     dark
// 0  black       #383a42   #282c34
// 1  red         #e45649   #e06c75
// 2  green       #50a14f   #98c379
// 3  yellow      #c18401   #e5c07b
// 4  blue        #0184bc   #61afef
// 5  magenta     #a626a4   #c678dd
// 6  cyan        #0997b3   #56b6c2
// 7  white       #fafafa   #dcdfe4

const TERMINAL_COLOURS = [
"#383a42",
"#e45649",
"#50a14f",
"#c18401",
"#0184bc",
"#a626a4",
"#0997b3",
"#fafafa",
"#282c34",
"#e06c75",
"#98c379",
"#e5c07b",
"#61afef",
"#c678dd",
"#56b6c2",
"#dcdfe4"];


const FILE_TREE_HOBBIES = {
  home: {
    rlahd: {
      Hobbies: {
        "3D Printing": {
          type: "file",
          onDoubleClick: () => {
            console.log("YEAH");
          },
          metadata: {
            Created: "2019",
            Printer: "Ender 3",
            Fun: "High",
            Price: "High :(" },

          imgUrl: "//repo.bfw.wiki/bfwrepo/icon/5da6d4920e166.png" },

        Games: {
          "Board Games": {
            type: "file",
            metadata: {
              Genres: "Hidden Role, Bluffing, Co-op",
              Favourites: "Pandemic, Hanabi, Avalon" } },


          "Video Games": {
            type: "file",
            metadata: {
              Genres: "RPG, FPS, MOBA, Co-op, VR",
              Favourites: "Portal 1+2" } },


          "Tabletop Games": {
            type: "file",
            description: "Dungeon Master of a currently 3 year campaign",
            metadata: {
              Skills: "Teamwork, Leadership",
              Game: "Dungeons and Dragons",
              Edition: "5th" } } },



        Books: {
          "Science Fiction": {
            "Culture Series": {
              type: "file",
              metadata: {
                Author: "Iain Banks" } },


            "The Martian": {
              type: "file",
              metadata: {
                Author: "Andy Weir" } },


            "Three Body Problem": {
              type: "file",
              metadata: {
                Author: "Cixin Liu" } },


            "Hitchhikers Guide": {
              type: "file",
              metadata: {
                Author: "Douglas Adams" } } },



          Fantasy: {
            "Stormlight Archive": {
              type: "file",
              metadata: {
                Author: "Brandon Sanderson" } },


            "The Kingkiller Chronicle": {
              type: "file",
              metadata: {
                Author: "Patrick Rothfuss" } } } } },





      "Personal Dev": {
        "Runescape Text": {
          type: "file",
          onDoubleClick: () => {
            Window.open("/");
          },
          description:
          "A little tool and Discord Bot for emulating text from a popular MMO",
          metadata: {
            Created: "2018" } },


        "Spell Templates": {
          type: "file",
          onDoubleClick: () => {
            Window.open("/");
          },
          description:
          "A progressive web app for doing some math checking for Dungeons and Dragons grid mechanics",
          metadata: {
            Created: "2018" } },


        "SenseHAT Listener": {
          type: "file",
          onDoubleClick: () => {
            Window.open("/");
          },
          description:
          "A frontend public controller for an 8x8 LED grid (SenseHAT) attached to a Raspberry Pi",
          metadata: {
            Created: "2019" } },


        "rileylahd.me": {
          type: "file",
          onDoubleClick: () => {
            Window.open("/");
          },
          description:
          "Built this site essentially from scratch using React, Babel and hosted on a Raspberry Pi",
          metadata: {
            Created: "2020" } } } } } };







const EDU_HISTORY_TERMINAL = [
{ string: "EDUCATION\n\n", bold: true, color: 2 },
{ string: "University of Calgary ", bold: true, color: 4 },
{ string: "[2013-2017]\n", bold: false, color: undefined },
{ string: "\t[Calgary, AB]\n", bold: false, color: undefined },
{ string: "\tGraduated 2017\n&quo.........完整代码请登录后点击上方下载按钮下载查看