push sources 16.03.2022 #1

master
serkus01 2 years ago
parent 463b81f549
commit 2a04cd6515

@ -1,20 +0,0 @@
{
"responsive-preview": {
"Mobile": [
320,
675
],
"Tablet": [
1024,
765
],
"Desktop": [
1400,
800
],
"Desktop HD": [
1920,
1080
]
}
}

@ -1,7 +1,7 @@
start:
npm install && npm start
npm install && npm start
build:
npm install && npm run build ../web
npm install && nom build

File diff suppressed because it is too large Load Diff

@ -15,7 +15,7 @@
"version": "0.0.1876",
"devDependencies": {
"electron": "^15.1.1",
"react-scripts": "1.0.0"
"react-scripts": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
@ -23,5 +23,11 @@
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"keywords": []
"keywords": [],
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

@ -31,6 +31,7 @@ export default class Accordion extends React.Component {
<div
id={this.props.title}
class="Accrordion"
style={this.props.style}
onClick={() => this.ViewGroup(this.props.title)}
>
<h3>

@ -329,7 +329,7 @@ export default class AppContainer extends React.Component {
<div
id="containerInfo"
style={{
position: "fixed",
//position: "fixed",
//navigator.userAgentData.mobile ? width"100vw": width="20vw"
width: "100vw",

@ -223,7 +223,7 @@ class NavBar extends Component {
title={this.ui.catalog.text}
style={{ paddingRight: "0px", float: "left", overflowY: "scroll" }}
>
{/*CATALOG */}
{/*CATALOG
<SubMenu title={this.ui.catalog.text} style={{ overflowY: "scroll" }}>
{Object.keys(this.props.category).map((k, i) => (
@ -265,9 +265,11 @@ class NavBar extends Component {
</MenuItem>
))}
</SubMenu>
</MenuItem>
))}
</SubMenu>
*/}
</MenuItem>
</Menu>
);

@ -0,0 +1,82 @@
import React from "react";
import ReactDOM from "react-dom";
export default class TabsView extends React.Component {
menuBtn = {
all: {
borderBottom: "1px solid #AAA",
background: "#1d1d1d",
color: "#FFF",
textDecoration: "none",
marginLeft: "0px",
padding: " 10px",
borderRight: "1px solid #FFF",
cursor: "pointer",
position: "ralative",
//left: "-40px",
borderRadius: "0px 20px 0px 20px",
left: "-20px"
//borderRadius: "10px 20px 0px 0px"
},
active: {
background: "blue",
//color: "#FFF",
textDecoration: "none",
marginLeft: "0px",
padding: " 10px",
borderRight: "1px solid #FFF",
cursor: "pointer",
position: "ralative",
left: "-40px"
}
};
active = this.props.menuButton[this.props.activeDefault];
chechActive(id) {
for (let p = 0; p < this.props.menuButton.length; p++) {
if (this.props.menuButton[p].id === this.active) {
document.getElementById(this.props.menuButton[p].id).style.background =
"#00F";
} else {
document.getElementById(
this.props.menuButton[p].id
).style.background = this.menuBtn.all.background;
}
}
}
render() {
return (
<div
// className="btn-group"
style={{
display: "inline-flex",
margin: "0px",
marginTop: "20px",
fontSize: "1.2em"
// color: "#000"
}}
>
{this.props.menuButton.map((it, p) => (
<div
id={it.id}
style={this.menuBtn.all}
onClick={() => (
(this.active = it.id),
this.chechActive(it.text),
console.log(this.active),
ReactDOM.render(
this.props.menuButton[p].handler(),
document.getElementById("listOve")
)
)}
>
{it.text}
</div>
))}
</div>
);
}
}

@ -23,10 +23,10 @@ export default class OvItem extends React.Component {
marginTop: "5px",
//width: "100vw",
display: "inline-flex",
border: "1px solid #CCC",
border: "5px solid #CCC",
borderRadius: " 10px",
boxShadow: "3px 4px 10px #CDC",
height: "125px"
boxShadow: "3px 4px 10px #CDC"
//height: "125px"
//height:"75px"
//padding: "15px",
//display: "inline-flex",
@ -43,9 +43,9 @@ export default class OvItem extends React.Component {
//padding: "5px"
}}
>
<h3 style={{ textAlign: "center" }}>
<span style={{ textAlign: "center", fontSize: "1.4em" }}>
<b>{this.props.over.name}</b>{" "}
</h3>
</span>
<div
style={{ height: "32px", textAlign: "left", overflow: "hidden" }}
>

@ -0,0 +1,13 @@
import React from "react";
export default class AudioPlayer extends React.Component {
render() {
return (
<div>
<audio controls>
<source src={this.props.source} />
</audio>
</div>
);
}
}

@ -0,0 +1,13 @@
import React from "react";
export default class VideoPlayer extends React.Component {
render() {
return (
<div>
<video controls>
<source src={this.props.source} />
</video>
</div>
);
}
}

@ -40,7 +40,7 @@ const recovers = all_pkgs.recovers;
const aliases = all_pkgs.aliases;
const useDes = all_pkgs.usesDecription;
const portENV = all_pkgs.EnvPortage;
//print(all_pkgs.InstallPkgs);
print(portENV);
export default class BasicExample extends React.Component {
//const [null, setPackage] = useState('');
@ -125,6 +125,8 @@ export default class BasicExample extends React.Component {
<Route exact path="/">
<MainPage
icons={this.icons_demo}
category={pkgs}
aliases={aliases}
rec={recovers}
useDes={useDes} //LocalUSE
Ipkg={all_pkgs.InstallPkgs}

@ -9,10 +9,171 @@ import FullCard from "../Componets/Cards/fullCard";
import Widget from "../Componets/WCard/widget";
import "./style.css";
import Accordion from "../Componets/Acardion";
import TabsView from "../Componets/Tabs/tabs";
import {
ProSidebar,
Menu,
MenuItem,
SubMenu,
SidebarHeader,
//SidebarFooter,
SidebarContent
} from "react-pro-sidebar";
export default class MainPage extends React.Component {
VVSB = false;
c = "column__list";
ui = {
menu: {
text: "Меню"
},
catalog: {
text: "Каталог"
}
};
menuBtn = {
all: {
borderBottom: "1px solid #AAA",
background: "#1d1d1d",
color: "#FFF",
textDecoration: "none",
marginLeft: "0px",
padding: " 10px",
borderRight: "1px solid #FFF",
cursor: "pointer",
position: "ralative",
left: "-40px",
borderRadius: "0px 20px 0px 20px",
left: "-20px"
//borderRadius: "10px 20px 0px 0px"
},
active: {
background: "blue",
//color: "#FFF",
textDecoration: "none",
marginLeft: "0px",
padding: " 10px",
borderRight: "1px solid #FFF",
cursor: "pointer",
position: "ralative",
left: "-40px"
}
};
menuButton = [
{ id: "all", text: "Рекомендации", handler: () => this.mainP() },
{
id: "inclides",
text: "Устаовленые",
handler: () => this.mainP()
},
{
id: "catalog",
text: "Каталог",
handler: () => this.viewCatalog()
}
];
active = "Рекомендации";
slideNum = 1;
checkAlias(text) {
//console.log( "aliases:\t" + this.props.aliases)
//return text;
if (text in this.props.aliases) {
return this.props.aliases[text];
//console.log(this.props.aliases[text]);
} else {
return text;
//console.log(e);
}
}
viewCatalog() {
return (
<div className={this.c}>
{Object.keys(this.props.category).map((k, i) => (
<Widget>
<Accordion
style={{
borderRadius: "1.4em",
background: "#1d1d1d",
color: "#FFF",
border: "5px outset rgba(0, 255, 100, 0.5)",
textAlign: "center"
}}
// Список рекомендуемых пакетов в категории
title={
this.checkAlias(k) + "\t\t" + this.props.category[k].length
}
className="column__list"
>
<div
style={{
overflowX: "scroll",
maxHeight: "375px"
//position: "relative"
//background: "#2e323f"
}}
>
{/*}
title={
this.checkAlias(k) +
" (" +
this.props.category[k].length +
")"
}
>*/}
{this.props.category[k].map((pn, j) => (
<div
className="card__item"
style={{
borderBottom: "1px solid #FFF",
//height: "55px",
//margin: "10px",
background: "#1d1d1d",
color: "#FFF"
//background: "#FFF"
//height:"75px"
}}
onClick={() => this.viewInfo(this.props.category[k][i])}
>
<img
className="card__img"
style={{
width: "32px",
height: "32px"
//background: "#CCC"
}}
//src={this.props.icons[pn.Name.split("/")[1]]}
//alt={pn.Name.split("/")[1]}
/>
<div style={{ marginLeft: "10px" }}>
<b>
{" "}
<span
className="card__title"
style={{
color: "red",
color: "#FFF",
//width: "100vw",
overflow: "clip",
fontSize: "1.1em"
}}
key={pn.Name}
>
{pn}
</span>
</b>
</div>
</div>
))}
</div>
</Accordion>
</Widget>
))}
</div>
);
}
TitleView() {
try {
@ -28,12 +189,16 @@ export default class MainPage extends React.Component {
this.TitleView();
return (
<div id="HomePage" className="" style={{}}>
<div
id="HomePage"
className=""
style={{ overflowY: "scroll", paddingBottom: "60px" }}
>
<div
className={this.c}
style={{
marginTop: "35px"
//overflow: "clip",
//marginTop: "35px",
overflowY: "scroll"
//display: "inline-",
//float: "left",
@ -43,7 +208,16 @@ export default class MainPage extends React.Component {
}}
>
<Widget>
<h3 style={{ borderBottom: "1px solid #AAA" }}> Новости</h3>
<h3
style={{
borderBottom: "1px solid #AAA",
background: "#1d1d1d",
color: "#FFF"
}}
>
{" "}
Новости
</h3>
<li>TEST</li>
<li>TEST</li>
@ -64,7 +238,15 @@ export default class MainPage extends React.Component {
boxShadow: "3px 4px 10px #999"
}}
>
<h3 style={{ borderBottom: "1px solid #AAA" }}>Уведомления</h3>
<h3
style={{
borderBottom: "1px solid #0F0",
background: "#1d1d1d",
color: "#FFF"
}}
>
Уведомления
</h3>
<li>TEST</li>
<li>TEST</li>
@ -74,11 +256,17 @@ export default class MainPage extends React.Component {
</Widget>
</div>
<div className="">
<h3 style={{ borderBottom: "1px solid #AAA" }}>Рекомендации</h3>
<div className={this.c}>
{Object.keys(this.props.rec).map((k) => (
<Widget>
<Accordion
style={{
borderRadius: "1.4em",
background: "#1d1d1d",
color: "#FFF",
border: "5px outset rgba(0, 255, 100, 0.5)",
textAlign: "center"
}}
// Список рекомендуемых пакетов в категории
title={k + "\t\t" + this.props.rec[k].length}
className="column__list"
@ -98,7 +286,8 @@ export default class MainPage extends React.Component {
borderBottom: "1px solid #FFF",
//height: "55px",
//margin: "10px",
background: "#DDD"
background: "#1d1d1d",
color: "#FFF"
//background: "#FFF"
//height:"75px"
}}
@ -121,7 +310,7 @@ export default class MainPage extends React.Component {
className="card__title"
style={{
color: "red",
width: "100vw",
//width: "100vw",
overflow: "clip",
fontSize: "1.1em"
}}
@ -192,7 +381,13 @@ export default class MainPage extends React.Component {
}
render() {
//document.getElementById("pTittle").textContent = "Главная";
return this.mainP();
return (
<div id="HomePage">
{this.TitleView()}
<TabsView activeDefault={0} menuButton={this.menuButton} />
<div id="listOve">{this.menuButton[0].handler()}</div>
</div>
);
}
}

@ -2,6 +2,7 @@ import Accordion from "../Componets/Acardion";
import React from "react";
import ReactDOM from "react-dom";
import OvItem from "../Componets/overlayItem";
import TabsView from "../Componets/Tabs/tabs";
//import Button from "../Componets/button";
//import Grid from "@mui/material/Grid";
const title = { name: "Имя", discription: "Описание", homepage: "Обзор" };
@ -11,7 +12,8 @@ class PageOverlays extends React.Component {
menuBtn = {
all: {
background: "orange",
borderBottom: "1px solid #AAA",
background: "#1d1d1d",
color: "#FFF",
textDecoration: "none",
marginLeft: "0px",
@ -19,12 +21,14 @@ class PageOverlays extends React.Component {
borderRight: "1px solid #FFF",
cursor: "pointer",
position: "ralative",
left: "-40px"
left: "-40px",
borderRadius: "0px 20px 0px 20px",
left: "-20px"
//borderRadius: "10px 20px 0px 0px"
},
active: {
background: "blue",
color: "#FFF",
//color: "#FFF",
textDecoration: "none",
marginLeft: "0px",
padding: " 10px",
@ -47,7 +51,7 @@ class PageOverlays extends React.Component {
handler: () => this.viweCategotyOverlays()
}
];
active = "Все";
active = 0;
slideNum = 1;
//routing overalays page
viewAllOverlay() {
@ -105,52 +109,12 @@ class PageOverlays extends React.Component {
console.log(e);
}
}
chechActive(id) {
for (let p = 0; p < this.menuButton.length; p++) {
if (this.menuButton[p].text === this.active) {
document.getElementById(this.menuButton[p].text).style.background =
"#00F";
} else {
document.getElementById(this.menuButton[p].text).style.background =
"orange";
}
}
}
render() {
return (
<div id="HomePage">
{this.TitleView()}
<div
// className="btn-group"
style={{
display: "inline-flex",
margin: "0px",
marginTop: "20px",
fontSize: "1.2em"
// color: "#000"
}}
>
{this.menuButton.map((it, p) => (
<div
id={it.text}
style={this.menuBtn.all}
onClick={() => (
(this.active = it.text),
this.chechActive(it.text),
console.log(this.active),
ReactDOM.render(
this.menuButton[p].handler(),
document.getElementById("listOve")
)
)}
>
{it.text}
</div>
))}
</div>
<TabsView activeDefault={0} menuButton={this.menuButton} />
<div id="listOve">{this.menuButton[0].handler()}</div>
</div>

@ -7,6 +7,7 @@ import CheckField from "../Componets/CheckField";
{ name: "portage", text: "portage", url: "/sport" },
{ name: "webpp", text: "App", url: "/app" }
];*/
let act;
class PageSettings extends React.Component {
settings = {
USE: [],
@ -22,7 +23,9 @@ class PageSettings extends React.Component {
borderTop: "1px solid #CDC",
paddingTop: "5px"
},
nomob: { margin: "5px" }
nomob: { margin: "5px" },
axtive: { background: "#0F0" },
noaxive: { background: "#FFF" }
};
themes = [
{ id: "0", name: "Светлая", path: "" },
@ -33,7 +36,6 @@ class PageSettings extends React.Component {
{ title: "EN", link: "" },
{ title: "DE", link: "" }
];
isMobile() {
try {
document.createEvent("TouchEvent");
@ -42,7 +44,7 @@ class PageSettings extends React.Component {
return false;
}
}
changLang(lang) {
changeLang(lang) {
console.log(lang);
if (
document.getElementById(lang).style.background !== "#0F0" ||
@ -72,12 +74,18 @@ class PageSettings extends React.Component {
document.getElementById(use).style.background === "rgb(0, 255, 0)"
) {
document.getElementById(use).style.background = "#FFF";
//this.IntstallPackageParamms.USE.map((us, i)=>(
// if( us== use)this.IntstallPackageParamms.USE[i].delete
//))
/*this.IntstallPackageParamms.USE.map((us, i)=>(
if(us == use)delete(this.settings.USE[i])
))*/
for (let i = 0; i < this.settings.USE.length; i++) {
console.log(i);
if (use === this.settings.USE[i]) {
this.settings.USE.slice(i, i); // delete this.IntstallPackageParamms.USE[i];
}
}
} else {
document.getElementById(use).style.background = "#0F0";
//this.settings.USE[this.IntstallPackageParamms.USE.length + 1] = use;
//this.settings.USE[this.IntstallPackageParamms.USE.length] = use;
}
console.log(this.settings);
}
@ -105,9 +113,18 @@ class PageSettings extends React.Component {
}
}
checkUses(u) {
//this.settings.USE.append();
act = u in this.props.portENV["make.conf"]["USE"];
if (act) {
this.settings.USE[this.settings.USE.length + 1] = u;
console.log(act);
}
//console.log(act);
//console.log(this.settings.USE);
// this.settings.USE.append();
return (
<span
style={act ? this.styleUseinfo.axtive : this.styleUseinfo.noaxive}
key={u}
id={u}
onMouseOver={() => this.VuseInfo(u, this.props.uses[u])}

@ -1,20 +0,0 @@
{
"responsive-preview": {
"Mobile": [
320,
675
],
"Tablet": [
1024,
765
],
"Desktop": [
1400,
800
],
"Desktop HD": [
1920,
1080
]
}
}

@ -1,21 +0,0 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

@ -1,7 +0,0 @@
start:
npm install && npm start
build:
npm install && nom build

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -1,27 +0,0 @@
{
"recpvers": null,
"dependencies": {
"axios": "0.24.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-id-swiper": "4.0.0",
"react-id-swiper2": "1.0.7",
"react-pro-sidebar": "0.6.0",
"react-router-dom": "5.2.0",
"react-token-auth": "2.3.8"
},
"name": "webport-main",
"description": "",
"version": "0.0.1876",
"devDependencies": {
"electron": "^15.1.1",
"react-scripts": "1.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"keywords": []
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

@ -1,44 +0,0 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Webport</title>
</head>
<body>
<head>
<title</title>
</head>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
--></body>
</html>

@ -1,15 +0,0 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

@ -1,20 +0,0 @@
{
"responsive-preview": {
"Mobile": [
320,
675
],
"Tablet": [
1024,
765
],
"Desktop": [
1400,
800
],
"Desktop HD": [
1920,
1080
]
}
}

@ -1,52 +0,0 @@
import React from "react";
import "./style.css";
export default class Accordion extends React.Component {
style = {
uptitle: {
ontSize: "1.6em",
padding: "5px",
cursor: "pointer"
}
};
ViewGroup(id) {
if (document.getElementById(id + "_group").style.display === "none") {
document.getElementById(id + "_group").style.display = " block";
document.getElementById(id + "_ch").textContent = "";
} else {
document.getElementById(id + "_group").style.display = "none";
document.getElementById(id + "_ch").textContent = "...";
}
}
render() {
return (
<div
style={{
paddingLeft: "10px",
border: "1px dotted #CCC",
display: "grid"
}}
>
<div
id={this.props.title}
class="Accrordion"
onClick={() => this.ViewGroup(this.props.title)}
>
<h3>
<b>
{this.props.title}{" "}
<span id={this.props.title + "_ch"}>{"..."}</span>
</b>
</h3>
</div>
<div
id={this.props.title + "_group"}
style={{ display: "none", cursor: "pointer" }}
>
<div>{this.props.children}</div>
</div>
</div>
);
}
}

@ -1,371 +0,0 @@
import React from "react";
import NavBar from "./NavList/navList";
import AuthForm from "../pages/auth/auth";
import MainPage from "../pages/main";
import FullCard from "../Componets/Cards/fullCard";
//import OverlaPage from "../pages/overlays";
import "./style.css";
import ReactDOM from "react-dom";
//import { useState } from "react";
export default class AppContainer extends React.Component {
ui = {
BackButton: {
text: "Назад"
},
button: {
sync: {
text: "Обновить",
icon:
"https://cdn.icon-icons.com/icons2/3168/PNG/512/refresh_arrow_arrows_icon_193535.png"
}
}
};
//VSB = document.getElementById("navbar")style.display
Ptitle = () => this.viewSideBar();
findPakg(pkg) {
this.viewPakegeInfo(pkg);
}
viewPakegeInfo(pkgName) {
const url = this.props.ServerAddress + "/find?pkg=" + pkgName;
const response = fetch(url);
/*try {
portage_list[pkgName];
} catch (e) {*/
if (response.ok) {
// если HTTP-статус в диапазоне 200-299
// получаем тело ответа (см. про этот метод ниже)
let res = response.json();
ReactDOM.render(
<FullCard
PackageName={res}
PropMain={this.props.rec}
icons={this.props.icons}
/>,
document.getElementById("HomePage")
);
document.getElementById("inS").value = "";
} else {
console.log("Ошибка HTTP: " + response.status);
//}
}
console.log(pkgName);
}
toBack() {
document.getElementById("backBtn").style.display = "none";
//document.getElementById("containerInfo").style.display = "none";
document.getElementById("container").style.display = "block";
document.getElementById("pTitle").textContent = this.ViewTitle();
document.getElementById("pTitle").textContent = "Главная";
ReactDOM.render(
<MainPage
icons={this.props.icons}
rec={this.props.rec}
useDes={this.props.useDes}
Ipkg={this.props.Ipkg}
repositores={this.props.repositores}
/>,
document.getElementById("HomePage")
);
//window.location.reload();
//this.ViewTitle();
//document.getElementById('pTitle').textContent = this.props.menuItems[]
}
viewSideBar() {
// Появление меню слева
if (document.getElementById("navbar").style.display !== "none") {
// document.getElementById("MainContent").style.paddingLeft = "300px";
// document.getElementById("MainContent").width = -"300px";
//document.getElementById("container").style.width =
// String(document.querySelector(".container").offsetWidth - 300) + "px";
console.log("on");
//console.log(document.querySelector(".page-content").offsetWidth);
//document.getElementById("btn-toggle").style.paddingLeft = "270px";
//document.getElementById("btn-toggle").style.float = "right";
document.getElementById("navBar").style.display = "none";
//this.VVSB = true;
} else {
//document.getElementById("MainContent").style.paddingLeft = "0px";
//document.getElementById("container").style.width =
// String(document.querySelector(".container").offsetWidth + 300) + "px";
//document.getElementById("btn-toggle").style.paddingLeft = "0px";
document.getElementById("navBar").style.display = "block"; //left: "-300px";
console.log("off");
//console.log(document.querySelector(".container").offsetWidth);
//this.VVSB = false;
}
}
btnMenu() {
return (
<li>
<svg
c
style={{
float: "left",
paddingLeft: "20px",
paddingRight: "10px"
}}
//onClick={() => this.viewSideBar()}
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 448 512"
height="1.4em"
width="1.4em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
</svg>
</li>
);
}
ViewTitle() {
// Имя заголовка меню
for (let i = 0; i > this.props.menuItems.length; i++) {
if (
this.props.menuItems[i].url ===
window.location.href.split(window.location.host)[1]
//this.props.menuItems[i].url
//window.location.href.split(window.location.host)[1]
) {
//document.getElementById("pTitle").textContent = this.props.menuItems[i].text;
this.pTitle = this.props.menuItems[i].text;
}
console.log(this.title);
return (this.pTitle = this.props.menuItems[i].text);
}
}
render() {
//this.ViewTitle();
return (
<div>
<AuthForm />
<div className="page-wrapper chiller-theme toggled">
<ul
// Верхняя полоса
id="btn-toggle"
class="btn-toggle"
style={{
display: "inline",
padding: "5px 0px",
margin: "0px",
borderBottom: "1px solid #AAA",
width: "100%",
background: "#1d1d1d", //"#2e323f",
//"1d1d1d",
// "#2e323f",
position: "fixed",
top: "0",
color: "#FFF",
zIndex: "1",
listStyle: "none"
}}
>
{}
<li>
<span
// Кнопка назад
className="btn"
id="backBtn"
style={{
padding: "0px 20px 0px 20px",
float: "left",
color: "#AAA",
background: "#FFF",
marginRight: "0.85em",
fontSize: "1.6em",
borderRadius: "0.9em"
//border: "1px outset #444",
//background: "rgb(78,116,26)",
//background: "rgb(78,116,26)",
//background:
// "linear-gradient(0deg, rgba(78,116,26,0.5536415249693627) 0%, rgba(229,237,235,0.9093838218881303) 35%)"
//borderRadius: ".9em"
}}
onClick={() => this.toBack()}
></span>
</li>
{navigator.userAgentData.mobile
? this.btnMenu()
: console.log("desktop")}
{/*
<b>
<div
id="pTitle"
// Заголовок окна. Имеется глюк в том,
// что имя окна не появляется при обновлении страницы
style={{
float: "left",
width: "50vw",
marginleft: "20px",
textAlign: "center",
fontSize: "1.4em",
color: "#FFF"
}}
>
{this.PackageName}
</div>
</b>
*/}
{}
<li>
<NavBar
style={{ display: "inline" }}
ServerAddress={this.props.ServerAddress}
category={this.props.category}
menuItem={this.props.menuItems}
aliases={this.props.aliases}
Ipkgs={this.props.Ipkg}
/>
</li>
<li>
<div
className="d6"
style={{ position: "realative", float: "right", right: "20px" }}
>
<form>
<input
// Кнопка поиска
id="inS"
name="inS"
classname="form-control"
type="text"
placeholder="Введите имя пакета"
onChange={(e) => this.findPakg(e.target.value)}
style={{
/* fontSize: "1.2em",
margin: "10px", */
//backgroundColor: "rgba(81, 81, 81, 0.5)",
border: "none",
//padding: "5px",
//ackground: "#2e233f",
//borderRadius: "15px",
//border: "3px inset #2e322f",
color: "#c7c7c7"
}}
/>
{/*}
<div className="button">
<svg
style={{ color: "#FFF" }}
class="l-ss-c-element"
width="18"
height="27"
viewBox="0 0 18 27"
xmlns="http://www.w3.org/2000/svg"
>
{" "}
<path
class="l-ss-c-element"
fill="#FFF"
fill-rule="#FFF"
clip-rull="#FFF"
//fill-rule="evenodd"
//clip-rule="evenodd"
d="M11.1897 5.44196V11.9907C11.1897 13.1717 10.2323 14.1291 9.05126 14.1291C7.87025 14.1291 6.91286 13.1717 6.91286 11.9907V5.44196C6.91286 4.26095 7.87026 3.30355 9.05126 3.30355C10.2323 3.30355 11.1897 4.26095 11.1897 5.44196ZM4.37359 5.44196C4.37359 2.85855 6.46786 0.764282 9.05126 0.764282C11.6347 0.764282 13.7289 2.85855 13.7289 5.44196V11.9907C13.7289 14.5741 11.6347 16.6684 9.05126 16.6684C6.46786 16.6684 4.37359 14.5741 4.37359 11.9907V5.44196ZM2.83614 11.0551C2.83614 10.3539 2.26771 9.78547 1.56651 9.78547C0.865309 9.78547 0.296875 10.3539 0.296875 11.0551V12.9262C0.296875 17.3295 3.548 20.9735 7.78077 21.5886V23.8185H6.712C6.0108 23.8185 5.44236 24.387 5.44236 25.0882C5.44236 25.7894 6.0108 26.3578 6.712 26.3578H11.3897C12.0909 26.3578 12.6593 25.7894 12.6593 25.0882C12.6593 24.387 12.0909 23.8185 11.3897 23.8185H10.32V21.5887C14.5532 20.9739 17.8047 17.3298 17.8047 12.9262V11.0551C17.8047 10.3539 17.2363 9.78547 16.5351 9.78547C15.8339 9.78547 15.2654 10.3539 15.2654 11.0551V12.9262C15.2654 16.3584 12.483 19.1408 9.05079 19.1408C5.61853 19.1408 2.83614 16.3584 2.83614 12.9262V11.0551Z"
></path>{" "}
</svg>
</div>*/}
<div
// className="btn-group"
>
{
// <div className="button search"></div>
}
<div
className="button"
style={{
justifyContent: "center"
}}
>
<svg
class="l-ss-c-element"
width="19"
height="20"
viewBox="0 0 19 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
{" "}
<path
class="l-ss-c-element"
fill-rule="evenodd"
clip-rule="evenodd"
d="M14.3074 8.03846C14.3074 11.3734 11.6039 14.0769 8.26893 14.0769C4.93398 14.0769 2.23047 11.3734 2.23047 8.03846C2.23047 4.70351 4.93398 2 8.26893 2C11.6039 2 14.3074 4.70351 14.3074 8.03846ZM12.331 14.9766C11.139 15.6759 9.75081 16.0769 8.26893 16.0769C3.82941 16.0769 0.230469 12.478 0.230469 8.03846C0.230469 3.59894 3.82941 0 8.26893 0C12.7085 0 16.3074 3.59894 16.3074 8.03846C16.3074 10.2703 15.3978 12.2897 13.9291 13.7463L18.4758 18.2929C18.8663 18.6834 18.8663 19.3166 18.4758 19.7071C18.0853 20.0977 17.4521 20.0977 17.0616 19.7071L12.331 14.9766Z"
fill="white"
></path>{" "}
</svg>
</div>
</div>
</form>
</div>
</li>
</ul>
<main
id="MainContent"
className="page-content"
style={{
paddingLeft: "10px",
margin: "0px",
width: "100vw",
height: "100vh",
//background: "#1d1d1d",
overflow: "scroll",
color: "#000"
}}
>
<div
id="containerInfo"
style={{
position: "fixed",
//navigator.userAgentData.mobile ? width"100vw": width="20vw"
width: "100vw",
height: "100vh",
display: "none",
background: "#1D1D1D",
overflowY: "scroll",
color: "#FFF",
right: "0px", //background: "#2e323f"
//color: "#AAA"
borderLeft: "1px solid #CCC",
marginTop: "20px"
//paddingLeft: "5px"
//marginBottom: "20px"
}}
></div>
<div
id="container"
className="container"
style={{
//float: "left",
padding: "0px",
width: "100vw",
height: "100vh",
position: "fixed",
overflow: "scroll",
marginTop: "38px"
// width: "400px"
}}
>
{this.props.children}
</div>
</main>
</div>
</div>
);
}
}

@ -1,50 +0,0 @@
import "./style.css";
import React from "react";
export default class OverlayCard extends React.Component {
toBack() {
document.getElementById("pTitle").textContent = "Оверлеи";
document.getElementById("containerInfo").style.display = "none";
}
render() {
return (
<div className="sCard" style={{}}>
<h3 style={{}}>
<span
className="btn"
id="backBtn"
style={{
padding: "0px 20px 0px 20px",
float: "left",
color: "#FFF",
background: "#F00",
marginRight: "0.85em",
fontSize: "1.1em",
borderRadius: "0.9em"
//border: "1px outset #444",
//background: "rgb(78,116,26)",
// background: "rgb(78,116,26)",
//background:
// "linear-gradient(0deg, rgba(78,116,26,0.5536415249693627) 0%, rgba(229,237,235,0.9093838218881303) 35%)"
}}
onClick={() => this.toBack()}
>
<b style={{ float: "right" }}> {"X"}</b>
</span>
<b> {this.props.title.name}:</b> {this.props.OverlayInfo.name}
</h3>
<div>
<p style={{ fontSize: "1.4em" }}>
<b>{this.props.title.discription}:</b>
{this.props.OverlayInfo.description}
</p>
<iframe
style={{ width: "100%", height: " 100vh" }}
src={this.props.OverlayInfo.homepage}
seamless="false"
></iframe>
</div>
</div>
);
}
}

@ -1,489 +0,0 @@
import React from "react";
import ReactDOM from "react-dom";
//import { Link } from "react-router-dom";
//import { MainPage } from "../../pages/main";
import Accordion from "../Acardion";
import ModalForm from "../Modal";
import "./style.css";
class FullCard extends React.Component {
ui = {
name: "Имя",
category: "Категория:",
versions: "Доступные версии",
uses: " USE:",
decription: "Описание:",
site: "Сайт:",
InstallButton: {
text: "Установить"
}
};
styleUseinfo = {
mobile: {
position: "fixed",
bottom: "0px",
left: "0px",
width: "100vw",
background: "#FFF",
borderTop: "1px solid #CDC",
paddingTop: "5px"
},
nomob: { margin: "5px", width: "100vw", display: "inline" }
};
langs = [
{ title: "RU", link: "" },
{ title: "EN", link: "" },
{ title: "DE", link: "" }
];
isMobile() {
return navigator.userAgentData.mobile;
}
IntstallPackageParamms = {
NamePackage: this.props.PackageName.Name,
Version: "",
USE: [],
TargetUses: {}
};
toBack() {
document.getElementById("pTitle").textContent = "Главная";
document.getElementById("containerInfo").style.display = "none";
}
vInstall() {
//document.getElementById("containerInfo").display = "block";
if (this.IntstallPackageParamms.Version !== "") {
ReactDOM.render(
<ModalForm
title={this.props.PackageName.Name}
root={this.props.PackageName}
PropMain={this.props.rec}
icons={this.props.icons}
useDes={this.props.useDes}
Ipkg={this.props.Ipkg}
>
<div className="sCard">
<h1 className="title"> </h1>
<div
style={{
flex: "3",
//display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column"
}}
>
<img
src={
this.props.icons[this.props.PackageName.Name.split("/")[1]]
}
style={{
width: "128px",
height: "128px",
float: "left",
marginRight: "20px"
}}
alt={this.props.PackageName.Name.split("/")[1]}
/>
</div>
<div
style={{
flex: "9"
/*float: "left" */
}}
>
<span>
{" "}
<b>{this.ui.category}</b>{" "}
{this.props.PackageName.Name.split("/")[0]}
</span>
<div className="cVer" style={{ float: "flex" }}>
<b>{this.ui.versions}:</b>
{this.IntstallPackageParamms.Version}
</div>
<div style={{}}>
<Accordion title={this.ui.uses}>
<div
className="sUse"
style={{
overflowY: "scroll",
maxHeight: "150px",
background: "#EEE"
}}
>
{this.IntstallPackageParamms.USE.map((u, j) => (
<span style={{ padding: "3px" }} key={u} id={u}>
{this.chech_targent(u)}
</span>
))}
</div>
</Accordion>
</div>
<div>
<b>
<div id="useInfo" className="useInfo" style={{}}></div>
</b>
</div>
<div>
<p>
<b>{this.ui.decription}</b>{" "}
{this.props.PackageName.Description}
</p>
</div>
<div className="Btm">
<strong>
<span
className="btn right"
id={this.props.PackageName.Name}
style={{ cursor: "pointer" }}
onClick={() => this.vInstall()}
>
{this.ui.InstallButton.text}
</span>
</strong>
</div>
</div>
</div>
</ModalForm>,
document.getElementById("containerInfo")
);
} else {
let statblVer = "";
for (let v = 0; v < this.props.PackageName.version.length; v++) {
if (this.props.PackageName.version[v].split("[U]")[1] === "") {
statblVer = this.props.PackageName.version[v].split("[U]")[0];
}
}
this.IntstallPackageParamms.Version = statblVer;
this.vInstall();
/* ReactDOM.render(
<ModalForm
title={"Error"}
root={this.props.PackageName}
PropMain={this.props.rec}
icons={this.props.icons}
useDes={this.props.useDes}
Ipkg={this.props.Ipkg}
>
<div
style={{
background: "#F00",
color: "#000",
padding: "20px",
fontSize: "1.1em"
}}
>
Error
</div>
</ModalForm>,
document.getElementById("containerInfo")
);*/
}
}
addUse(use) {
if (
document.getElementById(use).style.background === "#0F0" ||
document.getElementById(use).style.background === "rgb(0, 255, 0)"
) {
document.getElementById(use).style.background = "#FFF";
for (let i = 0; i < this.IntstallPackageParamms.USE.length; i++) {
console.log(i);
if (use === this.IntstallPackageParamms.USE[i]) {
this.IntstallPackageParamms.USE.slice(i, i); // delete this.IntstallPackageParamms.USE[i];
}
}
} else {
document.getElementById(use).style.background = "#0F0";
this.IntstallPackageParamms.USE[
this.IntstallPackageParamms.USE.length
] = use;
}
console.log(this.IntstallPackageParamms);
}
addVersion(version) {
console.log(typeof version);
if (this.IntstallPackageParamms.Version !== "") {
if (this.IntstallPackageParamms.Version !== version) {
document.getElementById(
this.IntstallPackageParamms.Version
).style.background = "#FFF";
this.IntstallPackageParamms.Version = version;
document.getElementById(
version
).style.background = document
.getElementById(version)
.style.border.split("2px solid")[1];
} else {
document.getElementById(
this.IntstallPackageParamms.Version
).style.background = "#FFF";
this.IntstallPackageParamms.Version = "";
}
} else {
this.IntstallPackageParamms.Version = version;
document.getElementById(
version
).style.background = document
.getElementById(version)
.style.border.split("2px solid")[1];
console.log(this.IntstallPackageParamms);
}
}
checkVersion(item) {
//console.log(item.split("[U]")[1] === "");
console
.log
//this.props.Ipkgthis.props.PackageName.Name.split("/")[1])
();
if (item.split("[U]")[1] === "") {
return (
<span
key={item}
id={item.split("[U]")[0]}
style={{ border: " 2px solid #0F0", marginLeft: "5px" }}
onClick={() => this.addVersion(item.split("[U]")[0])}
>
{item.split("[U]")[0]}
</span>
);
} else {
return (
<span
key={item}
id={item.split("[M]")[0]}
style={{ border: "2px solid #F00", marginLeft: "5px" }}
onClick={() => this.addVersion(item.split("[M]")[0])}
>
{item.split("[M]")[0]}
</span>
);
}
}
chech_targent(t) {
let lt = "";
if (t.split("+").length > 1) {
lt = t.split("+")[1];
} else {
lt = t;
}
let targets = ["single_target_", "modules_", "cpu_flags"];
if (lt.split("single_target_").length > 1) {
this.IntstallPackageParamms.TargetUses[
String(t.split("single_target_")[0]).toUpperCase()
] = String(t.split("single_target_")[1]);
return (
String(t.split("single_target_")[0]).toUpperCase() +
"=\t" +
String(t.split("single_target_")[1])
);
}
if (lt.split("modules_").length > 1) {
this.IntstallPackageParamms.TargetUses[
String(t.split("_modules_")[0]).toUpperCase()
] = String(t.split("_modules_")[1]);
return (
String(t.split("_modules_")[0]).toUpperCase() +
"=\t" +
String(t.split("_modules_")[1])
);
} else if (lt.split("cpu_flags").length > 1) {
this.IntstallPackageParamms.TargetUses["CPU_FLAGS"] = String(
t.split("cpu_flags_")[1]
);
return "CPU_FLAGS=\t" + String(t.split("cpu_flags_")[1]);
} else {
return t;
}
}
VuseInfo(use) {
//console.log(use);
//console.log(this.props.useDes);
//console.log(Object.keys(this.props.uses));
//document.getElementById(uId).style.background = "orange";
if (use.split("+").length > 1) {
use = use.split("+")[1];
}
if (
use in this.props.useDes.LocalUSE ||
use in this.props.useDes.GlobalUSE
//use.split("+")[1] in this.props.useDes.LocalUSE ||
//use.split("+")[1] in this.props.useDes.GlobalUSE
) {
if (use in this.props.useDes.LocalUSE) {
document.getElementById(
"useInfo"
).textContent = this.props.useDes.LocalUSE[use];
console.log(use);
} else if (use in this.props.useDes.GlobalUSE) {
document.getElementById(
"useInfo"
).textContent = this.props.useDes.GlobalUSE[use];
console.log(use);
} /*/else {
document.getElementById("useInfo").textContent = this.props.useDes[
use.split("+")[1]
];
console.log(this.props.useDes[use.split("+")[1]]);
}*/
//document.getElementById(uId).style.background = "orange";
//alert(this.props.useDes[use]);
} else {
document.getElementById("useInfo").textContent = use;
}
//document.getElementById("useInfo").textContent = use;
}
clear_VuseInfo() {
document.getElementById("useInfo").textContent = "";
}
render() {
this.IntstallPackageParamms.USE = [];
//document.getElementById("HomePage").style.display = "block";
return (
// Карточка пакета с возможностью установки
<div className="fullCard">
<div className="sCard">
<div className="title" style={{}}>
{this.props.PackageName.Name.split("/")[1]}
<span
className="btn"
id="backBtn"
style={{
padding: "0px 20px 0px 20px",
float: "left",
color: "#FFF",
background: "#F00",
marginRight: "0.85em",
fontSize: "1.1em",
borderRadius: "0.9em"
//border: "1px outset #444",
//background: "rgb(78,116,26)",
// background: "rgb(78,116,26)",
//background:
// "linear-gradient(0deg, rgba(78,116,26,0.5536415249693627) 0%, rgba(229,237,235,0.9093838218881303) 35%)"
}}
onClick={() => this.toBack()}
>
<b style={{ float: "right" }}> {"X"}</b>
</span>
</div>
<hr />
<div
style={{
flex: "6",
//display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column"
}}
>
<img
// Иконка пакета в карточке
className="card__img"
src={this.props.icons[this.props.PackageName.Name.split("/")[1]]}
style={{
width: "128px",
height: "128px",
align: "middle",
float: "left",
marginRight: "20px"
}}
alt={this.props.PackageName.Name.split("/")[1]}
/>
</div>
<div
style={{
flex: "9"
/*float: "left" */
}}
>
<span>
{" "}
<b>{this.ui.category}</b>{" "}
{this.props.PackageName.Name.split("/")[0]}
</span>
<div className="cVer">
<b>{this.ui.versions}:</b>
{this.props.PackageName.version.map((v) => this.checkVersion(v))}
</div>
<div style={{ padding: "5px" }}>
<Accordion title={this.ui.uses}>
<div
style={{
overflowY: "scroll",
height: "175px",
width: "100vw",
border: "1px outset #CCC",
display: "grid"
}}
>
{this.props.PackageName.USE.map((u, j) => (
<span
key={u}
id={u}
onMouseOver={() =>
this.VuseInfo(this.props.PackageName.USE[j])
}
onMouseOut={() => this.clear_VuseInfo()}
onClick={() => this.addUse(this.props.PackageName.USE[j])}
>
{this.chech_targent(u)}
</span>
))}
</div>
</Accordion>
<b>
<div
id="useInfo"
className="useInfo"
style={
this.isMobile
? this.styleUseinfo.nomob
: this.styleUseinfo.mobile
}
></div>
</b>
<div>
<b>Оверлеи:</b>
<span>{this.props.PackageName.repo}</span>
</div>
</div>
<div>
<p>
<b>{this.ui.decription}</b> {this.props.PackageName.Description}
</p>
<a href={this.props.PackageName.Home_page}>{this.ui.site} </a>
</div>
<div className="Btm">
<strong>
<span
className="btn right"
id={this.props.PackageName.Name}
style={{ cursor: "pointer" }}
onClick={() => this.vInstall()}
>
{this.ui.InstallButton.text}
</span>
</strong>
</div>
</div>
</div>
</div>
);
}
}
export default FullCard;

@ -1,93 +0,0 @@
import React from "react";
import ReactDOM from "react-dom";
import FullCard from "./fullCard";
//import PkgList from "../../pages/pks";
import "./style.css";
//import Swiper from "react-slider-swiper";
//import InstallForm from "../pages/InstallForm";
const ui = { description: "Описание" };
class Scard extends React.Component {
//Viewinstall(package) {
//const pkgInfo = this.props.rec[package]
//return <InstallForm rec={pkgInfo} />;
//}:
params = {
pagination: ".swiper-pagination",
paginationClickable: true,
nextButton: ".swiper-button-next",
prevButton: ".swiper-button-prev",
spaceBetween: 30,
runCallbacksOnInit: true,
onInit: (swiper) => {
this.swiper = swiper;
}
};
viweinfo(pkg) {
//onClick={() => this.props.ViewPackageInfo(this.props.rec[k][i])}
document.getElementById("backBtn").style.display = "block";
document.getElementById("pTitle").textContent = pkg.Name.split("/")[1];
document.getElementById("container").style.display = "none";
document.getElementById("containerInfo").style.display = "block";
ReactDOM.render(
<FullCard
PackageName={pkg}
PropMain={this.props.rec}
icons={this.props.icons}
useDes={this.props.useDes}
Ipkg={this.props.Ipkg}
/>,
document.getElementById("containerInfo")
);
}
render() {
return (
<div
className="card__list"
style={{
padding: "5px",
//margin: "3px",
marginTop: "10px",
//width: "100vw",
display: "inline-flex",
border: "1px solid #CCC",
borderRadius: " 10px",
boxShadow: "3px 4px 10px #CDC"
//height:"75px"
}}
//onClick={() => this.viweinfo(this.props.rec[k][i])}
>
<img
className="card__img"
style={{
width: "64px",
height: "64px"
}}
src={this.props.icons[this.props.pn.Name.split("/")[1]]}
alt={this.props.pn.Name.split("/")[1]}
/>
<div style={{ marginLeft: "10px" }}>
<b>
{" "}
<span
className="card__title"
style={{
color: "red",
width: "100vw",
overflow: "clip",
fontSize: "1.1em"
}}
key={this.props.pn.Name}
>
{this.props.pn.Name.split("/")[1]}
</span>
</b>
<div style={{ overflow: "hidden" }}>{this.props.pn.Description}</div>
</div>
</div>
);
}
}
export default Scard;

@ -1,76 +0,0 @@
.sCard {
padding: 5px;
font-size: 1.2em;
text-align: left;
/*border-bottom: 1px solid #aaa;*/
}
.sCard:hover {
}
.cTitle {
padding-top: 0px;
margin: 0px;
font: 20px bold;
text-align: center;
border-bottom: 1px solid #ccc;
}
.sUse {
display: flow-root;
}
.sUse span {
list-style: none;
display: inline-flex;
padding: 5px;
}
.sUse span:hover {
background: orange;
cursor: pointer;
}
.cVer {
display: flow-root;
}
.cVer li {
list-style: none;
padding-left: 5px;
}
.cVer li:hover {
cursor: pointer;
}
.card__img {
object-fit: contain;
}
.Btm {
position: fixed;
bottom: 20px;
right: 20px;
}
.btn {
float: right;
padding: 5px;
background: rgba(125, 122, 255, 1);
box-shadow: 0 0 3 #000;
color: #fff;
}
.green {
background: #0f0;
margin: 3px;
}
.red {
background: #f00;
margin: 3px;
}
.descrition {
display: flexbox;
}
.useInfo {
margin: 10px;
}

@ -1,24 +0,0 @@
import React from "react";
export default class CheckField extends React.Component {
check = this.props.checking;
chengeStatus(id) {
this.check = !this.check;
document.getElementById(id).checked = this.check;
return !this.check;
}
render() {
return (
<p onClick={() => this.chengeStatus(this.props.id)}>
<span> {this.props.text}</span>
<input
id={this.props.id}
style={{ float: "right" }}
type="checkbox"
checked={this.check}
//onClick={() => this.chengeStatus(this.props.id)}
/>
</p>
);
}
}

@ -1,57 +0,0 @@
import React from "react";
//import MainPage from "..//../pages/main";
export default class MainContainer extends React.Component {
constructor(props) {
super(props);
const VVSB = false;
// const [VVSBar, seViewSidebar] = useState(false);
}
viewSideBar() {
if (!this.VVSB) {
document.getElementById("MainContent").style.paddingLeft = "300px";
document.getElementById("btn-toggle").style.float = "right";
document.getElementById("navBar").style.left = "300px";
this.VVSB = true;
} else {
document.getElementById("MainContent").style.paddingLeft = "0px";
document.getElementById("navBar").style.left = "-280px";
this.VVSB = false;
}
}
render() {
return (
<div className="page-wrapper chiller-theme toggled">
<main
id="MainContent"
className="page-content"
style={{ paddingLeft: "0px" }}
>
<div
id="btn-toggle"
class="btn-toggle"
onClick={() => this.viewSideBar()}
style={{}}
>
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 448 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
</svg>
</div>
<div className="container">
<h2 id="pageTitle" style={{ float: "left" }}>
{""}
</h2>
{this.props.children}
</div>
</main>
</div>
);
}
}

@ -1,78 +0,0 @@
import React from "react";
import ReactDOM from "react-dom";
import FullCard from "./Cards/fullCard";
export default class ModalForm extends React.Component {
styles = {
modal: {
//padding: "50px",
background: "#1d1d1d",
color: "#FFF",
position: "fixed",
top: "50%",
left: "50%",
right: "0px",
WebkitTransform: "translate(50%, -50%)",
MsTransform: "translate(-50%, -50%)",
transform: "translate(-50%, -50%)",
boxShadow: "3px 4px 10px #AAA",
padding: "10px"
},
mobile: {
//padding: "50px",
background: "1d1d1d",
position: "fixed",
top: "0px",
left: "0px",
width: "100%",
height: "100%",
right: "0px",
WebkitTransform: "translate(50%, -50%)",
MsTransform: "translate(-50%, -50%)",
transform: "translate(-50%, -50%)",
boxShadow: "3px 4px 10px #AAA"
//padding: "10px"
}
};
isMobile() {
return navigator.userAgentData.mobile;
}
closeFunc() {
ReactDOM.render(
<FullCard
PackageName={this.props.root}
PropMain={this.props.rec}
icons={this.props.icons}
useDes={this.props.useDes}
Ipkg={this.props.Ipkg}
/>,
document.getElementById("containerInfo")
);
}
render() {
return (
<div
id={this.props.title}
style={this.isMobile() ? this.styles.mobile : this.styles.modal}
>
<div
style={{ display: "inline", background: "#CDC", fontSize: "0.8m" }}
>
<span style={{ fontSize: "1.1em", float: "left", padding: "15px" }}>
{" "}
{this.props.title}
</span>
<div className="btn-group">
<div
style={{ background: "#F00", color: "#FFF", float: "right" }}
onClick={() => this.closeFunc()}
>
X
</div>
</div>
</div>
<div>{this.props.children}</div>
</div>
);
}
}

@ -1,321 +0,0 @@
import React, { Component } from "react";
import ReactDOM from "react-dom";
//import axios from "axios";
import {
ProSidebar,
Menu,
MenuItem,
SubMenu,
SidebarHeader,
//SidebarFooter,
SidebarContent
} from "react-pro-sidebar";
//import "react-pro-sidebar/dist/css/styles.css";
import MenuPage from "../menu";
import "../../pages/style.css";
import FullCard from "../Cards/fullCard";
import UserProfilePage from "../../pages/profile";
//var view = false;
class NavBar extends Component {
user = { username: "Demo", userStatus: "Guest" };
ui = {
menu: {
text: "Меню"
},
catalog: {
text: "Каталог"
}
};
styles = {
desktop: {
background: "2e323f",
//position: "ralative",
display: "inline",
//display: "none",
//height: "100%",
left: "-50px",
//width: "",
float: "left"
},
mobile: {
background: "2e323f",
position: "fixed",
display: "none",
height: "100%",
left: "300px",
width: "200px"
}
};
viewMobile() {
return (
<ProSidebar
id="navBar"
style={{
height: "100vh",
marginTop: "40px"
/*
navigator.userAgentData.mobile
? this.styles.mobile
: this.styles.desktop
*/
// navigator.userAgentData.mobile
}}
>
<SidebarHeader>
<div
style={{
padding: "24px",
textTransform: "uppercase",
fontWeight: "bold",
fontSize: "14px",
letterSpacing: "1px",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
paddingLeft: "12px"
}}
>
Webport
</div>
<MenuItem>
<div
className="user-pic"
style={{
width: "60px",
marginRight: "3px",
float: "left",
paddingLeft: "12px"
}}
>
<div
style={{ width: "56px", height: "56px", background: "green" }}
className="img-responsive img-rounded"
//src="https://raw.githubusercontent.com/azouaoui-med/pro-sidebar-template/gh-pages/src/img/user.jpg"
alt="User picture"
onClick={() => (
//(document.getElementById("backBtn").style.display = "block"),
//(document.getElementById("container").style.display = "none"),
(document.getElementById("containerInfo").style.display =
"block"),
ReactDOM.render(
<UserProfilePage
Ipkgs={this.props.Ipkgs}
catalog={this.props.category}
/>,
document.getElementById("containerInfo")
)
)}
></div>
</div>
<div
className="user-info"
style={{ float: "left", width: " 100%" }}
>
<span className="user-name">{this.user.username}</span>
<span
className="user-role"
style={{ width: "100vw", color: "green" }}
>
{this.user.userStatus}
</span>
{/* <span className="user-status">
<i className="fa fa-circle"></i>
<span>Online</span>
</span>*/}
</div>
</MenuItem>
<MenuItem style={{}}>
{/* <input
id="inS"
name="inS"
classname="form-control"
type="text"
placeholder="Введите имя пакета"
onChange={(e) => this.findPakg(e.target.value)}
style={{
fontSize: "1.2em",
margin: "10px",
backgroundColor: "rgba(81, 81, 81, 0.5)",
border: "none",
padding: "5px",
//ackground: "#2e233f",
//borderRadius: "15px",
//border: "3px inset #2e322f",
color: "#c7c7c7"
}}
/>*/}
</MenuItem>
</SidebarHeader>
<SidebarContent style={{ overflowX: "clip" }}>
<Menu>
<MenuPage
menuItem={this.props.menuItem}
title={this.ui.menu.text}
/>
<MenuItem
title={this.ui.catalog.text}
style={{ paddingRight: "0px" }}
>
{/*CATALOG */}
<SubMenu title={this.ui.catalog.text}>
{Object.keys(this.props.category).map((k, i) => (
<MenuItem
style={{
paddingRight: "0px",
width: "100vw",
float: "left"
}}
>
{
//&#xe2c7;
}
<SubMenu
title={
this.checkAlias(k) +
" (" +
this.props.category[k].length +
")"
}
>
{this.props.category[k].map((pn, j) => (
<MenuItem
onClick={() =>
this.viewPakegeInfo(
this.props.category[k][i] +
"/" +
this.props.category[k][j]
)
}
style={{
//borderBottom: "1px solid red ", &#xe873;
width: "100%"
}}
>
{
//
}
{pn}
</MenuItem>
))}
</SubMenu>
</MenuItem>
))}
</SubMenu>
</MenuItem>
</Menu>
</SidebarContent>
</ProSidebar>
);
}
viewOther() {
return (
<Menu style={{ display: "inline", overflowY: "scroll", width: "200px" }}>
<MenuPage
menuItem={this.props.menuItem}
title={this.ui.menu.text}
style={{ paddingRight: "0px", float: "left" }}
/>
<MenuItem
title={this.ui.catalog.text}
style={{ paddingRight: "0px", float: "left", overflowY: "scroll" }}
>
{/*CATALOG */}
<SubMenu title={this.ui.catalog.text} style={{ overflowY: "scroll" }}>
{Object.keys(this.props.category).map((k, i) => (
<MenuItem
style={{
paddingRight: "0px",
width: "100vw"
}}
>
{
//&#xe2c7;
}
<SubMenu
title={
this.checkAlias(k) +
" (" +
this.props.category[k].length +
")"
}
>
{this.props.category[k].map((pn, j) => (
<MenuItem
onClick={() =>
this.viewPakegeInfo(
this.props.category[k][i] +
"/" +
this.props.category[k][j]
)
}
style={{
//borderBottom: "1px solid red ", &#xe873;
width: "100%"
}}
>
{
//
}
{pn}
</MenuItem>
))}
</SubMenu>
</MenuItem>
))}
</SubMenu>
</MenuItem>
</Menu>
);
}
checkAlias(text) {
//console.log( "aliases:\t" + this.props.aliases)
//return text;
if (text in this.props.aliases) {
return this.props.aliases[text];
//console.log(this.props.aliases[text]);
} else {
return text;
//console.log(e);
}
}
viewPakegeInfo(pkgName) {
const url = this.props.ServerAdress + "/find?pkg=" + pkgName;
console.log(url, { mode: "no-cors" });
fetch(url, ["POST"])
.then((response) => response.json())
// .then(commits => alert(commits[0].author.login))
.catch((error) => {
console.error("Error:", error);
});
/*try {
portage_list[pkgName];
} catch (e) {*/
document.getElementById("containerInfo").display = "block";
ReactDOM.render(
<FullCard
PackageName={pkgName}
PropMain={this.props.rec}
icons={this.props.icons}
/>,
document.getElementById("containerInfo")
);
console.log(pkgName);
}
findPakg(pkg) {
this.viewPakegeInfo(pkg);
}
render() {
return navigator.userAgentData.mobile
? this.viewMobile()
: this.viewOther();
}
}
export default NavBar;

@ -1,568 +0,0 @@
.NavBar {
user-select: none;
text-align: center;
height: 100%;
width: 11rem;
min-width: 12vw;
overflow-y: auto;
overflow-x: hidden;
color: var(--nav-color);
background-color: var(--nav-bg-color);
border-right: 1px solid rgba(0, 0, 0, 0.1);
height: 100vh;
position: sticky;
top: 0;
}
.NavBar li {
display: flex;
align-items: center;
position: relative;
font-size: 1rem;
padding-left: 1rem;
height: 2rem;
margin: 0 -1rem;
margin-bottom: 10px;
outline: none;
cursor: pointer;
border-right: 3px solid transparent;
}
.categoryIcon {
margin-right: 0.5rem;
width: 1.2rem;
min-width: 1.2rem;
height: 1.2rem;
background-size: 100%;
background-repeat: no-repeat;
background-position-x: 0, -100px;
}
.container {
width: 100vw;
}
.visible {
display: block;
}
.unvisible {
display: none;
}
@media screen and (max-width: 900px) {
ul.NavBar {
width: 50%;
/*width: 100%;*/
position: relative;
}
}
@media screen and (min-width: 480px) {
ul.NavBar li a {
width: 50%;
position: asboliute;
height: 100%;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
@keyframes swing {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(10deg);
}
30% {
transform: rotate(0deg);
}
40% {
transform: rotate(-10deg);
}
50% {
transform: rotate(0deg);
}
60% {
transform: rotate(5deg);
}
70% {
transform: rotate(0deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes sonar {
0% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
body {
font-size: 0.9rem;
}
.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-dropdown > a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/*----------------page-wrapper----------------*/
.page-wrapper {
height: 100vh;
}
.page-wrapper .theme {
width: 40px;
height: 40px;
display: inline-block;
border-radius: 4px;
margin: 2px;
}
.page-wrapper .theme.chiller-theme {
background: #1e2229;
}
/*----------------toggeled sidebar----------------*/
.page-wrapper.toggled .sidebar-wrapper {
left: 0px;
}
@media screen and (min-width: 768px) {
.page-wrapper.toggled .page-content {
padding-left: 300px;
}
}
/*----------------show sidebar button----------------*/
#show-sidebar {
position: fixed;
left: 0;
top: 10px;
border-radius: 0 4px 4px 0px;
width: 35px;
transition-delay: 0.3s;
}
.page-wrapper.toggled #show-sidebar {
left: -40px;
}
/*----------------sidebar-wrapper----------------*/
.sidebar-wrapper {
width: 260px;
height: 100%;
max-height: 100%;
position: fixed;
top: 0;
left: -300px;
z-index: 999;
}
.sidebar-wrapper ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar-wrapper a {
text-decoration: none;
}
/*----------------sidebar-content----------------*/
.sidebar-content {
max-height: calc(100% - 30px);
height: calc(100% - 30px);
overflow-y: auto;
position: relative;
}
.sidebar-content.desktop {
overflow-y: hidden;
}
/*--------------------sidebar-brand----------------------*/
.sidebar-wrapper .sidebar-brand {
padding: 10px 20px;
display: flex;
align-items: center;
}
.sidebar-wrapper .sidebar-brand > a {
text-transform: uppercase;
font-weight: bold;
flex-grow: 1;
}
.sidebar-wrapper .sidebar-brand #close-sidebar {
cursor: pointer;
font-size: 20px;
}
/*--------------------sidebar-header----------------------*/
.sidebar-wrapper .sidebar-header {
padding: 20px;
overflow: hidden;
}
.sidebar-wrapper .sidebar-header .user-pic {
float: left;
width: 60px;
padding: 2px;
border-radius: 12px;
margin-right: 15px;
overflow: hidden;
}
.sidebar-wrapper .sidebar-header .user-pic img {
object-fit: cover;
height: 100%;
width: 100%;
}
.sidebar-wrapper .sidebar-header .user-info {
float: left;
}
.sidebar-wrapper .sidebar-header .user-info > span {
display: block;
}
.sidebar-wrapper .sidebar-header .user-info .user-role {
font-size: 12px;
}
.sidebar-wrapper .sidebar-header .user-info .user-status {
font-size: 11px;
margin-top: 4px;
}
.sidebar-wrapper .sidebar-header .user-info .user-status i {
font-size: 8px;
margin-right: 4px;
color: #5cb85c;
}
/*-----------------------sidebar-search------------------------*/
.sidebar-wrapper .sidebar-search > div {
padding: 10px 20px;
}
/*----------------------sidebar-menu-------------------------*/
.sidebar-wrapper .sidebar-menu {
padding-bottom: 10px;
}
.sidebar-wrapper .sidebar-menu .header-menu span {
font-weight: bold;
font-size: 14px;
padding: 15px 20px 5px 20px;
display: inline-block;
}
.sidebar-wrapper .sidebar-menu ul li a {
display: inline-block;
width: 100%;
text-decoration: none;
position: relative;
padding: 8px 30px 8px 20px;
}
.sidebar-wrapper .sidebar-menu ul li a i {
margin-right: 10px;
font-size: 12px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 4px;
}
.sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
display: inline-block;
animation: swing ease-in-out 0.5s 1 alternate;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f105";
font-style: normal;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
background: 0 0;
position: absolute;
right: 15px;
top: 14px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
padding: 5px 0;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
padding-left: 25px;
font-size: 13px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
content: "\f111";
font-family: "Font Awesome 5 Free";
font-weight: 400;
font-style: normal;
display: inline-block;
text-align: center;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 10px;
font-size: 8px;
}
.sidebar-wrapper .sidebar-menu ul li a span.label,
.sidebar-wrapper .sidebar-menu ul li a span.badge {
float: right;
margin-top: 8px;
margin-left: 5px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
float: right;
margin-top: 0px;
}
.sidebar-wrapper .sidebar-menu .sidebar-submenu {
display: none;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
transform: rotate(90deg);
right: 17px;
}
/*--------------------------side-footer------------------------------*/
.sidebar-footer {
position: absolute;
width: 100%;
bottom: 0;
display: flex;
}
.sidebar-footer > a {
flex-grow: 1;
text-align: center;
height: 30px;
line-height: 30px;
position: relative;
}
.sidebar-footer > a .notification {
position: absolute;
top: 0;
}
.badge-sonar {
display: inline-block;
background: #980303;
border-radius: 50%;
height: 8px;
width: 8px;
position: absolute;
top: 0;
}
.badge-sonar:after {
content: "";
position: absolute;
top: 0;
left: 0;
border: 2px solid #980303;
opacity: 0;
border-radius: 50%;
width: 100%;
height: 100%;
animation: sonar 1.5s infinite;
}
/*--------------------------page-content-----------------------------*/
.page-wrapper .page-content {
display: inline-block;
width: 100%;
padding-left: 0px;
padding-top: 20px;
}
.page-wrapper .page-content > div {
padding: 20px 40px;
}
.page-wrapper .page-content {
overflow-x: hidden;
}
/*------scroll bar---------------------*/
::-webkit-scrollbar {
width: 5px;
height: 7px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #525965;
border: 0px none #ffffff;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
background: #525965;
}
::-webkit-scrollbar-thumb:active {
background: #525965;
}
::-webkit-scrollbar-track {
background: transparent;
border: 0px none #ffffff;
border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
background: transparent;
}
::-webkit-scrollbar-track:active {
background: transparent;
}
::-webkit-scrollbar-corner {
background: transparent;
}
/*-----------------------------chiller-theme-------------------------------------------------*/
.chiller-theme .sidebar-wrapper {
background: #31353d;
}
.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper .sidebar-menu {
border-top: 1px solid #3a3f48;
}
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
border-color: transparent;
box-shadow: none;
}
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-status,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text,
.chiller-theme .sidebar-wrapper .sidebar-brand > a,
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a,
.chiller-theme .sidebar-footer > a {
color: #818896;
}
.chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover > a,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info,
.chiller-theme .sidebar-wrapper .sidebar-brand > a:hover,
.chiller-theme .sidebar-footer > a:hover i {
color: #b8bfce;
}
.page-wrapper.chiller-theme.toggled #close-sidebar {
color: #bdbdbd;
}
.page-wrapper.chiller-theme.toggled #close-sidebar:hover {
color: #ffffff;
}
.chiller-theme .sidebar-wrapper ul li:hover a i,
.chiller-theme
.sidebar-wrapper
.sidebar-dropdown
.sidebar-submenu
li
a:hover:before,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu:focus + span,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a i {
color: #16c7ff;
text-shadow: 0px 0px 10px rgba(22, 199, 255, 0.5);
}
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a i,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown div,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
background: #3a3f48;
}
.chiller-theme .sidebar-wrapper .sidebar-menu .header-menu span {
color: #6c7b88;
}
.chiller-theme .sidebar-footer {
background: #3a3f48;
box-shadow: 0px -1px 5px #282c33;
border-top: 1px solid #464a52;
}
.chiller-theme .sidebar-footer > a:first-child {
border-left: none;
}
.chiller-theme .sidebar-footer > a:last-child {
border-right: none;
}

@ -1,12 +0,0 @@
.top {
width: 100vw;
background: #2e323f;
}
.top input {
border: 3px solid #aaa;
border-radius: 10px;
padding: 3px;
font-size: 16px;
background: #2e323f;
color: #aaa;
}

@ -1,47 +0,0 @@
import React from "react";
import "./style.css";
import Menu from "../menu";
//import find from '../serverses/find';
import Scxard from "../Cards/smallCard";
import Scard from "../Cards/smallCard";
export default class TopPanel extends React.Component {
find_pkg(pkg) {
let response = fetch("/find/?q" + pkg);
if (response.ok) {
// если HTTP-статус в диапазоне 200-299
// получаем тело ответа (см. про этот метод ниже)
return <Scard rec={response.json} />;
//json = response.json();
} else {
alert("Ошибка HTTP: " + response.status);
}
}
render() {
return (
<div>
<header className="top">
<Menu menuItem={this.props.menuItem} />
<input
id="inS"
name="inS"
classname="form-control"
type="text"
placeholder="Введите имя пакета"
onChange={(e) => e.target.value}
style={{
fontSize: "1.2em",
margin: "10px",
//ackground: "#2e233f",
borderRadius: "15px",
border: "3px inset #2e322f",
color: "#CCC"
}}
/>
</header>
</div>
);
}
}

@ -1,33 +0,0 @@
import React from "react";
import { render } from "react-dom";
export default class Widget extends React.Component {
render() {
return (
<div
style={{
//background: "#1d1d1d",
//paddingRight: "0px",
//width: "100%",
marginTop: "35px",
overflow: "clip",
display: "inline",
//background: "rgb(59,58,125)",
//background:
// "linear-gradient(4deg, rgba(59,58,125,0.9671218829328606) 12%, rgba(148,187,233,1) 86%)",
float: "left",
//border: "1px solid #CCC",
//borderRadius: "6px",
//boxShadow: "3px 4px 10px #999"
borderBottom: "1px solid #CCC"
//transformStyle: "preserve-3d",
//transform: "rotate(30deg)"
}}
>
{this.props.children}
</div>
);
}
}

@ -1,67 +0,0 @@
import * as React from "react";
import { styled } from "@mui/material/styles";
import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
import MuiAccordion from "@mui/material/Accordion";
import MuiAccordionSummary from "@mui/material/AccordionSummary";
import MuiAccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@mui/material/Typography";
const Accordion = styled((props) => (
<MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
border: `1px solid ${theme.palette.divider}`,
"&:not(:last-child)": {
borderBottom: 0
},
"&:before": {
display: "none"
}
}));
const AccordionSummary = styled((props) => (
<MuiAccordionSummary
expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: "0.9rem" }} />}
{...props}
/>
))(({ theme }) => ({
backgroundColor:
theme.palette.mode === "dark"
? "rgba(255, 255, 255, .05)"
: "rgba(0, 0, 0, .03)",
flexDirection: "row-reverse",
"& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
transform: "rotate(90deg)"
},
"& .MuiAccordionSummary-content": {
marginLeft: theme.spacing(1)
}
}));
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
padding: theme.spacing(2),
borderTop: "1px solid rgba(0, 0, 0, .125)"
}));
export default function CustomizedAccordions() {
const [expanded, setExpanded] = React.useState("panel1");
const handleChange = (panel) => (event, newExpanded) => {
setExpanded(newExpanded ? panel : false);
};
return (
<div>
<Accordion
expanded={expanded === this.props.article.title}
onChange={handleChange(this.props.article.title)}
>
<AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
<Typography>{this.props.article.title}</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>{this.props.article.text}</Typography>
</AccordionDetails>
</Accordion>
</div>
);
}

@ -1,16 +0,0 @@
import React from "react";
import "./style.css";
export default class Button extends React.Component {
render() {
return (
<div
class
Name="btn"
onClick={() => this.props.handler()}
styl={{ background: "orange", color: "#FFF", textDecoration: "none" }}
>
{this.props.text}
</div>
);
}
}

@ -1,30 +0,0 @@
import React from 'react'
import { render } from 'react-dom'
export default class Layers extends React.Component{
render(){
consttuctor(props){
super(props)
active = this.menuBtn[0]
}
return(
this.props.menuButton.map((it, p) => (
<div
id={it.text}
style={this.menuBtn.all}
onClick={() => (
(this.active = this.props.text),
this.chechActive(it.text),
console.log(this.active),
ReactDOM.render(
this.menuButton[p].handler(),
document.getElementById("listOve")
)
)}
>
{it.text}
</div>
))
)}}

@ -1,51 +0,0 @@
import React from "react";
import { Link } from "react-router-dom";
import { MenuItem, SubMenu } from "react-pro-sidebar";
import "react-pro-sidebar/dist/css/styles.css";
class MenuPage extends React.Component {
styles = { menu: { display: "inline-flex", li: { marginLeft: "20px" } } };
render() {
return (
<ul style={this.styles.menu}>
{this.props.menuItem.map((item) => (
<li style={{ padding: "10px", listStyle: "none" }}>
<b>
<Link
key={item.name}
className=""
id={item.name}
to={item.url}
style={{ color: "#CCC", textDecoration: "none" }}
>
{item.text}
</Link>
</b>
</li>
))}
</ul>
);
}
}
export default MenuPage;
/*
<MenuItem style={this.styles.menu}>
<SubMenu title={this.props.title}>
{this.props.menuItem.map((item) => (
<MenuItem>
<Link
key={item.name}
className=""
id={item.name}
to={item.url}
style={{ color: "#CCC", textDecoration: "none" }}
>
{item.text}
</Link>
</MenuItem>
))}
</SubMenu>
</MenuItem>
*/

@ -1,96 +0,0 @@
import React from "react";
import ReactDOM from "react-dom";
import OverlayCard from "../Componets/Cards/OverlayCard";
export default class OvItem extends React.Component {
ViewOvelay(ov) {
//document.getElementById("container").style.display = "none";
//document.getElementById("backBtn").style.display = "block";
document.getElementById("containerInfo").style.display = "block";
ReactDOM.render(
<OverlayCard OverlayInfo={ov} title={this.props.title} />,
document.getElementById("containerInfo")
);
}
render() {
return (
<div
align="center"
className="flex_tab "
key={this.props.over.nane}
style={{
padding: "10px",
//margin: "3px",
marginTop: "5px",
//width: "100vw",
display: "inline-flex",
border: "1px solid #CCC",
borderRadius: " 10px",
boxShadow: "3px 4px 10px #CDC",
height: "125px"
//height:"75px"
//padding: "15px",
//display: "inline-flex",
//border: "1px solid #CCC"
//boxShadow: "3px 4px 10px #CDC"
}}
>
<div
style={{
// border: "1px solid #AAA",
//boxShadow: "3px 4px 10px #CDC",
borderRadius: "10px",
width: "100vw"
//padding: "5px"
}}
>
<h3 style={{ textAlign: "center" }}>
<b>{this.props.over.name}</b>{" "}
</h3>
<div
style={{ height: "32px", textAlign: "left", overflow: "hidden" }}
>
<span>{this.props.title.discription}:</span>
<b>
<span style={{ overflow: "hidden" }}>
{this.props.over.description}{" "}
</span>
</b>
</div>
<div
className=" btn-group"
style={{
//display: "flex",
//margin: "10px",
//padding: "0px",
float: "right",
color: "#000"
}}
>
<div></div>
<div
className="btn"
style={{
background: "orange",
color: "#FFF",
textDecoration: "none",
cursor: "pointer"
}}
onClick={() => (
(document.getElementById(
"pTitle"
).textContent = this.props.over.name),
this.ViewOvelay(this.props.over)
)}
>
{this.props.title.homepage}
</div>
<div className="btn" style={{ cursor: "pointer" }}>
Добавить
</div>
</div>
</div>
</div>
);
}
}

@ -1,103 +0,0 @@
.btn-group div {
/*background-color: #04aa6d; /* Green background */
/*border: 1px solid green; /* Green border */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left; /* Float the buttons side by side */
}
.btn-group div:not(:last-child) {
border-right: none; /* Prevent double borders */
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
/* Add a background color on hover */
.btn-group div:hover {
/* background-color: #3e8e41;*/
}
.btn:hover {
cursor: pointer;
}
.btn-toggle {
}
.container {
/* --width_window определён в /src/style.css*/
width: calc(var(--width_window) - 300px);
width: 350px;
/*padding: 0px;*/
}
/* *{}*/
.d6 {
box-sizing: border-box;
}
.d6 form {
position: relative;
width: 300px;
margin: 0 auto;
/* height: 42px;*/
}
.d6 input {
height: 27px;
width: 0;
padding: 0 42px 0 0px;
border: none;
/*border-bottom: 2px solid transparent;*/
outline: none;
background: transparent;
transition: 0.4s cubic-bezier(0, 0.8, 0, 1);
font-size: 1.4em;
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
.d6 input:focus {
background: transparent;
width: 300px;
z-index: 1;
border-bottom: 2px solid #f9f0da;
}
.d6 .button {
/* background: #683b4d;*/
border: none;
height: 42px;
width: 42px;
position: absolute;
top: 0px;
right: 0;
}
.d6 .button * {
cursor: pointer;
}
.d6 .button:before {
/*content: "\f002";*/
font-family: FontAwesome;
font-size: 16px;
color: #f9f0da;
}
.Accrordion {
padding: 3px;
/*background: rgb(255, 255, 255);
*/
/*background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(229,237,235,0.9093838218881303) 35%);
*/
}
.search {
color: #fff;
background: no-repeat 50% 50%
url(https://yastatic.net/s3/home-static/_/h/H/Z5a86M6CqJTSA1DUeUxedyyKc.svg);
}

@ -1,5 +0,0 @@
import React from "react";
const PackageContext = React.createContext();
export default PackageContext;

@ -1,52 +0,0 @@
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
navigator.serviceWorker
.register(swUrl)
.then(registration => {
// eslint-disable-next-line no-param-reassign
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
});
}
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}

@ -1,162 +0,0 @@
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
NavLink
} from "react-router-dom";
//import TopPanel from "./Componets/TopPanel/topPanel";
import AppContainer from "./Componets/AppContainer";
import MainPage from "./pages/main";
import PageOverlays from "./pages/overlays";
import PageSettings from "./pages/settings";
import PageDocs from "./pages/docs";
import New from "./pages/news/news";
import PkgList from "./pages/pks";
import PageCommunity from "./pages/Community";
import InfoPage from "./pages/info";
// import style && data
import "./style.css";
//data
import all_pkgs from "./pkg.json";
import icons from "./icons.json";
import News from "./news.json";
import "react-pro-sidebar/dist/css/styles.css";
const news = News.News;
//print(News.News);
//Debug prtnt
function print(text) {
console.log(text);
}
//const community = {};
// dataApp
const pkgs = all_pkgs.Catalog;
const overlays = all_pkgs.overlays;
const recovers = all_pkgs.recovers;
const aliases = all_pkgs.aliases;
const useDes = all_pkgs.usesDecription;
//print(all_pkgs.InstallPkgs);
export default class BasicExample extends React.Component {
//const [null, setPackage] = useState('');
AddressServer = "https://127.0.0.1:8000";
menuItems = [
// Боковое меню
{
name: "home",
text: "Главная",
url: "/",
Component: MainPage,
params: {
rec: recovers,
category: pkgs,
aliases: all_pkgs.aliases
//ViewPackageInfo: this.ViewPackageInfo
}
},
//{ name: "catalog", text: "Программы", url: "/catalog" },
{
name: "overlays",
text: "Оверлеи",
url: "/overlays",
Component: PageOverlays
},
{
name: "settings",
text: "Настройки",
url: "/settings",
Component: PageSettings
},
{ name: "docs", text: "Документация", url: "/docs", Component: PageDocs },
{ name: "news", text: "Новости", url: "/news", Component: New },
{
name: "comm",
text: "Сообщества",
url: "/community",
Component: PageCommunity
},
{ name: "info", text: "О проекте", url: "/info", Component: InfoPage }
];
icons_demo = icons.icons;
PkgName = {};
checkInstall() {
let listPort = Object.keys(all_pkgs.all_pkgs);
let instP = Object.keys(all_pkgs.InstallPkgs);
for (let n = 0; n > instP.length; n++) {
if (listPort.split("/")[0] === instP[n]) {
}
}
}
ViewListPkgs(listpkgs) {
listpkgs.map((p, i) => console.log(p + "\n"));
alert(listpkgs.length + "\n" + listpkgs.map((p, i) => String(p) + "\n"));
}
//<TopPanel menuItem={this.menuItems} />
render() {
return (
<div ClassName="app">
<Router>
{
//<NavBar category={pkgs} menuItem={this.menuItems} />
}
<AppContainer
ServerAddress={this.AddressServer}
category={pkgs}
aliases={aliases}
menuItems={this.menuItems}
icons={this.icons_demo}
rec={recovers}
useDes={useDes}
Ipkg={all_pkgs.InstallPkgs}
>
<Switch>
{/*this.menuItems.map((route) => (
<Route exact path={route.url} component={route.Component} />
//))*/}
<Route exact path="/">
<MainPage
icons={this.icons_demo}
rec={recovers}
useDes={useDes} //LocalUSE
Ipkg={all_pkgs.InstallPkgs}
repositores={overlays}
/>
</Route>
<Route path={this.menuItems[1].url} component={PageOverlays}>
<PageOverlays repositores={overlays} />
</Route>
<Route path={this.menuItems[2].url}>
<PageSettings uses={useDes.GlobalUSE} />
</Route>
<Route path={this.menuItems[3].url}>
<PageDocs />
</Route>
<Route path={this.menuItems[4].url}>
<New news={news} />
</Route>
<Route path={this.menuItems[5].url}>
<PageCommunity />
</Route>
<Route path={this.menuItems[6].url}>
<InfoPage />
</Route>
<NavLink path="/pkg">
{console.log(this.PkgName)}
<PkgList PackageName={this.PkgName} />
</NavLink>
</Switch>
</AppContainer>
</Router>
</div>
);
}
}

@ -1,63 +0,0 @@
{
"icons": {
"element-desktop-bin": "https://element.io/images/logo-mark-primary.svg",
"telegram-desktop-bin": "https://telegram.org/img/t_logo.png",
"zoom": "https://estudioflamenco.com/wp-content/uploads/2020/09/zoom-fondo-1.png",
"discord-bin": "https://www.pinclipart.com/picdir/middle/24-242816_flat-osx-icons-file-types-folders-apps-games.png",
"pidgin": "https://www.clipartmax.com/png/middle/302-3025613_pidgin-logo-pidgin-icon.png",
"teams": "https://www.kindpng.com/picc/m/363-3637910_microsoft-teams-download-hd-png-download.png",
"slack": "https://assets.stickpng.com/images/5cb480cd5f1b6d3fbadece79.png",
"audacity": "https://www.audacityteam.org/wp-content/themes/wp_audacity/img/logo.png",
"mixxx": "https://icons.iconarchive.com/icons/alecive/flatwoken/512/Apps-Mixxx-icon.png",
"lmms": "https://lmms.io/img/logo_lg.png",
"mpd": "https://www.musicpd.org/logo.png",
"rhythmbox": "https://iconape.com/wp-content/png_logo_vector/rhythmbox-logo-3-4-4.png",
"vlc": "https://images.videolan.org/images/goodies/thumbnails/cone_altglass_2.png",
"obs-studio": "https://obsproject.com/assets/images/new_icon_small-r.png",
"kdenlive": "https://kdenlive.org/wp-content/uploads/2016/06/kdenlive-logo-hori.png",
"mplayer": "https://p1.hiclipart.com/preview/740/970/419/reflections-mplayer-png-clipart.jpg",
"smplayer": "https://www.smplayer.info/images/free-media-player.png",
"nginx": "https://www.nginx.com/wp-content/uploads/2020/05/NGINX-product-icon.svg",
"apache": "https://www.apache.org/foundation/press/kit/feather_small.png",
"pycharm-community": "https://resources.jetbrains.com/storage/products/pycharm/img/meta/pycharm_logo_300x300.png",
"vim": "https://static-cdn.osdn.net/thumb/g/6/457/180x135_0.png",
"nano": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Gnu-nano.svg/150px-Gnu-nano.svg.png",
"vscode": "https://code.visualstudio.com/apple-touch-icon.png",
"jedit": "https://upload.wikimedia.org/wikipedia/commons/d/db/JEdit_Logo.png",
"gedit": "https://gitlab.gnome.org/GNOME/gedit/raw/master/data/icons/org.gnome.gedit.svg",
"gimp": "https://www.gimp.org/images/frontpage/wilber-big.png",
"blender": "https://download.blender.org/branding/community/blender_community_badge_white.png",
"inkscape": "https://media.inkscape.org/static/images/inkscape-logo.svg",
"okular": "https://apps.kde.org/app-icons/org.kde.okular.svg",
"krita": "https://apps.kde.org/app-icons/org.kde.krita.svg",
"steam-launcher": "https://upload.wikimedia.org/wikipedia/commons/8/83/Steam_icon_logo.svg",
"wps-office": "https://ds.cache.wpscdn.com/wps-official-website/img/logo_normal.4e969ab.svg",
"libreoffice": "https://freesoft.ru/storage/images/196/1960/195979/195979_normal.png",
"firefox-bin": "https://www.mozilla.org/media/protocol/img/logos/firefox/logo.fedb52c912d6.svg",
"chromium": "https://www.chromium.org/_/rsrc/1438879449147/config/customLogo.gif",
"falkon": "https://www.falkon.org/images/favicon-196x196.png",
"links": "https://www.pinclipart.com/picdir/big/547-5473112_link-symbol-of-two-chains-links-linked-svg.png",
"vivaldi": "https://vivaldi.com/wp-content/themes/vivaldicom-theme/img/browsers/vivaldi.png",
"netsurf": "https://www.netsurf-browser.org/netsurf.png",
"nmap": "https://nmap.org/images/sitelogo.png",
"cpu-x": "https://github.com/X0rg/CPU-X/raw/master/data/icons/CPU-X_192x192.png",
"ncdu": "https://dev.yorhel.nl/img/ncdu.png",
"django": "https://static.djangoproject.com/img/icon-touch.e4872c4da341.png",
"flask": "https://flask.palletsprojects.com/en/2.0.x/_images/flask-logo.png",
"nodejs": "https://nodejs.org/static/images/logo.svg",
"tornado": "https://www.tornadoweb.org/en/stable/_images/tornado.png",
"erlang": "https://www.erlang.org/assets/img/erlang-logo.svg",
"rebar-bin": "https://rebar3.org/images/logo.svg",
"docker": "https://www.docker.com/sites/default/files/d8/Docker-R-Logo-08-2018-Monochomatic-RGB_Moby-x1.png",
"elixir": "",
"": ""
}
}

@ -1,5 +0,0 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./example";
//https://www.youtube.com/watch?v=hf87iOdujLs
ReactDOM.render(<App />, document.getElementById("root"));

@ -1,19 +0,0 @@
{
"News": [
{ "title": "test" },
{ "title": "Добавлены генерируемые списки рекомендаций (Back)" },
{ "title": "Добавлена раскраска версии (UI)" },
{ "title": "Преведены в порядок списки оверлеев (UI)" },
{ "title": "Добавлены в UI новости" },
{ "title": "Исправлены стили (UI) оверлеев" },
{ "title": "Добавлена возможность многоязычности (UI)" },
{ "title": "Изменена вёрстка" },
{ "title": "Добавлена раскраска версиий" },
{ "title": "Добавлен функционал поиска через BackEnd" },
{ "title": "Добавлен фуннкционал вывода информации о пакете из каталога" },
{ "title": "Исправлена вёрстка" },
{ "title": "Расширен каталог" },
{ "title": "Добавлена сортировка оверлеев" },
{ "title": "Добавлен Counter: Pointer in USEs und btn" }
]
}

@ -1,13 +0,0 @@
{
"recpvers": null,
"dependencies": {
"@emotion/react": "11.4.1",
"@emotion/styled": "11.3.0",
"react": "18.0.0-alpha-01be61c12",
"react-dom": "17.0.2",
"react-id-swiper": "4.0.0",
"react-id-swiper2": "1.0.7",
"react-pro-sidebar": "0.6.0",
"react-router-dom": "5.2.0"
}
}

@ -1,25 +0,0 @@
import React from "react";
//export default class PageCommunity extends React.Component {
class PageCommunity extends React.Component {
TitleView() {
try {
if (document.getElementById("pTitle").textContent !== "Сообщества") {
document.getElementById("pTitle").textContent = "Сообщества";
}
} catch (e) {
console.log(e);
}
}
render() {
this.TitleView();
return (
<div style={{ padding: "30px" }}>
{this.TitleView()}
<div>Calculte Linux</div>
</div>
);
}
}
export default PageCommunity;

@ -1,15 +0,0 @@
import React from "react";
class InstallForm extends React.Component {
reqInst(param) {
console.log(param);
}
render() {
return (
<div className="pane-group installForm">
<sCard rec={this.props.rec} />
</div>
);
}
}
export default InstallForm;

@ -1,39 +0,0 @@
// Changes XML to JSON
function xmlToJson(xml) {
// Create the return object
var obj = {};
if (xml.nodeType === 1) {
// element
// do attributes
if (xml.attributes.length > 0) {
obj["@attributes"] = {};
for (var j = 0; j < xml.attributes.length; j++) {
var attribute = xml.attributes.item(j);
obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
}
}
} else if (xml.nodeType === 3) {
// text
obj = xml.nodeValue;
}
// do children
if (xml.hasChildNodes()) {
for (var i = 0; i < xml.childNodes.length; i++) {
var item = xml.childNodes.item(i);
var nodeName = item.nodeName;
if (typeof obj[nodeName] === "undefined") {
obj[nodeName] = xmlToJson(item);
} else {
if (typeof obj[nodeName].push === "undefined") {
var old = obj[nodeName];
obj[nodeName] = [];
obj[nodeName].push(old);
}
obj[nodeName].push(xmlToJson(item));
}
}
}
return obj;
}

@ -1,42 +0,0 @@
import React from "react";
import "./style.css";
class AuthForm extends React.Component {
isMobile() {
return navigator.userAgentData.mobile;
}
render() {
return (
<div id="spAuth" className="spAuth ">
<div className={this.isMobile() ? "formAuth mobile" : "formAuth modal"}>
<h2>Авторизация</h2>
<div>
<p>
{" "}
Username: <input type="text" placeholder="demo" />
</p>
<p>
{" "}
Password:
<input type="password" placeholder="demo" />
</p>
`
<p>
{" "}
Server:
<input type="password" placeholder={window.location.href} />
</p>
<div
className="authBtn"
onClick={() =>
(document.getElementById("spAuth").style.display = "none")
}
>
Войти
</div>
</div>
</div>
</div>
);
}
}
export default AuthForm;

@ -1,71 +0,0 @@
.modal {
padding: 50px;
background: #1d1d1d;
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.mobile {
/*padding: 50px;*/
background: 1d1d1d;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.spAuth {
position: fixed;
width: 100vw;
height: 100vh;
overflow: hidden;
background: #1d1d1d; /* #2e323f;*
/*background: url("https://on-desktop.com/ru/images/wp.php?path=/wps/20213D-graphics_Beautiful_purple_fractal_pattern_with_golden_lines_151099_.jpg&wp=2");
&*/
z-index: 9999;
font-size: 1.2em;
}
.formAuth {
/*position: fixed;
background: rgba(255, 255, 255, 0.85);*/
/*top: 40%;
left: 40%;*/
padding: 10px;
/*margin: -100px 0 0 -200px; /* отступы равны половинным размера формы */
/* чтобы форма была поверх всех элементов страницы */
background: #1d1d1d;
color: "#FFF";
/*position: fixed;*/
box-shadow: 0px 0px 100px #00f;
margin: 0 auto;
color: "#00F";
border: 1px solid #00f;
}
.formAuth h2 {
color: #00f;
}
.formAuth p {
color: #fff;
}
.formAuth input {
float: right;
border-radius: 5px;
font-size: 0.9em;
background: #1d1d1d;
color: #fff;
}
.authBtn {
float: right;
padding: 10px;
background: #00f;
color: #fff;
border-radius: 10px;
}

@ -1,43 +0,0 @@
import React from "react";
export default class PageCatalog extends React.Component {
render() {
return (
<div>
<div
className=" pane "
style={{
width: "100vw",
textAlign: "center"
}}
>
{Object.keys(this.props.category).map((item, i) => (
<div>
<h2
style={{
background: "#2e323f",
color: "#AAA",
width: "100%"
}}
key={item}
id={item}
className=" "
onClick={() =>
this.props.ViewListPkgs(this.props.category[item])
}
>
{item}
</h2>
<div style={{ display: "grid" }}>
{this.props.category[item].map((p) => (
<span style={{ margin: "10px" }}>{p}</span>
))}
</div>
</div>
))}
</div>
</div>
);
}
}

@ -1,55 +0,0 @@
import React from "react";
class PageDocs extends React.Component {
TitleView() {
try {
if (document.getElementById("pTitle").textContent !== "Документация") {
document.getElementById("pTitle").textContent = "Документация";
}
} catch (e) {
console.log(e);
}
}
commands = [
"cd webport/source",
"npm install",
"npm run build",
"cd ..",
"sudo npm install --save-dev electron",
"npx electron .",
"cp -L sources/build ./",
"npm install --verbose electron"
];
render() {
this.TitleView();
return (
<div className="settings" style={{ padding: "10px" }}>
<h1>Сборка React</h1>
<code
style={{
border: "1px dotted #CCC",
padding: "10px"
}}
>
cd webport/source && npm install && npm run build
</code>
<h1>Сборка Electron bin</h1>
<code
style={{
border: "1px dotted #CCC",
padding: "10px"
}}
>
{this.commands.map((cmd) => (
<span>
{cmd + "\t"} +{"&& "} +{"\t"}
</span>
))}
</code>
</div>
);
}
}
export default PageDocs;

@ -1,13 +0,0 @@
import React from "react";
import sCard from "../Componets/Cards/smallCard";
class FindPkg extends React.Component {
render() {
return (
<div>
<sCard rec={this.props.paks} />
</div>
);
}
}
export default FindPkg;

@ -1,42 +0,0 @@
import React from "react";
class InfoPage extends React.Component {
TitleView() {
try {
if (document.getElementById("pTitle").textContent !== "О проекте") {
document.getElementById("pTitle").textContent = "О проекте";
}
} catch (e) {
console.log(e);
}
}
render() {
this.TitleView();
return (
<div className="infoPage" style={{ padding: "10px" }}>
<h1>Что это?</h1>
<div
style={{
border: "1px dotted #CCC",
padding: "10px"
}}
>
Это демонстрационая версия GUI для <b>portage</b>
</div>
<h1>Основная цель</h1>
<div
style={{
border: "1px dotted #CCC",
padding: "10px"
}}
>
Снизить порог вхождени для пользовтелей дистрибутивов в основе которых
лежит пакетный менеджер <b>portage</b>
</div>
</div>
);
}
}
export default InfoPage;

@ -1,198 +0,0 @@
// Окно на главном меню с рекомендациями, новостями
import React from "react";
import ReactDOM from "react-dom";
//import Scard from "../Componets/Cards/smallCard";
import FullCard from "../Componets/Cards/fullCard";
//import NavBar from "../Componets/NavList/navList";
//import div from "@mui/material/div";
import Widget from "../Componets/WCard/widget";
import "./style.css";
import Accordion from "../Componets/Acardion";
export default class MainPage extends React.Component {
VVSB = false;
c = "column__list";
TitleView() {
try {
if (document.getElementById("pTitle").textContent !== "Главная") {
document.getElementById("pTitle").textContent = "Главная";
}
} catch (e) {
console.log(e);
}
}
mainP() {
this.TitleView();
return (
<div id="HomePage" className="" style={{}}>
<div
className={this.c}
style={{
marginTop: "35px"
//overflow: "clip",
//display: "inline-",
//float: "left",
//border: "1px solid #CCC",
//borderRadius: "6px",
//boxShadow: "3px 4px 10px #999"
}}
>
<Widget>
<h3 style={{ borderBottom: "1px solid #AAA" }}> Новости</h3>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
</Widget>
<Widget
className="column__list"
style={{
marginTop: "35px",
overflow: "clip",
display: "inline-",
//float: "left",
//border: "1px solid #CCC",
//borderRadius: "6px",
boxShadow: "3px 4px 10px #999"
}}
>
<h3 style={{ borderBottom: "1px solid #AAA" }}>Уведомления</h3>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
</Widget>
</div>
<div className="">
<h3 style={{ borderBottom: "1px solid #AAA" }}>Рекомендации</h3>
<div className={this.c}>
{Object.keys(this.props.rec).map((k) => (
<Widget>
<Accordion
// Список рекомендуемых пакетов в категории
title={k + "\t\t" + this.props.rec[k].length}
className="column__list"
>
<div
style={{
overflowX: "scroll",
maxHeight: "375px"
//position: "relative"
//background: "#2e323f"
}}
>
{this.props.rec[k].map((pn, i) => (
<div
className="card__item"
style={{
borderBottom: "1px solid #FFF",
//height: "55px",
//margin: "10px",
background: "#DDD"
//background: "#FFF"
//height:"75px"
}}
onClick={() => this.viewInfo(this.props.rec[k][i])}
>
<img
className="card__img"
style={{
width: "32px",
height: "32px"
//background: "#CCC"
}}
src={this.props.icons[pn.Name.split("/")[1]]}
alt={pn.Name.split("/")[1]}
/>
<div style={{ marginLeft: "10px" }}>
<b>
{" "}
<span
className="card__title"
style={{
color: "red",
width: "100vw",
overflow: "clip",
fontSize: "1.1em"
}}
key={pn.Name}
>
{pn.Name.split("/")[1]}
</span>
</b>
<div style={{ overflow: "clip" }}>
{pn.Description}
</div>
</div>
</div>
))}
</div>
</Accordion>
</Widget>
))}
<div
id="info"
style={{
position: "fixed",
top: "0px",
left: this.posiLetf,
width: "100%",
height: "100%",
background: "#2e323f",
display: "none"
}}
></div>
</div>
</div>
</div>
);
}
viewSideBar() {
if (!this.VVSB) {
document.getElementById("MainContent").style.paddingLeft = "300px";
document.getElementById("btn-toggle").style.float = "right";
document.getElementById("navBar").style.left = "0px";
this.VVSB = true;
} else {
document.getElementById("MainContent").style.paddingLeft = "0px";
document.getElementById("navBar").style.left = "-280px";
this.VVSB = false;
}
}
viewInfo(pkg) {
//onClick={() => this.props.ViewPackageInfo(this.props.rec[k][i])}
//document.getElementById("backBtn").style.display = "block";
//document.getElementById("pTitle").textContent = pkg.Name.split("/")[1];
//document.getElementById("container").style.display = "none";
//document.getElementById("containerInfo").style.display = "block";
ReactDOM.render(
<FullCard
PackageName={pkg}
PropMain={this.props.rec}
icons={this.props.icons}
useDes={this.props.useDes}
Ipkg={this.props.Ipkg}
/>,
document.getElementById("containerInfo")
);
}
render() {
//document.getElementById("pTittle").textContent = "Главная";
return this.mainP();
}
}

@ -1,36 +0,0 @@
import React from "react";
class New extends React.Component {
TitleView() {
try {
if (document.getElementById("pTitle").textContent !== "Новости") {
document.getElementById("pTitle").textContent = "Новости";
}
} catch (e) {
console.log(e);
}
}
render() {
return (
<div style={{ padding: "10px" }}>
{this.TitleView()}
<ol>
{this.props.news.map((newItem, i) => (
<li
style={{
fontSize: "1.2em",
border: "1px dotted #CCC",
padding: "10px"
}}
>
<b>{newItem.title}</b>
</li>
))}
</ol>
</div>
);
}
}
export default New;

@ -1,160 +0,0 @@
import Accordion from "../Componets/Acardion";
import React from "react";
import ReactDOM from "react-dom";
import OvItem from "../Componets/overlayItem";
//import Button from "../Componets/button";
//import Grid from "@mui/material/Grid";
const title = { name: "Имя", discription: "Описание", homepage: "Обзор" };
//import "./style.css";
class PageOverlays extends React.Component {
VVSB = false;
menuBtn = {
all: {
background: "orange",
color: "#FFF",
textDecoration: "none",
marginLeft: "0px",
padding: " 10px",
borderRight: "1px solid #FFF",
cursor: "pointer",
position: "ralative",
left: "-40px"
//borderRadius: "10px 20px 0px 0px"
},
active: {
background: "blue",
color: "#FFF",
textDecoration: "none",
marginLeft: "0px",
padding: " 10px",
borderRight: "1px solid #FFF",
cursor: "pointer",
position: "ralative",
left: "-40px"
}
};
menuButton = [
{ id: "all", text: "Все", handler: () => this.viewAllOverlay() },
{
id: "inclides",
text: "Подключеные",
handler: () => this.viewIncludeOverlays()
},
{
id: "catalog",
text: "Категории",
handler: () => this.viweCategotyOverlays()
}
];
active = "Все";
slideNum = 1;
//routing overalays page
viewAllOverlay() {
this.TitleView();
//this.chechActive(this.menuButton[0].text);
return (
<div className="column__list">
{this.props.repositores.all.map((over, i) => (
<OvItem over={over} title={title} />
))}
</div>
);
}
viewIncludeOverlays() {
/*document.getElementById(this.menuButton[0].text).style = this.menuBtn.all;
document.getElementById(
this.menuButton[1].text
).style = this.menuBtn.active;
*/
/*document.getElementById(this.menuButton[2].text).style = this.menuBtn.all;*/
console.log(this.props.repositores.include);
return (
<div className="column__list">
{this.props.repositores.include.map((over, i) => (
<OvItem over={over} title={title} />
))}
</div>
);
}
viweCategotyOverlays() {
/*document.getElementById(
this.menuButton[1].text
).style = this.menuBtn.active;*/
return Object.keys(this.props.repositores.categores).map((c) => (
<Accordion
title={c + "\t\t" + this.props.repositores.categores[c].length}
>
<div className="column__list">
{this.props.repositores.categores[c].map((over, i) => (
<OvItem over={over} title={title} />
))}
</div>
</Accordion>
));
}
TitleView() {
try {
if (document.getElementById("pTitle").textContent !== "Оверлеи") {
document.getElementById("pTitle").textContent = "Оверлеи";
}
} catch (e) {
console.log(e);
}
}
chechActive(id) {
for (let p = 0; p < this.menuButton.length; p++) {
if (this.menuButton[p].text === this.active) {
document.getElementById(this.menuButton[p].text).style.background =
"#00F";
} else {
document.getElementById(this.menuButton[p].text).style.background =
"orange";
}
}
}
render() {
return (
<div id="HomePage">
{this.TitleView()}
<div
// className="btn-group"
style={{
display: "inline-flex",
margin: "0px",
marginTop: "20px",
fontSize: "1.2em"
// color: "#000"
}}
>
{this.menuButton.map((it, p) => (
<div
id={it.text}
style={this.menuBtn.all}
onClick={() => (
(this.active = it.text),
this.chechActive(it.text),
console.log(this.active),
ReactDOM.render(
this.menuButton[p].handler(),
document.getElementById("listOve")
)
)}
>
{it.text}
</div>
))}
</div>
<div id="listOve">{this.menuButton[0].handler()}</div>
</div>
);
}
}
export default PageOverlays;

@ -1,24 +0,0 @@
import React from "react";
import { Link } from "react-router-dom";
//mport NavBar from "../Componets/NavList/navList";
import FullCard from "../Componets/Cards/fullCard";
class PkgList extends React.Component {
render() {
return (
<div>
<span>
<Link
className="btn"
style={{ float: "left", padding: "10px", textDecoration: "none" }}
to="/"
>
Назад
</Link>
</span>
<FullCard PackageName={this.props.PackageName} />
</div>
);
}
}
export default PkgList;

@ -1,100 +0,0 @@
import React from "react";
import Accordion from "../Componets/Acardion";
//import Accordion from "../Componets/Acardion";
export default class UserProfilePage extends React.Component {
toBack() {
document.getElementById("conteinerInfo").style.display = "none";
}
ViewGroup(group) {
if (document.getElementById(group + "_group").style.display === "none") {
document.getElementById(group + "_group").style.display = " block";
} else {
document.getElementById(group + "_group").style.display = "none";
}
}
checkPkg(nPkg) {
if (this.props.Ipkgs[nPkg.spit("/")[0]]) {
for (let n = 0; n < this.props.Ipkgs[nPkg.spit("/")[0]]; n++) {}
//return({name: this.props.Ipkgs[nPkg.spit('/')[0]], vers:""})
} else {
}
}
TitleView() {
try {
if (
document.getElementById("pTitle").textContent !== "Установленные пакеты"
) {
document.getElementById("pTitle").textContent = "Установленные пакеты";
}
} catch (e) {
console.log(e);
}
}
render() {
//document.getElementById("HomePage").style.display = "block";
return (
<div>
{this.TitleView()}
{console.log(this.props.Ipkgs)}
<span
className="btn"
id="backBtn"
style={{
padding: "0px 20px 0px 20px",
float: "left",
color: "#AAA",
background: "#FFF",
marginRight: "0.85em",
fontSize: "1.6em",
border: "1px outset #444"
//borderRadius: ".9em"
}}
onClick={() => this.toBack()}
>
<b> {"<"}</b>
</span>
<ul>
{Object.keys(this.props.Ipkgs).map((name) => (
<li
style={{
textAlign: "left",
borderBottom: "1px dotted #AAA",
listStyle: "none"
}}
>
<Accordion
title={name}
style={{ background: "#2e323f", color: "#FFF" }}
>
{this.props.Ipkgs[name].map((pkg) => (
<div
style={{
width: "80vw",
padding: "10px",
fontSize: "1.2em",
borderBottom: "1px solid #CDC"
//background:"#AAA"
// #2e323f"
}}
>
{pkg.name}
<div
className="btn"
style={{
float: "right",
padding: "5px",
cursor: "pointer"
}}
>
Удалить
</div>
</div>
))}
</Accordion>
</li>
))}
</ul>
</div>
);
}
}

@ -1,198 +0,0 @@
import React from "react";
import Accordion from "../Componets/Acardion";
import CheckField from "../Componets/CheckField";
//import Menu from "../Componets/menu";
/*const menuItm = [
{ name: "portage", text: "portage", url: "/sport" },
{ name: "webpp", text: "App", url: "/app" }
];*/
class PageSettings extends React.Component {
settings = {
USE: [],
lang: "RU"
};
styleUseinfo = {
mobile: {
position: "fixed",
bottom: "0px",
left: "0px",
width: "100vw",
background: "#FFF",
borderTop: "1px solid #CDC",
paddingTop: "5px"
},
nomob: { margin: "5px" }
};
themes = [
{ id: "0", name: "Светлая", path: "" },
{ id: "1", name: "Тёмная", path: "" }
];
langs = [
{ title: "RU", link: "" },
{ title: "EN", link: "" },
{ title: "DE", link: "" }
];
isMobile() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
changLang(lang) {
console.log(lang);
if (
document.getElementById(lang).style.background !== "#0F0" ||
document.getElementById(lang).style.background !== "rgb(0, 255, 0)"
) {
document.getElementById(lang).style.background = "#0F0";
document.getElementById(this.settings.lang).style.background = "#FFF";
this.settings.lang = lang;
//document.getElementById(lang).style.background = "#FFF";
//this.IntstallPackageParamms.USE.map((us, i)=>(
// if( us== use)this.IntstallPackageParamms.USE[i].delete
//))
} else {
document.getElementById(lang).style.background = "#0F0";
this.settings.lang = lang;
//this.settings.USE[this.IntstallPackageParamms.USE.length + 1] = use;
}
console.log(this.settings);
}
addUse(use) {
console.log(use);
if (
document.getElementById(use).style.background === "#0F0" ||
document.getElementById(use).style.background === "rgb(0, 255, 0)"
) {
document.getElementById(use).style.background = "#FFF";
//this.IntstallPackageParamms.USE.map((us, i)=>(
// if( us== use)this.IntstallPackageParamms.USE[i].delete
//))
} else {
document.getElementById(use).style.background = "#0F0";
//this.settings.USE[this.IntstallPackageParamms.USE.length + 1] = use;
}
console.log(this.settings);
}
VuseInfo(uId, use) {
//console.log(typeof(use));
console.log(uId);
//console.log(Object.keys(this.props.uses));
if (use in this.props.uses) {
document.getElementById("useInfo").textContent = use;
//document.getElementById(uId).style.background = "orange";
//alert(this.props.useDes[use]);
} else {
document.getElementById("useInfo").textContent = use;
}
//document.getElementById("useInfo").textContent = use;
}
TitleView() {
try {
if (document.getElementById("pTitle").textContent !== "Настройки") {
document.getElementById("pTitle").textContent = "Настройки";
}
} catch (e) {
console.log(e);
}
}
render() {
this.TitleView();
return (
<div id="HomePage" className="settings">
<div>
<Accordion title="UI">
<hr />
<div>
<Accordion title={"Темы"}>
<ul
className="btn-group"
style={{ display: "inline-flex", listStyle: "none" }}
>
{this.themes.map((t) => (
<li id={t.id} style={{ marginLeft: "10px" }}>
{t.name}
</li>
))}
</ul>
</Accordion>
</div>
<div>
<Accordion title={"Язык"}>
<ul
style={{ display: "inline-flex", listStyle: "none" }}
className="btn-group"
>
{Object.keys(this.langs).map((lng) => (
<li
id={this.langs[lng].title}
style={{ marginLeft: "10px" }}
onClick={() => this.changLang(this.langs[lng].title)}
>
{this.langs[lng].title}
</li>
))}
</ul>
</Accordion>
</div>
</Accordion>
</div>
<Accordion title={"Приложение"}>
<Accordion title={"Сервер"}>
<p>
Адресс сервера <input type="text" placeholder="loaclhost:8000" />{" "}
</p>
</Accordion>
</Accordion>
<Accordion title={"Portage"}>
<hr />
<CheckField
text={"Искать в Сторонних оврелях"}
checking={true}
id={"searchOverlays"}
/>
<CheckField
text={"Устанавливать бинарные пакеты"}
checking={true}
id={"statrBinInstlPKg"}
/>
<div className="sUse" style={{ paddingLeft: "20px" }}>
<Accordion title={"USE"} className="sUses">
{Object.keys(this.props.uses).map((u, j) => (
<span
key={u}
id={u}
onMouseOver={() => this.VuseInfo(u, this.props.uses[u])}
onClick={() => this.addUse(u)}
>
{u}
</span>
))}
<b>
<div
id="useInfo"
className="useInfo"
style={
this.isMobile ? this.styleUseinfo.mobile : this.style.nomob
}
></div>
</b>
</Accordion>
</div>
</Accordion>
</div>
);
}
}
export default PageSettings;

@ -1,19 +0,0 @@
const styles = {
splash: {
position: "fixed",
width: "100vw",
height: "100vh",
background: "#2e323f",
h1: {
color: "#AAA",
contentAlign: "center"
}
}
};
function loadData() {
console.log("load");
}
function Splash() {
return <div style={styles.splash}>Загрузка</div>;
}
export default Splash;

@ -1,656 +0,0 @@
@keyframes swing {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(10deg);
}
30% {
transform: rotate(0deg);
}
40% {
transform: rotate(-10deg);
}
50% {
transform: rotate(0deg);
}
60% {
transform: rotate(5deg);
}
70% {
transform: rotate(0deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes sonar {
0% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
body {
font-size: 0.9rem;
}
.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-dropdown > a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/*----------------page-wrapper----------------*/
.page-wrapper {
height: 100vh;
}
.page-wrapper .theme {
width: 40px;
height: 40px;
display: inline-block;
border-radius: 4px;
margin: 2px;
}
.page-wrapper .theme.chiller-theme {
background: #1e2229;
}
/*----------------toggeled sidebar----------------*/
.page-wrapper.toggled .sidebar-wrapper {
left: 0px;
}
/* @media screen and (min-width: 768px) { */
@media screen and (min-width: 100%) {
.page-wrapper.toggled .page-content {
padding-left: 300px;
}
}
/*----------------show sidebar button----------------*/
#show-sidebar {
position: fixed;
left: 0;
top: 10px;
border-radius: 0 4px 4px 0px;
width: 35px;
transition-delay: 0.3s;
}
.page-wrapper.toggled #show-sidebar {
left: -40px;
}
/*----------------sidebar-wrapper----------------*/
.sidebar-wrapper {
width: 260px;
height: 100%;
max-height: 100%;
position: fixed;
top: 0;
left: -300px;
z-index: 999;
}
.sidebar-wrapper ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar-wrapper a {
text-decoration: none;
}
/*----------------sidebar-content----------------*/
.sidebar-content {
max-height: calc(100% - 30px);
height: calc(100% - 30px);
overflow-y: auto;
position: relative;
}
.sidebar-content.desktop {
overflow-y: hidden;
}
/*--------------------sidebar-brand----------------------*/
.sidebar-wrapper .sidebar-brand {
padding: 10px 20px;
display: flex;
align-items: center;
}
.sidebar-wrapper .sidebar-brand > a {
text-transform: uppercase;
font-weight: bold;
flex-grow: 1;
}
.sidebar-wrapper .sidebar-brand #close-sidebar {
cursor: pointer;
font-size: 20px;
}
/*--------------------sidebar-header----------------------*/
.sidebar-wrapper .sidebar-header {
padding: 20px;
overflow: hidden;
}
.sidebar-wrapper .sidebar-header .user-pic {
float: left;
width: 60px;
padding: 2px;
border-radius: 12px;
margin-right: 15px;
overflow: hidden;
}
.sidebar-wrapper .sidebar-header .user-pic img {
object-fit: cover;
height: 100%;
width: 100%;
}
.sidebar-wrapper .sidebar-header .user-info {
float: left;
}
.sidebar-wrapper .sidebar-header .user-info > span {
display: block;
}
.sidebar-wrapper .sidebar-header .user-info .user-role {
font-size: 12px;
}
.sidebar-wrapper .sidebar-header .user-info .user-status {
font-size: 11px;
margin-top: 4px;
}
.sidebar-wrapper .sidebar-header .user-info .user-status i {
font-size: 8px;
margin-right: 4px;
color: #5cb85c;
}
/*-----------------------sidebar-search------------------------*/
.sidebar-wrapper .sidebar-search > div {
padding: 10px 20px;
}
/*----------------------sidebar-menu-------------------------*/
.sidebar-wrapper .sidebar-menu {
padding-bottom: 10px;
}
.sidebar-wrapper .sidebar-menu .header-menu span {
font-weight: bold;
font-size: 14px;
padding: 15px 20px 5px 20px;
display: inline-block;
}
.sidebar-wrapper .sidebar-menu ul li a {
display: inline-block;
width: 100%;
text-decoration: none;
position: relative;
padding: 8px 0px 8px 20px;
}
.sidebar-wrapper .sidebar-menu ul li a i {
margin-right: 10px;
font-size: 12px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 4px;
}
.sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
display: inline-block;
animation: swing ease-in-out 0.5s 1 alternate;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f105";
font-style: normal;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
background: 0 0;
position: absolute;
right: 15px;
top: 14px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
padding: 5px 0;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
/*padding-left: 25px;*/
font-size: 13px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
content: "\f111";
font-family: "Font Awesome 5 Free";
font-weight: 400;
font-style: normal;
display: inline-block;
text-align: center;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 10px;
font-size: 8px;
}
.sidebar-wrapper .sidebar-menu ul li a span.label,
.sidebar-wrapper .sidebar-menu ul li a span.badge {
float: right;
margin-top: 8px;
margin-left: 5px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
float: right;
margin-top: 0px;
}
.sidebar-wrapper .sidebar-menu .sidebar-submenu {
display: none;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
transform: rotate(90deg);
right: 17px;
}
/*--------------------------side-footer------------------------------*/
.sidebar-footer {
position: absolute;
width: 100%;
bottom: 0;
display: flex;
}
.sidebar-footer > a {
flex-grow: 1;
text-align: center;
height: 30px;
line-height: 30px;
position: relative;
}
.sidebar-footer > a .notification {
position: absolute;
top: 0;
}
.badge-sonar {
display: inline-block;
background: #980303;
border-radius: 50%;
height: 8px;
width: 8px;
position: absolute;
top: 0;
}
.badge-sonar:after {
content: "";
position: absolute;
top: 0;
left: 0;
border: 2px solid #980303;
opacity: 0;
border-radius: 50%;
width: 100%;
height: 100%;
animation: sonar 1.5s infinite;
}
/*--------------------------page-content-----------------------------*/
.page-wrapper .page-content {
display: inline-block;
width: 100%;
padding-left: 0px;
padding-top: 20px;
}
.page-wrapper .page-content > div {
padding: 20px 40px;
}
.page-wrapper .page-content {
overflow-x: hidden;
}
/*------scroll bar---------------------*/
::-webkit-scrollbar {
width: 5px;
height: 7px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #525965;
border: 0px none #ffffff;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
background: #525965;
}
::-webkit-scrollbar-thumb:active {
background: #525965;
}
::-webkit-scrollbar-track {
background: transparent;
border: 0px none #ffffff;
border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
background: transparent;
}
::-webkit-scrollbar-track:active {
background: transparent;
}
::-webkit-scrollbar-corner {
background: transparent;
}
/*-----------------------------chiller-theme-------------------------------------------------*/
.chiller-theme .sidebar-wrapper {
background: #31353d;
}
.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper .sidebar-menu {
border-top: 1px solid #3a3f48;
}
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
border-color: transparent;
box-shadow: none;
}
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-status,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text,
.chiller-theme .sidebar-wrapper .sidebar-brand > a,
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a,
.chiller-theme .sidebar-footer > a {
color: #818896;
}
.chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover > a,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info,
.chiller-theme .sidebar-wrapper .sidebar-brand > a:hover,
.chiller-theme .sidebar-footer > a:hover i {
color: #b8bfce;
}
.page-wrapper.chiller-theme.toggled #close-sidebar {
color: #bdbdbd;
}
.page-wrapper.chiller-theme.toggled #close-sidebar:hover {
color: #ffffff;
}
.chiller-theme .sidebar-wrapper ul li:hover a i,
.chiller-theme
.sidebar-wrapper
.sidebar-dropdown
.sidebar-submenu
li
a:hover:before,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu:focus + span,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a i {
color: #16c7ff;
text-shadow: 0px 0px 10px rgba(22, 199, 255, 0.5);
}
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a i,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown div,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
background: #3a3f48;
}
.chiller-theme .sidebar-wrapper .sidebar-menu .header-menu span {
color: #6c7b88;
}
.chiller-theme .sidebar-footer {
background: #3a3f48;
box-shadow: 0px -1px 5px #282c33;
border-top: 1px solid #464a52;
}
.chiller-theme .sidebar-footer > a:first-child {
border-left: none;
}
.chiller-theme .sidebar-footer > a:last-child {
border-right: none;
}
.pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item > .pro-item-content {
overflow: inherit;
}
/*
Стиль для списка пакетов в категории в рекомендациях
*/
.column__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: 0.5rem;
align-items: start;
/* uncomment these lines if you want to have the standard Trello behavior instead of the column wrapping */
/* grid-auto-flow: column;
grid-auto-columns: minmax(260px, 1fr); */
}
.column__item {
border-radius: 0.2rem;
background-color: #dfe3e6;
padding: 0.5rem;
/*padding: 5px;
/*margin: 3px;*
margin-top: 10px;
/*width: 100vw;*/
/*display: inline-flex;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 3px 4px 10px #cdc;*/
}
.column__title--wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 0.25rem;
align-items: center;
}
.column__title--wrapper h2 {
color: #17394d;
font-weight: 700;
font-size: 0.9rem;
}
.column__title--wrapper i {
text-align: right;
color: #798d99;
}
.column__item--cta {
padding: 0.25rem;
display: flex;
color: #798d99;
}
.column__item--cta i {
margin-right: 0.25rem;
}
/* card styles */
.card__list {
display: grid;
grid-template-rows: auto;
grid-gap: 0.5rem;
margin: 0.5rem 0;
}
.card__item {
/*background-color: white;
border-radius: 0.25rem;
box-shadow: 0 1px 0 rgba(9, 45, 66, 0.25);
padding: 0.5rem;
*/
padding: 5px;
/*margin: 3px;*/
/*margin-top: 10px;
width: 100vw;
height: 100%;*/
min-height: 55px;
display: flex;
/*display: inline-flex;*/
border: 1px solid #ccc;
/*border-radius: 10px;
box-shadow: 3px 4px 10px #cdc;*/
}
.card__tag {
font-size: 0.75rem;
padding: 0.1rem 0.5rem;
border-radius: 0.25rem;
font-weight: 700;
color: white;
margin-bottom: 0.75rem;
display: inline-block;
}
.card__image {
width: 100%;
margin-bottom: 0.25rem;
}
.card__img {
object-fit: contain;
}
/* sticker colors */
.card__tag--design {
background-color: #61bd4f;
}
.card__tag--browser {
background-color: #c377e0;
}
.card__tag--mobile {
background-color: #f2d600;
}
.card__tag--high {
background-color: #eb5a46;
}
.card__tag--low {
background-color: #00c2e0;
}
.card__title {
color: #17394d;
margin-bottom: 0.75rem;
}
/* card actions */
.card__actions {
display: flex;
align-items: center;
}
.card__actions--wrapper i {
color: #798d99;
margin-right: 0.5rem;
}
.card__actions--text {
color: #798d99;
font-size: 0.8rem;
margin-left: -0.25rem;
margin-right: 0.5rem;
}
.card__avatars {
display: flex;
flex: 1;
justify-content: flex-end;
}
.card__avatars--item {
margin-left: 0.25rem;
width: 28px;
height: 28px;
}
.avatar__image {
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}

File diff suppressed because one or more lines are too long

@ -1,5 +0,0 @@
{
"template": "create-react-app",
"hardReloadOnChange": true,
"infiniteLoopProtection": true
}

@ -1,29 +0,0 @@
:root {
--width_window: 100vw;
}
body,
html {
margin: 0;
padding: 0px;
box-sizing: border-box;
width: 100%;
height: 100%;
}
/*
.app - класс приложения, в т.ч. для бокового меню*/
.app {
display: flex;
background-color: var(--main-bg-color);
width: auto;
height: auto;
}
.context {
flex: 1;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
Loading…
Cancel
Save