fix name, build web und test version on electron

master
serkus01 2 years ago
parent 78c41065fa
commit 4c6bc02484

@ -0,0 +1,89 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
.DS_Store
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next
# nuxt.js build output
.nuxt
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# Webpack
.webpack/
# Electron-Forge
out/

File diff suppressed because it is too large Load Diff

@ -0,0 +1,58 @@
{
"name": "webport-client",
"productName": "webport-client",
"version": "1.0.0",
"description": "My Electron application description",
"main": "src/index.js",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "echo \"No linting configured\""
},
"keywords": [],
"author": {
"name": "serkus01",
"email": "7erkus@gmail.com"
},
"license": "MIT",
"config": {
"forge": {
"packagerConfig": {},
"makers": [
{
"name": "@electron-forge/maker-squirrel",
"config": {
"name": "webport_client"
}
},
{
"name": "@electron-forge/maker-zip",
"platforms": [
"darwin"
]
},
{
"name": "@electron-forge/maker-deb",
"config": {}
},
{
"name": "@electron-forge/maker-rpm",
"config": {}
}
]
}
},
"dependencies": {
"electron-squirrel-startup": "^1.0.0"
},
"devDependencies": {
"@electron-forge/cli": "^6.0.0-beta.61",
"@electron-forge/maker-deb": "^6.0.0-beta.61",
"@electron-forge/maker-rpm": "^6.0.0-beta.61",
"@electron-forge/maker-squirrel": "^6.0.0-beta.61",
"@electron-forge/maker-zip": "^6.0.0-beta.61",
"electron": "15.1.2"
}
}

@ -0,0 +1,6 @@
{
"main.css": "static/css/main.b5c2177a.css",
"main.css.map": "static/css/main.b5c2177a.css.map",
"main.js": "static/js/main.53383d3c.js",
"main.js.map": "static/js/main.53383d3c.js.map"
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@ -0,0 +1,6 @@
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin: auto;
max-width: 38rem;
padding: 2rem;
}

@ -0,0 +1 @@
<!doctype html><html lang="en"><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"><link rel="manifest" href="./manifest.json"><link rel="shortcut icon" href="./favicon.ico"><title>React App</title><link href="./static/css/main.16e560a6.css" rel="stylesheet"></head><body><head><title>Webport</title></head><div id="root"></div><script type="text/javascript" src="./static/js/main.2e752546.js"></script></body></html>

@ -0,0 +1,46 @@
const { app, BrowserWindow } = require('electron');
const path = require('path');
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
app.quit();
}
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
// and load the index.html of the app.
mainWindow.loadFile(path.join(__dirname, 'index.html'));
// Open the DevTools.
mainWindow.webContents.openDevTools();
};
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.

@ -0,0 +1,15 @@
{
"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"
}

