├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── img │ ├── Chrome_Web_Store_logo_2012-2015.svg.png │ ├── GitHub.png │ ├── IThome.png │ ├── aliyun.png │ ├── azure-blue.png │ ├── back_black.png │ ├── baidu.png │ ├── bing-logo.png │ ├── calculator.png │ ├── close.png │ ├── coolapk.png │ ├── dLinkIcon.png │ ├── dark │ │ ├── back.png │ │ ├── calculator.png │ │ ├── close.png │ │ ├── down.png │ │ ├── fy_ic_history.png │ │ ├── hide.png │ │ ├── info.png │ │ ├── reload.png │ │ ├── setting.png │ │ ├── timer.png │ │ └── to.png │ ├── ddg.svg │ ├── donate │ │ ├── donate1.png │ │ ├── donate2.jpg │ │ └── donate3.png │ ├── down.png │ ├── favicon.ico │ ├── fy_ic_history.png │ ├── google.png │ ├── hide.png │ ├── icon_bilibili-circle.png │ ├── info.png │ ├── qq.jpg │ ├── reload.png │ ├── search.png │ ├── setting.png │ ├── sougou.png │ ├── timer.png │ ├── to.png │ ├── weather │ │ ├── 00.png │ │ ├── 01.png │ │ ├── 02.png │ │ ├── 03.png │ │ └── 04.png │ ├── yandex.png │ └── youtube.png ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── components ├── Background │ ├── Background.css │ └── Background.jsx ├── BottomButton │ ├── BottomButton.css │ └── BottomButton.jsx ├── BottomRightButton │ ├── BottomRightButton.css │ └── BottomRightButton.jsx ├── Calculator │ ├── Calculator.css │ ├── Calculator.jsx │ └── CalculatorUse.js ├── FeaButton │ ├── FeaButton.css │ └── FeaButton.jsx ├── InfoMobileWindow │ ├── InfoMobileWindow.css │ └── InfoMobileWindow.jsx ├── InfoWindow │ ├── InfoWindow.css │ └── InfoWindow.jsx ├── LinkArea │ ├── LinkArea.css │ └── LinkArea.jsx ├── MainArea │ ├── MainArea.css │ └── MainArea.jsx ├── MoreSearch │ ├── MoreSearch.css │ └── MoreSearch.jsx ├── One │ ├── One.css │ └── One.jsx ├── OneWindow │ ├── OneWindow.css │ └── OneWindow.jsx ├── SearchBar │ ├── SearchBar.css │ └── SearchBar.jsx ├── TopButton │ ├── TopButton.css │ └── TopButton.jsx ├── TopLeftButton │ ├── TopLeftButton.css │ └── TopLeftButton.jsx ├── TopRightButton │ ├── TopRightButton.css │ └── TopRightButton.jsx └── WeatherWindow │ ├── WeatherWindow.css │ └── WeatherWindow.jsx ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js ├── setupTests.js └── util ├── GetIsMobile └── GetIsMobile.js └── TarRequest └── TarRequest.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | /.vscode -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 托噜酱 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # This is a browserNewTabPage 2 | 3 | ![](http://bt.uyou.org.cn:518/down/CmbViJAsDlnK) 4 | ![](http://bt.uyou.org.cn:518/down/AY0IZU3484Yz) 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "browuyou", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "./", 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.16.4", 8 | "@testing-library/react": "^13.1.1", 9 | "@testing-library/user-event": "^13.5.0", 10 | "react": "^18.1.0", 11 | "react-dom": "^18.1.0", 12 | "react-scripts": "5.0.1", 13 | "web-vitals": "^2.1.4" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/favicon.ico -------------------------------------------------------------------------------- /public/img/Chrome_Web_Store_logo_2012-2015.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/Chrome_Web_Store_logo_2012-2015.svg.png -------------------------------------------------------------------------------- /public/img/GitHub.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/GitHub.png -------------------------------------------------------------------------------- /public/img/IThome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/IThome.png -------------------------------------------------------------------------------- /public/img/aliyun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/aliyun.png -------------------------------------------------------------------------------- /public/img/azure-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/azure-blue.png -------------------------------------------------------------------------------- /public/img/back_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/back_black.png -------------------------------------------------------------------------------- /public/img/baidu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/baidu.png -------------------------------------------------------------------------------- /public/img/bing-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/bing-logo.png -------------------------------------------------------------------------------- /public/img/calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/calculator.png -------------------------------------------------------------------------------- /public/img/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/close.png -------------------------------------------------------------------------------- /public/img/coolapk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/coolapk.png -------------------------------------------------------------------------------- /public/img/dLinkIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/dLinkIcon.png -------------------------------------------------------------------------------- /public/img/dark/back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/dark/back.png -------------------------------------------------------------------------------- /public/img/dark/calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/dark/calculator.png -------------------------------------------------------------------------------- /public/img/dark/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/dark/close.png -------------------------------------------------------------------------------- /public/img/dark/down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/dark/down.png -------------------------------------------------------------------------------- /public/img/dark/fy_ic_history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/dark/fy_ic_history.png -------------------------------------------------------------------------------- /public/img/dark/hide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/dark/hide.png -------------------------------------------------------------------------------- /public/img/dark/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/dark/info.png -------------------------------------------------------------------------------- /public/img/dark/reload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/dark/reload.png -------------------------------------------------------------------------------- /public/img/dark/setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/dark/setting.png -------------------------------------------------------------------------------- /public/img/dark/timer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/dark/timer.png -------------------------------------------------------------------------------- /public/img/dark/to.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/dark/to.png -------------------------------------------------------------------------------- /public/img/ddg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /public/img/donate/donate1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/donate/donate1.png -------------------------------------------------------------------------------- /public/img/donate/donate2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/donate/donate2.jpg -------------------------------------------------------------------------------- /public/img/donate/donate3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/donate/donate3.png -------------------------------------------------------------------------------- /public/img/down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/down.png -------------------------------------------------------------------------------- /public/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/favicon.ico -------------------------------------------------------------------------------- /public/img/fy_ic_history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/fy_ic_history.png -------------------------------------------------------------------------------- /public/img/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/google.png -------------------------------------------------------------------------------- /public/img/hide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/hide.png -------------------------------------------------------------------------------- /public/img/icon_bilibili-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/icon_bilibili-circle.png -------------------------------------------------------------------------------- /public/img/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/info.png -------------------------------------------------------------------------------- /public/img/qq.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/qq.jpg -------------------------------------------------------------------------------- /public/img/reload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/reload.png -------------------------------------------------------------------------------- /public/img/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/search.png -------------------------------------------------------------------------------- /public/img/setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/setting.png -------------------------------------------------------------------------------- /public/img/sougou.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/sougou.png -------------------------------------------------------------------------------- /public/img/timer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/timer.png -------------------------------------------------------------------------------- /public/img/to.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/to.png -------------------------------------------------------------------------------- /public/img/weather/00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/weather/00.png -------------------------------------------------------------------------------- /public/img/weather/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/weather/01.png -------------------------------------------------------------------------------- /public/img/weather/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/weather/02.png -------------------------------------------------------------------------------- /public/img/weather/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/weather/03.png -------------------------------------------------------------------------------- /public/img/weather/04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/weather/04.png -------------------------------------------------------------------------------- /public/img/yandex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/yandex.png -------------------------------------------------------------------------------- /public/img/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/img/youtube.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | uyou 新标签页 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | display: none; 3 | } 4 | .black_back{ 5 | width: 200vw; 6 | height: 200vh; 7 | background-color: #00000050; 8 | position: fixed; 9 | z-index: -1; 10 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Background from './components/Background/Background'; 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/components/Background/Background.css: -------------------------------------------------------------------------------- 1 | .background{ 2 | background-repeat: no-repeat; 3 | background-size: cover; 4 | height: 100vh; 5 | max-width: 100vw; 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | justify-content: center; 10 | } -------------------------------------------------------------------------------- /src/components/Background/Background.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import MainArea from '../MainArea/MainArea' 3 | import One from '../One/One' 4 | import FeaButton from '../FeaButton/FeaButton' 5 | import TarRequest from '../../util/TarRequest/TarRequest.js' 6 | import './Background.css' 7 | 8 | export default class Background extends Component { 9 | constructor(props) { 10 | super(props) 11 | var screenHeight = document.documentElement.clientHeight; 12 | var screenwidth = window.innerWidth 13 | var backgroundImage = 'url(https://iw233.cn/api.php?sort=pc)' 14 | var backgroundHeight = '' 15 | var hideAll = localStorage.getItem('hideAll') 16 | var isMobile = false 17 | if (hideAll === null) { 18 | hideAll = false 19 | } else if (hideAll === 'true') { 20 | hideAll = true 21 | } else { 22 | hideAll = false 23 | } 24 | if (screenwidth < 768) { 25 | backgroundImage = 'url(https://iw233.cn/api.php?sort=mp)' 26 | backgroundHeight = screenHeight + 'px' 27 | isMobile = true 28 | } 29 | this.state = { 30 | background: backgroundImage, 31 | backgroundHeight: backgroundHeight, 32 | one: {}, 33 | hideAll: hideAll, 34 | useCalculator: false, 35 | backgroundShow: 'none', 36 | isMobile: isMobile 37 | } 38 | } 39 | render() { 40 | var img = document.createElement('img') 41 | img.src = (this.state.isMobile ? 'https://iw233.cn/api.php?sort=mp' : 'https://iw233.cn/api.php?sort=pc') 42 | img.onload = () => { 43 | this.setState({ 44 | backgroundShow: '' 45 | }) 46 | } 47 | return ( 48 |
49 | {this.state.useCalculator ? null : } 50 | {this.state.hideAll || this.state.useCalculator ? null : } 51 | { 52 | this.setState({ 53 | hideAll: e 54 | }) 55 | }} useCalculator={ 56 | (e) => { 57 | this.setState({ 58 | useCalculator: e 59 | }) 60 | } 61 | } /> 62 |
63 | ) 64 | } 65 | componentDidMount() { 66 | TarRequest('GET', 'https://v1.hitokoto.cn/', null, (res) => { 67 | this.setState({ 68 | one: res 69 | }) 70 | }) 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/components/BottomButton/BottomButton.css: -------------------------------------------------------------------------------- 1 | .bottom_button{ 2 | position: fixed; 3 | z-index: 10; 4 | bottom: 0; 5 | display: flex; 6 | flex-direction: row; 7 | } 8 | .b_button{ 9 | width: 30px; 10 | height: 30px; 11 | padding: 10px; 12 | margin-bottom: 40px; 13 | margin-right: 10px; 14 | margin-left: 10px; 15 | background-color: #ffffff90; 16 | box-shadow: 5px 5px 30px #00000050; 17 | border-radius: 50%; 18 | backdrop-filter: blur(20px); 19 | cursor: pointer; 20 | } 21 | .b_button:active{ 22 | background-color: #ffffff50; 23 | } 24 | .b_button img{ 25 | width: 100%; 26 | height: 100%; 27 | } -------------------------------------------------------------------------------- /src/components/BottomButton/BottomButton.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import Calculator from '../Calculator/Calculator' 3 | import './BottomButton.css' 4 | 5 | export default class BottomButton extends Component { 6 | constructor(props) { 7 | super(props) 8 | var hideAll = localStorage.getItem('hideAll') 9 | if (hideAll === null) { 10 | hideAll = false 11 | } else if (hideAll === 'true') { 12 | hideAll = true 13 | } else { 14 | hideAll = false 15 | } 16 | this.state = { 17 | hideAll: hideAll, 18 | calculatorShow: false 19 | } 20 | } 21 | render() { 22 | return ( 23 | <> 24 |
25 | {this.state.calculatorShow ? null : ( 26 |
this.hideAll()}> 27 | 28 |
29 | )} 30 | {this.state.hideAll ? null : ( 31 | <> 32 | {this.state.calculatorShow ? null : ( 33 |
window.location.reload()}> 34 | 35 |
36 | )} 37 |
this.useCalculator()}> 38 | 39 |
40 | 41 | )} 42 |
43 | {this.state.calculatorShow ? : null} 44 | 45 | ) 46 | } 47 | hideAll() { 48 | if (!this.state.hideAll) { 49 | this.props.hideAll(true) 50 | this.setState({ 51 | hideAll: true 52 | }) 53 | localStorage.setItem('hideAll', true) 54 | } else { 55 | this.props.hideAll(false) 56 | this.setState({ 57 | hideAll: false 58 | }) 59 | localStorage.setItem('hideAll', false) 60 | } 61 | } 62 | useCalculator() { 63 | this.setState({ 64 | calculatorShow: !this.state.calculatorShow 65 | }) 66 | this.props.useCalculator(!this.state.calculatorShow) 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/components/BottomRightButton/BottomRightButton.css: -------------------------------------------------------------------------------- 1 | .bottom_right_button{ 2 | position: fixed; 3 | right: 0; 4 | z-index: 10; 5 | bottom: 0; 6 | } 7 | .br_button{ 8 | width: 30px; 9 | height: 30px; 10 | padding: 10px; 11 | margin-bottom: 20px; 12 | margin-right: 20px; 13 | background-color: #ffffff90; 14 | box-shadow: 5px 5px 30px #00000050; 15 | border-radius: 50%; 16 | backdrop-filter: blur(20px); 17 | cursor: pointer; 18 | } 19 | .br_button img{ 20 | width: 100%; 21 | height: 100%; 22 | } 23 | .br_button:active{ 24 | background-color: #ffffff50; 25 | } -------------------------------------------------------------------------------- /src/components/BottomRightButton/BottomRightButton.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import InfoWindow from '../InfoWindow/InfoWindow' 3 | import './BottomRightButton.css' 4 | 5 | export default class BottomRightButton extends Component { 6 | state = { 7 | infoWindowShow: false 8 | } 9 | render() { 10 | return ( 11 | <> 12 |
13 |
this.showInfoWindow()}> 14 | 15 |
16 |
17 | { 19 | this.setState({ 20 | infoWindowShow: e 21 | }) 22 | } 23 | } /> 24 |
this.clickBlackBack()}>
27 | 28 | ) 29 | } 30 | showInfoWindow() { 31 | this.setState({ 32 | infoWindowShow: true 33 | }) 34 | } 35 | clickBlackBack() { 36 | this.setState({ 37 | infoWindowShow: false 38 | }) 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/components/Calculator/Calculator.css: -------------------------------------------------------------------------------- 1 | .main_cal{ 2 | position: fixed; 3 | background: #ffffff90; 4 | border-radius: 20px; 5 | overflow: hidden; 6 | z-index: 100; 7 | border-top: 2px solid #ffffff70; 8 | border-left: 2px solid #ffffff70; 9 | box-shadow: 5px 5px 30px #00000050; 10 | } 11 | .main_cal .card{ 12 | position: relative; 13 | display: grid; 14 | backdrop-filter: blur(20px); 15 | } 16 | .card .value{ 17 | grid-column: span 4; 18 | height: 150px; 19 | width: 320px; 20 | text-align: right; 21 | border: none; 22 | outline: none; 23 | padding-left: 30px; 24 | padding-right: 30px; 25 | font-size: 30px; 26 | background-color: transparent; 27 | color: black; 28 | border-bottom:2px solid #00000030; 29 | margin-bottom: 10px; 30 | } 31 | .card span{ 32 | display: grid; 33 | place-items: center; 34 | height: 80px; 35 | width: 90px; 36 | font-weight: bold; 37 | font-size: 20px; 38 | cursor: pointer; 39 | user-select: none; 40 | border-radius: 10px; 41 | transition: 0.5s; 42 | color: black; 43 | } 44 | .card span:hover{ 45 | background-color: #ffffff70; 46 | transition: 0.5s; 47 | } 48 | .card span:active{ 49 | background: #ffffff50; 50 | font-size: 70px; 51 | } 52 | .card .clear{ 53 | grid-column: 2 span; 54 | width: 180px; 55 | } 56 | .card .result{ 57 | grid-column: 2 span; 58 | width: 180px; 59 | margin-bottom: 10px; 60 | } 61 | 62 | #txt{ 63 | color: black; 64 | } -------------------------------------------------------------------------------- /src/components/Calculator/Calculator.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import CalculatorUse from './CalculatorUse' 3 | import './Calculator.css' 4 | 5 | export default class Calculator extends Component { 6 | constructor(props) { 7 | super(props) 8 | var screenwidth = window.innerWidth 9 | var isMobile = false 10 | if (screenwidth < 768) { 11 | isMobile = true 12 | } 13 | this.state = { 14 | value: '', 15 | isMobile: isMobile 16 | } 17 | } 18 | render() { 19 | return ( 20 |
21 |
22 | 23 | this.setState({value: ''})} style={{ marginLeft: '10px' }}>c 24 | this.onNumberClick('/')} >/ 25 | this.onNumberClick('*')} style={{ marginRight: '10px' }}>* 26 | this.onNumberClick('7')} style={{ marginLeft: '10px' }}>7 27 | this.onNumberClick('8')} >8 28 | this.onNumberClick('9')} >9 29 | this.onNumberClick('-')} >- 30 | this.onNumberClick('4')} style={{ marginLeft: '10px' }}>4 31 | this.onNumberClick('5')} >5 32 | this.onNumberClick('6')} >6 33 | this.onNumberClick('+')} >+ 34 | this.onNumberClick('1')} style={{ marginLeft: '10px' }}>1 35 | this.onNumberClick('2')} >2 36 | this.onNumberClick('3')} >3 37 | this.onNumberClick('0')} >0 38 | this.onNumberClick('00')} style={{ marginLeft: '10px' }}>00 39 | this.onNumberClick('.')} >. 40 | this.result()}>= 41 |
42 |
43 | ) 44 | } 45 | onNumberClick(number) { 46 | this.setState({ 47 | value: this.state.value + number 48 | }) 49 | } 50 | result() { 51 | this.setState({ 52 | value: CalculatorUse(this.state.value) 53 | }) 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/components/Calculator/CalculatorUse.js: -------------------------------------------------------------------------------- 1 | export default function CalculatorUse(fn) { 2 | var Fun = Function 3 | return new Fun('return ' + fn)() 4 | } -------------------------------------------------------------------------------- /src/components/FeaButton/FeaButton.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/src/components/FeaButton/FeaButton.css -------------------------------------------------------------------------------- /src/components/FeaButton/FeaButton.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import TopRightButton from '../TopRightButton/TopRightButton' 3 | import BottomButtone from '../BottomButton/BottomButton' 4 | import BottomRightButton from '../BottomRightButton/BottomRightButton' 5 | import TopButton from '../TopButton/TopButton' 6 | import TopLeftButton from '../TopLeftButton/TopLeftButton' 7 | import './FeaButton.css' 8 | import GetIsMobile from '../../util/GetIsMobile/GetIsMobile' 9 | 10 | export default class FeaButton extends Component { 11 | constructor(props) { 12 | super(props) 13 | var hideAll = localStorage.getItem('hideAll') 14 | var ScreenWidth = window.innerWidth 15 | var isMobile = false 16 | if (hideAll === null) { 17 | hideAll = false 18 | } else if (hideAll === 'true') { 19 | hideAll = true 20 | } else { 21 | hideAll = false 22 | } 23 | if (ScreenWidth < 768) { 24 | isMobile = true 25 | } 26 | this.state = { 27 | hideAll: hideAll, 28 | isMobile: isMobile, 29 | mobileShowButton: true, 30 | calculatorShow: false 31 | } 32 | } 33 | render() { 34 | return ( 35 | <> 36 | {this.state.isMobile ? ( 37 | <> 38 | {this.state.mobileShowButton ? this.hideAll(e)} useCalculator={ 39 | (e) => { 40 | this.setState({ 41 | calculatorShow: e 42 | }) 43 | this.props.useCalculator(e) 44 | } 45 | }/> : null} 46 | {this.state.hideAll || this.state.calculatorShow ? null : } 47 | 48 | ) : ( 49 | <> 50 | this.hideAll(e)} useCalculator={ 51 | (e) => { 52 | this.setState({ 53 | calculatorShow: e 54 | }) 55 | this.props.useCalculator(e) 56 | } 57 | } /> 58 | {this.state.hideAll || this.state.calculatorShow ? null : } 59 | 60 | )} 61 | {this.state.hideAll || this.state.calculatorShow ? null : } 62 | 63 | ) 64 | } 65 | componentDidMount() { 66 | const originHeight = document.documentElement.clientHeight || document.body.clientHeight; 67 | this.resizeHandler = () => { 68 | const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; 69 | const activeElement = document.activeElement; 70 | if (resizeHeight < originHeight) { 71 | if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) { 72 | this.setState({ 73 | mobileShowButton: false 74 | }) 75 | } 76 | } else { 77 | this.setState({ 78 | mobileShowButton: true 79 | }) 80 | } 81 | } 82 | window.addEventListener('resize', this.resizeHandler); 83 | GetIsMobile((e) => { 84 | this.setState({ 85 | isMobile: e 86 | }) 87 | }) 88 | } 89 | hideAll(e) { 90 | this.setState({ 91 | hideAll: e 92 | }) 93 | this.props.hideAll(e) 94 | } 95 | } -------------------------------------------------------------------------------- /src/components/InfoMobileWindow/InfoMobileWindow.css: -------------------------------------------------------------------------------- 1 | .info_mobile_window { 2 | position: fixed; 3 | z-index: 20; 4 | width: 310px; 5 | height: 420px; 6 | background-color: #ffffff90; 7 | box-shadow: 0px 0px 70px #00000070; 8 | backdrop-filter: blur(20px); 9 | border-radius: 20px; 10 | padding: 30px 20px 30px 20px; 11 | display: flex; 12 | flex-direction: row; 13 | margin-bottom: 10px; 14 | margin-right: 0px; 15 | border-top: 2px solid #ffffff70; 16 | border-left: 2px solid #ffffff70; 17 | transition: 0.5s; 18 | color: black; 19 | transform: scale(0, 0); 20 | } 21 | .mine_info_mobile img{ 22 | width: 100%; 23 | height: 100%; 24 | } 25 | .cl_mobile{ 26 | right: 20px; 27 | top: 20px; 28 | } -------------------------------------------------------------------------------- /src/components/InfoMobileWindow/InfoMobileWindow.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import './InfoMobileWindow.css' 3 | 4 | export default class InfoMobileWindow extends Component { 5 | state = { 6 | infoWindowShow: false 7 | } 8 | render() { 9 | var screenHeight = document.documentElement.clientHeight 10 | return ( 11 |
15 |
this.clickCloseButton()}> 16 | 17 |
18 |
19 |
20 | 关于 uyou 新标签页 21 | 22 |
23 |
24 |
25 | 这是基于 uyou 新标签页 chrome 扩展的网页版，她会让你感觉到和 chrome 扩展版几乎一样的体验，也可以让暂未支持的浏览器作为主页使用 26 |
27 |
28 |
这个新标签页的开源地址为：
29 | 点击前往 30 |
如果你感兴趣也可以去这个项目的扩展版上给我一个 star，此标签页扩展的开源地址为：
31 | 点击前往 32 |
33 |
34 |
我的 GitHub 地址：
35 | 点击前往 36 |
37 |
38 |
我的 酷安 账号：
39 | 40 | 点击前往 41 |
42 |
43 |
欢迎加群讨论：
44 | 45 | 点击前往 46 |
47 |
48 |
49 |
50 |
51 |
52 | ) 53 | } 54 | clickCloseButton() { 55 | this.props.event(false) 56 | } 57 | static getDerivedStateFromProps(props) { 58 | if (props.infoWindowShow !== null) { 59 | return { 60 | infoWindowShow: props.infoWindowShow, 61 | } 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/components/InfoWindow/InfoWindow.css: -------------------------------------------------------------------------------- 1 | .info_window { 2 | position: fixed; 3 | z-index: 200; 4 | width: 700px; 5 | height: 500px; 6 | background-color: #ffffff90; 7 | box-shadow: 0px 0px 70px #00000070; 8 | backdrop-filter: blur(20px); 9 | border-radius: 20px; 10 | padding: 50px; 11 | display: flex; 12 | flex-direction: row; 13 | margin-bottom: 10px; 14 | margin-right: 0px; 15 | border-top: 2px solid #ffffff70; 16 | border-left: 2px solid #ffffff70; 17 | transition: 0.5s; 18 | color: black; 19 | transform: scale(0, 0); 20 | display: flex; 21 | flex-direction: column; 22 | } 23 | .info_inner{ 24 | overflow-y: scroll; 25 | } 26 | .info_title{ 27 | display: flex; 28 | flex-direction: column; 29 | } 30 | .info_title span { 31 | font-size: 23px; 32 | font-weight: bold; 33 | margin-bottom: 20px; 34 | margin-left: 5px; 35 | } 36 | .info_title img { 37 | width: 80px; 38 | height: 80px; 39 | margin-bottom: 20px; 40 | margin-left: 5px; 41 | border-radius: 40px; 42 | box-shadow: 0px 0px 8px #00000050; 43 | } 44 | .info_main{ 45 | display: flex; 46 | flex-direction: column; 47 | } 48 | .info_text{ 49 | background-color: #ffffff90; 50 | padding: 15px; 51 | font-size: 15px; 52 | border-radius: 15px; 53 | box-shadow: 0px 0px 8px #00000050; 54 | margin-bottom: 15px; 55 | font-weight: bold; 56 | margin: 0px 10px 15px 10px; 57 | } 58 | .info_text a{ 59 | display: block; 60 | width: 100px; 61 | padding: 10px; 62 | border-radius: 10px; 63 | background-color: #0078d4; 64 | color: white; 65 | text-align: center; 66 | margin-top: 10px; 67 | text-decoration: none; 68 | } 69 | .mine_info{ 70 | display: flex; 71 | flex-direction: row; 72 | } 73 | .info_main img{ 74 | margin-top: 5px; 75 | border-radius: 10px; 76 | height: 400px; 77 | } -------------------------------------------------------------------------------- /src/components/InfoWindow/InfoWindow.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import './InfoWindow.css' 3 | 4 | export default class InfoWindow extends Component { 5 | constructor(props) { 6 | super(props) 7 | this.state = { 8 | infoWindowShow: false, 9 | } 10 | } 11 | render() { 12 | var screenwidth = window.innerWidth 13 | var screenHeight = document.documentElement.clientHeight 14 | return ( 15 |
20 |
this.clickCloseButton()}> 21 | 22 |
23 |
24 |
25 | 关于 uyou 新标签页 26 | 27 |
28 |
29 |
30 | 这是基于 uyou 新标签页 chrome 扩展的网页版，她会让你感觉到和 chrome 扩展版几乎一样的体验，也可以让暂未支持的浏览器作为主页使用 31 |
32 |
33 |
这个新标签页的开源地址为：
34 | 点击前往 35 |
如果你感兴趣也可以去这个项目的扩展版上给我一个 star，此标签页扩展的开源地址为：
36 | 点击前往 37 |
38 |
39 |
我的 GitHub 地址：
40 | 点击前往 41 |
42 |
43 |
我的 酷安 账号：
44 | 45 | 点击前往 46 |
47 |
48 |
欢迎加群讨论：
49 | 50 | 点击前往 51 |
52 |
53 |
54 |
55 |
56 |
57 | ) 58 | } 59 | clickCloseButton() { 60 | this.props.event(false) 61 | } 62 | static getDerivedStateFromProps(props) { 63 | if (props.infoWindowShow !== null) { 64 | return { 65 | infoWindowShow: props.infoWindowShow, 66 | } 67 | } 68 | return null; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/components/LinkArea/LinkArea.css: -------------------------------------------------------------------------------- 1 | .link_area{ 2 | display: flex; 3 | flex-direction: row; 4 | width: 610px; 5 | flex-wrap: wrap; 6 | z-index: 2; 7 | } 8 | .link_area div div{ 9 | width: 50px; 10 | height: 50px; 11 | background-color: #ffffff90; 12 | backdrop-filter: blur(20px); 13 | margin: 10px; 14 | border-radius: 10px; 15 | box-shadow: 0px 0px 10px #00000050; 16 | border-top: 2px solid #ffffff70; 17 | border-left: 2px solid #ffffff70; 18 | display: flex; 19 | align-items: center; 20 | text-align: center; 21 | padding: 25px; 22 | } 23 | .link_area div div:hover{ 24 | background-color: #ffffff70; 25 | border-top: 2px solid #ffffff50; 26 | border-left: 2px solid #ffffff50; 27 | } 28 | .link_area div div img{ 29 | max-width: 100%; 30 | max-height: 100%; 31 | } -------------------------------------------------------------------------------- /src/components/LinkArea/LinkArea.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import GetIsMobile from '../../util/GetIsMobile/GetIsMobile' 3 | import './LinkArea.css' 4 | 5 | export default class LinkArea extends Component { 6 | constructor(props) { 7 | super(props) 8 | var screenwidth = window.innerWidth 9 | var isMobile = false 10 | if (screenwidth < 768) { 11 | isMobile = true 12 | } 13 | this.state = { 14 | isMobile: isMobile, 15 | links: { 16 | link1: 'https://www.google.com', 17 | link2: 'https://www.youtube.com', 18 | link3: 'https://cn.bing.com', 19 | link4: 'https://www.baidu.com', 20 | link5: 'https://www.bilibili.com', 21 | link6: 'https://www.ithome.com', 22 | link7: 'https://chrome.google.com/webstore/category/extensions', 23 | link8: 'https://www.aliyun.com', 24 | link9: 'https://azure.microsoft.com/zh-cn/', 25 | link10: 'https://www.github.com' 26 | } 27 | } 28 | } 29 | render() { 30 | return ( 31 |
32 |
this.openLink('1')}> 33 |
34 | 35 |
36 |
37 |
this.openLink('2')}> 38 |
39 | 40 |
41 |
42 |
this.openLink('3')}> 43 |
44 | 45 |
46 |
47 |
this.openLink('4')}> 48 |
49 | 50 |
51 |
52 |
this.openLink('5')}> 53 |
54 | 55 |
56 |
57 | {this.state.isMobile ? null : ( 58 | <> 59 |
this.openLink('6')}> 60 |
61 | 62 |
63 |
64 |
this.openLink('7')}> 65 |
66 | 67 |
68 |
69 |
this.openLink('8')}> 70 |
71 | 72 |
73 |
74 |
this.openLink('9')}> 75 |
76 | 77 |
78 |
79 | 80 | )} 81 |
this.openLink('10')}> 82 |
83 | 84 |
85 |
86 |
87 | ) 88 | } 89 | openLink(link) { 90 | switch (link) { 91 | case '1': 92 | return window.open(this.state.links.link1, '_self') 93 | case '2': 94 | return window.open(this.state.links.link2, '_self') 95 | case '3': 96 | return window.open(this.state.links.link3, '_self') 97 | case '4': 98 | return window.open(this.state.links.link4, '_self') 99 | case '5': 100 | return window.open(this.state.links.link5, '_self') 101 | case '6': 102 | return window.open(this.state.links.link6, '_self') 103 | case '7': 104 | return window.open(this.state.links.link7, '_self') 105 | case '8': 106 | return window.open(this.state.links.link8, '_self') 107 | case '9': 108 | return window.open(this.state.links.link9, '_self') 109 | case '10': 110 | return window.open(this.state.links.link10, '_self') 111 | default: 112 | return null 113 | } 114 | } 115 | componentDidMount() { 116 | GetIsMobile((e) => { 117 | this.setState({ 118 | isMobile: e 119 | }) 120 | }) 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /src/components/MainArea/MainArea.css: -------------------------------------------------------------------------------- 1 | .MainArea{ 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | flex-direction: column; 6 | } -------------------------------------------------------------------------------- /src/components/MainArea/MainArea.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import SearchBar from '../SearchBar/SearchBar' 3 | import LinkArea from '../LinkArea/LinkArea' 4 | import MoreSearch from '../MoreSearch/MoreSearch' 5 | import './MainArea.css' 6 | import GetIsMobile from '../../util/GetIsMobile/GetIsMobile' 7 | 8 | export default class MainArea extends Component { 9 | constructor(props) { 10 | super(props) 11 | var searchEngine = localStorage.getItem('searchEngine') 12 | var searchEngineImg = localStorage.getItem('searchEngineImg') 13 | var screenwidth = window.innerWidth 14 | var mainAreaTopHeight = '' 15 | if (searchEngine === null) { 16 | searchEngine = 'google' 17 | searchEngineImg = 'img/google.png' 18 | } 19 | if (screenwidth < 768) { 20 | mainAreaTopHeight = '-200px' 21 | } 22 | this.state = { 23 | moreSearchShow: false, 24 | searchEngine: searchEngine, 25 | searchEngineImg: searchEngineImg, 26 | mainAreaTopHeight: mainAreaTopHeight, 27 | hideAll: false 28 | } 29 | } 30 | render() { 31 | return ( 32 |
33 | { 35 | this.setState({ 36 | moreSearchShow: e 37 | }) 38 | } 39 | } /> 40 | { 42 | this.setState({ 43 | moreSearchShow: e.moreSearchShow, 44 | searchEngine: e.searchEngine, 45 | searchEngineImg: e.searchEngineImg 46 | }) 47 | } 48 | } /> 49 | {this.state.hideAll ? null : } 50 |
51 | ) 52 | } 53 | componentDidMount() { 54 | GetIsMobile((e) => { 55 | var marginTop 56 | if (e) { 57 | marginTop = '-200px' 58 | } else { 59 | marginTop = '' 60 | } 61 | this.setState({ 62 | mainAreaTopHeight: marginTop 63 | }) 64 | }) 65 | } 66 | static getDerivedStateFromProps(props) { 67 | if (props.hideAll !== null) { 68 | return { 69 | hideAll: props.hideAll 70 | }; 71 | } 72 | return null; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/components/MoreSearch/MoreSearch.css: -------------------------------------------------------------------------------- 1 | .more_search{ 2 | position: fixed; 3 | background-color: #ffffff90; 4 | backdrop-filter: blur(20px); 5 | border-radius: 20px; 6 | box-shadow: 5px 5px 30px #00000050; 7 | border-top: 2px solid #ffffff70; 8 | border-left: 2px solid #ffffff70; 9 | z-index: 4; 10 | transition: transform 0.3s, opacity 0.2s; 11 | margin-top: -270px; 12 | } 13 | .search_engines{ 14 | max-width: 500px; 15 | display: flex; 16 | flex-direction: row; 17 | flex-wrap: wrap; 18 | } 19 | .search_engines div{ 20 | padding: 25px; 21 | border-radius: 20px; 22 | } 23 | .search_engines div img{ 24 | width: 50px; 25 | height: 50px; 26 | } 27 | .search_engines div:hover{ 28 | background-color: #00000010; 29 | } 30 | 31 | .more_search_show{ 32 | transform: translateY(100px); 33 | } -------------------------------------------------------------------------------- /src/components/MoreSearch/MoreSearch.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import './MoreSearch.css' 3 | 4 | export default class MoreSearch extends Component { 5 | constructor(props) { 6 | super(props) 7 | var screenwidth = window.screen.width 8 | var moreSearchWidth = '' 9 | var hideAll = localStorage.getItem('hideAll') 10 | var moreSearchTop = '' 11 | if (hideAll === 'true') { 12 | moreSearchTop = '0px' 13 | } 14 | if (screenwidth < 768) { 15 | moreSearchWidth = '300px' 16 | } 17 | this.state = { 18 | moreSearchWidth: moreSearchWidth, 19 | moreSearchShow: false, 20 | mOpacity: '0', 21 | mZIndex: '3', 22 | moreSearch: '', 23 | moreSearchTop: moreSearchTop 24 | } 25 | } 26 | render() { 27 | return ( 28 |
34 |
35 |
this.clickSearchImg(false, 'cus', 'img/search.png')} style={{ display: 'none' }}> 36 | 37 |
38 |
this.clickSearchImg(false, 'google', 'img/google.png')}> 39 | 40 |
41 |
this.clickSearchImg(false, 'bing', 'img/bing-logo.png')} style={{ padding: '15px', width: '70px', height: '70px' }}> 42 | 43 |
44 |
this.clickSearchImg(false, 'baidu', 'img/baidu.png')} style={{ padding: '20px', height: '60px', width: '60px' }}> 45 | 46 |
47 |
this.clickSearchImg(false, 'ddg', 'img/ddg.svg')} style={{ display: 'none' }}> 48 | 49 |
50 |
this.clickSearchImg(false, 'yandex', 'img/yandex.png')} style={{ display: 'none' }}> 51 | 52 |
53 |
this.clickSearchImg(false, 'sougou', 'img/sougou.png')} style={{ display: 'none' }}> 54 | 55 |
56 |
57 |
58 | ) 59 | } 60 | clickSearchImg(moreSearchShow, searchEngine, searchEngineImg) { 61 | this.props.event({ 62 | moreSearchShow: moreSearchShow, 63 | searchEngine: searchEngine, 64 | searchEngineImg: searchEngineImg 65 | }) 66 | localStorage.setItem('searchEngine', searchEngine) 67 | localStorage.setItem('searchEngineImg', searchEngineImg) 68 | this.setState({ 69 | mOpacity: '0', 70 | mZIndex: '3', 71 | moreSearch: '', 72 | moreSearchShow: moreSearchShow 73 | }) 74 | } 75 | static getDerivedStateFromProps(props) { 76 | if (props.moreSearchShow !== null) { 77 | var mOpacity 78 | var mZIndex 79 | var moreSearch 80 | if (!props.moreSearchShow) { 81 | mOpacity = '0' 82 | mZIndex = '3' 83 | moreSearch = '' 84 | } else { 85 | mOpacity = '' 86 | mZIndex = '' 87 | moreSearch = ' more_search_show' 88 | } 89 | return { 90 | mOpacity: mOpacity, 91 | mZIndex: mZIndex, 92 | moreSearch: moreSearch 93 | }; 94 | } 95 | return null; 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /src/components/One/One.css: -------------------------------------------------------------------------------- 1 | .one_button{ 2 | position: fixed; 3 | bottom: 0px; 4 | background-color: #ffffff90; 5 | border-radius: 50px; 6 | box-shadow: 0px 0px 10px #00000050; 7 | backdrop-filter: blur(40px); 8 | margin-bottom: -200px; 9 | cursor: pointer; 10 | height: 50px; 11 | line-height: 50px; 12 | text-align: center; 13 | padding-left: 20px; 14 | padding-right: 20px; 15 | max-width: 500px; 16 | overflow: hidden; 17 | text-overflow: ellipsis; 18 | color: black; 19 | } 20 | .one_button:active{ 21 | background-color: #ffffff70; 22 | } 23 | .one_button span{ 24 | text-decoration: none; 25 | font-weight: bold; 26 | font-size: 13.5px; 27 | overflow: hidden; 28 | text-overflow: ellipsis; 29 | white-space: nowrap; 30 | user-select: none; 31 | } -------------------------------------------------------------------------------- /src/components/One/One.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import OneWindow from '../OneWindow/OneWindow' 3 | import './One.css' 4 | 5 | export default class One extends Component { 6 | constructor(props) { 7 | var screenwidth = window.innerWidth 8 | var oneButtonWidth = '' 9 | if (screenwidth < 768) { 10 | oneButtonWidth = '280px' 11 | } 12 | super(props) 13 | this.state = { 14 | oneMain: {}, 15 | oneButtonHeight: '', 16 | oneButtonWidth: oneButtonWidth, 17 | oneMainShow: false, 18 | blackBackShow: '', 19 | mobileShowButton: true 20 | } 21 | } 22 | render() { 23 | return ( 24 | <> 25 | {this.state.mobileShowButton ? ( 26 |
this.clickOneButton()}> 27 | {this.state.oneMain.hitokoto} 28 |
29 | ) : null} 30 | { 32 | this.setState({ 33 | oneMainShow: e.oneMainShow, 34 | blackBackShow: e.blackBackShow 35 | }) 36 | } 37 | } /> 38 |
this.clickBlackBack()}>
39 | 40 | ) 41 | } 42 | clickOneButton() { 43 | this.setState({ 44 | oneMainShow: true, 45 | blackBackShow: '20' 46 | }) 47 | } 48 | clickBlackBack() { 49 | this.setState({ 50 | oneMainShow: false, 51 | blackBackShow: '' 52 | }) 53 | } 54 | componentDidMount() { 55 | const originHeight = document.documentElement.clientHeight || document.body.clientHeight; 56 | this.resizeHandler = () => { 57 | const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; 58 | const activeElement = document.activeElement; 59 | if (resizeHeight < originHeight) { 60 | if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) { 61 | this.setState({ 62 | mobileShowButton: false 63 | }) 64 | } 65 | } else { 66 | this.setState({ 67 | mobileShowButton: true 68 | }) 69 | } 70 | } 71 | window.addEventListener('resize', this.resizeHandler); 72 | } 73 | static getDerivedStateFromProps(props) { 74 | var screenwidth = window.innerWidth 75 | var oneButtonTopHeight = '20px' 76 | if (screenwidth < 768) { 77 | oneButtonTopHeight = '20vh' 78 | } 79 | if (props.oneMain !== null && props.oneMain.hitokoto !== undefined) { 80 | return { 81 | oneMain: props.oneMain, 82 | oneButtonHeight: oneButtonTopHeight 83 | } 84 | } 85 | return null; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/components/OneWindow/OneWindow.css: -------------------------------------------------------------------------------- 1 | .one_main{ 2 | position: fixed; 3 | z-index: 21; 4 | width: 550px; 5 | height: 300px; 6 | background-color: #ffffff90; 7 | box-shadow: 0px 0px 70px #00000070; 8 | backdrop-filter: blur(20px); 9 | border-radius: 20px; 10 | padding: 50px; 11 | display: flex; 12 | flex-direction: row; 13 | border-top: 2px solid #ffffff70; 14 | border-left: 2px solid #ffffff70; 15 | transform: scale(0, 0); 16 | transition: 0.5s; 17 | } 18 | .close_button{ 19 | padding: 8px; 20 | width: 14px; 21 | height: 14px; 22 | background-color: #ffffff90; 23 | position: absolute; 24 | right: 30px; 25 | top: 30px; 26 | border-radius: 50%; 27 | box-shadow: 0px 0px 5px #00000070; 28 | display: flex; 29 | justify-content: center; 30 | align-items: center; 31 | cursor: pointer; 32 | transition: 0.3s; 33 | } 34 | .close_button:active{ 35 | background-color: #ffffff50; 36 | } 37 | .close_button img{ 38 | width: 100%; 39 | height: 100%; 40 | } 41 | .one_main_info{ 42 | height: 100%; 43 | width: 100%; 44 | display: flex; 45 | flex-direction: column; 46 | justify-content: space-between; 47 | } 48 | .one_main_info span{ 49 | font-weight: bold; 50 | } 51 | .one_num{ 52 | font-size: 25px; 53 | transition: all 0.5s ease 0s; 54 | color: black; 55 | } 56 | .one_text{ 57 | font-size: 40px; 58 | transition: all 0.5s ease 0s; 59 | color: black; 60 | text-align: center; 61 | } 62 | .one_from{ 63 | font-size: 30px; 64 | transition: all 0.5s ease 0s; 65 | color: black; 66 | text-align: right; 67 | } -------------------------------------------------------------------------------- /src/components/OneWindow/OneWindow.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import GetIsMobile from '../../util/GetIsMobile/GetIsMobile' 3 | import './OneWindow.css' 4 | 5 | export default class OneWindow extends Component { 6 | constructor(props) { 7 | super(props) 8 | var screenwidth = window.innerWidth 9 | var oneMainWidth = '' 10 | var oneMainHeight = '' 11 | var oneMainPadding = '' 12 | var oneMainFontSize = '' 13 | var oneMainBottm = '-170px' 14 | if (screenwidth < 768) { 15 | oneMainWidth = '270px' 16 | oneMainHeight = '400px' 17 | oneMainPadding = '40px' 18 | oneMainFontSize = '30px' 19 | oneMainBottm = '-50vh' 20 | } 21 | this.state = { 22 | oneMain: {}, 23 | oneMainShow: false, 24 | oneMainWidth: oneMainWidth, 25 | oneMainHeight: oneMainHeight, 26 | oneMainPadding: oneMainPadding, 27 | oneMainFontSize: oneMainFontSize, 28 | oneMainBottm: oneMainBottm 29 | } 30 | } 31 | render() { 32 | var screenHeight = document.documentElement.clientHeight 33 | return ( 34 |
41 |
this.clickCloseButton()}> 42 | 43 |
44 |
45 | #{this.state.oneMain.id} 46 | {this.state.oneMain.hitokoto} 47 | ———{this.state.oneMain.from} 48 |
49 |
50 | ) 51 | } 52 | clickCloseButton() { 53 | this.props.event({ 54 | oneMainShow: false, 55 | blackBackShow: '' 56 | }) 57 | } 58 | static getDerivedStateFromProps(props) { 59 | if (props.oneMain !== null) { 60 | return { 61 | oneMain: props.oneMain, 62 | oneMainShow: props.oneMainShow 63 | } 64 | } 65 | return null; 66 | } 67 | componentDidMount() { 68 | GetIsMobile((e) => { 69 | var oneMainWidth 70 | var oneMainHeight 71 | var oneMainPadding 72 | var oneMainFontSize 73 | var oneMainBottm 74 | if (e) { 75 | oneMainWidth = '270px' 76 | oneMainHeight = '400px' 77 | oneMainPadding = '40px' 78 | oneMainFontSize = '30px' 79 | oneMainBottm = '-50vh' 80 | } else { 81 | oneMainWidth = '' 82 | oneMainHeight = '' 83 | oneMainPadding = '' 84 | oneMainFontSize = '' 85 | oneMainBottm = '-170px' 86 | } 87 | this.setState({ 88 | oneMainWidth: oneMainWidth, 89 | oneMainHeight: oneMainHeight, 90 | oneMainPadding: oneMainPadding, 91 | oneMainFontSize: oneMainFontSize, 92 | oneMainBottm: oneMainBottm 93 | }) 94 | }) 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /src/components/SearchBar/SearchBar.css: -------------------------------------------------------------------------------- 1 | .search_bar{ 2 | width: 570px; 3 | height: 30px; 4 | background-color: #ffffff90; 5 | box-shadow: 3px 3px 10px #00000050; 6 | backdrop-filter: blur(20px); 7 | border-radius: 10px; 8 | padding: 10px; 9 | display: flex; 10 | flex-direction: row; 11 | margin-bottom: 20px; 12 | border-top: 2px solid #ffffff70; 13 | border-left: 2px solid #ffffff70; 14 | transition: 0.25s; 15 | z-index: 5; 16 | } 17 | .search_bar:hover{ 18 | background-color: #ffffff70; 19 | border-top: 2px solid #ffffff50; 20 | border-left: 2px solid #ffffff50; 21 | } 22 | .search_bar input{ 23 | border: 0px; 24 | background-color: transparent; 25 | border-radius: 6px; 26 | height: 28px; 27 | flex: 1; 28 | font-size: 20px; 29 | font-weight: bold; 30 | outline: 0px; 31 | } 32 | .search_bar img{ 33 | padding: 5px; 34 | height: 20px; 35 | width: 20px; 36 | margin-right: 10px; 37 | border-radius: 50%; 38 | background-color: white; 39 | } 40 | .keywords_right{ 41 | width: 2px; 42 | height: 30px; 43 | margin: 0px 10px 0px 10px; 44 | background-color: #44444450; 45 | } 46 | .search_btn{ 47 | width: 0px; 48 | text-align: center; 49 | color: black; 50 | font-weight: bold; 51 | font-size: 17px; 52 | line-height: 28px; 53 | cursor: pointer; 54 | user-select: none; 55 | overflow: hidden; 56 | white-space: nowrap; 57 | transition: 0.3s; 58 | } -------------------------------------------------------------------------------- /src/components/SearchBar/SearchBar.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import GetIsMobile from '../../util/GetIsMobile/GetIsMobile' 3 | import './SearchBar.css' 4 | 5 | export default class SearchBar extends Component { 6 | constructor(props) { 7 | super(props) 8 | var screenwidth = window.innerWidth 9 | var searchBarWidth = '' 10 | if (screenwidth < 768) { 11 | searchBarWidth = '324px' 12 | } 13 | this.state = { 14 | searchBarWidth: searchBarWidth, 15 | moreSearchShow: true, 16 | searchEngine: 'google', 17 | searchEngineImg: 'img/google.png', 18 | keyword: '', 19 | searchBtnShow: { 20 | keywordsRight: 'none', 21 | searchBtn: '' 22 | } 23 | } 24 | } 25 | render() { 26 | return ( 27 |
28 | {this.clickSearchImg(this.state.moreSearchShow)}} /> 29 | 30 |
31 |
this.toSearch(this.state.searchEngine)} style={{width: this.state.searchBtnShow.searchBtn}}>搜索
32 |
33 | ) 34 | } 35 | clickSearchImg(moreSearchShow) { 36 | this.props.event(!moreSearchShow) 37 | this.setState({ 38 | moreSearchShow: !moreSearchShow 39 | }) 40 | } 41 | searchKeyword = (e) => { 42 | if(this.state.searchBarWidth === '') { 43 | if (e.target.value.length > 0) { 44 | this.setState({ 45 | searchBtnShow: { 46 | keywordsRight: '', 47 | searchBtn: '45px' 48 | } 49 | }) 50 | } else { 51 | this.setState({ 52 | searchBtnShow: { 53 | keywordsRight: 'none', 54 | searchBtn: '' 55 | } 56 | }) 57 | } 58 | } 59 | this.setState({ 60 | keyword: e.target.value 61 | }) 62 | if (e.keyCode === 13) { 63 | this.toSearch(this.state.searchEngine) 64 | } 65 | } 66 | toSearch(searchEngine) { 67 | switch (searchEngine) { 68 | case 'google': 69 | return window.open('https://www.google.com/search?q=' + this.state.keyword, '_self') 70 | case 'bing': 71 | return window.open('https://cn.bing.com/search?q=' + this.state.keyword, '_self') 72 | case 'baidu': 73 | return window.open('https://www.baidu.com/s?wd=' + this.state.keyword, '_self') 74 | case 'ddg': 75 | return window.open('https://duckduckgo.com/?q=' + this.state.keyword, '_self') 76 | case 'yandex': 77 | return window.open('https://yandex.com/search/?text=' + this.state.keyword, '_self') 78 | case 'sogou': 79 | return window.open('https://www.sogou.com/web?query=' + this.state.keyword, '_self') 80 | default: 81 | return null 82 | } 83 | } 84 | static getDerivedStateFromProps(props) { 85 | if (props.moreSearchShow !== null) { 86 | return { 87 | moreSearchShow: props.moreSearchShow, 88 | searchEngine: props.searchEngine, 89 | searchEngineImg: props.searchEngineImg 90 | }; 91 | } 92 | return null; 93 | } 94 | componentDidMount() { 95 | GetIsMobile((e) => { 96 | var searchBarWidth 97 | if (e) { 98 | searchBarWidth = '324px' 99 | } else { 100 | searchBarWidth = '' 101 | } 102 | this.setState({ 103 | searchBarWidth: searchBarWidth 104 | }) 105 | }) 106 | } 107 | } -------------------------------------------------------------------------------- /src/components/TopButton/TopButton.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/browserNewTabPage/dd1bcf8712560ac5cc8658159cd23d003f16e58d/src/components/TopButton/TopButton.css -------------------------------------------------------------------------------- /src/components/TopButton/TopButton.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import InfoMobileWindow from '../InfoMobileWindow/InfoMobileWindow' 3 | import './TopButton.css' 4 | 5 | export default class TopButton extends Component { 6 | state = { 7 | infoWindowShow: false 8 | } 9 | render() { 10 | return ( 11 | <> 12 |
13 |
this.showInfoWindow()}> 14 | 15 |
16 |
17 | { 19 | this.setState({ 20 | infoWindowShow: e 21 | }) 22 | } 23 | }/> 24 |
this.clickBlackBack()}>
27 | 28 | ) 29 | } 30 | showInfoWindow() { 31 | this.setState({ 32 | infoWindowShow: true 33 | }) 34 | } 35 | clickBlackBack() { 36 | this.setState({ 37 | infoWindowShow: false 38 | }) 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/components/TopLeftButton/TopLeftButton.css: -------------------------------------------------------------------------------- 1 | .top_left_button{ 2 | position: fixed; 3 | left: 0; 4 | z-index: 11; 5 | top: 0; 6 | } 7 | .tl_button{ 8 | width: 30px; 9 | height: 30px; 10 | padding: 10px; 11 | margin-top: 20px; 12 | margin-left: 20px; 13 | background-color: #ffffff90; 14 | box-shadow: 5px 5px 30px #00000050; 15 | border-radius: 25px; 16 | backdrop-filter: blur(20px); 17 | cursor: pointer; 18 | transition: width 0.3s,height 0.3s,padding 0.3s,transform 0.3s; 19 | } 20 | .tl_button img{ 21 | width: 30px; 22 | height: 30px; 23 | filter: drop-shadow(0px 0px 1px #00000050); 24 | transition: 0.3s; 25 | } -------------------------------------------------------------------------------- /src/components/TopLeftButton/TopLeftButton.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import TarRequest from '../../util/TarRequest/TarRequest' 3 | import WeatherWindow from '../WeatherWindow/WeatherWindow' 4 | import './TopLeftButton.css' 5 | 6 | export default class TopLeftButton extends Component { 7 | constructor(props) { 8 | super(props) 9 | var city = localStorage.getItem('city') 10 | if (city === null) { 11 | city = '北京' 12 | } 13 | this.state = { 14 | weatherImg: '', 15 | showWeaherButton: true, 16 | weatherImgShow: false, 17 | weatherinfo: {}, 18 | city: city 19 | } 20 | } 21 | render() { 22 | return ( 23 | <> 24 | {this.state.showWeaherButton ? ( 25 |
26 |
this.showWeatherWindow()}> 27 | {this.state.weatherImgShow ? : null} 28 |
29 |
30 | ) : null} 31 | {this.state.showWeaherButton ? null : { 38 | this.setState({ 39 | showWeaherButton: e 40 | }) 41 | } 42 | } 43 | citySet={ 44 | (e) => { 45 | this.setState({ 46 | city: e 47 | }) 48 | setTimeout(() => { 49 | this.getWeather() 50 | }, 5) 51 | } 52 | } />} 53 | 54 | ) 55 | } 56 | showWeatherWindow() { 57 | this.setState({ 58 | showWeaherButton: false 59 | }) 60 | } 61 | getWeather = () => { 62 | TarRequest('GET', "https://mark.tnyl.xyz/weather/weather/baidu", { 63 | city: this.state.city 64 | }, (res) => { 65 | var weatherImg 66 | if (res.weather[0].weather.search("多云") !== -1) { 67 | weatherImg = 'img/weather/00.png' 68 | } else if (res.weather[0].weather.search("晴") !== -1) { 69 | weatherImg = 'img/weather/01.png' 70 | } else if (res.weather[0].weather.search("阴") !== -1) { 71 | weatherImg = 'img/weather/02.png' 72 | } else if (res.weather[0].weather.search("雪") !== -1) { 73 | weatherImg = 'img/weather/03.png' 74 | } else if (res.weather[0].weather.search("雨") !== -1) { 75 | weatherImg = 'img/weather/04.png' 76 | } else { 77 | weatherImg = 'img/dLinkIcon.png' 78 | } 79 | this.setState({ 80 | weatherImg: weatherImg, 81 | weatherImgShow: true, 82 | weatherinfo: res 83 | }) 84 | }) 85 | } 86 | componentDidMount() { 87 | this.getWeather() 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/components/TopRightButton/TopRightButton.css: -------------------------------------------------------------------------------- 1 | .top_right_button { 2 | position: fixed; 3 | right: 0; 4 | z-index: 10; 5 | top: 0; 6 | } 7 | .tr_button{ 8 | width: 30px; 9 | height: 30px; 10 | padding: 10px; 11 | margin-top: 20px; 12 | margin-right: 20px; 13 | background-color: #ffffff90; 14 | box-shadow: 5px 5px 30px #00000050; 15 | border-radius: 50%; 16 | backdrop-filter: blur(20px); 17 | cursor: pointer; 18 | } 19 | .tr_button:active{ 20 | background-color: #ffffff50; 21 | } 22 | .tr_button img{ 23 | width: 100%; 24 | height: 100%; 25 | } -------------------------------------------------------------------------------- /src/components/TopRightButton/TopRightButton.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import Calculator from '../Calculator/Calculator' 3 | import './TopRightButton.css' 4 | 5 | export default class TopRightButton extends Component { 6 | constructor(props) { 7 | super(props) 8 | var hideAll = localStorage.getItem('hideAll') 9 | if (hideAll === null) { 10 | hideAll = false 11 | } else if (hideAll === 'true') { 12 | hideAll = true 13 | } else { 14 | hideAll = false 15 | } 16 | this.state = { 17 | hideAll: hideAll, 18 | calculatorShow: false 19 | } 20 | } 21 | render() { 22 | return ( 23 | <> 24 |
25 | {this.state.calculatorShow ? null : ( 26 |
this.hideAll()}> 27 | 28 |
29 | )} 30 | {this.state.hideAll ? null : ( 31 | <> 32 | {this.state.calculatorShow ? null : ( 33 |
window.location.reload()}> 34 | 35 |
36 | )} 37 |
this.useCalculator()}> 38 | 39 |
40 | 41 | )} 42 |
43 | {this.state.calculatorShow ? : null} 44 | 45 | ) 46 | } 47 | hideAll() { 48 | if (!this.state.hideAll) { 49 | this.props.hideAll(true) 50 | this.setState({ 51 | hideAll: true 52 | }) 53 | localStorage.setItem('hideAll', true) 54 | } else { 55 | this.props.hideAll(false) 56 | this.setState({ 57 | hideAll: false 58 | }) 59 | localStorage.setItem('hideAll', false) 60 | } 61 | } 62 | useCalculator() { 63 | this.setState({ 64 | calculatorShow: !this.state.calculatorShow 65 | }) 66 | this.props.useCalculator(!this.state.calculatorShow) 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/components/WeatherWindow/WeatherWindow.css: -------------------------------------------------------------------------------- 1 | .weather{ 2 | z-index: 22; 3 | } 4 | .weather_main{ 5 | margin-left: 20px; 6 | } 7 | .weather_city{ 8 | display: flex; 9 | flex-direction: row; 10 | } 11 | .weather_city input { 12 | outline: none; 13 | border: 0px; 14 | border-radius: 10px; 15 | margin-right: 10px; 16 | width: 170px; 17 | padding-left: 10px; 18 | padding-right: 10px; 19 | } 20 | .weather_city div{ 21 | background-color: #0078d4; 22 | color: white; 23 | padding: 10px; 24 | border-radius: 10px; 25 | width: 50px; 26 | text-align: center; 27 | height: 17px; 28 | line-height: 17px; 29 | } 30 | .weather_city div:hover{ 31 | background-color: #035fa5; 32 | } 33 | .day_weather{ 34 | position: absolute; 35 | background-color: #ffffff70; 36 | border-radius: 10px; 37 | width: 250px; 38 | padding: 10px; 39 | top: 67px; 40 | bottom: 20px; 41 | display: flex; 42 | align-items: center; 43 | flex-direction: column; 44 | color: black; 45 | } 46 | .today_weather{ 47 | font-size: 15px; 48 | font-weight: bold; 49 | margin-bottom: 5px; 50 | background-color: #ffffff70; 51 | padding: 5px 20px 5px 20px; 52 | border-radius: 20px; 53 | color: black; 54 | } 55 | .fea_weather{ 56 | position: relative; 57 | display: flex; 58 | flex-direction: row; 59 | justify-content: space-between; 60 | margin-top: 10px; 61 | margin-bottom: 10px; 62 | top: 0; 63 | width: 250px; 64 | height: 100%; 65 | bottom: 0; 66 | } 67 | .fea_weatherbox{ 68 | display: flex; 69 | flex-direction: column; 70 | justify-content: center; 71 | align-items: center; 72 | width: 72px; 73 | padding: 4px; 74 | background-color: #ffffff70; 75 | border-radius: 8px; 76 | height: 100%; 77 | text-align: center; 78 | color: black; 79 | } 80 | .weather_time{ 81 | background-color: #ffffff70; 82 | padding: 3px; 83 | margin-bottom: 2px; 84 | width: 40px; 85 | text-align: center; 86 | border-radius: 20px; 87 | } -------------------------------------------------------------------------------- /src/components/WeatherWindow/WeatherWindow.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import '../TopLeftButton/TopLeftButton.css' 3 | import './WeatherWindow.css' 4 | 5 | export default class WeatherWindow extends Component { 6 | constructor(props) { 7 | var screenwidth = window.innerWidth 8 | var isMobile = screenwidth < 768 9 | super(props) 10 | this.state = { 11 | showWeaherButton: true, 12 | weatherImg: '', 13 | weatherInfo: {}, 14 | weatherWindowShowStyle: {}, 15 | weatherImgShowStyle: {}, 16 | otherWeather: {}, 17 | showWeatherInfo: false, 18 | cityTemp: '北京', 19 | city: '', 20 | isMobile: isMobile 21 | } 22 | } 23 | render() { 24 | return ( 25 | <> 26 | {!this.state.showWeaherButton ? ( 27 |
28 |
29 | this.showWeatherWindow()} /> 30 | {this.state.showWeatherInfo ? ( 31 |
35 |
36 | 37 |
this.setCity()}>确定
38 |
39 |
40 |
{this.state.weatherInfo.weather[0].weather}
41 |
今日气温：{this.state.weatherInfo.weather[0].temp}
42 |
43 |
44 |
明天
45 |
{this.state.weatherInfo.weather[1].weather}
46 | 47 |
{this.state.weatherInfo.weather[1].temp}
48 |
49 |
50 |
后天
51 |
{this.state.weatherInfo.weather[2].weather}
52 | 53 |
{this.state.weatherInfo.weather[2].temp}
54 |
55 |
56 |
{this.getWeatherTime(this.state.weatherInfo.weather[3].date)}
57 |
{this.state.weatherInfo.weather[3].weather}
58 | 59 |
{this.state.weatherInfo.weather[3].temp}
60 |
61 |
62 |
63 |
64 | ) : null} 65 |
66 |
67 | ) : null} 68 |
this.clickBlackBack()}>
71 | 72 | ) 73 | } 74 | showWeatherWindow() { 75 | this.setState({ 76 | weatherImgShowStyle: {}, 77 | weatherWindowShowStyle: {}, 78 | showWeatherInfo: false 79 | }) 80 | setTimeout(() => { 81 | this.props.event(true) 82 | }, 300) 83 | } 84 | clickBlackBack() { 85 | this.setState({ 86 | weatherImgShowStyle: {}, 87 | weatherWindowShowStyle: {}, 88 | showWeatherInfo: false 89 | }) 90 | setTimeout(() => { 91 | this.props.event(true) 92 | }, 300) 93 | } 94 | setCity() { 95 | this.props.citySet(this.state.cityTemp) 96 | } 97 | citySet = (e) => { 98 | localStorage.setItem('city', e.target.value) 99 | this.setState({ 100 | cityTemp: e.target.value 101 | }) 102 | } 103 | getWeatherTime(time) { 104 | return time.split('（')[0] 105 | } 106 | getWeatherImg(weather) { 107 | if (weather.search("多云") !== -1) { 108 | return ('img/weather/00.png') 109 | } else if (weather.search("晴") !== -1) { 110 | return ('img/weather/01.png') 111 | } else if (weather.search("阴") !== -1) { 112 | return ('img/weather/02.png') 113 | } else if (weather.search("雪") !== -1) { 114 | return ('img/weather/03.png') 115 | } else if (weather.search("雨") !== -1) { 116 | return ('img/weather/04.png') 117 | } else { 118 | return ('img/dLinkIcon.png') 119 | } 120 | } 121 | componentDidMount() { 122 | setTimeout(() => { 123 | var screenwidth = window.innerWidth 124 | this.setState({ 125 | weatherWindowShowStyle: { 126 | width: (this.state.isMobile ? '270px' : '350px'), 127 | height: (this.state.isMobile ? '310px' : '250px'), 128 | padding: '20px', 129 | display: 'flex', 130 | flexDirection: (this.state.isMobile ? 'column' : 'row'), 131 | transform: (this.state.isMobile ? 'translateX(' + (screenwidth - 350) / 2 + 'px) translateY(100px)' : '') 132 | }, 133 | weatherImgShowStyle: { 134 | width: '60px', 135 | height: '60px' 136 | } 137 | }) 138 | }, 1) 139 | setTimeout(() => { 140 | this.setState({ 141 | showWeatherInfo: true 142 | }) 143 | }, 300) 144 | } 145 | static getDerivedStateFromProps(props) { 146 | return { 147 | showWeaherButton: props.showWeaherButton, 148 | weatherImg: props.weatherImg, 149 | city: props.city, 150 | weatherInfo: props.weatherinfo 151 | } 152 | } 153 | } 154 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/util/GetIsMobile/GetIsMobile.js: -------------------------------------------------------------------------------- 1 | export default function GetIsMobile(callback) { 2 | window.addEventListener("resize", () => { 3 | var screenwidth = window.innerWidth 4 | var isMobile 5 | if (screenwidth < 768) { 6 | isMobile = true 7 | } else { 8 | isMobile = false 9 | } 10 | if (callback) { 11 | callback(isMobile) 12 | } 13 | }) 14 | } -------------------------------------------------------------------------------- /src/util/TarRequest/TarRequest.js: -------------------------------------------------------------------------------- 1 | export default function TarRequest(method, url, value, callback) { 2 | var httpRequest = new XMLHttpRequest() 3 | var obj = undefined 4 | if (value) { 5 | var strArr = []; 6 | var str = '' 7 | Object.keys(value).forEach((key) => { 8 | var name = key 9 | var va = value[key] 10 | strArr.push(name + '=' + va) 11 | str = strArr.join('&') 12 | }) 13 | } else { 14 | str = '' 15 | } 16 | if (method.toUpperCase() === 'GET') { 17 | if (value) { 18 | str = '?' + str 19 | } 20 | httpRequest.open(method, url + str, true) 21 | httpRequest.send() 22 | httpRequest.onreadystatechange = () => { 23 | if (httpRequest.readyState === 4 && httpRequest.status === 200) { 24 | obj = JSON.parse(httpRequest.responseText); 25 | if (callback) callback(obj) 26 | } 27 | } 28 | httpRequest.addEventListener('error', transferFailed); 29 | function transferFailed() { 30 | if (callback) callback('数据接收出错') 31 | } 32 | } else if (method.toUpperCase() === 'POST') { 33 | httpRequest.open(method, url, true) 34 | httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 35 | httpRequest.send(str) 36 | httpRequest.onreadystatechange = () => { 37 | if (httpRequest.readyState === 4 && httpRequest.status === 200) { 38 | obj = JSON.parse(httpRequest.responseText); 39 | if (callback) callback(obj) 40 | } 41 | } 42 | httpRequest.addEventListener('error', transferFailed); 43 | function transferFailed() { 44 | if (callback) callback('数据接收出错') 45 | } 46 | } 47 | } --------------------------------------------------------------------------------