diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..c9245f41 Binary files /dev/null and b/.DS_Store differ diff --git a/Documentation/documentation.html b/Documentation/documentation.html index e713c4ca..f1d846bd 100644 --- a/Documentation/documentation.html +++ b/Documentation/documentation.html @@ -166,8 +166,7 @@

Documentation v1.2.0

document.write(new Date().getFullYear()); made with by - Creative Tim for a - better web. + Koray Barkın diff --git a/package.json b/package.json index d33c6b99..0bda5cea 100644 --- a/package.json +++ b/package.json @@ -5,17 +5,22 @@ "homepage": "https://demos.creative-tim.com/black-dashboard-react/#/admin/dashboard", "dependencies": { "@fortawesome/fontawesome-free": "6.4.0", + "axios": "^1.5.0", + "body-parser": "^1.20.2", "bootstrap": "4.6.2", "chart.js": "3.9.1", "classnames": "2.3.2", + "cors": "^2.8.5", + "express": "^4.18.2", "perfect-scrollbar": "1.5.5", "prop-types": "15.8.1", - "react": "18.2.0", + "react": "^18.2.0", "react-chartjs-2": "3.3.0", - "react-dom": "18.2.0", + "react-dom": ">=16.8.0", "react-notification-alert": "0.0.13", "react-router-dom": "6.11.1", "react-scripts": "5.0.1", + "react-toastify": "^9.1.3", "sass": "1.62.1" }, "scripts": { @@ -31,7 +36,6 @@ "extends": "react-app" }, "peerDependencies": { - "react": ">=16.8.0", "react-dom": ">=16.8.0" }, "browserslist": [ diff --git a/public/.htaccess b/public/.htaccess new file mode 100644 index 00000000..537e0f19 --- /dev/null +++ b/public/.htaccess @@ -0,0 +1,11 @@ + + + RewriteEngine On + RewriteBase / + RewriteRule ^index\.html$ - [L] + RewriteCond %{REQUEST_FILENAME} !-f + RewriteCond %{REQUEST_FILENAME} !-d + RewriteCond %{REQUEST_FILENAME} !-l + RewriteRule . /index.html [L] + + \ No newline at end of file diff --git a/public/dollar-icon-png-2.png b/public/dollar-icon-png-2.png new file mode 100644 index 00000000..83846e69 Binary files /dev/null and b/public/dollar-icon-png-2.png differ diff --git a/public/index.html b/public/index.html index 7cf22bc0..99e20c1e 100644 --- a/public/index.html +++ b/public/index.html @@ -35,7 +35,7 @@ rel="icon" sizes="76x76" type="image/png" - href="%PUBLIC_URL%/favicon.png" + href="%PUBLIC_URL%/dollar-icon-png-2.png" /> - Black Dashboard React by Creative Tim + Ne Zaman Milyoner? diff --git a/quotes.json b/quotes.json new file mode 100644 index 00000000..875ccdf9 --- /dev/null +++ b/quotes.json @@ -0,0 +1,37 @@ +[{ + "person": "Elon Musk", + "quote": "If you get up in the morning and think the future is going to be better, it is a bright day. Otherwise, it’s not.", + "image": "assets/img/elon.png", + "title": "CEO of Tesla & SpaceX" +}, +{ + "person": "Warren Buffett", + "quote": "We simply attempt to be fearful when others are greedy and to be greedy only when others are fearful", + "image": "assets/img/buffett.png", + "title": "Investor" +}, +{ + "person": "Warren Buffett", + "quote": "Never depend on a single income. Make an investment to create a second source.", + "image": "assets/img/buffett.png", + "title": "Investor" +}, +{ + "person": "Bill Gates", + "quote": "I'm a quote", + "image": "assets/img/gates.png", + "title": "Founder of Microsoft" +}, +{ + "person": "Jeff Bezos", + "quote": "Given a 10% chance of a 100 times payoff, you should take that bet every time.", + "image": "assets/img/bezos.png", + "title": "Founder & CEO of Amazon" +}, +{ + "person": "Mark Zuckerberg", + "quote": "The biggest risk is not taking any risk in a world that is changing really quickly, the only strategy that is guaranteed to fail is not taking risks.", + "image": "assets/img/zuckerberg.png", + "title": "Founder & CEO of Facebook" +} +] \ No newline at end of file diff --git a/src/.DS_Store b/src/.DS_Store new file mode 100644 index 00000000..51efc93d Binary files /dev/null and b/src/.DS_Store differ diff --git a/src/assets/css/App.css b/src/assets/css/App.css new file mode 100644 index 00000000..0a73528a --- /dev/null +++ b/src/assets/css/App.css @@ -0,0 +1,57 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"); + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: "Roboto", sans-serif; + +} + +h1 { + font-weight: 900; + color: #f38b2a; + font-size: 50px; +} + +h2 { + font-weight: 900; + color: #353535; +} + +.moeda-app { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 64px; + color: #fff; +} + +.moeda-search { + margin-bottom: 70px; + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; +} + +.moeda-text { + margin-bottom: 32px; + text-align: center; +} + +.moeda-input { + padding-left: 16px; + width: 500px; + outline: none; + height: 50px; + border: 2px solid transparent; + border-radius: 19px; + border-color: #1b1d6e; + background-color: #fff; + box-shadow: 0 0 0 rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 0, 0, 0.1); +} + +.moeda-input::placeholder { + color: rgb(170, 170, 170); +} diff --git a/src/assets/css/Moeda.css b/src/assets/css/Moeda.css new file mode 100644 index 00000000..def5a497 --- /dev/null +++ b/src/assets/css/Moeda.css @@ -0,0 +1,68 @@ +.moeda-container { + display: flex; + justify-content: center; + } + + .moeda-row { + display: flex; + flex-direction: row; + justify-content: start; + align-items: center; + height: 80px; + border-bottom: 1px solid #d7d7d7; + width: 900px; + } + + .moeda { + display: flex; + align-items: center; + padding-right: 24px; + min-width: 300px; + } + + .moeda h2 { + font-size: 16px; + width: 150px; + } + + .moeda img { + height: 30px; + width: 30px; + margin-right: 10px; + } + + .moeda-symbol { + text-transform: uppercase; + } + + .moeda-data { + display: flex; + text-align: right; + justify-content: space-between; + width: 100%; + } + + .moeda-price { + width: 110px; + } + + .moeda-volume { + width: 155px; + } + + .moeda-marketcap { + width: 230px; + } + + .moeda-percent { + width: 100px; + } + + .red { + color: #f00606; + } + + .green { + color: #1fa710; + } + \ No newline at end of file diff --git a/src/assets/css/black-dashboard-react.css b/src/assets/css/black-dashboard-react.css index 1701b7b7..3e0fd126 100644 --- a/src/assets/css/black-dashboard-react.css +++ b/src/assets/css/black-dashboard-react.css @@ -16731,11 +16731,11 @@ hr { .sidebar, .off-canvas-sidebar { - background: #ba54f5; - background: -webkit-linear-gradient(0deg, #ba54f5 0%, #e14eca 100%); - background: -o-linear-gradient(0deg, #ba54f5 0%, #e14eca 100%); - background: -moz-linear-gradient(0deg, #ba54f5 0%, #e14eca 100%); - background: linear-gradient(0deg, #ba54f5 0%, #e14eca 100%); + background: #344675; + /* background: -webkit-linear-gradient(0deg, #344675 0%, #e14eca 100%); + background: -o-linear-gradient(0deg, #344675 0%, #e14eca 100%); + background: -moz-linear-gradient(0deg, #344675 0%, #e14eca 100%); */ + background: linear-gradient(to bottom left, #344675, #263148, #344675); height: calc(100vh - 90px); width: 230px; position: fixed; diff --git a/src/assets/img/buffett.png b/src/assets/img/buffett.png new file mode 100644 index 00000000..391c0ca8 Binary files /dev/null and b/src/assets/img/buffett.png differ diff --git a/src/assets/img/dollar-icon-png-2.png b/src/assets/img/dollar-icon-png-2.png new file mode 100644 index 00000000..83846e69 Binary files /dev/null and b/src/assets/img/dollar-icon-png-2.png differ diff --git a/src/assets/scss/black-dashboard-react/custom/_card.scss b/src/assets/scss/black-dashboard-react/custom/_card.scss index ba1a2034..1fc40ea9 100755 --- a/src/assets/scss/black-dashboard-react/custom/_card.scss +++ b/src/assets/scss/black-dashboard-react/custom/_card.scss @@ -31,7 +31,8 @@ } .card-description, .card-category{ - color: rgba($white, 0.6); + color: rgba($white, 0.9); + font-size: 20px; } } diff --git a/src/assets/scss/black-dashboard-react/custom/_sidebar-and-main-panel.scss b/src/assets/scss/black-dashboard-react/custom/_sidebar-and-main-panel.scss index 39b56ed2..488f0aea 100755 --- a/src/assets/scss/black-dashboard-react/custom/_sidebar-and-main-panel.scss +++ b/src/assets/scss/black-dashboard-react/custom/_sidebar-and-main-panel.scss @@ -18,7 +18,8 @@ } .sidebar, .off-canvas-sidebar{ - @include linear-gradient($primary-states, $primary); + //@include linear-gradient( #263148, #344675); + background: #263148; height: calc(100vh - 90px); width: 230px; position: fixed; diff --git a/src/backend/calculate.js b/src/backend/calculate.js new file mode 100644 index 00000000..082c5d6d --- /dev/null +++ b/src/backend/calculate.js @@ -0,0 +1,79 @@ +const express = require('express'); +const bodyParser = require('body-parser'); +const cors = require('cors'); + +const app = express(); +app.use(cors()); + +function calculateGoal(initialSavings, monthlyDeposit, monthlyProfit, invest, goalAmount) { + if (initialSavings >= goalAmount) { + return { + months: 0, + weeks: 0, + days: 0, + }; // Already reached the goal. + } + + initialSavings = parseFloat(initialSavings); + monthlyDeposit = parseFloat(monthlyDeposit); + monthlyProfit = parseFloat(monthlyProfit); + goalAmount = parseFloat(goalAmount); + + let months = 0; + let weeks = 0; + let days = 0; + let currentSavings = initialSavings; + + while (currentSavings < goalAmount) { + const monthlyGrowth = (currentSavings + monthlyDeposit) * (monthlyProfit / 100); + + currentSavings += monthlyDeposit + monthlyGrowth; + months++; + + if (months % 4 === 0) { + weeks++; + } + } + + days = months * 30; // Assuming an average of 30 days per month + + return { + months, + weeks, + days, + }; +} + +app.use(bodyParser.json()); + +app.post('/calculate', (req, res) => { + try { + const { months, weeks, days } = calculateGoal( + req.body.initialSaving, + req.body.monthlyDeposit, + req.body.investmentProfit, + req.body.invest, + req.body.targetAmount + ); + + console.log(`It will take ${months} months, ${weeks} weeks, and ${days} days to reach your goal of $${req.body.targetAmount}.`); + res.json({ months, weeks, days }); + } catch (error) { + res.status(400).json({ error: error.message }); + } +}); + +app.use((req, res) => { + res.status(404).json({ error: 'Not Found' }); +}); + +app.use((error, req, res, next) => { + console.error(error.stack); + res.status(500).json({ error: 'Internal Server Error' }); +}); + +const PORT = process.env.PORT || 3005; + +app.listen(PORT, () => { + console.log(`Server is running on port ${PORT}`); +}); diff --git a/src/components/BackgroundColorWrapper/BackgroundColorWrapper.js b/src/components/BackgroundColorWrapper/BackgroundColorWrapper.js index 08ab32b4..062fb1b4 100644 --- a/src/components/BackgroundColorWrapper/BackgroundColorWrapper.js +++ b/src/components/BackgroundColorWrapper/BackgroundColorWrapper.js @@ -5,7 +5,7 @@ import { } from "contexts/BackgroundColorContext"; export default function BackgroundColorWrapper(props) { - const [color, setColor] = useState(backgroundColors.blue); + const [color, setColor] = useState(backgroundColors.dark); function changeColor(color) { setColor(color); diff --git a/src/components/Crypto/Moeda.js b/src/components/Crypto/Moeda.js new file mode 100644 index 00000000..c44b227a --- /dev/null +++ b/src/components/Crypto/Moeda.js @@ -0,0 +1,40 @@ +import React from "react"; +import "../../assets/css/Moeda.css"; + +const Moeda = ({ + name, + price, + symbol, + marketcap, + volume, + image, + priceChange +}) => { + return ( +
+
+
+ crypto +

{name}

+

{symbol}

+
+
+

${price}

+

${volume.toLocaleString()}

+ + {priceChange < 0 ? ( +

{priceChange.toFixed(2)}%

+ ) : ( +

{priceChange.toFixed(2)}%

+ )} + +

+ Mkt Cap: ${marketcap.toLocaleString()} +

+
+
+
+ ); +}; + +export default Moeda; diff --git a/src/components/FixedPlugin/FixedPlugin.js b/src/components/FixedPlugin/FixedPlugin.js index bf94df9a..be2a68d0 100644 --- a/src/components/FixedPlugin/FixedPlugin.js +++ b/src/components/FixedPlugin/FixedPlugin.js @@ -34,38 +34,7 @@ function FixedPlugin(props) { diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index 30df7017..30d8f513 100755 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -27,17 +27,17 @@ function Footer() {