@ -0,0 +1 @@
"use strict";function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}var precacheConfig=[["/index.html","a22ab4ef0a396dfaa46e9b0215f08492"],["/static/css/main.b5c2177a.css","7e40cbddebe17530499dfad2210b28ea"],["/static/js/main.53383d3c.js","40f3f3138827978a785efe988edd7398"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching);t=urlsToCacheKeys.has(n);t||(n=addDirectoryIndex(n,"index.html"),t=urlsToCacheKeys.has(n));!t&&"navigate"===e.request.mode&&isPathWhitelisted([],e.request.url)&&(n=new URL("/index.html",self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

21
sources/.gitignore vendored

@ -0,0 +1,21 @@
# 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*

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -0,0 +1,24 @@
{
"recpvers": null,
"dependencies": {
"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"
},
"name": "webport",
"description": null,
"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"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@ -0,0 +1,42 @@
<!doctype html>
<html lang="en">
<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>React App</title>
</head>
<body>
<head>
<title>Webport</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>

@ -0,0 +1,15 @@
{
"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"
}

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

@ -0,0 +1,140 @@
import React from "react";
import NavBar from "./NavList/navList";
import MainPage from "../pages/main";
import ReactDOM from "react-dom";
export default class AppConteiner extends React.Component {
ui = {
BackButton: {
text: "Назад"
},
button: {
sync: {
text: "Обновить",
icon:
"https://im0-tub-ru.yandex.net/i?id=82aba01eaa9844244dfae87e7a7e5583&n=13%22"
}
}
};
toBack() {
document.getElementById("backBtn").style.display = "none";
//document.getElementById("pTitle").textContent = "Рекомендации";
/*ReactDOM.render(
<MainPage
icons={this.props.icons}
rec={this.props.rec}
useDes={this.props.useDes}
/>,
document.getElementById("HomePage")
);*/
window.location.reload();
//document.getElementById('pTitle').textContent = this.props.menuItems[]
}
viewSideBar() {
if (!this.VVSB) {
document.getElementById("MainContent").style.paddingLeft = "300px";
document.getElementById("btn-toggle").style.paddingLeft = "300px";
document.getElementById("btn-toggle").style.float = "righ";
document.getElementById("navBar").style.left = "0px";
this.VVSB = true;
} else {
document.getElementById("MainContent").style.paddingLeft = "0px";
document.getElementById("btn-toggle").style.paddingLeft = "0px";
document.getElementById("navBar").style.left = "-280px";
this.VVSB = false;
}
}
ViewTitle() {
for (let i = 0; i++; this.props.menuItems.length) {
if (window.location.href.split(this.props.menuItems[i]).length >= 2) {
document.getElementById("pTitle").textContent = this.props.menuItems[
i
].text;
}
console.log(i);
}
}
render() {
return (
<div>
<NavBar
category={this.props.category}
menuItem={this.props.menuItems}
aliases={this.props.aliases}
Ipkgs={this.props.Ipkg}
/>
<div className="page-wrapper chiller-theme toggled">
<ul
id="btn-toggle"
class="btn-toggle"
style={{
display: "inline",
padding: "20px",
margin: "0px",
borderBottom: "1px solid #AAA",
width: "100%",
background: "#2e323f",
position: "fixed",
top: "0",
color: "#FFF"
}}
>
<svg
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>
<div
id="backBtn"
style={{ paddingLeft: "20px", float: "left", display: "none" }}
onClick={() => this.toBack()}
>
<img
style={{ width: "1.4em", height: "1.4em" }}
src="https://cdn-icons-png.flaticon.com/512/189/189254.png"
/>
</div>
<b>
<div
id="pTitle"
style={{
float: "left",
width: "50vw",
marginleft: "20px",
textAlign: "center",
fontSize: "1.4em",
color: "#FFF"
}}
>
{" "}
""
</div>
</b>
{this.ViewTitle()}
</ul>
<main
id="MainContent"
className="page-content"
style={{ paddingLeft: "10px", margin: "10px" }}
>
<div className="container">{this.props.children}</div>
</main>
</div>
</div>
);
}
}

@ -0,0 +1,19 @@
import "./style.css";
import React from "react";
export default class OverlayCard extends React.Component {
render() {
return (
<div className="sCard" style={{}}>
<h3 style={{}}>
<b> {this.props.title.name}:</b> {this.props.OverlayInfo.name}
</h3>
<div>
<span style={{ fontSize: "1.4em" }}>
<b>{this.props.title.discription}:</b>
{this.props.OverlayInfo.description}
</span>
</div>
</div>
);
}
}

@ -0,0 +1,192 @@
import React from "react";
import "./style.css";
class FullCard extends React.Component {
ui = {
name: "Имя",
category: "Категория:",
versions: "Доступные версии",
uses: " USE:",
decription: "Описание:",
site: "Сайт:",
InstallButton: {
text: "Установить"
}
};
IntstallPackageParamms = {
NamePackage: this.props.PackageName.Name,
Version: "",
USE: []
};
addUse(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.IntstallPackageParamms.USE[
this.IntstallPackageParamms.USE.length + 1
] = 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 (
<li
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]}
</li>
);
} else {
return (
<li
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]}
</li>
);
}
}
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 in this.props.useDes || use.split("+")[1] in this.props.useDes) {
if (use in this.props.useDes) {
document.getElementById("useInfo").textContent = this.props.useDes[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;
}
render() {
return (
<div className="fullCard">
<div className=" sCard">
<h1 className="title">{this.props.PackageName.Name.split("/")[1]}</h1>
<hr />
<img
src={this.props.icons[this.props.PackageName.Name.split("/")[1]]}
style={{ width: "128px", height: "128px" }}
/>
<div style={{}}>
<span>
{" "}
<b>{this.ui.category}</b>{" "}
{this.props.PackageName.Name.split("/")[0]}
</span>
<ul className="cVer">
<b>{this.ui.versions}:</b>
{this.props.PackageName.version.map((v) => this.checkVersion(v))}
</ul>
<div className="sUse">
<b>{this.ui.uses}</b>
{this.props.PackageName.USE.map((u, j) => (
<span
key={u}
id={u}
onMouseOver={() =>
this.VuseInfo(this.props.PackageName.USE[j])
}
onClick={() => this.addUse(this.props.PackageName.USE[j])}
>
{u}
</span>
))}
<div>
<b>Оверлеи:</b>
<span>{this.props.PackageName.repo}</span>
</div>
<b>
<div
id="useInfo"
className="useInfo"
style={{ marging: "5px" }}
></div>
</b>
</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 className="Btm">
<strong>
<span className="btn right" id={this.props.PackageName.Name}>
{this.ui.InstallButton.text}
</span>
</strong>
</div>
</div>
</div>
</div>
);
}
}
export default FullCard;

@ -0,0 +1,83 @@
import React from "react";
//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;
}
};
render() {
return this.props.rec.map((pksl, i) => (
<div
className="Card"
style={{
padding: "13px",
border: "1px solid #AAA",
//borderRadius: "16px",
backgroundColor: "#f9f9fa",
width: "20%"
//coloor: "#444"
//background: "#2E323F",
//color: "#AAA"
}}
onClick={() => this.props.ViewPackageInfo(this.props.rec[i])}
>
<img
style={{
position: "relative",
float: "left",
width: "48px",
height: "48px"
}}
src="/"
/>
<div
style={{
//display: "flex",
flex: "1",
padding: " 0 6px",
height: "100%",
borderBottom: " 1px solid rgba(0, 0, 0, 0.05)",
justifyContent: "space-between"
//color: "#AAA"
}}
>
<b style={{ width: "100%", display: "block", textAlign: "center" }}>
{pksl.Name.split("/")[1]}
</b>
{
<div
style={{ position: "relative", top: "36px", textAlign: "left" }}
>
<div className="descrition" style={{ display: "flex" }}>
<b style={{ textAlign: "left", whiteSpace: "break-spaces" }}>
{ui.description} {":"} {pksl.Description}
</b>
</div>
</div>
}
</div>
</div>
));
}
}
export default Scard;

