home básico
This commit is contained in:
parent
6350a69b69
commit
574b8f4240
@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + Solid + TS</title>
|
<title>CyberBokeron Malackathon</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
10
package-lock.json
generated
10
package-lock.json
generated
@ -10,6 +10,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@solidjs/router": "^0.14.9",
|
"@solidjs/router": "^0.14.9",
|
||||||
"bulma": "^1.0.2",
|
"bulma": "^1.0.2",
|
||||||
|
"solid-icons": "^1.1.0",
|
||||||
"solid-js": "^1.9.1"
|
"solid-js": "^1.9.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -3814,6 +3815,15 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/solid-icons": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/solid-icons/-/solid-icons-1.1.0.tgz",
|
||||||
|
"integrity": "sha512-IesTfr/F1ElVwH2E1110s2RPXH4pujKfSs+koT8rwuTAdleO5s26lNSpqJV7D1+QHooJj18mcOiz2PIKs0ic+A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"solid-js": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/solid-js": {
|
"node_modules/solid-js": {
|
||||||
"version": "1.9.2",
|
"version": "1.9.2",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|||||||
@ -11,6 +11,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@solidjs/router": "^0.14.9",
|
"@solidjs/router": "^0.14.9",
|
||||||
"bulma": "^1.0.2",
|
"bulma": "^1.0.2",
|
||||||
|
"solid-icons": "^1.1.0",
|
||||||
"solid-js": "^1.9.1"
|
"solid-js": "^1.9.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
6
src/constants/Videos.ts
Normal file
6
src/constants/Videos.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
/** Lista de videos (CC) */
|
||||||
|
const VIDEOS: string[] = [
|
||||||
|
"https://www.pexels.com/es-es/download/video/13831212/?fps=60.0&h=720&w=1280"
|
||||||
|
];
|
||||||
|
|
||||||
|
export default VIDEOS;
|
||||||
15
src/helpers/Video.ts
Normal file
15
src/helpers/Video.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import VIDEOS from "../constants/Videos";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clase helper para gestionar los vídeos de fondo
|
||||||
|
* encontrados en views/Home
|
||||||
|
*/
|
||||||
|
export default class Video {
|
||||||
|
/**
|
||||||
|
* Elige un vídeo aleatoriamente de la lista
|
||||||
|
* @returns Vídeo aleatorio
|
||||||
|
*/
|
||||||
|
static random(): string {
|
||||||
|
return VIDEOS[Math.floor(Math.random()*VIDEOS.length)];
|
||||||
|
}
|
||||||
|
}
|
||||||
29
src/partials/Navbar.tsx
Normal file
29
src/partials/Navbar.tsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { A } from "@solidjs/router"
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Navegador horizontal, usado en todas las views
|
||||||
|
*/
|
||||||
|
function Navbar() {
|
||||||
|
return (
|
||||||
|
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<A class="navbar-item" href="/">CyberBokeron</A>
|
||||||
|
|
||||||
|
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-menu">
|
||||||
|
<div class="navbar-start">
|
||||||
|
{/* TODO: Agregar enlaces */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Navbar
|
||||||
@ -1,6 +1,43 @@
|
|||||||
|
import { FaSolidGlassWaterDroplet } from "solid-icons/fa"
|
||||||
|
import Navbar from "../partials/Navbar"
|
||||||
|
|
||||||
function Home() {
|
function Home() {
|
||||||
return (
|
return (
|
||||||
<p>Hi</p>
|
<>
|
||||||
|
<Navbar />
|
||||||
|
<section class="hero is-fullheight-with-navbar">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container has-text-centered">
|
||||||
|
<div class="columns is-centered">
|
||||||
|
<div class="column is-half">
|
||||||
|
<div class="box">
|
||||||
|
<div class="columns is-centered is-vcentered is-mobile">
|
||||||
|
<div class="column is-4">
|
||||||
|
<figure class="image is-128x128">
|
||||||
|
<img src="https://bulma.io/assets/images/placeholders/128x128.png" />
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="column is-8">
|
||||||
|
<p class="title">
|
||||||
|
<span class="icon-text">
|
||||||
|
<span class="icon">
|
||||||
|
<FaSolidGlassWaterDroplet />
|
||||||
|
</span>
|
||||||
|
<span>Malackathon</span>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="section">
|
||||||
|
<video src="https://www.pexels.com/es-es/download/video/13831212/?fps=60.0&h=720&w=1280"></video>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user