Avance

.vscode/launch.json

@@ -0,0 +1,35 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            // Use IntelliSense to find out which attributes exist for C# debugging
+            // Use hover for the description of the existing attributes
+            // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
+            "name": ".NET Core Launch (web)",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            // If you have changed target frameworks, make sure to update the program path.
+            "program": "${workspaceFolder}/TestHero/bin/Debug/net6.0/TestHero.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}/TestHero",
+            "stopAtEntry": false,
+            // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
+            "serverReadyAction": {
+                "action": "openExternally",
+                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
+            },
+            "env": {
+                "ASPNETCORE_ENVIRONMENT": "Development"
+            },
+            "sourceFileMap": {
+                "/Views": "${workspaceFolder}/Views"
+            }
+        },
+        {
+            "name": ".NET Core Attach",
+            "type": "coreclr",
+            "request": "attach"
+        }
+    ]
+}

.vscode/tasks.json

@@ -0,0 +1,41 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "build",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "build",
+                "${workspaceFolder}/TestHero/TestHero.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "publish",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "publish",
+                "${workspaceFolder}/TestHero/TestHero.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "watch",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "watch",
+                "run",
+                "--project",
+                "${workspaceFolder}/TestHero/TestHero.csproj"
+            ],
+            "problemMatcher": "$msCompile"
+        }
+    ]
+}

TestHero/ClientApp/src/App.js

@@ -4,7 +4,7 @@ import AppRoutes from "./AppRoutes";
 import { Layout } from "./components/Layout";
 import "./custom.css";
 import Login from "./Pages/login/Login";
-
+import HomePrincipal from "./Pages/home/HomePrincipal";
 export default class App extends Component {
   static displayName = App.name;
 
@@ -20,7 +20,7 @@ export default class App extends Component {
 
       // </Layout>
       <div>
-        <Login />
+        <HomePrincipal />
       </div>
     );
   }

TestHero/ClientApp/src/Pages/home/HomePrincipal.js

@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+// import React, { useRef } from "react";
+import "./home.css";
+// import logo from "../../assets/logo.png";
+import UserIcon from "../../assets/UserIcon.png";
+import Sidebar from "../../components/Sidebar.js";
+
+/**
+ * @author: Leonardo García
+ * @license: GP
+ * @version: 1.0.0
+ * Esta clase está dedicada a la página de home
+ */
+
+export default function HomePrincipal() {
+  return (
+    <div>
+      <div>
+        <Sidebar />
+      </div>
+      <div class="home_background">
+        <div class="titulo">¡Bienvenido!</div> {/* inserte nombre*/}
+        <center>
+          <img class="icono" src={UserIcon} alt="icono de usuario" />
+        </center>
+        <div class="col"></div>
+        <h4>Gerardo Ramírez</h4>
+      </div>
+    </div>
+  );
+}

TestHero/ClientApp/src/Pages/home/home.css

@@ -0,0 +1,25 @@
+.home_background {
+    background-color: #1d1d1d;
+
+    text-align: center;
+    height: 100vw;
+}
+
+.titulo {
+    color: #EBEBEB;
+    font-style: bold;
+    font-size: 64px;
+    /* font-family: raleway; */
+
+}
+
+.icono {
+    width: 15%;
+    text-align: center;
+    align-content: center;
+}
+
+h4 {
+    color: #EBEBEB;
+
+}

TestHero/ClientApp/src/components/Home.js

@@ -1,12 +1,13 @@
 import React, { Component } from "react";
 import Login from "../Pages/login/Login";
+import HomePrincipal from "../Pages/home/HomePrincipal";
 export class Home extends Component {
   static displayName = Home.name;
 
   render() {
     return (
       <div>
-        <Login />
+        <Home />
       </div>
     );
   }

TestHero/ClientApp/src/components/NavMenu.js

@@ -41,6 +41,7 @@ export class NavMenu extends Component {
             </ul>
           </Collapse>
         </Navbar>
+        <link rel='stylesheet' src="bootstrap.min.css"></link>
       </header>
     );
   }

TestHero/ClientApp/src/components/Sidebar.css

@@ -0,0 +1,63 @@
+/* The sidebar menu */
+.sidenav {
+    height: 100%;
+    /* Full-height: remove this if you want "auto" height */
+    width: 10vw;
+    /* Set the width of the sidebar */
+    position: fixed;
+    /* Fixed Sidebar (stay in place on scroll) */
+    z-index: 1;
+    /* Stay on top */
+    top: 0;
+    /* Stay at the top */
+    left: 0;
+    background-color: #0596FF;
+    overflow-x: hidden;
+    /* Disable horizontal scroll */
+    padding-top: 20px;
+}
+
+/* The navigation menu links */
+.sidenav a {
+    padding: 6px 8px 6px 16px;
+    text-decoration: none;
+    font-size: 25px;
+    color: #818181;
+    display: block;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidenav a:hover {
+    color: #f1f1f1;
+}
+
+/* Style page content */
+.main {
+    margin-left: 160px;
+    /* Same as the width of the sidebar */
+    padding: 0px 10px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+    .sidenav {
+        padding-top: 15px;
+    }
+
+    .sidenav a {
+        font-size: 18px;
+    }
+}
+
+img {
+    display: block;
+    margin-left: 1px;
+    margin-right: 1px;
+    width: 50%;
+}
+
+.logo {
+    width: 180%;
+    /* margin: auto; */
+    display: block;
+}

TestHero/ClientApp/src/components/Sidebar.js

@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+import SidebarLogo from "../assets/SidebarLogo.png";
+import Home from "../assets/Home.png";
+import Questions from "../assets/Questions.png";
+import Analytics from "../assets/Analytics.png";
+
+import "./Sidebar.css";
+/**
+ * @author: Leonardo García
+ * @license: GP
+ * @version: 1.0.0
+ * Esta clase está dedicada a la creación de una sidebar reutilizable en la mayoría de las páginas
+ */
+
+export default function Sidebar() {
+  return (
+    <div>
+      <div class="sidenav">
+        <div class="logo">
+        <img src={SidebarLogo}/>
+        </div>
+        <br></br>
+        <br></br>
+        <a>
+          <img src={Home} />
+        </a>
+        <br></br>
+        <a>
+          <img src={Questions} />
+        </a>
+        <br></br>
+        <a>
+          <img src={Analytics} />
+        </a>
+        <br></br>
+      </div>
+    </div>
+  );
+}

TestHero/ClientApp/src/index.js

@@ -1,4 +1,7 @@
 import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'jquery/dist/jquery.min.js'
+import 'bootstrap/dist/js/bootstrap.min.js'
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "bootstrap": "^5.2.3"
+  }
+}