@ -0,0 +1,66 @@
.sCard {
padding: 10px;
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: flex;
}
.cVer li {
list-style: none;
padding-left: 5px;
}
.Btm {
position: fixed;
bottom: 20px;
right: 20px;
}
.cVer li:hover {
cursor: pointer;
}
.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;
}

@ -0,0 +1,12 @@
import React from "react";
export default class CheckField extends React.Component {
render() {
return (
<p>
<span> {this.props.text}</span>
<input style={{ float: "right" }} type="checkbox" />
</p>
);
}
}

@ -0,0 +1,57 @@
import React from "react";
import MainPage from "..//../pages/main";
export default class MainConteiner 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 = "righ";
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;
}
}
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>
);
}
}

@ -0,0 +1,205 @@
import React, { Component } from "react";
import ReactDOM from "react-dom";
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 {
ui = {
menu: {
text: "Меню"
},
catalog: {
text: "Каталог"
}
};
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 = "/find?pkg=" + "pkgNme";
const response = fetch(url);
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")
);
} else {
alert("Ошибка HTTP: " + response.status);
}
console.log(pkgName);
}
findPakg(pkg) {
this.viewPakegeInfo(pkg);
}
render() {
return (
<ProSidebar
id="navBar"
style={{
background: "2e323f",
position: "fixed",
height: "100vh",
left: "-280px"
}}
>
<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"
}}
>
<img
style={{ width: "56px", height: "56px" }}
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"),
ReactDOM.render(
<UserProfilePage Ipkgs={this.props.Ipkgs} />,
document.getElementById("HomePage")
)
)}
/>
</div>
<div
className="user-info"
style={{ float: "left", width: " 100%" }}
>
<span className="user-name">
Jhon
<strong>Smith</strong>
</span>
<span
className="user-role"
style={{ width: "100vw", color: "green" }}
>
Guest
</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" }}
>
<SubMenu title={this.ui.catalog.text}>
{Object.keys(this.props.category).map((k, i) => (
<MenuItem
style={{
paddingRight: "0px",
width: "100%"
}}
>
<SubMenu title={this.checkAlias(k)}>
{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 ",
width: "100%"
}}
>
{pn}
</MenuItem>
))}
</SubMenu>
</MenuItem>
))}
</SubMenu>
</MenuItem>
</Menu>
</SidebarContent>
</ProSidebar>
);
}
}
export default NavBar;

