Skip to content
Snippets Groups Projects
Commit c9dc9a25 authored by Pásztor Bálint's avatar Pásztor Bálint
Browse files

na

parent fed98539
Branches
No related tags found
No related merge requests found
<template> <template>
<!-- Fejléc: széltől-szélig --> <!-- Teljes szélességű piros fejléc -->
<Header @navigate="handleNavigate" /> <Header @navigate="handleNavigate" />
<!-- Központi nézet: mainContent vagy login --> <!-- Középső rész: mainContent vagy login nézet -->
<component :is="currentPage" @navigate="handleNavigate" /> <component :is="currentPage" @navigate="handleNavigate" />
<!-- Lábléc: széltől-szélig --> <!-- Teljes szélességű piros lábléc -->
<Footer /> <Footer />
</template> </template>
...@@ -16,35 +16,38 @@ import Footer from './components/Footer.vue' ...@@ -16,35 +16,38 @@ import Footer from './components/Footer.vue'
import MainContent from './components/MainContent.vue' import MainContent from './components/MainContent.vue'
import Login from './components/Login.vue' import Login from './components/Login.vue'
// A lehetséges nézetek: "main", "login" /**
* Megadjuk a lehetséges nézeteket: "main", "login"
* Később, ha szeretnénk kosár oldalt, beírhatjuk ide: cart: CartView
*/
const pages = { const pages = {
main: MainContent, main: MainContent,
login: Login login: Login
} }
// Alapértelmezett nézet: main (főoldal) // Alapértelmezett nézet: főoldal (main)
const currentView = ref('main') const currentView = ref('main')
// A gyermek-komponensektől jövő "navigate" eseményt kezeljük // A gyermek komponensek (Header, Login) kibocsátanak egy "navigate" eseményt
function handleNavigate(page) { function handleNavigate(page) {
currentView.value = page currentView.value = page
} }
// Kiszámoljuk, éppen melyik komponens töltsön be // Eltérő érték → eltérő komponens
const currentPage = computed(() => { const currentPage = computed(() => {
return pages[currentView.value] || MainContent return pages[currentView.value] || MainContent
}) })
</script> </script>
<style> <style>
/* Globális stílusok: háttérszín, margók eltüntetése, full width */ /* Globális stílus – mindenképpen 100% széles és magas (ha kell) */
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%;
width: 100%; width: 100%;
background-color: #fbeaea; /* Tüzes-pirosas */ min-height: 100vh;
font-family: Arial, sans-serif;
box-sizing: border-box; box-sizing: border-box;
background-color: #fbeaea; /* halvány pirosas háttér */
font-family: Arial, sans-serif;
} }
</style> </style>
...@@ -9,12 +9,11 @@ ...@@ -9,12 +9,11 @@
<style scoped> <style scoped>
.footer-container { .footer-container {
width: 100%; /* Teljes szélesség */ width: 100%;
background-color: #800000; /* Sötétebb piros */ background-color: #800000;
color: white; color: white;
text-align: center; text-align: center;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
margin-top: auto; /* Ha van flex-szerkezet, az aljára kerül */
} }
</style> </style>
...@@ -5,12 +5,10 @@ const emit = defineEmits(['navigate']) ...@@ -5,12 +5,10 @@ const emit = defineEmits(['navigate'])
<template> <template>
<header class="header-container"> <header class="header-container">
<!-- Logo + felirat --> <!-- Bal oldalt a logó és a cím -->
<div class="logo-container"> <div class="logo-container">
<!-- TŰZ LOGÓ (inline SVG) -->
<svg class="fire-logo" viewBox="0 0 24 24"> <svg class="fire-logo" viewBox="0 0 24 24">
<!-- Egyszerű tűzalak – fehér kitöltéssel, piros háttér előtt --> <path
<path
fill="white" fill="white"
d="M12.0 2.0C9 6 14 8 10 13c-1 2-2 4 0 7 2 3 6 3 8 0 2-3 2-6 0-9-1-1-1-3 0-4 1-1 0-3-1-4-1-1-2-2-5-1z" d="M12.0 2.0C9 6 14 8 10 13c-1 2-2 4 0 7 2 3 6 3 8 0 2-3 2-6 0-9-1-1-1-3 0-4 1-1 0-3-1-4-1-1-2-2-5-1z"
/> />
...@@ -18,13 +16,11 @@ const emit = defineEmits(['navigate']) ...@@ -18,13 +16,11 @@ const emit = defineEmits(['navigate'])
<h1>Ignis - Számítógép alkatrészek</h1> <h1>Ignis - Számítógép alkatrészek</h1>
</div> </div>
<!-- Gombok: főoldal, bejelentkezés, kosár --> <!-- Jobb oldalt a gombok -->
<nav> <nav>
<button @click="emit('navigate', 'main')">Termékek</button> <button @click="emit('navigate', 'main')">Termékek</button>
<button @click="emit('navigate', 'login')">Bejelentkezés</button> <button @click="emit('navigate', 'login')">Bejelentkezés</button>
<!-- Kosár gomb -->
<!-- Kosár gomb (ikon) – egyelőre 'cart' nézet nincs,
de ha később lesz, navigálhatnánk oda: -->
<button class="cart-btn" @click="emit('navigate', 'cart')"> <button class="cart-btn" @click="emit('navigate', 'cart')">
<svg class="cart-icon" viewBox="0 0 24 24"> <svg class="cart-icon" viewBox="0 0 24 24">
<path <path
...@@ -39,34 +35,35 @@ const emit = defineEmits(['navigate']) ...@@ -39,34 +35,35 @@ const emit = defineEmits(['navigate'])
<style scoped> <style scoped>
.header-container { .header-container {
width: 100%; /* Teljes szélesség */ /* Teljes szélesség a böngészőben */
width: 100%;
background-color: #b30000; /* Piros fejléc */ background-color: #b30000; /* Piros fejléc */
color: white; color: white;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
/* Kulcs: a flexbox elrendezés,
bal oldalt a logó, jobb oldalt a navigáció */
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
align-items: center; align-items: center;
} }
/* Logó és felirat egymás mellett, középre igazítva */ /* Logó + felirat (bal oldalt) */
.logo-container { .logo-container {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
justify-content: center;
} }
.fire-logo { .fire-logo {
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
/* Menü gombok */ /* Gombok (jobb oldalt) */
nav { nav {
margin-top: 10px;
display: flex; display: flex;
gap: 10px; gap: 10px;
justify-content: center;
} }
button { button {
background-color: #800000; background-color: #800000;
...@@ -79,7 +76,7 @@ button:hover { ...@@ -79,7 +76,7 @@ button:hover {
background-color: #cc0000; background-color: #cc0000;
} }
/* Kosár gomb, ikon */ /* Kosár ikon */
.cart-btn { .cart-btn {
display: flex; display: flex;
align-items: center; align-items: center;
......
...@@ -7,15 +7,11 @@ const username = ref('') ...@@ -7,15 +7,11 @@ const username = ref('')
const password = ref('') const password = ref('')
function onLogin() { function onLogin() {
// Itt jöhetne AJAX / fetch a backendhez
alert(`Bejelentkezés: ${username.value}`) alert(`Bejelentkezés: ${username.value}`)
} }
function onRegister() { function onRegister() {
// Regisztráció
alert('Regisztráció gomb megnyomva!') alert('Regisztráció gomb megnyomva!')
} }
function onBack() { function onBack() {
emit('navigate', 'main') emit('navigate', 'main')
} }
...@@ -34,10 +30,9 @@ function onBack() { ...@@ -34,10 +30,9 @@ function onBack() {
<button type="submit">Belépés</button> <button type="submit">Belépés</button>
</form> </form>
<!-- Regisztrációs gomb --> <!-- Regisztráció -->
<button class="register-btn" @click="onRegister">Regisztráció</button> <button class="register-btn" @click="onRegister">Regisztráció</button>
<!-- Visszagomb -->
<!-- Visszagomb (főoldalra) -->
<button class="back-btn" @click="onBack">Vissza</button> <button class="back-btn" @click="onBack">Vissza</button>
</div> </div>
</template> </template>
......
...@@ -37,19 +37,25 @@ ...@@ -37,19 +37,25 @@
<style scoped> <style scoped>
.container { .container {
width: 100%; /* Teljes szélesség */ /* Teljes szélesség */
width: 100%;
/* Felső-alsó margó */
padding: 20px; padding: 20px;
/* Sorba rendezzük a termékeket */
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; /* Középre igazítjuk a termékeket */ gap: 20px;
/* Középre igazítás */
justify-content: center;
box-sizing: border-box; box-sizing: border-box;
} }
/* Mindegyik termék fehér doboz */
.product { .product {
background-color: white; background-color: #fff;
border: 1px solid #e0a0a0; border: 1px solid #e0a0a0;
border-radius: 8px; border-radius: 8px;
width: 250px; width: 250px;
margin: 10px;
padding: 15px; padding: 15px;
text-align: center; text-align: center;
box-shadow: 0 2px 5px rgba(255, 0, 0, 0.1); box-shadow: 0 2px 5px rgba(255, 0, 0, 0.1);
...@@ -84,16 +90,4 @@ ...@@ -84,16 +90,4 @@
.product button:hover { .product button:hover {
background-color: #990000; background-color: #990000;
} }
/* Mobilnézet: a termékek egymás alá csúsznak */
@media (max-width: 600px) {
.container {
flex-direction: column;
align-items: center;
}
.product {
width: 80%;
max-width: 300px;
}
}
</style> </style>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment