mirror of
https://github.com/Sosokker/SOS12.git
synced 2025-12-19 20:54:06 +01:00
added theme with button
This commit is contained in:
Yanatchara JERAJA
parent
f61bb9bdbf
commit
fd94d516ba
8
.idea/.gitignore
vendored
Normal file
8
.idea/.gitignore
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
8
.idea/SOS12.iml
Normal file
8
.idea/SOS12.iml
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="PYTHON_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="jdk" jdkName="Python 3.11" jdkType="Python SDK" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
19
.idea/inspectionProfiles/Project_Default.xml
Normal file
19
.idea/inspectionProfiles/Project_Default.xml
Normal file
@ -0,0 +1,19 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
||||
<inspection_tool class="PyPackageRequirementsInspection" enabled="true" level="WARNING" enabled_by_default="true">
|
||||
<option name="ignoredPackages">
|
||||
<value>
|
||||
<list size="5">
|
||||
<item index="0" class="java.lang.String" itemvalue="pandas" />
|
||||
<item index="1" class="java.lang.String" itemvalue="networkx" />
|
||||
<item index="2" class="java.lang.String" itemvalue="seaborn" />
|
||||
<item index="3" class="java.lang.String" itemvalue="matplotlib" />
|
||||
<item index="4" class="java.lang.String" itemvalue="Pillow" />
|
||||
</list>
|
||||
</value>
|
||||
</option>
|
||||
</inspection_tool>
|
||||
</profile>
|
||||
</component>
|
||||
6
.idea/inspectionProfiles/profiles_settings.xml
Normal file
6
.idea/inspectionProfiles/profiles_settings.xml
Normal file
@ -0,0 +1,6 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<settings>
|
||||
<option name="USE_PROJECT_PROFILE" value="false" />
|
||||
<version value="1.0" />
|
||||
</settings>
|
||||
</component>
|
||||
4
.idea/misc.xml
Normal file
4
.idea/misc.xml
Normal file
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectRootManager" version="2" project-jdk-name="Python 3.11" project-jdk-type="Python SDK" />
|
||||
</project>
|
||||
8
.idea/modules.xml
Normal file
8
.idea/modules.xml
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/SOS12.iml" filepath="$PROJECT_DIR$/.idea/SOS12.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
6
.idea/vcs.xml
Normal file
6
.idea/vcs.xml
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
157
package-lock.json
generated
157
package-lock.json
generated
@ -10,13 +10,18 @@
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.11.1",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@fontsource/roboto": "^5.0.3",
|
||||
"@mui/icons-material": "^5.11.16",
|
||||
"@mui/material": "^5.13.6",
|
||||
"@mui/styled-engine-sc": "^5.12.0",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-switch": "^7.0.0",
|
||||
"styled-components": "^5.3.11",
|
||||
"web-vitals": "^2.1.4"
|
||||
}
|
||||
},
|
||||
@ -2419,6 +2424,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/stylis": {
|
||||
"version": "0.8.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
|
||||
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
|
||||
},
|
||||
"node_modules/@emotion/unitless": {
|
||||
"version": "0.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
|
||||
@ -2535,6 +2545,11 @@
|
||||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource/roboto": {
|
||||
"version": "5.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.3.tgz",
|
||||
"integrity": "sha512-jbZDFwEFARDlo8TqG7th/xjhuq87GYfFpFb+uxuy+0Ng1bhRVgBRWlLj8+WIKhCTOr+h4QXbjpybLWFLUirOwQ=="
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.11.10",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
|
||||
@ -3355,6 +3370,31 @@
|
||||
"url": "https://opencollective.com/mui"
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/icons-material": {
|
||||
"version": "5.11.16",
|
||||
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.11.16.tgz",
|
||||
"integrity": "sha512-oKkx9z9Kwg40NtcIajF9uOXhxiyTZrrm9nmIJ4UjkU2IdHpd4QVLbCc/5hZN/y0C6qzi2Zlxyr9TGddQx2vx2A==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.21.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mui/material": "^5.0.0",
|
||||
"@types/react": "^17.0.0 || ^18.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material": {
|
||||
"version": "5.13.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.13.6.tgz",
|
||||
@ -3461,6 +3501,31 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/styled-engine-sc": {
|
||||
"version": "5.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@mui/styled-engine-sc/-/styled-engine-sc-5.12.0.tgz",
|
||||
"integrity": "sha512-3MgYoY2YG5tx0E5oKqvCv94oL0ABVBr+qpcyvciXW/v0wzPG6bXvuZV80GHYlJfasgnnRa1AbRWf5a9FcX8v6g==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.21.0",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/styled-components": "^5.1.14",
|
||||
"styled-components": "^5.3.1"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/styled-components": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/system": {
|
||||
"version": "5.13.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.6.tgz",
|
||||
@ -5891,6 +5956,21 @@
|
||||
"@babel/core": "^7.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-plugin-styled-components": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz",
|
||||
"integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==",
|
||||
"dependencies": {
|
||||
"@babel/helper-annotate-as-pure": "^7.22.5",
|
||||
"@babel/helper-module-imports": "^7.22.5",
|
||||
"@babel/plugin-syntax-jsx": "^7.22.5",
|
||||
"lodash": "^4.17.21",
|
||||
"picomatch": "^2.3.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"styled-components": ">= 2"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-plugin-transform-react-remove-prop-types": {
|
||||
"version": "0.4.24",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
|
||||
@ -6208,6 +6288,14 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/camelize": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
|
||||
"integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-api": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
|
||||
@ -6651,6 +6739,14 @@
|
||||
"postcss": "^8.4"
|
||||
}
|
||||
},
|
||||
"node_modules/css-color-keywords": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
|
||||
"integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/css-declaration-sorter": {
|
||||
"version": "6.4.0",
|
||||
"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz",
|
||||
@ -6832,6 +6928,16 @@
|
||||
"resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
|
||||
"integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
|
||||
},
|
||||
"node_modules/css-to-react-native": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
|
||||
"integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
|
||||
"dependencies": {
|
||||
"camelize": "^1.0.0",
|
||||
"css-color-keywords": "^1.0.0",
|
||||
"postcss-value-parser": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/css-tree": {
|
||||
"version": "1.0.0-alpha.37",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
|
||||
@ -15072,6 +15178,18 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-switch": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz",
|
||||
"integrity": "sha512-KkDeW+cozZXI6knDPyUt3KBN1rmhoVYgAdCJqAh7st7tk8YE6N0iR89zjCWO8T8dUTeJGTR0KU+5CHCRMRffiA==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-transition-group": {
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
|
||||
@ -15810,6 +15928,11 @@
|
||||
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
|
||||
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
|
||||
},
|
||||
"node_modules/shallowequal": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
|
||||
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
@ -16212,6 +16335,40 @@
|
||||
"webpack": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/styled-components": {
|
||||
"version": "5.3.11",
|
||||
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
|
||||
"integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
|
||||
"dependencies": {
|
||||
"@babel/helper-module-imports": "^7.0.0",
|
||||
"@babel/traverse": "^7.4.5",
|
||||
"@emotion/is-prop-valid": "^1.1.0",
|
||||
"@emotion/stylis": "^0.8.4",
|
||||
"@emotion/unitless": "^0.7.4",
|
||||
"babel-plugin-styled-components": ">= 1.12.0",
|
||||
"css-to-react-native": "^3.0.0",
|
||||
"hoist-non-react-statics": "^3.0.0",
|
||||
"shallowequal": "^1.1.0",
|
||||
"supports-color": "^5.5.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/styled-components"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.8.0",
|
||||
"react-dom": ">= 16.8.0",
|
||||
"react-is": ">= 16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/styled-components/node_modules/@emotion/unitless": {
|
||||
"version": "0.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
|
||||
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
|
||||
},
|
||||
"node_modules/stylehacks": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
|
||||
|
||||
@ -5,13 +5,18 @@
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.11.1",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@fontsource/roboto": "^5.0.3",
|
||||
"@mui/icons-material": "^5.11.16",
|
||||
"@mui/material": "^5.13.6",
|
||||
"@mui/styled-engine-sc": "^5.12.0",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-switch": "^7.0.0",
|
||||
"styled-components": "^5.3.11",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
236
src/App.css
236
src/App.css
@ -1,8 +1,236 @@
|
||||
/** {*/
|
||||
/* background: red;*/
|
||||
/*}*/
|
||||
|
||||
/*body {*/
|
||||
/* background: white;*/
|
||||
/* background: black;*/
|
||||
/* color: white;*/
|
||||
/*}*/
|
||||
|
||||
/*#light {*/
|
||||
/* background: white;*/
|
||||
/* color: black;*/
|
||||
/*}*/
|
||||
|
||||
.MuiPaper-root.MuiAppBar-root {
|
||||
background: #161E29;
|
||||
}
|
||||
|
||||
/* Album layout */
|
||||
.MuiPaper-root.MuiAppBar-root h6 {
|
||||
color: aliceblue;
|
||||
}
|
||||
|
||||
/* link nav */
|
||||
h6.MuiTypography-root.anotherNav {
|
||||
margin-left: auto;
|
||||
color: #7DD6F6;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
h6.MuiTypography-root a {
|
||||
color: #7DD6F6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h6.MuiTypography-root a:hover {
|
||||
color: deepskyblue;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* header */
|
||||
.MuiBox-root {
|
||||
background: #0A0E1A;
|
||||
}
|
||||
|
||||
.MuiBox-root h1 {
|
||||
color: #7DD6F6;
|
||||
}
|
||||
|
||||
.MuiBox-root h5 {
|
||||
color: aliceblue;
|
||||
}
|
||||
|
||||
/* header button */
|
||||
#dark .headButton {
|
||||
background: #5585A4;
|
||||
}
|
||||
|
||||
#dark .headButton {
|
||||
background: red;
|
||||
color: #102b5a;
|
||||
}
|
||||
|
||||
#dark .headButton:hover {
|
||||
background: red;
|
||||
}
|
||||
|
||||
/* card container bg */
|
||||
.MuiContainer-root {
|
||||
background: #0A0E1A;
|
||||
}
|
||||
|
||||
/* card box bg */
|
||||
.MuiPaper-root.MuiCard-root {
|
||||
background: #2B3E52;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
|
||||
footer.MuiBox-root {
|
||||
background-color: #161E29;
|
||||
}
|
||||
h6.MuiTypography-root {
|
||||
color: #7DD6F6;
|
||||
}
|
||||
|
||||
p.MuiTypography-root {
|
||||
color: aliceblue;
|
||||
}
|
||||
|
||||
/* jode color */
|
||||
h2.MuiTypography-root {
|
||||
color: #7DD6F6;
|
||||
}
|
||||
|
||||
/* jode link */
|
||||
.MuiButton-root a {
|
||||
color: aliceblue;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.MuiButton-root a:hover {
|
||||
color: #7DD6F6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* checkbox */
|
||||
.MuiButtonBase-root.MuiCheckbox-root {
|
||||
background-color: #2B3E52;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.MuiButtonBase-root.MuiCheckbox-root :hover{
|
||||
background-color: #2B3E52;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.MuiSvgIcon-root {
|
||||
color: #7DD6F6;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------------------------*/
|
||||
/* light theme */
|
||||
|
||||
#light .MuiPaper-root.MuiAppBar-root {
|
||||
background: #a4c6eb;
|
||||
}
|
||||
|
||||
/* Album layout */
|
||||
#light .MuiPaper-root.MuiAppBar-root h6 {
|
||||
color: #102b5a;
|
||||
}
|
||||
|
||||
/* link nav */
|
||||
#light h6.MuiTypography-root.anotherNav {
|
||||
margin-left: auto;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
#light h6.MuiTypography-root a {
|
||||
color: #102b5a;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#light h6.MuiTypography-root a:hover {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* header */
|
||||
#light .MuiBox-root {
|
||||
background: #ecf4fe;
|
||||
}
|
||||
|
||||
/* sos12 */
|
||||
#light .MuiBox-root h1 {
|
||||
color: #102b5a;
|
||||
}
|
||||
|
||||
/* header paragraph */
|
||||
#light .MuiBox-root h5 {
|
||||
color: #015c92
|
||||
}
|
||||
|
||||
/* header button */
|
||||
#light .headButton {
|
||||
background: #A1CFFF;
|
||||
color: #102b5a;
|
||||
}
|
||||
|
||||
|
||||
#light .headButton :hover {
|
||||
background: #89BFFB;
|
||||
}
|
||||
|
||||
/* card container bg */
|
||||
#light .MuiContainer-root {
|
||||
background: #ecf4fe;
|
||||
}
|
||||
|
||||
/* card box bg */
|
||||
#light .MuiPaper-root.MuiCard-root {
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
#light footer.MuiBox-root {
|
||||
background-color: #a4c6eb;
|
||||
}
|
||||
|
||||
#light h6.MuiTypography-root {
|
||||
color: #102b5a;
|
||||
}
|
||||
|
||||
#light p.MuiTypography-root {
|
||||
color: #015c92;
|
||||
}
|
||||
|
||||
/* jode color */
|
||||
#light h2.MuiTypography-root {
|
||||
color: #102b5a;
|
||||
}
|
||||
|
||||
/* jode link */
|
||||
#light .MuiButton-root a {
|
||||
color: #102b5a;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#light .MuiButton-root a:hover {
|
||||
color: #102b5a;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* checkbox */
|
||||
#light .MuiButtonBase-root.MuiCheckbox-root {
|
||||
background-color: white;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#light .MuiButtonBase-root.MuiCheckbox-root :hover{
|
||||
background-color: #2B3E52;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#light .MuiSvgIcon-root {
|
||||
color: #3598db;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/*Card.MuiCardMedia-root {*/
|
||||
/* margin-top: 50px;*/
|
||||
/* margin-bottom: 50px;*/
|
||||
/* height: auto;*/
|
||||
/* width: 400px;*/
|
||||
/* padding-top: 56.25%;*/
|
||||
/*}*/
|
||||
162
src/App.jsx
162
src/App.jsx
@ -14,8 +14,64 @@ import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
import Link from '@mui/material/Link';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import {styled} from '@mui/material/styles';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import {createTheme, ThemeProvider} from '@mui/material/styles';
|
||||
import cards from './Card';
|
||||
import {createContext, useState} from "react";
|
||||
|
||||
|
||||
export const ThemeContext = createContext(null);
|
||||
|
||||
// switch theme button ---------------------------------------------------------------
|
||||
const MaterialUISwitch = styled(Switch)(({theme}) => ({
|
||||
width: 62,
|
||||
height: 34,
|
||||
padding: 7,
|
||||
'& .MuiSwitch-switchBase': {
|
||||
margin: 1,
|
||||
padding: 0,
|
||||
transform: 'translateX(6px)',
|
||||
'&.Mui-checked': {
|
||||
color: '#fff',
|
||||
transform: 'translateX(22px)',
|
||||
'& .MuiSwitch-thumb:before': {
|
||||
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
|
||||
'#fff',
|
||||
)}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
|
||||
},
|
||||
'& + .MuiSwitch-track': {
|
||||
opacity: 1,
|
||||
backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : 'white',
|
||||
},
|
||||
},
|
||||
},
|
||||
'& .MuiSwitch-thumb': {
|
||||
backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#7892B5',
|
||||
width: 32,
|
||||
height: 32,
|
||||
'&:before': {
|
||||
content: "''",
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
top: 0,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
|
||||
'#fff',
|
||||
)}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
|
||||
},
|
||||
},
|
||||
'& .MuiSwitch-track': {
|
||||
opacity: 1,
|
||||
backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
|
||||
borderRadius: 20 / 2,
|
||||
},
|
||||
}));
|
||||
// switch theme button ----------------------------------------------------------------
|
||||
|
||||
function Copyright() {
|
||||
return (
|
||||
@ -33,48 +89,55 @@ function Copyright() {
|
||||
const defaultTheme = createTheme();
|
||||
|
||||
export default function App() {
|
||||
|
||||
const [theme, setTheme] = useState('light');
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(theme === 'light' ? 'dark' : 'light');
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="App" id={theme}>
|
||||
<ThemeContext.Provider value={{theme, toggleTheme}}>
|
||||
|
||||
<ThemeProvider theme={defaultTheme}>
|
||||
<CssBaseline/>
|
||||
<AppBar position="relative"
|
||||
sx={{
|
||||
bgcolor: '#161E29',
|
||||
}}
|
||||
>
|
||||
|
||||
<AppBar position="relative">
|
||||
<Toolbar>
|
||||
<Typography variant="h6" color="inherit" noWrap>
|
||||
Album layout
|
||||
SOS12 Problems Collection
|
||||
</Typography>
|
||||
|
||||
<Typography variant="h6" color="inherit" noWrap>
|
||||
<Typography variant="h6" color="inherit" noWrap className='anotherNav'>
|
||||
<a href="https://www.youtube.com" target="_self">Another Nav </a>
|
||||
</Typography>
|
||||
<FormControlLabel
|
||||
control={<MaterialUISwitch sx={{m: 1}} defaultChecked/>}
|
||||
label=""
|
||||
onChange={toggleTheme}
|
||||
checked={theme === 'dark'}
|
||||
/>
|
||||
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
<main>
|
||||
{/* Hero unit */}
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: '#0A0E1A',
|
||||
pt: 8,
|
||||
pb: 6,
|
||||
}}
|
||||
>
|
||||
<Box sx={{pt: 8, pb: 6,}}>
|
||||
<Container maxWidth="sm">
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="h2"
|
||||
align="center"
|
||||
color="#7DD6F6"
|
||||
gutterBottom
|
||||
>
|
||||
SOS12
|
||||
</Typography>
|
||||
<Typography variant="h5" align="center" color="aliceblue" paragraph>
|
||||
Something short and leading about the collection below—its contents,
|
||||
the creator, etc. Make it short and sweet, but not too short so folks
|
||||
don't simply skip over it entirely.
|
||||
<Typography component="h5" variant="h5" align="center" paragraph>
|
||||
Welcome to the 12th SOS camp, a preparation camp for SKE21 students.
|
||||
We hope that students will definitely gain knowledge
|
||||
and enjoyment.
|
||||
</Typography>
|
||||
<Stack
|
||||
sx={{pt: 4}}
|
||||
@ -82,43 +145,35 @@ export default function App() {
|
||||
spacing={2}
|
||||
justifyContent="center"
|
||||
>
|
||||
<Button variant="contained"
|
||||
sx={{
|
||||
bgcolor: '#5585A4',
|
||||
":hover": {
|
||||
bgcolor: '#69ACCD',
|
||||
}
|
||||
}}
|
||||
>Main call to action</Button>
|
||||
<Button variant="outlined"
|
||||
sx={{
|
||||
color: '#69ACCD',
|
||||
borderColor: '#69ACCD',
|
||||
":hover": {
|
||||
borderColor: 'aliceblue',
|
||||
}
|
||||
}}
|
||||
>Secondary action</Button>
|
||||
<Button
|
||||
className="headButton"
|
||||
variant="contained"
|
||||
href="https://www.cpe.ku.ac.th/?lang=th">
|
||||
CPE website
|
||||
</Button>
|
||||
<Button
|
||||
className="headButton"
|
||||
variant="contained"
|
||||
href="https://www.cpe.ku.ac.th/?lang=th">
|
||||
Secondary action
|
||||
</Button>
|
||||
</Stack>
|
||||
</Container>
|
||||
</Box>
|
||||
<Container
|
||||
sx={{
|
||||
py: 8,
|
||||
bgcolor: '#0A0E1A',
|
||||
}} maxWidth="fit-content">
|
||||
sx={{py: 8}} maxWidth="fit-content">
|
||||
{/* End hero unit */}
|
||||
<Grid container spacing={4}>
|
||||
|
||||
{/*# TODO:Edit the Jode here */}
|
||||
{cards.map((card) => (
|
||||
<Grid item xs={12} sm={6} md={4}>
|
||||
{/*<img src={require("./images/syntax.jpeg")} alt="jode"/>*/}
|
||||
<Card
|
||||
sx={{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
bgcolor: '#2B3E52'
|
||||
}}
|
||||
>
|
||||
<CardMedia
|
||||
@ -126,9 +181,12 @@ export default function App() {
|
||||
sx={{
|
||||
// 16:9
|
||||
pt: '56.25%',
|
||||
height: 0,
|
||||
// objectFit: 'cover',
|
||||
}}
|
||||
image="https://source.unsplash.com/random?wallpapers"
|
||||
image={require(`${card.img}`)}
|
||||
/>
|
||||
|
||||
<CardContent sx={{flexGrow: 1}}>
|
||||
<Typography gutterBottom variant="h5" component="h2"
|
||||
color="#7DD6F6">
|
||||
@ -139,9 +197,10 @@ export default function App() {
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button size="small" sx={{color: "#69ACCD"}}><a href={card.link}>View</a></Button>
|
||||
<Button size="small"><a
|
||||
href={card.link}>View</a></Button>
|
||||
</CardActions>
|
||||
<Checkbox defaultChecked />
|
||||
<Checkbox defaultChecked/>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
@ -150,22 +209,19 @@ export default function App() {
|
||||
</Container>
|
||||
</main>
|
||||
{/* Footer */}
|
||||
<Box sx={{bgcolor: '#161E29', p: 6}} component="footer">
|
||||
<Typography variant="h6" align="center" gutterBottom
|
||||
sx={{color: "aliceblue"}}>
|
||||
<Box sx={{p: 6}} component="footer">
|
||||
<Typography variant="h6" align="center" gutterBottom>
|
||||
Footer
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
align="center"
|
||||
color="aliceblue"
|
||||
component="p"
|
||||
>
|
||||
<Typography variant="subtitle1" align="center" component="p">
|
||||
Something here to give the footer a purpose!
|
||||
</Typography>
|
||||
<Copyright/>
|
||||
</Box>
|
||||
{/* End footer */}
|
||||
</ThemeProvider>
|
||||
|
||||
</ThemeContext.Provider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
66
src/Card.jsx
66
src/Card.jsx
@ -2,107 +2,131 @@ const cards = [
|
||||
{
|
||||
'title': 'Syntax',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'https://elabsheet.org/elab/taskpads/show/jr070sqaqp/'
|
||||
'link': 'https://elabsheet.org/elab/taskpads/show/jr070sqaqp/',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'Variables',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'https://elabsheet.org/elab/taskpads/change/jr070sqaqp/yqxiczozva/'
|
||||
'link': 'https://elabsheet.org/elab/taskpads/change/jr070sqaqp/yqxiczozva/',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'Data Type 01',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'Data Type 02',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'Data Type 03',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'Numbers, Casting, String',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'Strings',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'https://elabsheet.org/elab/taskpads/change/4k422fwoou/v49ajp3qgh/'
|
||||
'link': 'https://elabsheet.org/elab/taskpads/change/4k422fwoou/v49ajp3qgh/',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'Boolean 01',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'Boolean 02',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'Operators 01',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'Operators 02',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'Lists',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'Tuples',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'Sets',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'Dictionaries',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'If Else 01',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'If Else 02',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'If Else 03',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
},
|
||||
{
|
||||
'title': 'While Loops',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
|
||||
},
|
||||
{
|
||||
'title': 'For Loops',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
|
||||
},
|
||||
{
|
||||
'title': 'Functions',
|
||||
'describe': 'Mai tum leaw',
|
||||
'link': 'www.'
|
||||
'link': 'www.',
|
||||
'img': './images/syntax.jpeg'
|
||||
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
BIN
src/images/syntax.jpeg
Normal file
BIN
src/images/syntax.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
@ -2,3 +2,7 @@ body {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user