@ -0,0 +1,568 @@
.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;
}

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

@ -0,0 +1,47 @@
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>
);
}
}

@ -0,0 +1,67 @@
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>
);
}

@ -0,0 +1,11 @@
import React from "react";
import "./style.css";
export default class Button extends React.Component {
render() {
return (
<div class Name="btn" onClick={() => this.props.handler()}>
{this.props.text}
</div>
);
}
}

@ -0,0 +1,33 @@
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: {}
};
render() {
return (
<MenuItem>
<SubMenu title={this.props.title}>
{this.props.menuItem.map((item) => (
<MenuItem>
<Link
key={item.name}
className=""
id={item.name}
to={item.url}
style={{}}
>
{item.text}
</Link>
</MenuItem>
))}
</SubMenu>
</MenuItem>
);
}
}
export default MenuPage;

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

@ -0,0 +1,27 @@
.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;
}

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

@ -0,0 +1,52 @@
// 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();
});
}
}

@ -0,0 +1,239 @@
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
NavLink
} from "react-router-dom";
//import TopPanel from "./Componets/TopPanel/topPanel";
import AppConteiner 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 InfoPage from "./pages/info";
//import PageCommunity from "./pages/Community";
// import style && data
import "./style.css";
import all_pkgs from "./pkg.json";
import "react-pro-sidebar/dist/css/styles.css";
import PageCommunity from "./pages/Community";
const 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" }
];
//Debug prtnt
function print(text) {
console.log(text);
}
//const communiy = {};
// 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('');
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" },
{ name: "info", text: "О проекте", url: "/info" }
];
icons_demo = {
"element-desktop-bin":
"https://freeappsforme.com/wp-content/uploads/2020/10/Element-Messenger-2039x2048.jpg",
"telegram-desktop-bin":
"https://providers.by/wp-content/uploads/2020/01/1.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://im0-tub-ru.yandex.net/i?id=ad526f7eab39f3a5871afd34bccfda82&n=13",
mixxx:
"https://icons.iconarchive.com/icons/alecive/flatwoken/512/Apps-Mixxx-icon.png",
clementine:
"https://im0-tub-ru.yandex.net/i?id=91d4c95f8aff7cd0f7b53542c4b1182b&n=13",
audacity:
"https://im0-tub-ru.yandex.net/i?id=1fb204870ded2e7021493fbc2377dc6b&n=13",
kdenlive:
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Logo-kdenlive.svg/1200px-Logo-kdenlive.svg.png",
"obs-studio":
"https://im0-tub-ru.yandex.net/i?id=805e8522ac46aa28ea5f34cdfcfa6905&n=13",
gimp:
"https://im0-tub-ru.yandex.net/i?id=aaf8432a4dd10b344c3e1bb0000f65d3&n=13",
blender:
"https://im0-tub-ru.yandex.net/i?id=fb5c0689a49f306effe3b150123ace9a&n=13",
inkscape:
"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Inkscape_logo_%282-colour%29.svg/1200px-Inkscape_logo_%282-colour%29.svg.png",
nano:
"https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Gnu-nano.svg/150px-Gnu-nano.svg.png",
lmms:
"https://yt3.ggpht.com/a/AATXAJwfO8V9OmT3sZdIxZdnNPEuvUOJ91x3Ls0lO4ZU=s900-c-k-c0x00ffffff-no-rj",
mplayer:
"https://p1.hiclipart.com/preview/740/970/419/reflections-mplayer-png-clipart.jpg",
smplayer:
"https://e7.pngegg.com/pngimages/185/405/png-clipart-smplayer-computer-icons-free-software-potplayer-ubuntu-aviao-electronics-camera-lens.png",
nginx:
"https://1.bp.blogspot.com/-VR6ye8vFE2w/XREXokFBUTI/AAAAAAAAJnU/cR6U1Gnc0CYOiahpjpN8bPr6ARO9fYzhgCLcBGAs/s1600/nginx.png",
apache:
"https://im0-tub-ru.yandex.net/i?id=f8815d552ad5365e1be4a69130b85e02&n=13",
okular:
"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Breezeicons-apps-48-okular.svg/1200px-Breezeicons-apps-48-okular.svg.png",
"steam-launcher":
"https://w7.pngwing.com/pngs/174/160/png-transparent-steam-computer-icons-random-icons-miscellaneous-technology-symbol.png",
chromium:
"https://www.pngjoy.com/pngm/329/6164031_chrome-browser-icon-blue-chrome-icon-png-transparent.png",
falkon:
"https://cdn1.vectorstock.com/i/1000x1000/99/60/falcon-wing-logo-template-vector-17389960.jpg",
links:
"https://im0-tub-ru.yandex.net/i?id=a6633e69ed94b7791958f621d254368f&n=13",
vivaldi:
"https://e7.pngegg.com/pngimages/818/936/png-clipart-vivaldi-technologies-web-browser-computer-icons-computer-software-internet-explorer-logo-google-chrome.png",
netsurf:
"https://im0-tub-ru.yandex.net/i?id=cbb73db017f8a1da9ba61ec5b1094e2a&n=13",
vim:
"https://icons.iconarchive.com/icons/papirus-team/papirus-apps/512/vim-icon.png",
vscode:
"https://stijndv.com/goodies/big-sur-replacement-icons/VScode-alt.png",
gedit:
"https://www.file-extensions.org/imgs/app-icon/128/6546/gedit-icon.png",
jedit:
"https://im0-tub-ru.yandex.net/i?id=a2d49e372d2eeec29b1733f4a81b34f6-sr&n=13",
"pycharm-community":
"https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/217d5ea0-623d-40b1-9b31-027b904a5f15/dccudp7-221d1133-f3c3-48eb-a72c-c511828a1ff4.png",
"firefox-bin":
"https://im0-tub-ru.yandex.net/i?id=c18d714486a2580905fbed162acb41c6&n=13",
"": ""
};
PkgName = {};
ViewPackageInfo(name) {
alert(
name.Name +
"\n" +
name.Description +
"\n" +
name.version.map((v) => v.split("[U]") || v.split("[M]")) +
"\n" +
name.USE.map((u) => u) +
"\n" +
name.repo +
"\n"
);
return <sCard PackageName={name} />;
//this.PkgName = name;
}
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} />
}
<AppConteiner
category={pkgs}
aliases={aliases}
menuItems={this.menuItems}
icons={this.icons_demo}
rec={recovers}
useDes={useDes.GlobalUSE}
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.GlobalUSE}
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>
</AppConteiner>
</Router>
</div>
);
}
}

