MERDE.COM/eternos
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new styles

Browse Source
This commit is contained in:
User
2025-01-06 20:19:07 +03:00
parent 8b589470ac
commit 847102e843
51 changed files with 8457 additions and 627 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/NodeJS/src/App.css
View File

@@ -10,7 +10,7 @@ body {
}
.header {
padding: 20px;
padding: 30px;
background-color: #6c3483;
}

28
frontend/NodeJS/src/App.jsx
View File

@@ -1,19 +1,11 @@
import React from 'react';
import Navbar from './components/Navbar';
import Sidebar from './components/Sidebar';
import Home from './Home';
import './App.css';
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
const App = () => {
return (
<div className="app">
<Navbar />
<div className="main-content">
<Sidebar />
<Home />
</div>
</div>
);
};
export default App;
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);

47
frontend/NodeJS/src/Header.css
View File

@@ -1,47 +0,0 @@
/* Стили для Header */
.header {
background-color: #da1eff; /* Голубой цвет фона */
color: #ffffff; /* Белый цвет текста */
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.logo {
font-size: 36px;
font-weight: bold;
}
.project-name {
margin: 0;
font-family: 'Calibri', sans-serif;
}
.nav {
font-family: 'Calibri', sans-serif;
}
.nav-links {
display: flex;
list-style-type: none;
gap: 20px;
}
.nav-links li {
margin: 0;
}
.nav-links a {
color: #ffffff;
text-decoration: none;
font-size: 18px;
transition: color 0.3s;
}
.nav-links a:hover {
color: #f0f8ff; /* Светлый голубой цвет при наведении */
}

15
frontend/NodeJS/src/Header.jsx
View File

@@ -1,15 +0,0 @@
import React from "react";
import "./Header.css"; // Подключаем стили для Header
const Header = () => {
return (
<header className="header">
<div className="logo">
<h4 className="project-name">Eternos</h4>
</div>
</header>
);
};
export default Header;

16
frontend/NodeJS/src/Home.css
View File

@@ -1,16 +0,0 @@
.home {
padding: 2rem;
}
.home-title {
font-size: 2rem;
margin-bottom: 2rem;
text-align: center;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}

23
frontend/NodeJS/src/Home.jsx
View File

@@ -1,23 +0,0 @@
import React from "react";
import ProductCard from "./components/ProductCard";
const Home = () => {
const products = [
{ id: 1, name: "Product 1", price: 50, image: "https://via.placeholder.com/150" },
{ id: 2, name: "Product 2", price: 75, image: "https://via.placeholder.com/150" },
{ id: 3, name: "Product 3", price: 100, image: "https://via.placeholder.com/150" },
];
return (
<div className="home">
<h1 className="home-title">Welcome to Eternos</h1>
<div className="product-grid">
{products.map((product) => (
<ProductCard key={product.id} product={product} />
))}
</div>
</div>
);
};
export default Home;

141
frontend/NodeJS/src/components/Navbar.css
View File

@@ -1,141 +0,0 @@
.navbar {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
border-bottom: 1px solid #ddd;
}
.navbar-main {
display: flex;
align-items: center;
padding: 10px 20px;
}
.logo img {
height: 30px;
}
.catalog-button {
background-color: #0073e6;
color: white;
border: none;
padding: 5px 10px;
margin-left: 20px;
cursor: pointer;
border-radius: 5px;
}
.search-bar {
display: flex;
flex-grow: 1;
margin-left: 20px;
}
.search-bar select,
.search-bar input {
border-radius: 5px; padding: 5px;
border: 1px solid #ddd;
}
.search-bar input {
border-radius: 5px;
flex-grow: 1;
margin-left: 5px;
}
.search-button {
border-radius: 5px;
background-color: #0073e6;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.personal-doc-button {
background-color: #0073e6;
color: white;
border: none;
padding: 5px 15px;
margin-left: 20px;
border-radius: 5px;
cursor: pointer;
}
.navbar-bottom {
display: flex;
justify-content: space-around;
padding: 10px;
font-size: 14px;
background-color: #fff;
}
.navbar-bottom a {
text-decoration: none;
color: #0073e6;
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
.navbar-main {
flex-direction: column;
align-items: flex-start;
padding: 10px;
}
.logo {
margin-bottom: 10px;
}
.catalog-button {
width: 100%;
text-align: center;
margin: 0;
margin-bottom: 10px;
}
.search-bar {
width: 100%;
flex-direction: column;
}
.search-bar select,
.search-bar input,
.search-button {
width: 100%;
margin: 5px 0;
}
.personal-doc-button {
width: 100%;
margin: 10px 0;
}
.navbar-bottom {
flex-wrap: wrap;
justify-content: flex-start;
}
.navbar-bottom a {
margin: 5px;
font-size: 12px;
}
}
/* Адаптация для очень маленьких экранов (например, телефоны) */
@media (max-width: 480px) {
.navbar-main {
align-items: center;
}
.search-bar select {
display: none; /* Убираем селектор "Везде" для упрощения */
}
.navbar-bottom a {
flex: 1 1 100%; /* Каждая ссылка занимает всю ширину */
text-align: center;
}
}

57
frontend/NodeJS/src/components/Navbar.jsx
View File

@@ -1,57 +0,0 @@
import React, { useState } from "react";
import "./Navbar.css";
import Sidebar from "./Sidebar";
const Navbar = () => {
const [isSidebarVisible, setIsSidebarVisible] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const toggleSidebar = () => {
// Открывать Sidebar только если пользователь ввел текст
if (searchQuery.trim() !== "") {
setIsSidebarVisible(!isSidebarVisible);
} else {
alert("Пожалуйста, введите текст для поиска.");
}
};
const handleSearchChange = (e) => {
setSearchQuery(e.target.value);
};
return (
<div>
<nav className="navbar">
<div className="navbar-main">
<div className="logo">
<img src="" alt="Eternos" />
</div>
<button className="catalog-button" onClick={toggleSidebar}>
Каталог
</button>
<div className="search-bar">
<select>
<option value="all">Везде</option>
</select>
<input
type="text"
placeholder="Искать на Eternos"
value={searchQuery}
onChange={handleSearchChange}
/>
<button className="search-button">🔍</button>
</div>
<button className="personal-doc-button">Личный кабинет</button>
</div>
</nav>
{isSidebarVisible && (
<div className="sidebar-overlay">
<Sidebar />
</div>
)}
</div>
);
};
export default Navbar;

33
frontend/NodeJS/src/components/ProductCard.css
View File

@@ -1,33 +0,0 @@
.product-card {
border: 1px solid #d1d5db;
border-radius: 10px;
padding: 1rem;
text-align: center;
background-color: #ffffff;
}
.product-image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 5px;
}
.product-title {
font-size: 1.2rem;
margin: 1rem 0;
}
.product-price {
font-size: 1rem;
color: #4ade80;
}
.add-to-cart-btn {
background-color: #1e3a8a;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
}

