From 02be1b8a1e6e5f7505d612f22520c86d4969a0b2 Mon Sep 17 00:00:00 2001 From: SrIzan10 <66965250+SrIzan10@users.noreply.github.com> Date: Sat, 10 Jun 2023 16:53:22 +0200 Subject: [PATCH] feat: footer, dark mode and functionality card --- .prettierrc | 5 ++++ package.json | 5 ++++ public/electron.js | 57 +++++++++++++++++++++------------------- public/index.html | 2 +- src/App.css | 22 ++++++++++++++++ src/App.js | 36 +++++++++++++++++++++---- src/Footer.css | 7 +++++ src/Footer.js | 41 +++++++++++++++++++++++++++++ src/FunctionalityCard.js | 24 +++++++++++++++++ src/index.css | 27 +++++++++++++------ yarn.lock | 40 ++++++++++++++++++++++++++++ 11 files changed, 225 insertions(+), 41 deletions(-) create mode 100644 .prettierrc create mode 100644 src/Footer.css create mode 100644 src/Footer.js create mode 100644 src/FunctionalityCard.js diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..964f480 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "tabWidth": 4, + "useTabs": true, + "singleQuote": true +} \ No newline at end of file diff --git a/package.json b/package.json index 33e2fc7..1ff9549 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,11 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@fortawesome/fontawesome-svg-core": "^6.4.0", + "@fortawesome/free-brands-svg-icons": "^6.4.0", + "@fortawesome/free-solid-svg-icons": "^6.4.0", + "@fortawesome/react-fontawesome": "^0.2.0", + "@mui/icons-material": "^5.11.16", "@mui/material": "^5.13.4", "electron": "^25.1.0", "electron-is-dev": "^2.0.0", diff --git a/public/electron.js b/public/electron.js index 42f8b4f..9619a18 100644 --- a/public/electron.js +++ b/public/electron.js @@ -1,41 +1,44 @@ -const path = require('path') +const path = require('path'); const { app, BrowserWindow } = require('electron'); const isDev = require('electron-is-dev'); function createWindow() { - const mainWindow = new BrowserWindow({ - width: 800, - height: 600, - webPreferences: { - nodeIntegration: true, - }, - icon: './icons/icon.png', - show: false, - autoHideMenuBar: true, - title: 'sern' - }); + const mainWindow = new BrowserWindow({ + width: 800, + height: 600, + webPreferences: { + nodeIntegration: true, + }, + icon: './icons/icon.png', + show: false, + autoHideMenuBar: true, + title: 'sern', + }); + if (isDev) { + mainWindow.loadURL('http://localhost:3000'); + } else { + mainWindow.loadFile(path.join(__dirname, '../build/index.html')); + } - isDev ? mainWindow.loadURL('http://localhost:3000') : mainWindow.loadFile(path.join(__dirname, '../build/index.html')) + mainWindow.on('ready-to-show', () => { + mainWindow.show(); + }); - mainWindow.on('ready-to-show', () => { - mainWindow.show() - }) - - mainWindow.on('page-title-updated', function(e) { - e.preventDefault() - }); + mainWindow.on('page-title-updated', function (e) { + e.preventDefault(); + }); } app.whenReady().then(createWindow); app.on('window-all-closed', () => { - if (process.platform !== 'darwin') { - app.quit(); - } + if (process.platform !== 'darwin') { + app.quit(); + } }); app.on('activate', () => { - if (BrowserWindow.getAllWindows().length === 0) { - createWindow(); - } -}); \ No newline at end of file + if (BrowserWindow.getAllWindows().length === 0) { + createWindow(); + } +}); diff --git a/public/index.html b/public/index.html index aa069f2..82e8933 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ 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`. --> - React App + sern diff --git a/src/App.css b/src/App.css index e69de29..b027199 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,22 @@ +@font-face { + font-family: 'Classic Console Neue'; + src: local('Classic Console Neue'), + url('https://fonts.srizan.dev/clacon2.ttf') format('truetype'); +} + +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap'); + +.titleHeader { + color: #4af626; + font-family: 'JetBrains Mono', 'Courier New', Courier, monospace; + text-align: center; +} + +.functionalityCards { + display: flex; + gap: 30px; + padding: 20px; + align-items: center; + display: 'grid'; + grid-template-columns: 'repeat(2, 1fr)'; +} diff --git a/src/App.js b/src/App.js index 51791ac..9352a90 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,37 @@ import './App.css'; +import Footer from './Footer.js'; +import './FunctionalityCard.js'; +import FunctionalityCard from './FunctionalityCard.js'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; + +const darkTheme = createTheme({ + palette: { + mode: 'dark', + primary: { + main: '#C9426E' + } + }, +}); function App() { - return ( -
- -
- ); + return ( +
+ +

~$ sern

+
+ + +
+
+ ); } export default App; diff --git a/src/Footer.css b/src/Footer.css new file mode 100644 index 0000000..7e94c2c --- /dev/null +++ b/src/Footer.css @@ -0,0 +1,7 @@ +.footer { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + text-align: center; +} \ No newline at end of file diff --git a/src/Footer.js b/src/Footer.js new file mode 100644 index 0000000..eff717e --- /dev/null +++ b/src/Footer.js @@ -0,0 +1,41 @@ +import Link from '@mui/material/Link'; +import Typography from '@mui/material/Typography'; +import PublicIcon from '@mui/icons-material/Public'; +import GitHubIcon from '@mui/icons-material/GitHub'; +import { faDiscord } from '@fortawesome/free-brands-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import './Footer.css' + +export default function Footer() { + return ( +
+ + + + + front page + + + + • + + + + + github + + + + • + + + + + discord + + + + +
+ ); +} diff --git a/src/FunctionalityCard.js b/src/FunctionalityCard.js new file mode 100644 index 0000000..c71a0c1 --- /dev/null +++ b/src/FunctionalityCard.js @@ -0,0 +1,24 @@ +import * as React from 'react'; +import Card from '@mui/material/Card'; +import CardActions from '@mui/material/CardActions'; +import CardContent from '@mui/material/CardContent'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; + +export default function FunctionalityCard({ command, description }) { + return ( + + + + {description} + + + ~$ sern {command} + + + + + + + ); +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec2585e..920f58a 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,24 @@ +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap'); + body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', + 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', + 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: #121212; + padding: 5vh; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: 'JetBrains Mono', source-code-pro, Menlo, Monaco, Consolas, + 'Courier New', monospace; +} + +footer { + background-color: gray; + text-align: center; + margin-top: auto; + padding: 8px; } diff --git a/yarn.lock b/yarn.lock index 9468181..4e3ad06 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1478,6 +1478,39 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.42.0.tgz#484a1d638de2911e6f5a30c12f49c7e4a3270fb6" integrity sha512-6SWlXpWU5AvId8Ac7zjzmIOqMOba/JWY8XZ4A7q7Gn1Vlfg/SFFIlrtHXt9nPn4op9ZPAkl91Jao+QQv3r/ukw== +"@fortawesome/fontawesome-common-types@6.4.0": + version "6.4.0" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b" + integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ== + +"@fortawesome/fontawesome-svg-core@^6.4.0": + version "6.4.0" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz#3727552eff9179506e9203d72feb5b1063c11a21" + integrity sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw== + dependencies: + "@fortawesome/fontawesome-common-types" "6.4.0" + +"@fortawesome/free-brands-svg-icons@^6.4.0": + version "6.4.0" + resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz#c785cf5563231eadc5ef5f8cd0274e0b8920433f" + integrity sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g== + dependencies: + "@fortawesome/fontawesome-common-types" "6.4.0" + +"@fortawesome/free-solid-svg-icons@^6.4.0": + version "6.4.0" + resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz#48c0e790847fa56299e2f26b82b39663b8ad7119" + integrity sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ== + dependencies: + "@fortawesome/fontawesome-common-types" "6.4.0" + +"@fortawesome/react-fontawesome@^0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4" + integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw== + dependencies: + prop-types "^15.8.1" + "@hapi/hoek@^9.0.0": version "9.3.0" resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb" @@ -1811,6 +1844,13 @@ resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.13.4.tgz#7e4b491d8081b6d45ae51556d82cb16b31315a19" integrity sha512-yFrMWcrlI0TqRN5jpb6Ma9iI7sGTHpytdzzL33oskFHNQ8UgrtPas33Y1K7sWAMwCrr1qbWDrOHLAQG4tAzuSw== +"@mui/icons-material@^5.11.16": + version "5.11.16" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.11.16.tgz#417fa773c56672e39d6ccfed9ac55591985f0d38" + integrity sha512-oKkx9z9Kwg40NtcIajF9uOXhxiyTZrrm9nmIJ4UjkU2IdHpd4QVLbCc/5hZN/y0C6qzi2Zlxyr9TGddQx2vx2A== + dependencies: + "@babel/runtime" "^7.21.0" + "@mui/material@^5.13.4": version "5.13.4" resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.13.4.tgz#1fed8249c980ed37f9767f9dba8aa3a589495ff3"