@ -0,0 +1,5 @@
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"));

@ -0,0 +1,17 @@
{
"recpvers": null,
"dependencies": {
"@emotion/react": "11.4.1",
"@emotion/styled": "11.3.0",
"@material-ui/core": "4.12.1",
"@mui/icons-material": "5.0.1",
"@mui/material": "5.0.2",
"material-ui": "0.20.2",
"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"
}
}

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

@ -0,0 +1,15 @@
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;

@ -0,0 +1,39 @@
// 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;
}

@ -0,0 +1,24 @@
import React from "react";
class AuthForm extends React.Component {
render() {
return (
<div>
<div className="formAuth'">
<h2>Авторизация</h2>
<p>
{" "}
Username: <input type="text" />
</p>
<p>
{" "}
Password:
<input type="password" />
</p>
<div className="authBtn">Войти</div>
</div>
</div>
);
}
}
export default AuthForm;

@ -0,0 +1,20 @@
.spAuth {
position: fixed;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.formAuth {
/*position: fixed;*/
box-shadow: 3px 4px 10px #ccc;
margin: 0 auto;
}
.formAuth input {
border-radius: 10px;
}
.authBtn {
float: right;
padding: 10px;
background: #0f0;
color: #fff;
}

@ -0,0 +1,43 @@
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>
);
}
}