15
frontend/NodeJS/src/components/ProductCard.jsx
View File

@@ -1,15 +0,0 @@
import React from "react";
import "./ProductCard.css";
const ProductCard = ({ product }) => {
return (
<div className="product-card">
<img src={product.image} alt={product.name} className="product-image" />
<h3 className="product-title">{product.name}</h3>
<p className="product-price">${product.price}</p>
<button className="add-to-cart-btn">Add to Cart</button>
</div>
);
};
export default ProductCard;

82
frontend/NodeJS/src/components/Sidebar.css
View File

@@ -1,82 +0,0 @@
.sidebar {
width: 300px;
background-color: #ffffff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 0;
font-family: Arial, sans-serif;
}
.sidebar h2 {
font-size: 1.5rem;
margin-bottom: 20px;
}
.filter-section {
margin-bottom: 20px;
}
.filter-section h3 {
font-size: 1.2rem;
margin-bottom: 10px;
}
.price-inputs input {
width: 45%;
padding: 5px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.price-categories label,
.filter-section label {
display: block;
margin-bottom: 5px;
font-size: 1rem;
}
label.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
label.switch input {
opacity: 0;
width: 0;
height: 0;
}
label.switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
transition: 0.4s;
}
label.switch .slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
border-radius: 50%;
transition: 0.4s;
}
label.switch input:checked + .slider {
background-color: #0073e6;
}
label.switch input:checked + .slider:before {
transform: translateX(20px);
}

