fix: kiosk toggle sync, load more animation, remove nsis target
This commit is contained in:
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"files": {
|
||||
"main.css": "/static/css/main.e6c6eccb.css",
|
||||
"main.js": "/static/js/main.e2d60cfb.js",
|
||||
"index.html": "/index.html",
|
||||
"main.e6c6eccb.css.map": "/static/css/main.e6c6eccb.css.map",
|
||||
"main.e2d60cfb.js.map": "/static/js/main.e2d60cfb.js.map"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.e6c6eccb.css",
|
||||
"static/js/main.e2d60cfb.js"
|
||||
]
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Loader Animation</title><script defer="defer" src="/static/js/main.e2d60cfb.js"></script><link href="/static/css/main.e6c6eccb.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
|
||||
@@ -1,2 +0,0 @@
|
||||
.confirm{position:relative}.confirm div{border-radius:50%;opacity:1;position:absolute}h1,h2{color:#fff}.confirm-container{background-color:#626262;border:0 solid #000;border-radius:20px;display:flex;left:50%;max-height:600px;min-height:200px;min-width:400px;padding:15px;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:9999}.confirm-button-container{bottom:40px;color:#fff;font-size:medium;position:absolute;right:40px;width:100}.confirm-button-container button{background:#0f00;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:20px;height:50px;margin-right:20px;transition:background .3s ease;width:70px}.confirm-button:hover{background:#717171}body{align-items:center;animation:fadeIn .5s forwards;display:flex;height:100vh;justify-content:center;margin:0;opacity:0;overflow:hidden;padding:0}@keyframes fadeIn{0%{opacity:0}to{background:#000000b3;opacity:.9}}
|
||||
/*# sourceMappingURL=main.e6c6eccb.css.map*/
|
||||
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"static/css/main.e6c6eccb.css","mappings":"AACA,SACI,iBACF,CAEA,aAGE,iBAAkB,CADlB,SAAU,CADV,iBAIF,CACA,MACE,UAEF,CCbF,mBAKI,wBAAiC,CACjC,mBAAuB,CACvB,kBAAmB,CACnB,YAAa,CALb,QAAS,CAUT,gBAAiB,CADjB,gBAAiB,CADjB,eAAgB,CAFhB,YAAa,CARb,cAAc,CACd,OAAQ,CAER,8BAAgC,CAMhC,YAIF,CAEA,0BAKE,WAAY,CAHZ,UAAY,CACZ,gBAAiB,CACjB,iBAAkB,CAElB,UAAW,CALX,SAMF,CAEA,iCAGE,gBAA8B,CAC9B,WAAY,CAGZ,iBAAkB,CAElB,UAAY,CAHZ,cAAe,CADf,cAAe,CAHf,WAAY,CAQZ,iBAAkB,CAFlB,8BAAgC,CAPhC,UAUF,CAEA,sBACE,kBACF,CCxCF,KAOI,kBAAmB,CAEnB,6BAA+B,CAJ/B,YAAa,CADb,YAAa,CAEb,sBAAuB,CALvB,QAAS,CAOT,SAAU,CALV,eAAgB,CADhB,SAQF,CAEA,kBACE,GACE,SACF,CACA,GAEE,oBAA8B,CAD9B,UAEF,CACF","sources":["components/Confirm.css","components/ConfirmContainer.css","App.css"],"sourcesContent":["/* src/components/Loader.css */\r\n.confirm {\r\n position: relative;\r\n }\r\n \r\n .confirm div {\r\n position: absolute;\r\n opacity: 1;\r\n border-radius: 50%;\r\n /* animation: loader-animation 1.5s infinite ease-in-out; */\r\n }\r\n h1, h2 {\r\n color: white;\r\n /* animation: loader-animation 1.5s infinite ease-in-out; */\r\n }\r\n /* .error div:nth-child(2) {\r\n animation-delay: -1.2s;\r\n }\r\n \r\n @keyframes error-animation {\r\n 0%,\r\n 100% {\r\n width: 0;\r\n height: 0;\r\n top: 50px;\r\n left: 50px;\r\n opacity: 0.5;\r\n }\r\n 50% {\r\n width: 100px;\r\n height: 100px;\r\n top: 0;\r\n left: 0;\r\n opacity: 0;\r\n }\r\n }\r\n */","/* src/components/LoaderContainer.css */\r\n.confirm-container {\r\n position:fixed; /* Fixed position to keep it centered relative to the viewport */\r\n top: 50%; /* Center vertically */\r\n left: 50%; /* Center horizontally */\r\n transform: translate(-50%, -50%); /* Adjust for the element's size */\r\n background-color: rgb(98, 98, 98);\r\n border: 0px solid black;\r\n border-radius: 20px;\r\n display: flex;\r\n padding: 15px;\r\n z-index: 9999; /* Ensure it's on top of other content */\r\n min-width: 400px; /* Width of the loader */\r\n min-height: 200px; /* Height of the loader */\r\n max-height: 600px; /* Height of the loader */\r\n }\r\n \r\n .confirm-button-container {\r\n width: 100;\r\n color: white;\r\n font-size: medium;\r\n position: absolute;\r\n bottom: 40px; \r\n right: 40px;\r\n }\r\n \r\n .confirm-button-container button {\r\n width: 70px;\r\n height: 50px;\r\n background: rgba(0, 255, 0, 0); /* Transparent background */\r\n border: none;\r\n font-size: 20px;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: background 0.3s ease;\r\n color: white;\r\n margin-right: 20px;\r\n }\r\n \r\n .confirm-button:hover {\r\n background: rgb(113, 113, 113); /* Light green with opacity 0.5 */\r\n } \r\n ","/* src/App.css */\r\nbody {\r\n margin: 0;\r\n padding: 0;\r\n overflow: hidden;\r\n height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n opacity: 0;\r\n animation: fadeIn 0.5s forwards;\r\n }\r\n \r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 0.9;\r\n background: rgba(0, 0, 0, 0.7);\r\n }\r\n }\r\n "],"names":[],"sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,39 +0,0 @@
|
||||
/**
|
||||
* @license React
|
||||
* react-dom.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react-jsx-runtime.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* scheduler.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
File diff suppressed because one or more lines are too long
@@ -1,101 +0,0 @@
|
||||
<html lang="en" class="focus-outline-visible">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Loader Animation</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0.9;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.loader-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.loader div {
|
||||
position: absolute;
|
||||
border: 4px solid gray;
|
||||
opacity: 1;
|
||||
border-radius: 50%;
|
||||
animation: loader-animation 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.loader div:nth-child(2) {
|
||||
animation-delay: -1.2s;
|
||||
}
|
||||
|
||||
@keyframes loader-animation {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
50% {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="loader-container">
|
||||
<div class="loader">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="loader-container">
|
||||
<div class="loader">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="loader">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,40 +0,0 @@
|
||||
{
|
||||
"name": "torrent_client",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"proxy": "http://localhost:3001/",
|
||||
"dependencies": {
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-scripts": "5.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"serv": "node ./serv.js"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"main": "index.js",
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": ""
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Loader Animation</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- This is where your React app will be injected -->
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,16 +0,0 @@
|
||||
const express = require('express');
|
||||
const path = require('path');
|
||||
|
||||
// const __filename = fileURLToPath(import.meta.url);
|
||||
// const __dirname = dirname(__filename);
|
||||
|
||||
const app = express();
|
||||
app.use(express.static(path.join(__dirname, 'build')));
|
||||
app.use(express.static(path.join(__dirname, 'build')));
|
||||
app.use(express.static(path.join(__dirname, 'build')));
|
||||
app.get('/*', function (req, res) {
|
||||
|
||||
res.sendFile(path.join(__dirname, 'build', 'index.html'));
|
||||
});
|
||||
|
||||
app.listen(3001, () => console.log('Example app is listening on port 3001.'));
|
||||
@@ -1,23 +0,0 @@
|
||||
/* src/App.css */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 0.9;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
// src/App.tsx
|
||||
import React from "react";
|
||||
import ConfirmContainer from "./components/ConfirmContainer";
|
||||
import "./App.css";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
electron?: {
|
||||
handleAction: (action: string) => void;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<ConfirmContainer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -1,37 +0,0 @@
|
||||
/* src/components/Loader.css */
|
||||
.confirm {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.confirm div {
|
||||
position: absolute;
|
||||
opacity: 1;
|
||||
border-radius: 50%;
|
||||
/* animation: loader-animation 1.5s infinite ease-in-out; */
|
||||
}
|
||||
h1, h2 {
|
||||
color: white;
|
||||
/* animation: loader-animation 1.5s infinite ease-in-out; */
|
||||
}
|
||||
/* .error div:nth-child(2) {
|
||||
animation-delay: -1.2s;
|
||||
}
|
||||
|
||||
@keyframes error-animation {
|
||||
0%,
|
||||
100% {
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
*/
|
||||
@@ -1,31 +0,0 @@
|
||||
// src/components/Loader.tsx
|
||||
import React, { useEffect, useState } from "react";
|
||||
import "./Confirm.css";
|
||||
|
||||
interface ErrorDataProps {
|
||||
title: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
interface ErrorProps {
|
||||
errorData: ErrorDataProps;
|
||||
setCustomData: (errorData: ErrorDataProps) => void;
|
||||
}
|
||||
|
||||
const Error: React.FC = () => {
|
||||
const [errorData, setCustomData] = useState<ErrorDataProps>();
|
||||
useEffect(() => {
|
||||
fetch('http://localhost:3001/api/custom-data')
|
||||
.then(response => response.json())
|
||||
.then(errorData => setCustomData(errorData ?? {title: "Uncaught", text: "error"}))
|
||||
.catch(error => console.error('Error fetching custom text:', error));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="confirm">
|
||||
<h2>{errorData?.text}</h2>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Error;
|
||||
@@ -1,43 +0,0 @@
|
||||
/* src/components/LoaderContainer.css */
|
||||
.confirm-container {
|
||||
position:fixed; /* Fixed position to keep it centered relative to the viewport */
|
||||
top: 50%; /* Center vertically */
|
||||
left: 50%; /* Center horizontally */
|
||||
transform: translate(-50%, -50%); /* Adjust for the element's size */
|
||||
background-color: rgb(98, 98, 98);
|
||||
border: 0px solid black;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
z-index: 9999; /* Ensure it's on top of other content */
|
||||
min-width: 400px; /* Width of the loader */
|
||||
min-height: 200px; /* Height of the loader */
|
||||
max-height: 600px; /* Height of the loader */
|
||||
}
|
||||
|
||||
.confirm-button-container {
|
||||
width: 100;
|
||||
color: white;
|
||||
font-size: medium;
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.confirm-button-container button {
|
||||
width: 70px;
|
||||
height: 50px;
|
||||
background: rgba(0, 255, 0, 0); /* Transparent background */
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s ease;
|
||||
color: white;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.confirm-button:hover {
|
||||
background: rgb(113, 113, 113); /* Light green with opacity 0.5 */
|
||||
}
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
// src/components/LoaderContainer.tsx
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Error from "./Confirm";
|
||||
import "./ConfirmContainer.css";
|
||||
|
||||
const ConfirmContainer: React.FC = () => {
|
||||
|
||||
return (
|
||||
<div className="confirm-container">
|
||||
<Error />
|
||||
<div className="confirm-button-container">
|
||||
<button
|
||||
className="confirm-button"
|
||||
onClick={() =>
|
||||
{
|
||||
window?.electron &&
|
||||
window.electron.handleAction("confirmNo");
|
||||
}
|
||||
}
|
||||
>
|
||||
<strong>Нет</strong>
|
||||
</button>
|
||||
<button
|
||||
className="confirm-button"
|
||||
onClick={() =>
|
||||
{
|
||||
window?.electron &&
|
||||
window.electron.handleAction("confirmYes");
|
||||
}
|
||||
}
|
||||
>
|
||||
<strong>Да</strong>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfirmContainer;
|
||||
@@ -1,22 +0,0 @@
|
||||
// src/index.tsx
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import "./index.css";
|
||||
import App from "./App";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
|
||||
// Get the root element from the DOM
|
||||
const rootElement = document.getElementById("root");
|
||||
|
||||
if (rootElement) {
|
||||
// Create a root and render the app
|
||||
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
} else {
|
||||
console.error("Root element not found");
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": false,
|
||||
"jsx": "react-jsx",
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"files": {
|
||||
"main.css": "/static/css/main.a5182e31.css",
|
||||
"main.js": "/static/js/main.ab661a74.js",
|
||||
"index.html": "/index.html",
|
||||
"main.a5182e31.css.map": "/static/css/main.a5182e31.css.map",
|
||||
"main.ab661a74.js.map": "/static/js/main.ab661a74.js.map"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.a5182e31.css",
|
||||
"static/js/main.ab661a74.js"
|
||||
]
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Loader Animation</title><script defer="defer" src="/static/js/main.ab661a74.js"></script><link href="/static/css/main.a5182e31.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
|
||||
@@ -1,2 +0,0 @@
|
||||
.error{position:relative}.error div{border-radius:50%;opacity:1;position:absolute}h1,h2{color:#fff}.error-container{background-color:#626262;border:0 solid #000;border-radius:20px;display:flex;left:50%;max-height:600px;min-height:200px;min-width:400px;padding:15px;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:9999}.error-button{background:#0f00;border:none;border-radius:4px;bottom:40px;color:#fff;cursor:pointer;font-size:medium;font-size:16px;padding:10px 20px;position:absolute;right:40px;transition:background .3s ease}.error-button strong{color:#fff}.error-button:hover{background:#717171}body{align-items:center;animation:fadeIn .5s forwards;display:flex;height:100vh;justify-content:center;margin:0;opacity:0;overflow:hidden;padding:0}@keyframes fadeIn{0%{opacity:0}to{background:#000000b3;opacity:.9}}
|
||||
/*# sourceMappingURL=main.a5182e31.css.map*/
|
||||
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"static/css/main.a5182e31.css","mappings":"AACA,OACI,iBACF,CAEA,WAGE,iBAAkB,CADlB,SAAU,CADV,iBAIF,CACA,MACE,UAEF,CCbF,iBAKI,wBAAiC,CACjC,mBAAuB,CACvB,kBAAmB,CACnB,YAAa,CALb,QAAS,CAUT,gBAAiB,CADjB,gBAAiB,CADjB,eAAgB,CAFhB,YAAa,CARb,cAAc,CACd,OAAQ,CAER,8BAAgC,CAMhC,YAIF,CAEA,cAME,gBAA8B,CAC9B,WAAY,CAIZ,iBAAkB,CAPlB,WAAY,CAHZ,UAAY,CASZ,cAAe,CARf,gBAAiB,CAOjB,cAAe,CADf,iBAAkB,CALlB,iBAAkB,CAElB,UAAW,CAOX,8BACF,CAEA,qBACE,UACF,CAEA,oBACE,kBACF,CCrCF,KAOI,kBAAmB,CAEnB,6BAA+B,CAJ/B,YAAa,CADb,YAAa,CAEb,sBAAuB,CALvB,QAAS,CAOT,SAAU,CALV,eAAgB,CADhB,SAQF,CAEA,kBACE,GACE,SACF,CACA,GAEE,oBAA8B,CAD9B,UAEF,CACF","sources":["components/Error.css","components/ErrorContainer.css","App.css"],"sourcesContent":["/* src/components/Loader.css */\r\n.error {\r\n position: relative;\r\n }\r\n \r\n .error div {\r\n position: absolute;\r\n opacity: 1;\r\n border-radius: 50%;\r\n /* animation: loader-animation 1.5s infinite ease-in-out; */\r\n }\r\n h1, h2 {\r\n color: white;\r\n /* animation: loader-animation 1.5s infinite ease-in-out; */\r\n }\r\n /* .error div:nth-child(2) {\r\n animation-delay: -1.2s;\r\n }\r\n \r\n @keyframes error-animation {\r\n 0%,\r\n 100% {\r\n width: 0;\r\n height: 0;\r\n top: 50px;\r\n left: 50px;\r\n opacity: 0.5;\r\n }\r\n 50% {\r\n width: 100px;\r\n height: 100px;\r\n top: 0;\r\n left: 0;\r\n opacity: 0;\r\n }\r\n }\r\n */","/* src/components/LoaderContainer.css */\r\n.error-container {\r\n position:fixed; /* Fixed position to keep it centered relative to the viewport */\r\n top: 50%; /* Center vertically */\r\n left: 50%; /* Center horizontally */\r\n transform: translate(-50%, -50%); /* Adjust for the element's size */\r\n background-color: rgb(98, 98, 98);\r\n border: 0px solid black;\r\n border-radius: 20px;\r\n display: flex;\r\n padding: 15px;\r\n z-index: 9999; /* Ensure it's on top of other content */\r\n min-width: 400px; /* Width of the loader */\r\n min-height: 200px; /* Height of the loader */\r\n max-height: 600px; /* Height of the loader */\r\n }\r\n \r\n .error-button {\r\n color: white;\r\n font-size: medium;\r\n position: absolute;\r\n bottom: 40px; \r\n right: 40px;\r\n background: rgba(0, 255, 0, 0); /* Transparent background */\r\n border: none;\r\n padding: 10px 20px;\r\n font-size: 16px;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: background 0.3s ease;\r\n }\r\n \r\n .error-button strong {\r\n color: white;\r\n }\r\n \r\n .error-button:hover {\r\n background: rgb(113, 113, 113); /* Light green with opacity 0.5 */\r\n } \r\n ","/* src/App.css */\r\nbody {\r\n margin: 0;\r\n padding: 0;\r\n overflow: hidden;\r\n height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n opacity: 0;\r\n animation: fadeIn 0.5s forwards;\r\n }\r\n \r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 0.9;\r\n background: rgba(0, 0, 0, 0.7);\r\n }\r\n }\r\n "],"names":[],"sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,39 +0,0 @@
|
||||
/**
|
||||
* @license React
|
||||
* react-dom.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react-jsx-runtime.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* scheduler.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
File diff suppressed because one or more lines are too long
@@ -1,101 +0,0 @@
|
||||
<html lang="en" class="focus-outline-visible">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Loader Animation</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0.9;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.loader-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.loader div {
|
||||
position: absolute;
|
||||
border: 4px solid gray;
|
||||
opacity: 1;
|
||||
border-radius: 50%;
|
||||
animation: loader-animation 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.loader div:nth-child(2) {
|
||||
animation-delay: -1.2s;
|
||||
}
|
||||
|
||||
@keyframes loader-animation {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
50% {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="loader-container">
|
||||
<div class="loader">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="loader-container">
|
||||
<div class="loader">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="loader">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,40 +0,0 @@
|
||||
{
|
||||
"name": "torrentClient",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"proxy": "http://localhost:3001/",
|
||||
"dependencies": {
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-scripts": "5.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"serv": "node ./serv.js"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"main": "index.js",
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": ""
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Loader Animation</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- This is where your React app will be injected -->
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,16 +0,0 @@
|
||||
const express = require('express');
|
||||
const path = require('path');
|
||||
|
||||
// const __filename = fileURLToPath(import.meta.url);
|
||||
// const __dirname = dirname(__filename);
|
||||
|
||||
const app = express();
|
||||
app.use(express.static(path.join(__dirname, 'build')));
|
||||
app.use(express.static(path.join(__dirname, 'build')));
|
||||
app.use(express.static(path.join(__dirname, 'build')));
|
||||
app.get('/*', function (req, res) {
|
||||
|
||||
res.sendFile(path.join(__dirname, 'build', 'index.html'));
|
||||
});
|
||||
|
||||
app.listen(3001, () => console.log('Example app is listening on port 3001.'));
|
||||
@@ -1,23 +0,0 @@
|
||||
/* src/App.css */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 0.9;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
// src/App.tsx
|
||||
import React from "react";
|
||||
import ErrorContainer from "./components/ErrorContainer";
|
||||
import "./App.css";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
electron?: {
|
||||
handleAction: (action: string, isCancel?: boolean) => void;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<ErrorContainer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -1,37 +0,0 @@
|
||||
/* src/components/Loader.css */
|
||||
.error {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.error div {
|
||||
position: absolute;
|
||||
opacity: 1;
|
||||
border-radius: 50%;
|
||||
/* animation: loader-animation 1.5s infinite ease-in-out; */
|
||||
}
|
||||
h1, h2 {
|
||||
color: white;
|
||||
/* animation: loader-animation 1.5s infinite ease-in-out; */
|
||||
}
|
||||
/* .error div:nth-child(2) {
|
||||
animation-delay: -1.2s;
|
||||
}
|
||||
|
||||
@keyframes error-animation {
|
||||
0%,
|
||||
100% {
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
*/
|
||||
@@ -1,32 +0,0 @@
|
||||
// src/components/Loader.tsx
|
||||
import React, { useEffect, useState } from "react";
|
||||
import "./Error.css";
|
||||
|
||||
interface ErrorDataProps {
|
||||
title: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
interface ErrorProps {
|
||||
errorData: ErrorDataProps;
|
||||
setCustomData: (errorData: ErrorDataProps) => void;
|
||||
}
|
||||
|
||||
const Error: React.FC = () => {
|
||||
const [errorData, setCustomData] = useState<ErrorDataProps>();
|
||||
useEffect(() => {
|
||||
fetch('http://localhost:3001/api/custom-data')
|
||||
.then(response => response.json())
|
||||
.then(errorData => setCustomData(errorData ?? {title: "Uncaught", text: "error"}))
|
||||
.catch(error => console.error('Error fetching custom text:', error));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="error">
|
||||
<h1>{errorData?.title}</h1>
|
||||
<h2>{errorData?.text}</h2>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Error;
|
||||
@@ -1,40 +0,0 @@
|
||||
/* src/components/LoaderContainer.css */
|
||||
.error-container {
|
||||
position:fixed; /* Fixed position to keep it centered relative to the viewport */
|
||||
top: 50%; /* Center vertically */
|
||||
left: 50%; /* Center horizontally */
|
||||
transform: translate(-50%, -50%); /* Adjust for the element's size */
|
||||
background-color: rgb(98, 98, 98);
|
||||
border: 0px solid black;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
z-index: 9999; /* Ensure it's on top of other content */
|
||||
min-width: 400px; /* Width of the loader */
|
||||
min-height: 200px; /* Height of the loader */
|
||||
max-height: 600px; /* Height of the loader */
|
||||
}
|
||||
|
||||
.error-button {
|
||||
color: white;
|
||||
font-size: medium;
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
background: rgba(0, 255, 0, 0); /* Transparent background */
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.error-button strong {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.error-button:hover {
|
||||
background: rgb(113, 113, 113); /* Light green with opacity 0.5 */
|
||||
}
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
// src/components/LoaderContainer.tsx
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Error from "./Error";
|
||||
import "./ErrorContainer.css";
|
||||
|
||||
const ErrorContainer: React.FC = () => {
|
||||
|
||||
return (
|
||||
<div className="error-container">
|
||||
<Error />
|
||||
|
||||
<button
|
||||
className="error-button"
|
||||
onClick={() =>
|
||||
{
|
||||
window?.electron &&
|
||||
window.electron.handleAction("error");
|
||||
}
|
||||
}
|
||||
>
|
||||
<strong>OK</strong>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ErrorContainer;
|
||||
@@ -1,22 +0,0 @@
|
||||
// src/index.tsx
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import "./index.css";
|
||||
import App from "./App";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
|
||||
// Get the root element from the DOM
|
||||
const rootElement = document.getElementById("root");
|
||||
|
||||
if (rootElement) {
|
||||
// Create a root and render the app
|
||||
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
} else {
|
||||
console.error("Root element not found");
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": false,
|
||||
"jsx": "react-jsx",
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"files": {
|
||||
"main.css": "/static/css/main.4d16bcf2.css",
|
||||
"main.js": "/static/js/main.bc0cdbdb.js",
|
||||
"index.html": "/index.html",
|
||||
"main.4d16bcf2.css.map": "/static/css/main.4d16bcf2.css.map",
|
||||
"main.bc0cdbdb.js.map": "/static/js/main.bc0cdbdb.js.map"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.4d16bcf2.css",
|
||||
"static/js/main.bc0cdbdb.js"
|
||||
]
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Loader Animation</title><script defer="defer" src="/static/js/main.bc0cdbdb.js"></script><link href="/static/css/main.4d16bcf2.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
|
||||
@@ -1,2 +0,0 @@
|
||||
.loader{height:100px;position:relative;width:100px}.loader div{animation:loader-animation 1.5s ease-in-out infinite;border:4px solid gray;border-radius:50%;opacity:1;position:absolute}.loader div:nth-child(2){animation-delay:-1.2s}@keyframes loader-animation{0%,to{height:0;left:50px;opacity:.5;top:50px;width:0}50%{height:100px;left:0;opacity:0;top:0;width:100px}}.loader-container{height:100px;left:50%;position:fixed;top:50%;transform:translate(-50%,-50%);width:100px;z-index:9999}.loader-container,body{align-items:center;display:flex;justify-content:center}body{animation:fadeIn .5s forwards;height:100vh;margin:0;opacity:0;overflow:hidden;padding:0}@keyframes fadeIn{0%{opacity:0}to{background:#000000b3;opacity:.9}}
|
||||
/*# sourceMappingURL=main.4d16bcf2.css.map*/
|
||||
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"static/css/main.4d16bcf2.css","mappings":"AACA,QAGI,YAAa,CAFb,iBAAkB,CAClB,WAEF,CAEA,YAKE,oDAAqD,CAHrD,qBAAsB,CAEtB,iBAAkB,CADlB,SAAU,CAFV,iBAKF,CAEA,yBACE,qBACF,CAEA,4BACE,MAGE,QAAS,CAET,SAAU,CACV,UAAY,CAFZ,QAAS,CAFT,OAKF,CACA,IAEE,YAAa,CAEb,MAAO,CACP,SAAU,CAFV,KAAM,CAFN,WAKF,CACF,CClCF,kBAUI,YAAa,CAPb,QAAS,CAFT,cAAe,CACf,OAAQ,CAER,8BAAgC,CAKhC,WAAY,CADZ,YAGF,CCXF,uBDOI,kBAAmB,CAFnB,YAAa,CACb,sBCIF,CAVF,KASI,6BAA+B,CAL/B,YAAa,CAHb,QAAS,CAOT,SAAU,CALV,eAAgB,CADhB,SAQF,CAEA,kBACE,GACE,SACF,CACA,GAEE,oBAA8B,CAD9B,UAEF,CACF","sources":["components/Loader.css","components/LoaderContainer.css","App.css"],"sourcesContent":["/* src/components/Loader.css */\r\n.loader {\r\n position: relative;\r\n width: 100px;\r\n height: 100px;\r\n }\r\n \r\n .loader div {\r\n position: absolute;\r\n border: 4px solid gray;\r\n opacity: 1;\r\n border-radius: 50%;\r\n animation: loader-animation 1.5s infinite ease-in-out;\r\n }\r\n \r\n .loader div:nth-child(2) {\r\n animation-delay: -1.2s;\r\n }\r\n \r\n @keyframes loader-animation {\r\n 0%,\r\n 100% {\r\n width: 0;\r\n height: 0;\r\n top: 50px;\r\n left: 50px;\r\n opacity: 0.5;\r\n }\r\n 50% {\r\n width: 100px;\r\n height: 100px;\r\n top: 0;\r\n left: 0;\r\n opacity: 0;\r\n }\r\n }\r\n ","/* src/components/LoaderContainer.css */\r\n.loader-container {\r\n position: fixed; /* Fixed position to keep it centered relative to the viewport */\r\n top: 50%; /* Center vertically */\r\n left: 50%; /* Center horizontally */\r\n transform: translate(-50%, -50%); /* Adjust for the element's size */\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 9999; /* Ensure it's on top of other content */\r\n width: 100px; /* Width of the loader */\r\n height: 100px; /* Height of the loader */\r\n }\r\n ","/* src/App.css */\r\nbody {\r\n margin: 0;\r\n padding: 0;\r\n overflow: hidden;\r\n height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n opacity: 0;\r\n animation: fadeIn 0.5s forwards;\r\n }\r\n \r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 0.9;\r\n background: rgba(0, 0, 0, 0.7);\r\n }\r\n }\r\n "],"names":[],"sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,39 +0,0 @@
|
||||
/**
|
||||
* @license React
|
||||
* react-dom.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react-jsx-runtime.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* scheduler.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
File diff suppressed because one or more lines are too long
@@ -1,101 +0,0 @@
|
||||
<html lang="en" class="focus-outline-visible">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Loader Animation</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0.9;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.loader-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.loader div {
|
||||
position: absolute;
|
||||
border: 4px solid gray;
|
||||
opacity: 1;
|
||||
border-radius: 50%;
|
||||
animation: loader-animation 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.loader div:nth-child(2) {
|
||||
animation-delay: -1.2s;
|
||||
}
|
||||
|
||||
@keyframes loader-animation {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
50% {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="loader-container">
|
||||
<div class="loader">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="loader-container">
|
||||
<div class="loader">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="loader">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
{
|
||||
"name": "loader",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"proxy": "http://localhost:3001/",
|
||||
"dependencies": {
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-scripts": "5.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"d": "react-scripts build && react-scripts start",
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"serv": "node ./serv.js"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"main": "index.js",
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": ""
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Loader Animation</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- This is where your React app will be injected -->
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,16 +0,0 @@
|
||||
const express = require('express');
|
||||
const path = require('path');
|
||||
|
||||
// const __filename = fileURLToPath(import.meta.url);
|
||||
// const __dirname = dirname(__filename);
|
||||
|
||||
const app = express();
|
||||
app.use(express.static(path.join(__dirname, 'build')));
|
||||
app.use(express.static(path.join(__dirname, 'build')));
|
||||
app.use(express.static(path.join(__dirname, 'build')));
|
||||
app.get('/*', function (req, res) {
|
||||
|
||||
res.sendFile(path.join(__dirname, 'build', 'index.html'));
|
||||
});
|
||||
|
||||
app.listen(3001, () => console.log('Example app is listening on port 3001.'));
|
||||
@@ -1,23 +0,0 @@
|
||||
/* src/App.css */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 0.9;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
// src/App.tsx
|
||||
import React from "react";
|
||||
import LoaderContainer from "./components/LoaderContainer";
|
||||
import "./App.css";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
electron?: {
|
||||
handleAction: (action: string, isCancel?: boolean) => void;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<LoaderContainer />
|
||||
<LoaderContainer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default App;
|
||||
@@ -1,37 +0,0 @@
|
||||
/* src/components/Loader.css */
|
||||
.loader {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.loader div {
|
||||
position: absolute;
|
||||
border: 4px solid gray;
|
||||
opacity: 1;
|
||||
border-radius: 50%;
|
||||
animation: loader-animation 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.loader div:nth-child(2) {
|
||||
animation-delay: -1.2s;
|
||||
}
|
||||
|
||||
@keyframes loader-animation {
|
||||
0%,
|
||||
100% {
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
// src/components/Loader.tsx
|
||||
import React from "react";
|
||||
import "./Loader.css";
|
||||
|
||||
const Loader: React.FC = () => {
|
||||
return (
|
||||
<div className="loader">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Loader;
|
||||
@@ -1,14 +0,0 @@
|
||||
/* src/components/LoaderContainer.css */
|
||||
.loader-container {
|
||||
position: fixed; /* Fixed position to keep it centered relative to the viewport */
|
||||
top: 50%; /* Center vertically */
|
||||
left: 50%; /* Center horizontally */
|
||||
transform: translate(-50%, -50%); /* Adjust for the element's size */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999; /* Ensure it's on top of other content */
|
||||
width: 100px; /* Width of the loader */
|
||||
height: 100px; /* Height of the loader */
|
||||
}
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
// src/components/LoaderContainer.tsx
|
||||
import React from "react";
|
||||
import Loader from "./Loader";
|
||||
import "./LoaderContainer.css";
|
||||
|
||||
const LoaderContainer: React.FC = () => {
|
||||
return (
|
||||
<div className="loader-container">
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoaderContainer;
|
||||
@@ -1,22 +0,0 @@
|
||||
// src/index.tsx
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import "./index.css";
|
||||
import App from "./App";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
|
||||
// Get the root element from the DOM
|
||||
const rootElement = document.getElementById("root");
|
||||
|
||||
if (rootElement) {
|
||||
// Create a root and render the app
|
||||
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
} else {
|
||||
console.error("Root element not found");
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": false,
|
||||
"jsx": "react-jsx",
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user