@ -0,0 +1,29 @@
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);
}
}
render() {
this.TitleView();
return (
<div className="settings">
<h1>Сборка React</h1>
<code>cd webport/source && npm install && npm run build</code>
<h1>Сборка Electron bin </h1>
<code>
cd webport/source && npm install && npm run build cd .. && npm install
--save-dev electron && npx electron . && cp -L sources/build ./ && npm
install --verbose electron{" "}
</code>
</div>
);
}
}
export default PageDocs;

@ -0,0 +1,13 @@
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;

@ -0,0 +1,18 @@
import React from "react";
export default class infoPage extends React.Component {
render() {
return (
<div className="infoPAge">
<h1>Что это?</h1>
<div>Это Демонстрационая версия GUI для portage </div>
<h1>Основная цель</h1>
<div>
Снизить порог вхождени для пользовтелей дистрибутьтивов в основе
которых лежит пакетный манагер portage{" "}
</div>
</div>
);
}
}

@ -0,0 +1,132 @@
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 "./style.css";
export default class MainPage extends React.Component {
constructor(props) {
super(props);
//document.getElementById("pTitle").textContent="Рекомендации"
}
VVSB = false;
viewSideBar() {
if (!this.VVSB) {
document.getElementById("MainContent").style.paddingLeft = "300px";
document.getElementById("btn-toggle").style.float = "righ";
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;
}
}
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];
ReactDOM.render(
<FullCard
PackageName={pkg}
PropMain={this.props.rec}
icons={this.props.icons}
useDes={this.props.useDes}
Ipkg={this.props.Ipkg}
/>,
document.getElementById("HomePage")
);
}
TitleView() {
try {
if (document.getElementById("pTitle").textContent !== "Рекомендации") {
document.getElementById("pTitle").textContent = "Рекомендации";
}
} catch (e) {
console.log(e);
}
}
render() {
this.TitleView();
return (
<div id="HomePage" className="wrapper">
{}
{Object.keys(this.props.rec).map((k) => (
<div
className="column__list"
style={{
//paddingRight: "0px",
//width: "100%",
marginTop: "20px",
overflow: "clip"
}}
>
<div>
<h2 style={{ width: "100%" }}>
<b stye={{}}>{k.split("[")[1]}</b>
</h2>
</div>
{this.props.rec[k].map((pn, i) => (
<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
style={{
width: "64px",
height: "64px"
}}
src={this.props.icons[pn.Name.split("/")[1]]}
/>
<div style={{ marginLeft: "10px" }}>
<b>
{" "}
<span
style={{
color: "red",
width: "100vw",
overflow: "clip",
fontSize: "1.1em"
}}
key={pn.Name}
>
{pn.Name.split("/")[1]}
</span>
</b>
<div style={{ overflow: "hidden" }}>{pn.Description}</div>
</div>
</div>
))}
</div>
))}
<div
id="info"
style={{
position: "fixed",
top: "0px",
left: this.posiLetf,
width: "100%",
height: "100%",
background: "#2e323f",
display: "none"
}}
></div>
</div>
);
}
}