100
frontend/NodeJS/src/components/Sidebar.jsx
View File

@@ -1,100 +0,0 @@
import React, { useState } from "react";
import "./Sidebar.css";
const Sidebar = () => {
const [priceRange, setPriceRange] = useState({ min: 0, max: 25000 });
const [selectedPriceCategory, setSelectedPriceCategory] = useState("any");
const [isOriginal, setIsOriginal] = useState(false);
const [teaSort, setTeaSort] = useState("");
const handlePriceRangeChange = (e) => {
const { name, value } = e.target;
setPriceRange((prev) => ({
...prev,
[name]: value,
}));
};
return (
<div className="sidebar">
<h2>Фильтры</h2>
<div className="filter-section">
<h3>Рассрочка 0-0-6</h3>
<label className="switch">
<input
type="checkbox"
checked={isOriginal}
onChange={() => setIsOriginal(!isOriginal)}
/>
<span className="slider"></span>
</label>
</div>
<div className="filter-section">
<h3>Цена</h3>
<div className="price-inputs">
<input
type="number"
name="min"
value={priceRange.min}
onChange={handlePriceRangeChange}
placeholder="Минимум"
/>
<input
type="number"
name="max"
value={priceRange.max}
onChange={handlePriceRangeChange}
placeholder="Максимум"
/>
</div>
<div className="price-categories">
{["до 500 ₽", "500–1 000 ₽", "1 000–2 000 ₽", "2 000 ₽ и дороже", "Неважно"].map(
(category, index) => (
<label key={index}>
<input
type="radio"
name="price-category"
value={category}
checked={selectedPriceCategory === category}
onChange={() => setSelectedPriceCategory(category)}
/>
{category}
</label>
)
)}
</div>
</div>
<div className="filter-section">
<h3>Оригинальный товар</h3>
<label className="switch">
<input
type="checkbox"
checked={isOriginal}
onChange={() => setIsOriginal(!isOriginal)}
/>
<span className="slider"></span>
</label>
</div>
<div className="filter-section">
<h3>Сорт чая</h3>
{["Матча", "Сенча", "Улун", "Черный чай"].map((sort) => (
<label key={sort}>
<input
type="checkbox"
value={sort}
checked={teaSort === sort}
onChange={() => setTeaSort(sort)}
/>
{sort}
</label>
))}
</div>
</div>
);
};
export default Sidebar;

81
frontend/NodeJS/src/index.css
View File

@@ -1,70 +1,13 @@
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #8e44ad, #ffffff);
color: #333;
}
.products-page {
padding: 20px;
text-align: center;
}
.page-title {
font-size: 2.5rem;
color: #6c3483;
margin-bottom: 20px;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 0 20px;
}
.product-card {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.product-image {
max-width: 100%;
border-radius: 8px;
}
.product-name {
font-size: 1.5rem;
color: #6c3483;
margin: 10px 0;
}
.product-price {
font-size: 1.2rem;
color: #8e44ad;
margin: 5px 0;
}
.product-button {
background-color: #8e44ad;
color: #ffffff;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s;
}
.product-button:hover {
background-color: #6c3483;
}
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

12
frontend/NodeJS/src/main.jsx
View File

@@ -1,11 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
document.getElementById("root")
);