@ -0,0 +1,28 @@
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" }}>
<b>{newItem.title}</b>
</li>
))}
</ol>
</div>
);
}
}
export default New;

@ -0,0 +1,40 @@
//import { Button } from "@material-ui/core";
import React from "react";
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;
slideNum = 1;
TitleView() {
try {
if (document.getElementById("pTitle").textContent !== "Оверлеи") {
document.getElementById("pTitle").textContent = "Оверлеи";
}
} catch (e) {
console.log(e);
}
}
render() {
return (
<div id="HomePage">
{this.TitleView()}
<div className="btn-group" style={{ margin: "0px", marginTop: "20px" }}>
<Button text={"Категории"} handler={() => console.log("Catalog")} />
</div>
<div className="colomn_-list">
{this.props.repositores.map((over, i) => (
<OvItem over={over} title={title} />
))}
</div>
</div>
);
}
}
export default PageOverlays;

@ -0,0 +1,24 @@
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;

@ -0,0 +1,48 @@
import React from "react";
export default class UserProfilePage extends React.Component {
TitleView() {
try {
if (
document.getElementById("pTitle").textContent !== "Установленные пакеты"
) {
document.getElementById("pTitle").textContent = "Установленные пакеты";
}
} catch (e) {
console.log(e);
}
}
render() {
return (
<div>
{this.TitleView()}
{console.log(this.props.Ipkgs)}
<ul>
{Object.keys(this.props.Ipkgs).map((name) => (
<li
style={{
textAlign: "left",
border: "1px dotted #AAA",
listStyle: "none"
}}
>
<h2>{name}</h2>
{this.props.Ipkgs[name].map((pkg) => (
<div
style={{ width: "100%", padding: "10px", fontSize: "1.2em" }}
>
{pkg}
<div
className="btn"
style={{ float: "right", padding: "0px" }}
>
Удалить
</div>
</div>
))}
</li>
))}
</ul>
</div>
);
}
}

@ -0,0 +1,162 @@
import React from "react";
import CheckField from "../Componets/CheckField";
//import { FormGroup, FormControlLabel, Switch } from "@material-ui/core";
//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: [],
langs: [
{ title: "RU", link: "" },
{ title: "EN", link: "" },
{ title: "DE", link: "" }
]
};
styleUseinfo = {
mobile: {
position: "fixed",
bottom: "0px",
left: "0px",
width: "100vw",
background: "#FFF",
borderTop: "1px solid #CDC",
paddingTop: "5px"
},
nomob: { margin: "5px" }
};
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 = "#FFF";
//this.IntstallPackageParamms.USE.map((us, i)=>(
// if( us== use)this.IntstallPackageParamms.USE[i].delete
//))
} else {
document.getElementById(lang).style.background = "#0F0";
//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() {
return (
<div id="HomePage" className="settings">
{this.TitleView()}
<div>
<h3>UI</h3>
<hr />
<div>
<span>Тема</span>
<ul className="btn-group">{}</ul>
</div>
<div>
<span>Язык</span>
<ul
style={{ display: "inline-flex", listStyle: "none" }}
className="btn-group"
>
{Object.keys(this.settings.langs).map((lng) => (
<li style={{ marginLeft: "10px" }}>
{this.settings.langs[lng].title}
</li>
))}
</ul>
</div>
</div>
<div>
<h3>Сервер</h3>
<hr />
<p>
Адресс сервера <input type="text" />{" "}
</p>
</div>
<div>
<h3>Portage</h3>
<hr />
<CheckField text={"Искать в оврелях"} />
<div className="sUse">
<b>USE:</b>
{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>
</div>
</div>
</div>
);
}
}
export default PageSettings;

@ -0,0 +1,17 @@
const styles = {
splash: {
position: "fixed",
width: "100vw",
height: "100vh",
background: "#2e323f",
h1: {
color: "#AAA",
contentAlign: "center"
}
}
};
function Splash() {
return <div style={styles.splash}></div>;
}
export default Splash;

@ -0,0 +1,630 @@
@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 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: .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: .2rem;
background-color: #dfe3e6;
padding: .5rem;
}
.column__title--wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: .25rem;
align-items: center;
}
.column__title--wrapper h2 {
color: #17394d;
font-weight: 700;
font-size: .9rem;
}
.column__title--wrapper i {
text-align: right;
color: #798d99;
}
.column__item--cta {
padding: .25rem;
display: flex;
color: #798d99;
}
.column__item--cta i {
margin-right: .25rem;
}
/* card styles */
.card__list {
display: grid;
grid-template-rows: auto;
grid-gap: .5rem;
margin: .5rem 0;
}
.card__item {
background-color: white;
border-radius: .25rem;
box-shadow: 0 1px 0 rgba(9,45,66,.25);
padding: .5rem;
}
.card__tag {
font-size: .75rem;
padding: .1rem .5rem;
border-radius: .25rem;
font-weight: 700;
color: white;
margin-bottom: .75rem;
display: inline-block;
}
.card__image {
width: 100%;
margin-bottom: .25rem;
}
/* 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: .75rem;
}
/* card actions */
.card__actions {
display: flex;
align-items: center;
}
.card__actions--wrapper i {
color: #798d99;
margin-right: .5rem;
}
.card__actions--text {
color: #798d99;
font-size: .8rem;
margin-left: -.25rem;
margin-right: .5rem;
}
.card__avatars {
display: flex;
flex: 1;
justify-content: flex-end;
}
.card__avatars--item {
margin-left: .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

@ -0,0 +1,18 @@
body,
html {
margin: 0;
padding:0px;
box-sizing: border-box;
}
.app {
display: flex;
background-color: var(--main-bg-color);
}
.context {
flex: 1;
height: 100vh;
position: relative;
overflow: hidden;
}

@ -0,0 +1,6 @@
{
"main.css": "static/css/main.b5c2177a.css",
"main.css.map": "static/css/main.b5c2177a.css.map",
"main.js": "static/js/main.53383d3c.js",
"main.js.map": "static/js/main.53383d3c.js.map"
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@ -0,0 +1 @@
<!doctype html><html lang="en"><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"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><link href="/static/css/main.b5c2177a.css" rel="stylesheet"></head><body><head><title>Webport</title></head><div id="root"></div><script type="text/javascript" src="/static/js/main.53383d3c.js"></script></body></html>

@ -0,0 +1,15 @@
{
"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"
}

@ -0,0 +1 @@
"use strict";function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}var precacheConfig=[["/index.html","a22ab4ef0a396dfaa46e9b0215f08492"],["/static/css/main.b5c2177a.css","7e40cbddebe17530499dfad2210b28ea"],["/static/js/main.53383d3c.js","40f3f3138827978a785efe988edd7398"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching);t=urlsToCacheKeys.has(n);t||(n=addDirectoryIndex(n,"index.html"),t=urlsToCacheKeys.has(n));!t&&"navigate"===e.request.mode&&isPathWhitelisted([],e.request.url)&&(n=new URL("/index.html",self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save