├── .env ├── .github ├── CODEOWNERS ├── FUNDING.yml ├── ISSUE_TEMPLATE │ └── bug_report.yml ├── dependabot.yml └── workflows │ ├── Build-Deploy.yml │ ├── Issue-text.yml │ ├── PR-Preview.yml │ ├── desktop.yml │ ├── package-lock.yml │ ├── virus.yml │ └── winget.yml ├── .gitignore ├── LICENSE ├── README.md ├── jsconfig.json ├── package-lock.json ├── package.json ├── public ├── _redirects ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── gall1.png ├── gall2.png ├── hehe.jpg ├── img │ ├── asset │ │ ├── other │ │ │ └── googlename.png │ │ ├── whatsapp │ │ │ ├── background.png │ │ │ ├── chats │ │ │ │ ├── abstract.jpg │ │ │ │ ├── anon.jpeg │ │ │ │ ├── cat.jpg │ │ │ │ ├── disneyland.jpg │ │ │ │ ├── eiffel.jpg │ │ │ │ ├── krishna.jpg │ │ │ │ ├── meme.mp4 │ │ │ │ ├── nyqueen.jpg │ │ │ │ ├── octo.jpg │ │ │ │ ├── octo2.jpg │ │ │ │ ├── sydney.jpg │ │ │ │ └── unescape.jpg │ │ │ └── pfp │ │ │ │ ├── andrew.png │ │ │ │ ├── apoc.jfif │ │ │ │ ├── ava.jfif │ │ │ │ ├── ceaser.jfif │ │ │ │ ├── check.jfif │ │ │ │ ├── echo.png │ │ │ │ ├── fine.jfif │ │ │ │ ├── fire.png │ │ │ │ ├── hero.png │ │ │ │ ├── liam.jfif │ │ │ │ ├── lion.jfif │ │ │ │ ├── mac.jpg │ │ │ │ ├── main.jpg │ │ │ │ ├── pic.jpg │ │ │ │ ├── pose.jfif │ │ │ │ ├── real.jfif │ │ │ │ ├── siri.png │ │ │ │ ├── sophia.jpg │ │ │ │ ├── tony.jpg │ │ │ │ └── viva.jfif │ │ └── youtube │ │ │ ├── namelogo.png │ │ │ ├── pfp │ │ │ ├── blue.png │ │ │ ├── fineart.jpg │ │ │ ├── kurz.jpg │ │ │ ├── melodysheep.jpg │ │ │ └── zach.jpg │ │ │ └── thumbs │ │ │ ├── aliens.jpg │ │ │ ├── charcoal.jpg │ │ │ └── curves.jpg │ ├── blue.jpg │ ├── icon │ │ ├── apps │ │ │ ├── assistant.png │ │ │ ├── bg │ │ │ │ └── whatsapp.png │ │ │ ├── buyme.png │ │ │ ├── calender.png │ │ │ ├── chrome.png │ │ │ ├── classroom.png │ │ │ ├── contacts.png │ │ │ ├── discord.png │ │ │ ├── docs.png │ │ │ ├── drive.png │ │ │ ├── duo.png │ │ │ ├── earth.png │ │ │ ├── forms.png │ │ │ ├── gboard.png │ │ │ ├── github.png │ │ │ ├── gmail.png │ │ │ ├── google.png │ │ │ ├── googlefit.png │ │ │ ├── googlepay.png │ │ │ ├── keep.png │ │ │ ├── maps.png │ │ │ ├── meet.png │ │ │ ├── messages.png │ │ │ ├── mic.png │ │ │ ├── news.png │ │ │ ├── photos.png │ │ │ ├── playbooks.png │ │ │ ├── playgames.png │ │ │ ├── playmovies.png │ │ │ ├── playstore.png │ │ │ ├── search.png │ │ │ ├── settings.png │ │ │ ├── sheets.png │ │ │ ├── slides.png │ │ │ ├── ssapps.png │ │ │ ├── ssbrowser.png │ │ │ ├── sscalculator.png │ │ │ ├── sscalender.png │ │ │ ├── sscamera.png │ │ │ ├── ssclock.png │ │ │ ├── sscontacts.png │ │ │ ├── ssfiles.png │ │ │ ├── ssgallery.png │ │ │ ├── sshealth.png │ │ │ ├── sskeyboard.png │ │ │ ├── ssmail.png │ │ │ ├── ssmember.png │ │ │ ├── ssmessages.png │ │ │ ├── ssmusic.png │ │ │ ├── ssnote.png │ │ │ ├── ssnotes.png │ │ │ ├── ssphone.png │ │ │ ├── ssradio.png │ │ │ ├── ssreader.png │ │ │ ├── ssrecorder.png │ │ │ ├── ssthemes.png │ │ │ ├── sstranslate.png │ │ │ ├── ssvideo.png │ │ │ ├── translate.png │ │ │ ├── twitter.png │ │ │ ├── unescape.png │ │ │ ├── whatsapp.png │ │ │ └── youtube.png │ │ ├── other │ │ │ ├── fashion.svg │ │ │ ├── gaming.svg │ │ │ ├── learning.svg │ │ │ ├── music.svg │ │ │ ├── news.svg │ │ │ └── trending.svg │ │ └── weather │ │ │ ├── 1Ta.png │ │ │ ├── 2Hq.png │ │ │ ├── 4Vm.png │ │ │ ├── 7ui.png │ │ │ ├── 85l.png │ │ │ ├── 8G7.png │ │ │ ├── 8TA.png │ │ │ ├── 9fa.png │ │ │ ├── 9gN.png │ │ │ ├── C24.png │ │ │ ├── CgN.png │ │ │ ├── Dvd.png │ │ │ ├── FPr.png │ │ │ ├── Hh4.png │ │ │ ├── IWR.png │ │ │ ├── Lg3.png │ │ │ ├── Ng1.png │ │ │ ├── Nid.png │ │ │ ├── PhL.png │ │ │ ├── Phd.png │ │ │ ├── Ptg.png │ │ │ ├── Q4y.png │ │ │ ├── S1C.png │ │ │ ├── XY4.png │ │ │ ├── Y2e.png │ │ │ ├── _hB.png │ │ │ ├── anK.png │ │ │ ├── bkp.png │ │ │ ├── clear-sky.png │ │ │ ├── e0j.png │ │ │ ├── eek.png │ │ │ ├── fUk.png │ │ │ ├── h2u.png │ │ │ ├── hR3.png │ │ │ ├── jPl.png │ │ │ ├── jrS.png │ │ │ ├── npx.png │ │ │ ├── o6n.png │ │ │ ├── oQJ.png │ │ │ ├── ptX.png │ │ │ ├── qix.png │ │ │ ├── qlU.png │ │ │ ├── sTb.png │ │ │ ├── ta1.png │ │ │ ├── tg9.png │ │ │ ├── v01.png │ │ │ ├── wOB.png │ │ │ ├── wZu.png │ │ │ ├── yA7.png │ │ │ └── z0v.png │ └── wallpaper │ │ ├── default.jpg │ │ └── default2.jpg ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── robots.txt └── site.webmanifest ├── src-tauri ├── .gitignore ├── Cargo.lock ├── Cargo.toml ├── build.rs ├── icons │ ├── 128x128.png │ ├── 128x128@2x.png │ ├── 32x32.png │ ├── Square107x107Logo.png │ ├── Square142x142Logo.png │ ├── Square150x150Logo.png │ ├── Square284x284Logo.png │ ├── Square30x30Logo.png │ ├── Square310x310Logo.png │ ├── Square44x44Logo.png │ ├── Square71x71Logo.png │ ├── Square89x89Logo.png │ ├── StoreLogo.png │ ├── icon.icns │ ├── icon.ico │ └── icon.png ├── src │ └── main.rs └── tauri.conf.json ├── src ├── App.css ├── App.js ├── components │ ├── background │ │ ├── back.scss │ │ └── index.js │ ├── bottomnav │ │ ├── bottom.scss │ │ └── index.js │ ├── icons.js │ ├── main.scss │ ├── quickpanel │ │ ├── index.js │ │ └── qkpanel.scss │ ├── statusbar.js │ ├── utils.js │ └── widgets │ │ ├── index.js │ │ └── widget.scss ├── containers │ ├── apps │ │ ├── google │ │ │ ├── google.scss │ │ │ ├── index.js │ │ │ └── news.json │ │ ├── index.js │ │ ├── index.scss │ │ ├── playstore │ │ │ └── index.js │ │ ├── themes.scss │ │ ├── whatsapp │ │ │ ├── elements │ │ │ │ ├── extra.scss │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ └── whatsapp.scss │ │ └── youtube │ │ │ ├── extra.js │ │ │ ├── extra.scss │ │ │ ├── index.js │ │ │ └── youtube.scss │ └── home │ │ ├── home.scss │ │ └── index.js ├── index.css ├── index.js ├── logo.svg ├── service-worker.js ├── serviceWorkerRegistration.js └── store │ ├── actions │ ├── data │ │ ├── apps.js │ │ ├── preset.js │ │ ├── whatsapp.json │ │ └── youtube.json │ ├── index.js │ └── prototypes.js │ ├── index.js │ └── reducers │ ├── apps │ ├── whatsapp.js │ └── youtube.js │ ├── global.js │ ├── home.js │ ├── quickpanel.js │ ├── wallpaper.js │ └── widget.js ├── tailwind.config.js └── timeline.md /.env: -------------------------------------------------------------------------------- 1 | PUBLIC_URL=. -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | .github/* @andrewstech 2 | src-tauri/* @andrewstech 3 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | custom: https://www.buymeacoffee.com/blueedgetechno 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.yml: -------------------------------------------------------------------------------- 1 | name: Bug Report 2 | description: File a bug report 3 | title: "[Bug]: " 4 | labels: ["bug"] 5 | assignees: 6 | - android69420 7 | body: 8 | - type: markdown 9 | attributes: 10 | value: | 11 | Thanks for taking the time to fill out this bug report! 12 | - type: textarea 13 | id: what-happened 14 | attributes: 15 | label: What happened? 16 | description: Also tell us, what did you expect to happen? 17 | placeholder: Tell us what you see! 18 | value: "A bug happened!" 19 | validations: 20 | required: true 21 | - type: textarea 22 | id: Reproduce 23 | attributes: 24 | label: To reproduce the behavior? 25 | description: Steps to reproduce the behavior. 26 | placeholder: opened store 27 | value: "reproduce!" 28 | validations: 29 | required: true 30 | - type: dropdown 31 | id: browsers 32 | attributes: 33 | label: What browser are you seeing the problem on? 34 | multiple: false 35 | options: 36 | - Firefox 37 | - Chrome 38 | - Safari 39 | - Microsoft Edge 40 | - Other Browser 41 | validations: 42 | required: true 43 | 44 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: / 5 | schedule: 6 | interval: daily 7 | 8 | - package-ecosystem: github-actions 9 | directory: / 10 | schedule: 11 | interval: daily 12 | -------------------------------------------------------------------------------- /.github/workflows/Build-Deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build & Deploy 2 | 3 | on: 4 | push: 5 | branches: [master] 6 | workflow_dispatch: 7 | 8 | jobs: 9 | Build-Deploy: 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - name: Checkout code 14 | uses: actions/checkout@v3 15 | 16 | - name: Set up Node.js 17 | uses: actions/setup-node@v3 18 | with: 19 | node-version: 16 20 | cache: npm 21 | 22 | - name: Build 23 | run: npm ci && npm run ghbuild 24 | 25 | - name: Deploy to gh-pages 26 | uses: peaceiris/actions-gh-pages@v3 27 | with: 28 | github_token: ${{ secrets.GITHUB_TOKEN }} 29 | cname: android.blueedge.me 30 | publish_dir: ./build 31 | -------------------------------------------------------------------------------- /.github/workflows/Issue-text.yml: -------------------------------------------------------------------------------- 1 | name: issue-text 2 | 3 | on: 4 | issues: 5 | types: [opened] 6 | 7 | jobs: 8 | comment: 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - uses: ben-z/actions-comment-on-issue@1.0.2 13 | with: 14 | message: "Hey, thank you for creating an issue. We will normally respond within 24 hours." 15 | GITHUB_TOKEN: ${{ secrets.BOT }} 16 | 17 | - uses: stefanbuck/github-issue-parser@v2 18 | id: issue-parser 19 | with: 20 | template-path: .github/ISSUE_TEMPLATE/bug_report.yml 21 | 22 | - run: echo '${{ steps.issue-parser.outputs.jsonString }}' 23 | 24 | - run: echo ${{ steps.issue-parser.outputs.issueparser_what_browser_are_you_seeing_the_problem_on }} 25 | 26 | - uses: actions-ecosystem/action-add-labels@v1 27 | with: 28 | labels: ${{ steps.issue-parser.outputs.issueparser_what_browser_are_you_seeing_the_problem_on }} 29 | github_token: ${{ secrets.BOT }} 30 | 31 | -------------------------------------------------------------------------------- /.github/workflows/PR-Preview.yml: -------------------------------------------------------------------------------- 1 | name: Generate PR Preview 2 | 3 | on: 4 | pull_request_target: 5 | types: [opened, reopened, synchronize] 6 | 7 | jobs: 8 | Build: 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - uses: peter-evans/create-or-update-comment@v2 13 | id: couc 14 | with: 15 | body: ⌛ Deploy Preview - Build in Progress 16 | issue-number: ${{ github.event.pull_request.number }} 17 | token: ${{ secrets.BOT }} 18 | 19 | - uses: actions/checkout@v3 20 | with: 21 | ref: refs/pull/${{ github.event.pull_request.number }}/merge 22 | 23 | - uses: actions/setup-node@v3 24 | with: 25 | node-version: 16 26 | 27 | - name: create repo 28 | if: ${{ github.event.action == 'opened'}} 29 | run: gh repo create blueDroidBot/${{ github.event.pull_request.number }} --public 30 | env: 31 | GITHUB_TOKEN: ${{ secrets.BOT }} 32 | 33 | - name: Build 34 | run: npm ci && npm run ghbuild 35 | 36 | - uses: peaceiris/actions-gh-pages@v3 37 | with: 38 | personal_token: ${{ secrets.BOT }} 39 | publish_dir: ./build 40 | external_repository: blueDroidBot/${{ github.event.pull_request.number }} 41 | 42 | - name: Sleep to make sure page gets updated 43 | run: sleep 1m 44 | shell: bash 45 | 46 | - name: comment Preview Ready 47 | uses: peter-evans/create-or-update-comment@v2 48 | with: 49 | body: | 50 | ✔️ Deploy Preview for Ready! 51 | 😎 Browse the preview: https://android-preview.blueedge.me/${{ github.event.pull_request.number }} ! 52 | 🔍 Inspect the deploy log: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }} 53 | comment-id: ${{ steps.couc.outputs.comment-id }} 54 | edit-mode: replace 55 | token: ${{ secrets.BOT }} 56 | 57 | - if: ${{ failure() }} 58 | uses: peter-evans/create-or-update-comment@v2 59 | with: 60 | body: | 61 | ❌ Deploy Preview failed 62 | 🔍 Inspect the deploy log: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }} 63 | comment-id: ${{ steps.couc.outputs.comment-id }} 64 | edit-mode: replace 65 | token: ${{ secrets.BOT }} 66 | -------------------------------------------------------------------------------- /.github/workflows/desktop.yml: -------------------------------------------------------------------------------- 1 | name: publish 2 | on: 3 | issues: 4 | types: 5 | - labeled 6 | jobs: 7 | publish-tauri: 8 | if: github.event.label.name == 'desktop-release' 9 | strategy: 10 | fail-fast: false 11 | matrix: 12 | platform: [macos-latest, ubuntu-latest, windows-latest] 13 | 14 | runs-on: ${{ matrix.platform }} 15 | env: 16 | CI: false 17 | steps: 18 | - uses: actions/checkout@v3 19 | - name: setup node 20 | uses: actions/setup-node@v3 21 | with: 22 | node-version: 12 23 | cache: npm 24 | 25 | - name: git http 26 | run: | 27 | git config --global url."https://github.com/".insteadOf git@github.com: 28 | git config --global url."https://".insteadOf git:// 29 | 30 | - name: install Rust stable 31 | uses: actions-rs/toolchain@v1 32 | with: 33 | toolchain: stable 34 | 35 | - uses: Swatinem/rust-cache@v1 36 | with: 37 | sharedKey: ${{ matrix.platform }} 38 | 39 | - name: install webkit2gtk (ubuntu only) 40 | if: matrix.platform == 'ubuntu-latest' 41 | run: | 42 | sudo apt-get update 43 | sudo apt-get install -y webkit2gtk-4.0 44 | 45 | - name: CI 46 | run: | 47 | npm ci 48 | 49 | - name: install app dependencies and build it 50 | run: npm run build 51 | - uses: tauri-apps/tauri-action@v0 52 | env: 53 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 54 | TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }} 55 | TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }} 56 | with: 57 | tagName: __VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version 58 | releaseName: "androidInReact v__VERSION__" 59 | releaseBody: ${{ github.event.issue.body }} 60 | releaseDraft: false 61 | prerelease: false 62 | -------------------------------------------------------------------------------- /.github/workflows/package-lock.yml: -------------------------------------------------------------------------------- 1 | name: "Re generate the package-lock file" 2 | on: 3 | workflow_dispatch: 4 | 5 | jobs: 6 | rebuild: 7 | name: reBuild 8 | runs-on: windows-latest 9 | 10 | steps: 11 | - name: Checkout code 12 | uses: actions/checkout@v3 13 | 14 | - name: Install Node.js 15 | uses: actions/setup-node@v1 16 | with: 17 | node-version: '16.6.1' 18 | 19 | - name: remove old one 20 | run: rm package-lock.json 21 | 22 | - name: build new one 23 | run: npm install 24 | env: 25 | CI: false 26 | 27 | - name: cpr 28 | uses: peter-evans/create-pull-request@v4 29 | with: 30 | token: ${{ secrets.GITHUB_TOKEN }} 31 | commit-message: Update package-lock 32 | title: Update package-lock 33 | body: Update package-lock 34 | -------------------------------------------------------------------------------- /.github/workflows/virus.yml: -------------------------------------------------------------------------------- 1 | name: released 2 | 3 | on: 4 | release: 5 | workflow_dispatch: 6 | 7 | jobs: 8 | virustotal: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: VirusTotal Scan 12 | uses: crazy-max/ghaction-virustotal@v2 13 | with: 14 | vt_api_key: ${{ secrets.VT_API_KEY }} 15 | update_release_body: true 16 | files: | 17 | .msi$ 18 | .exe$ 19 | .deb$ 20 | -------------------------------------------------------------------------------- /.github/workflows/winget.yml: -------------------------------------------------------------------------------- 1 | name: Publish to WinGet 2 | on: 3 | release: 4 | types: [released] 5 | jobs: 6 | publish: 7 | runs-on: windows-latest # action can only be run on windows 8 | steps: 9 | - uses: vedantmgoyal2009/winget-releaser@latest 10 | with: 11 | identifier: blueedge.android11react 12 | token: ${{ secrets.BOT }} 13 | -------------------------------------------------------------------------------- /.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 | .env 8 | todo* 9 | 10 | # testing 11 | /coverage 12 | 13 | # production 14 | /build 15 | /target/ 16 | WixTools 17 | *.py 18 | rough* 19 | 20 | # misc 21 | .DS_Store 22 | .env.local 23 | .env.development.local 24 | .env.test.local 25 | .env.production.local 26 | 27 | npm-debug.log* 28 | yarn-debug.log* 29 | yarn-error.log* 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Legal Code 2 | 3 | CC0 1.0 Universal 4 | 5 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE 6 | LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN 7 | ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS 8 | INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES 9 | REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS 10 | PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM 11 | THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED 12 | HEREUNDER. 13 | 14 | Statement of Purpose 15 | 16 | The laws of most jurisdictions throughout the world automatically confer 17 | exclusive Copyright and Related Rights (defined below) upon the creator 18 | and subsequent owner(s) (each and all, an "owner") of an original work of 19 | authorship and/or a database (each, a "Work"). 20 | 21 | Certain owners wish to permanently relinquish those rights to a Work for 22 | the purpose of contributing to a commons of creative, cultural and 23 | scientific works ("Commons") that the public can reliably and without fear 24 | of later claims of infringement build upon, modify, incorporate in other 25 | works, reuse and redistribute as freely as possible in any form whatsoever 26 | and for any purposes, including without limitation commercial purposes. 27 | These owners may contribute to the Commons to promote the ideal of a free 28 | culture and the further production of creative, cultural and scientific 29 | works, or to gain reputation or greater distribution for their Work in 30 | part through the use and efforts of others. 31 | 32 | For these and/or other purposes and motivations, and without any 33 | expectation of additional consideration or compensation, the person 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she 35 | is an owner of Copyright and Related Rights in the Work, voluntarily 36 | elects to apply CC0 to the Work and publicly distribute the Work under its 37 | terms, with knowledge of his or her Copyright and Related Rights in the 38 | Work and the meaning and intended legal effect of CC0 on those rights. 39 | 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be 41 | protected by copyright and related or neighboring rights ("Copyright and 42 | Related Rights"). Copyright and Related Rights include, but are not 43 | limited to, the following: 44 | 45 | i. the right to reproduce, adapt, distribute, perform, display, 46 | communicate, and translate a Work; 47 | ii. moral rights retained by the original author(s) and/or performer(s); 48 | iii. publicity and privacy rights pertaining to a person's image or 49 | likeness depicted in a Work; 50 | iv. rights protecting against unfair competition in regards to a Work, 51 | subject to the limitations in paragraph 4(a), below; 52 | v. rights protecting the extraction, dissemination, use and reuse of data 53 | in a Work; 54 | vi. database rights (such as those arising under Directive 96/9/EC of the 55 | European Parliament and of the Council of 11 March 1996 on the legal 56 | protection of databases, and under any national implementation 57 | thereof, including any amended or successor version of such 58 | directive); and 59 | vii. other similar, equivalent or corresponding rights throughout the 60 | world based on applicable law or treaty, and any national 61 | implementations thereof. 62 | 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention 64 | of, applicable law, Affirmer hereby overtly, fully, permanently, 65 | irrevocably and unconditionally waives, abandons, and surrenders all of 66 | Affirmer's Copyright and Related Rights and associated claims and causes 67 | of action, whether now known or unknown (including existing as well as 68 | future claims and causes of action), in the Work (i) in all territories 69 | worldwide, (ii) for the maximum duration provided by applicable law or 70 | treaty (including future time extensions), (iii) in any current or future 71 | medium and for any number of copies, and (iv) for any purpose whatsoever, 72 | including without limitation commercial, advertising or promotional 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each 74 | member of the public at large and to the detriment of Affirmer's heirs and 75 | successors, fully intending that such Waiver shall not be subject to 76 | revocation, rescission, cancellation, termination, or any other legal or 77 | equitable action to disrupt the quiet enjoyment of the Work by the public 78 | as contemplated by Affirmer's express Statement of Purpose. 79 | 80 | 3. Public License Fallback. Should any part of the Waiver for any reason 81 | be judged legally invalid or ineffective under applicable law, then the 82 | Waiver shall be preserved to the maximum extent permitted taking into 83 | account Affirmer's express Statement of Purpose. In addition, to the 84 | extent the Waiver is so judged Affirmer hereby grants to each affected 85 | person a royalty-free, non transferable, non sublicensable, non exclusive, 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the 88 | maximum duration provided by applicable law or treaty (including future 89 | time extensions), (iii) in any current or future medium and for any number 90 | of copies, and (iv) for any purpose whatsoever, including without 91 | limitation commercial, advertising or promotional purposes (the 92 | "License"). The License shall be deemed effective as of the date CC0 was 93 | applied by Affirmer to the Work. Should any part of the License for any 94 | reason be judged legally invalid or ineffective under applicable law, such 95 | partial invalidity or ineffectiveness shall not invalidate the remainder 96 | of the License, and in such case Affirmer hereby affirms that he or she 97 | will not (i) exercise any of his or her remaining Copyright and Related 98 | Rights in the Work or (ii) assert any associated claims and causes of 99 | action with respect to the Work, in either case contrary to Affirmer's 100 | express Statement of Purpose. 101 | 102 | 4. Limitations and Disclaimers. 103 | 104 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 105 | surrendered, licensed or otherwise affected by this document. 106 | b. Affirmer offers the Work as-is and makes no representations or 107 | warranties of any kind concerning the Work, express, implied, 108 | statutory or otherwise, including without limitation warranties of 109 | title, merchantability, fitness for a particular purpose, non 110 | infringement, or the absence of latent or other defects, accuracy, or 111 | the present or absence of errors, whether or not discoverable, all to 112 | the greatest extent permissible under applicable law. 113 | c. Affirmer disclaims responsibility for clearing rights of other persons 114 | that may apply to the Work or any use thereof, including without 115 | limitation any person's Copyright and Related Rights in the Work. 116 | Further, Affirmer disclaims responsibility for obtaining any necessary 117 | consents, permissions or other rights required for any use of the 118 | Work. 119 | d. Affirmer understands and acknowledges that Creative Commons is not a 120 | party to this document and has no duty or obligation with respect to 121 | this CC0 or use of the Work. 122 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Android on Web 2 | 3 | [![Follow me](https://img.shields.io/github/followers/blueedgetechno?label=follow%20me&style=social)](https://github.com/blueedgetechno) 4 | [![Follow Twitter](https://img.shields.io/twitter/follow/blueedgetechno?label=Follow%20me&style=social)](https://twitter.com/blueedgetechno) 5 | [![Join](https://img.shields.io/discord/868499076432408627.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/NcjaNdwtnR) 6 | [![coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/blueedgetechno) 7 | 8 | An open-source project that aims to provide an indistinguishably accurate experience of Android on web. The project leverages different JavaScript Web APIs to imitates the Android functionalities and CSS animations to bring life into it. 9 | 10 | ------------ 11 | #### Visit the Live Application🌈:   [android.blueedge.me](https://android.blueedge.me) 12 | 13 | ## Gallery 14 | ![img1](public/gall1.png) 15 | 16 | ![img1](public/gall2.png) 17 | 18 | #### Visit the Live Application🌈:   [android.blueedge.me](https://android.blueedge.me) 19 | 20 | # Stack 21 | 22 | - Framework - React (^17.0.2) + Redux 23 | - Component/UI Library - Material UI 24 | - Styling Solution - SCSS and CSS Modules (+ tailwind). 25 | - Icons - fontAwesome/mui icons/custom svg icons 26 | 27 | # Features 28 | - [x] Home page, App icons 29 | - [x] Bottom Navigation bar 30 | - [x] Widgets like google search 31 | - [x] Calendar, Date, Clock Widgets 32 | - [x] Quick menu from slide up 33 | - [x] Recent menu and apps 34 | - [x] WhatsApp Application 35 | - [x] YouTube Application 36 | - [x] Google Search App 37 | 38 | # Dev Features 39 | - [x] Flexible and Scalable 40 | - [x] Easy to add custom Applications 41 | - [x] Easy to bind with existing system 42 | - [x] Built-In Navigation system per app 43 | - [x] Modular Applications and their styling 44 | - [x] Proper state management with Redux 45 | 46 | ## FAQ 47 | 48 | 1. Is this real android OS? 49 | - No, This is not a real operating system. It is just imitation of it with different technology. 50 | 51 | 52 | 2. How long did it take? 53 | - 6 weeks (without gaps) 54 | 55 | 56 | 3. Have you ran into problems during development? 57 | - Duhh. More than dozen big ones and hundreds of small problems ([more info](timeline.md)). 58 | 59 | 60 | 4. Can I contribute? 61 | - Yes, you can! Open an issue, create a pull request, head over to [discussions](https://github.com/blueedgetechno/androidInReact/discussions) or join the [discord](https://discord.gg/NcjaNdwtnR). 62 | 63 | 64 | 5. Where did you get the inspiration from, if you have? 65 | - I got the inspired to make the project on the suggestion of [Derry Shribman](https://github.com/xderry). 66 | 67 | 68 | 6. Why do JavaScript developers wear glasses? 69 | - Because they cannot C# (see sharp).     ![answer](public/hehe.jpg) 70 | 71 | 72 | ## Online Deployment 73 | 74 | [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy) 75 | 76 | [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template?template=https%3A%2F%2Fgithub.com%2Fblueedgetechno%2FandroidInReact&envs=PORT&PORTDesc=Port+of+the+application&PORTDefault=3000) 77 | 78 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/blueedgetechno/androidInReact) 79 | 80 | 81 | ## Acknowledgements 82 | 83 | - [Derry Shribman](https://github.com/xderry) 84 | - [React-hammerjs](https://github.com/JedWatson/react-hammerjs) 85 | - [React-slick](https://github.com/akiran/react-slick) 86 | 87 | 88 | ## Contributors 89 | [![contributors](https://contrib.rocks/image?repo=blueedgetechno/androidInReact)](https://github.com/blueedgetechno/androidInReact/graphs/contributors) 90 | 91 | 92 | ## License 93 | 94 | ⚖️ CC0-1.0 License 95 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src" 4 | }, 5 | "include": ["src"] 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Android11React", 3 | "description": "Android made in React", 4 | "repository": "https://github.com/blueedgetechno/androidInReact", 5 | "version": "0.0.1", 6 | "private": true, 7 | "dependencies": { 8 | "@emotion/react": "^11.9.0", 9 | "@emotion/styled": "^11.8.1", 10 | "@fortawesome/fontawesome-svg-core": "^6.1.1", 11 | "@fortawesome/free-regular-svg-icons": "^6.1.1", 12 | "@fortawesome/free-solid-svg-icons": "^6.1.1", 13 | "@fortawesome/react-fontawesome": "^0.1.18", 14 | "@mui/icons-material": "^5.6.2", 15 | "@mui/lab": "^5.0.0-alpha.83", 16 | "@mui/material": "^5.8.1", 17 | "@reduxjs/toolkit": "^1.8.2", 18 | "@sentry/react": "^6.19.7", 19 | "@sentry/tracing": "^6.19.7", 20 | "@tauri-apps/api": "^1.0.0-rc.6", 21 | "@win11react/react-hammerjs": "1.0.2", 22 | "axios": "^0.27.2", 23 | "color-parse": "^1.4.2", 24 | "color-rgba": "^2.4.0", 25 | "react": "^18.1.0", 26 | "react-calendar": "^3.7.0", 27 | "react-dom": "^18.1.0", 28 | "react-player": "^2.10.1", 29 | "react-redux": "^8.0.2", 30 | "react-scripts": "^5.0.1", 31 | "react-slick": "^0.29.0", 32 | "redux": "^4.2.0", 33 | "redux-thunk": "^2.4.1", 34 | "slick-carousel": "^1.8.1" 35 | }, 36 | "scripts": { 37 | "start": "react-scripts start", 38 | "build": "react-scripts build", 39 | "ghbuild": "CI=false react-scripts build", 40 | "test": "react-scripts test", 41 | "eject": "react-scripts eject", 42 | "tauri": "tauri" 43 | }, 44 | "eslintConfig": { 45 | "extends": [ 46 | "react-app", 47 | "react-app/jest" 48 | ] 49 | }, 50 | "browserslist": { 51 | "production": [ 52 | ">0.2%", 53 | "not dead", 54 | "not op_mini all" 55 | ], 56 | "development": [ 57 | "last 1 chrome version", 58 | "last 1 firefox version", 59 | "last 1 safari version" 60 | ] 61 | }, 62 | "devDependencies": { 63 | "@tauri-apps/cli": "^1.0.0-rc.12", 64 | "node-sass": "^7.0.1", 65 | "tailwindcss": "^3.0.24" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 2 | -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/favicon.ico -------------------------------------------------------------------------------- /public/gall1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/gall1.png -------------------------------------------------------------------------------- /public/gall2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/gall2.png -------------------------------------------------------------------------------- /public/hehe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/hehe.jpg -------------------------------------------------------------------------------- /public/img/asset/other/googlename.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/other/googlename.png -------------------------------------------------------------------------------- /public/img/asset/whatsapp/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/background.png -------------------------------------------------------------------------------- /public/img/asset/whatsapp/chats/abstract.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/chats/abstract.jpg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/chats/anon.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/chats/anon.jpeg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/chats/cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/chats/cat.jpg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/chats/disneyland.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/chats/disneyland.jpg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/chats/eiffel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/chats/eiffel.jpg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/chats/krishna.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/chats/krishna.jpg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/chats/meme.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/chats/meme.mp4 -------------------------------------------------------------------------------- /public/img/asset/whatsapp/chats/nyqueen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/chats/nyqueen.jpg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/chats/octo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/chats/octo.jpg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/chats/octo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/chats/octo2.jpg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/chats/sydney.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/chats/sydney.jpg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/chats/unescape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/chats/unescape.jpg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/andrew.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/andrew.png -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/apoc.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/apoc.jfif -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/ava.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/ava.jfif -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/ceaser.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/ceaser.jfif -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/check.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/check.jfif -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/echo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/echo.png -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/fine.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/fine.jfif -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/fire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/fire.png -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/hero.png -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/liam.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/liam.jfif -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/lion.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/lion.jfif -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/mac.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/mac.jpg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/main.jpg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/pic.jpg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/pose.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/pose.jfif -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/real.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/real.jfif -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/siri.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/siri.png -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/sophia.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/sophia.jpg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/tony.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/tony.jpg -------------------------------------------------------------------------------- /public/img/asset/whatsapp/pfp/viva.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/whatsapp/pfp/viva.jfif -------------------------------------------------------------------------------- /public/img/asset/youtube/namelogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/youtube/namelogo.png -------------------------------------------------------------------------------- /public/img/asset/youtube/pfp/blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/youtube/pfp/blue.png -------------------------------------------------------------------------------- /public/img/asset/youtube/pfp/fineart.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/youtube/pfp/fineart.jpg -------------------------------------------------------------------------------- /public/img/asset/youtube/pfp/kurz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/youtube/pfp/kurz.jpg -------------------------------------------------------------------------------- /public/img/asset/youtube/pfp/melodysheep.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/youtube/pfp/melodysheep.jpg -------------------------------------------------------------------------------- /public/img/asset/youtube/pfp/zach.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/youtube/pfp/zach.jpg -------------------------------------------------------------------------------- /public/img/asset/youtube/thumbs/aliens.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/youtube/thumbs/aliens.jpg -------------------------------------------------------------------------------- /public/img/asset/youtube/thumbs/charcoal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/youtube/thumbs/charcoal.jpg -------------------------------------------------------------------------------- /public/img/asset/youtube/thumbs/curves.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/asset/youtube/thumbs/curves.jpg -------------------------------------------------------------------------------- /public/img/blue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/blue.jpg -------------------------------------------------------------------------------- /public/img/icon/apps/assistant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/assistant.png -------------------------------------------------------------------------------- /public/img/icon/apps/bg/whatsapp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/bg/whatsapp.png -------------------------------------------------------------------------------- /public/img/icon/apps/buyme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/buyme.png -------------------------------------------------------------------------------- /public/img/icon/apps/calender.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/calender.png -------------------------------------------------------------------------------- /public/img/icon/apps/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/chrome.png -------------------------------------------------------------------------------- /public/img/icon/apps/classroom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/classroom.png -------------------------------------------------------------------------------- /public/img/icon/apps/contacts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/contacts.png -------------------------------------------------------------------------------- /public/img/icon/apps/discord.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/discord.png -------------------------------------------------------------------------------- /public/img/icon/apps/docs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/docs.png -------------------------------------------------------------------------------- /public/img/icon/apps/drive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/drive.png -------------------------------------------------------------------------------- /public/img/icon/apps/duo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/duo.png -------------------------------------------------------------------------------- /public/img/icon/apps/earth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/earth.png -------------------------------------------------------------------------------- /public/img/icon/apps/forms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/forms.png -------------------------------------------------------------------------------- /public/img/icon/apps/gboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/gboard.png -------------------------------------------------------------------------------- /public/img/icon/apps/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/github.png -------------------------------------------------------------------------------- /public/img/icon/apps/gmail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/gmail.png -------------------------------------------------------------------------------- /public/img/icon/apps/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/google.png -------------------------------------------------------------------------------- /public/img/icon/apps/googlefit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/googlefit.png -------------------------------------------------------------------------------- /public/img/icon/apps/googlepay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/googlepay.png -------------------------------------------------------------------------------- /public/img/icon/apps/keep.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/keep.png -------------------------------------------------------------------------------- /public/img/icon/apps/maps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/maps.png -------------------------------------------------------------------------------- /public/img/icon/apps/meet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/meet.png -------------------------------------------------------------------------------- /public/img/icon/apps/messages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/messages.png -------------------------------------------------------------------------------- /public/img/icon/apps/mic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/mic.png -------------------------------------------------------------------------------- /public/img/icon/apps/news.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/news.png -------------------------------------------------------------------------------- /public/img/icon/apps/photos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/photos.png -------------------------------------------------------------------------------- /public/img/icon/apps/playbooks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/playbooks.png -------------------------------------------------------------------------------- /public/img/icon/apps/playgames.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/playgames.png -------------------------------------------------------------------------------- /public/img/icon/apps/playmovies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/playmovies.png -------------------------------------------------------------------------------- /public/img/icon/apps/playstore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/playstore.png -------------------------------------------------------------------------------- /public/img/icon/apps/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/search.png -------------------------------------------------------------------------------- /public/img/icon/apps/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/settings.png -------------------------------------------------------------------------------- /public/img/icon/apps/sheets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/sheets.png -------------------------------------------------------------------------------- /public/img/icon/apps/slides.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/slides.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssapps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssapps.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssbrowser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssbrowser.png -------------------------------------------------------------------------------- /public/img/icon/apps/sscalculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/sscalculator.png -------------------------------------------------------------------------------- /public/img/icon/apps/sscalender.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/sscalender.png -------------------------------------------------------------------------------- /public/img/icon/apps/sscamera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/sscamera.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssclock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssclock.png -------------------------------------------------------------------------------- /public/img/icon/apps/sscontacts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/sscontacts.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssfiles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssfiles.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssgallery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssgallery.png -------------------------------------------------------------------------------- /public/img/icon/apps/sshealth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/sshealth.png -------------------------------------------------------------------------------- /public/img/icon/apps/sskeyboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/sskeyboard.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssmail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssmail.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssmember.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssmember.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssmessages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssmessages.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssmusic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssmusic.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssnote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssnote.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssnotes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssnotes.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssphone.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssradio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssradio.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssreader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssreader.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssrecorder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssrecorder.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssthemes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssthemes.png -------------------------------------------------------------------------------- /public/img/icon/apps/sstranslate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/sstranslate.png -------------------------------------------------------------------------------- /public/img/icon/apps/ssvideo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/ssvideo.png -------------------------------------------------------------------------------- /public/img/icon/apps/translate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/translate.png -------------------------------------------------------------------------------- /public/img/icon/apps/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/twitter.png -------------------------------------------------------------------------------- /public/img/icon/apps/unescape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/unescape.png -------------------------------------------------------------------------------- /public/img/icon/apps/whatsapp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/whatsapp.png -------------------------------------------------------------------------------- /public/img/icon/apps/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/apps/youtube.png -------------------------------------------------------------------------------- /public/img/icon/other/fashion.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icon/other/gaming.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icon/other/learning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icon/other/music.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icon/other/news.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icon/other/trending.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icon/weather/1Ta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/1Ta.png -------------------------------------------------------------------------------- /public/img/icon/weather/2Hq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/2Hq.png -------------------------------------------------------------------------------- /public/img/icon/weather/4Vm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/4Vm.png -------------------------------------------------------------------------------- /public/img/icon/weather/7ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/7ui.png -------------------------------------------------------------------------------- /public/img/icon/weather/85l.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/85l.png -------------------------------------------------------------------------------- /public/img/icon/weather/8G7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/8G7.png -------------------------------------------------------------------------------- /public/img/icon/weather/8TA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/8TA.png -------------------------------------------------------------------------------- /public/img/icon/weather/9fa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/9fa.png -------------------------------------------------------------------------------- /public/img/icon/weather/9gN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/9gN.png -------------------------------------------------------------------------------- /public/img/icon/weather/C24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/C24.png -------------------------------------------------------------------------------- /public/img/icon/weather/CgN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/CgN.png -------------------------------------------------------------------------------- /public/img/icon/weather/Dvd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/Dvd.png -------------------------------------------------------------------------------- /public/img/icon/weather/FPr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/FPr.png -------------------------------------------------------------------------------- /public/img/icon/weather/Hh4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/Hh4.png -------------------------------------------------------------------------------- /public/img/icon/weather/IWR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/IWR.png -------------------------------------------------------------------------------- /public/img/icon/weather/Lg3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/Lg3.png -------------------------------------------------------------------------------- /public/img/icon/weather/Ng1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/Ng1.png -------------------------------------------------------------------------------- /public/img/icon/weather/Nid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/Nid.png -------------------------------------------------------------------------------- /public/img/icon/weather/PhL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/PhL.png -------------------------------------------------------------------------------- /public/img/icon/weather/Phd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/Phd.png -------------------------------------------------------------------------------- /public/img/icon/weather/Ptg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/Ptg.png -------------------------------------------------------------------------------- /public/img/icon/weather/Q4y.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/Q4y.png -------------------------------------------------------------------------------- /public/img/icon/weather/S1C.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/S1C.png -------------------------------------------------------------------------------- /public/img/icon/weather/XY4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/XY4.png -------------------------------------------------------------------------------- /public/img/icon/weather/Y2e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/Y2e.png -------------------------------------------------------------------------------- /public/img/icon/weather/_hB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/_hB.png -------------------------------------------------------------------------------- /public/img/icon/weather/anK.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/anK.png -------------------------------------------------------------------------------- /public/img/icon/weather/bkp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/bkp.png -------------------------------------------------------------------------------- /public/img/icon/weather/clear-sky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/clear-sky.png -------------------------------------------------------------------------------- /public/img/icon/weather/e0j.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/e0j.png -------------------------------------------------------------------------------- /public/img/icon/weather/eek.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/eek.png -------------------------------------------------------------------------------- /public/img/icon/weather/fUk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/fUk.png -------------------------------------------------------------------------------- /public/img/icon/weather/h2u.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/h2u.png -------------------------------------------------------------------------------- /public/img/icon/weather/hR3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/hR3.png -------------------------------------------------------------------------------- /public/img/icon/weather/jPl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/jPl.png -------------------------------------------------------------------------------- /public/img/icon/weather/jrS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/jrS.png -------------------------------------------------------------------------------- /public/img/icon/weather/npx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/npx.png -------------------------------------------------------------------------------- /public/img/icon/weather/o6n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/o6n.png -------------------------------------------------------------------------------- /public/img/icon/weather/oQJ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/oQJ.png -------------------------------------------------------------------------------- /public/img/icon/weather/ptX.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/ptX.png -------------------------------------------------------------------------------- /public/img/icon/weather/qix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/qix.png -------------------------------------------------------------------------------- /public/img/icon/weather/qlU.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/qlU.png -------------------------------------------------------------------------------- /public/img/icon/weather/sTb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/sTb.png -------------------------------------------------------------------------------- /public/img/icon/weather/ta1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/ta1.png -------------------------------------------------------------------------------- /public/img/icon/weather/tg9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/tg9.png -------------------------------------------------------------------------------- /public/img/icon/weather/v01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/v01.png -------------------------------------------------------------------------------- /public/img/icon/weather/wOB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/wOB.png -------------------------------------------------------------------------------- /public/img/icon/weather/wZu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/wZu.png -------------------------------------------------------------------------------- /public/img/icon/weather/yA7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/yA7.png -------------------------------------------------------------------------------- /public/img/icon/weather/z0v.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/icon/weather/z0v.png -------------------------------------------------------------------------------- /public/img/wallpaper/default.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/wallpaper/default.jpg -------------------------------------------------------------------------------- /public/img/wallpaper/default2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/img/wallpaper/default2.jpg -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Android in React 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Android In React", 3 | "name": "Android on web", 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 | "author": { 22 | "name": "Blue Edge", 23 | "website": "https://blueedge.me", 24 | "github": "https://github.com/blueedgetechno", 25 | "source-repo": "https://github.com/blueedgetechno/androidInReact" 26 | }, 27 | "start_url": ".", 28 | "display": "standalone", 29 | "theme_color": "#fefefe", 30 | "background_color": "#ffffff" 31 | } 32 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [{ 5 | "src": "/android-chrome-192x192.png", 6 | "sizes": "192x192", 7 | "type": "image/png" 8 | }, { 9 | "src": "/android-chrome-512x512.png", 10 | "sizes": "512x512", 11 | "type": "image/png" 12 | }], 13 | "theme_color": "#ffffff", 14 | "background_color": "#ffffff", 15 | "display": "standalone" 16 | } 17 | -------------------------------------------------------------------------------- /src-tauri/.gitignore: -------------------------------------------------------------------------------- 1 | # Generated by Cargo 2 | # will have compiled files and executables 3 | /target/ 4 | WixTools 5 | -------------------------------------------------------------------------------- /src-tauri/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "app" 3 | version = "0.1.0" 4 | description = "A Tauri App" 5 | authors = ["you"] 6 | license = "" 7 | repository = "" 8 | default-run = "app" 9 | edition = "2021" 10 | rust-version = "1.57" 11 | 12 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 13 | 14 | [build-dependencies] 15 | tauri-build = { version = "1.0.0-rc.8", features = [] } 16 | 17 | [dependencies] 18 | serde_json = "1.0" 19 | serde = { version = "1.0", features = ["derive"] } 20 | tauri = { version = "1.0.0-rc.9", features = ["api-all", "system-tray", "updater"] } 21 | 22 | [features] 23 | # by default Tauri runs in production mode 24 | # when `tauri dev` runs it is executed with `cargo run --no-default-features` if `devPath` is an URL 25 | default = [ "custom-protocol" ] 26 | # this feature is used used for production builds where `devPath` points to the filesystem 27 | # DO NOT remove this 28 | custom-protocol = [ "tauri/custom-protocol" ] 29 | -------------------------------------------------------------------------------- /src-tauri/build.rs: -------------------------------------------------------------------------------- 1 | fn main() { 2 | tauri_build::build() 3 | } 4 | -------------------------------------------------------------------------------- /src-tauri/icons/128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/128x128.png -------------------------------------------------------------------------------- /src-tauri/icons/128x128@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/128x128@2x.png -------------------------------------------------------------------------------- /src-tauri/icons/32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/32x32.png -------------------------------------------------------------------------------- /src-tauri/icons/Square107x107Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/Square107x107Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square142x142Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/Square142x142Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square150x150Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/Square150x150Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square284x284Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/Square284x284Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square30x30Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/Square30x30Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square310x310Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/Square310x310Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square44x44Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/Square44x44Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square71x71Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/Square71x71Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square89x89Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/Square89x89Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/StoreLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/StoreLogo.png -------------------------------------------------------------------------------- /src-tauri/icons/icon.icns: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/icon.icns -------------------------------------------------------------------------------- /src-tauri/icons/icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/icon.ico -------------------------------------------------------------------------------- /src-tauri/icons/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/androidInReact/782e4189cad679e398c951f0faf26c5ef8a7bd62/src-tauri/icons/icon.png -------------------------------------------------------------------------------- /src-tauri/src/main.rs: -------------------------------------------------------------------------------- 1 | #![cfg_attr( 2 | all(not(debug_assertions), target_os = "windows"), 3 | windows_subsystem = "windows" 4 | )] 5 | 6 | fn main() { 7 | tauri::Builder::default() 8 | .run(tauri::generate_context!()) 9 | .expect("error while running tauri application"); 10 | } 11 | -------------------------------------------------------------------------------- /src-tauri/tauri.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "..\\node_modules/@tauri-apps/cli\\schema.json", 3 | "build": { 4 | "beforeBuildCommand": "", 5 | "beforeDevCommand": "", 6 | "devPath": "http://localhost:3000", 7 | "distDir": "../build" 8 | }, 9 | "package": { 10 | "productName": "Android11React", 11 | "version": "0.0.3" 12 | }, 13 | "tauri": { 14 | "allowlist": { 15 | "all": true 16 | }, 17 | "bundle": { 18 | "active": true, 19 | "category": "DeveloperTool", 20 | "copyright": "", 21 | "deb": { 22 | "depends": [] 23 | }, 24 | "externalBin": [], 25 | "icon": [ 26 | "icons/32x32.png", 27 | "icons/128x128.png", 28 | "icons/128x128@2x.png", 29 | "icons/icon.icns", 30 | "icons/icon.ico" 31 | ], 32 | "identifier": "com.blueedge.androidreact", 33 | "longDescription": "", 34 | "macOS": { 35 | "entitlements": null, 36 | "exceptionDomain": "", 37 | "frameworks": [], 38 | "providerShortName": null, 39 | "signingIdentity": null 40 | }, 41 | "resources": [], 42 | "shortDescription": "", 43 | "targets": "all", 44 | "windows": { 45 | "certificateThumbprint": null, 46 | "digestAlgorithm": "sha256", 47 | "timestampUrl": "" 48 | } 49 | }, 50 | "security": { 51 | "csp": null 52 | }, 53 | "updater": { 54 | "active": true, 55 | "endpoints": [ 56 | "https://github.win11react.com/update/android/" 57 | ], 58 | "dialog": true, 59 | "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDY1QzY4RkFENDQ3RDY2RDEKUldUUlpuMUVyWS9HWlY2RVVlTlU3OHpOSThOQUN1Vi95VWxvVFZ1dEYzZUxUUlJPWGdYMDFuRWsK" 60 | }, 61 | "windows": [ 62 | { 63 | "fullscreen": false, 64 | "height": 600, 65 | "resizable": true, 66 | "title": "Android11React", 67 | "width": 800 68 | } 69 | ] 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | --stbar-h: 2.4em; 3 | } 4 | 5 | *[data-ninja="true"] { 6 | pointer-events: none; 7 | } 8 | 9 | .uicon { 10 | position: relative; 11 | display: grid; 12 | place-items: center; 13 | overflow: hidden; 14 | } 15 | 16 | .text-xss { 17 | font-size: 0.64em; 18 | } 19 | 20 | .smooth-trans { 21 | transition: all 200ms ease-in-out; 22 | } 23 | 24 | .invert-true, 25 | img[data-invert="true"], 26 | svg[data-invert="true"], 27 | i[data-invert="true"] { 28 | filter: invert(1); 29 | } 30 | 31 | .rounded-true, 32 | img[data-rounded="true"], 33 | svg[data-rounded="true"], 34 | i[data-rounded="true"] { 35 | border-radius: 1000px; 36 | } 37 | 38 | .flip-true, 39 | img[data-flip="true"], 40 | svg[data-flip="true"], 41 | i[data-flip="true"] { 42 | transform: scale(-1, 1); 43 | } 44 | 45 | .uicon img { 46 | transform-origin: center; 47 | transition: 400ms ease-in-out; 48 | } 49 | 50 | .imageCont, .vidCont{ 51 | position: relative; 52 | display: grid; 53 | place-items: center; 54 | width: auto; 55 | height: auto; 56 | } 57 | 58 | .imageCont &[data-back="true"] { 59 | background-position: center; 60 | background-size: cover; 61 | } 62 | 63 | .imageCont img[data-free="false"] { 64 | max-width: 100%; 65 | max-height: 100%; 66 | } 67 | 68 | .imageCont.rounded { 69 | overflow: hidden; 70 | } 71 | 72 | .noscroll::-webkit-scrollbar { 73 | display: none; 74 | } 75 | 76 | .thinScroll::-webkit-scrollbar { 77 | width: 2px; 78 | height: 2px; 79 | background-color: transparent; 80 | } 81 | 82 | .medScroll::-webkit-scrollbar { 83 | width: 4px; 84 | height: 4px; 85 | background-color: transparent; 86 | } 87 | 88 | .thinScroll:hover::-webkit-scrollbar-thumb, 89 | .medScroll:hover::-webkit-scrollbar-thumb { 90 | background: rgba(32, 24, 148, 0.4); 91 | } 92 | 93 | .lightScroll:hover::-webkit-scrollbar-thumb { 94 | background: rgba(162, 159, 209, 0.4); 95 | } 96 | 97 | .thinScroll::-webkit-scrollbar-thumb { 98 | width: 2px; 99 | height: 2px; 100 | border-radius: 10px; 101 | background-color: transparent; 102 | } 103 | 104 | .medScroll::-webkit-scrollbar-thumb { 105 | width: 4px; 106 | height: 4px; 107 | border-radius: 10px; 108 | background-color: transparent; 109 | } 110 | 111 | .upbug::after { 112 | content: ""; 113 | position: absolute; 114 | left: 0; 115 | top: -2px; 116 | width: 100%; 117 | height: 4px; 118 | background: #128c7e; 119 | } 120 | 121 | .downbug::after { 122 | content: ""; 123 | position: absolute; 124 | z-index: 1; 125 | left: 0; 126 | bottom: -2px; 127 | width: 100%; 128 | height: 4px; 129 | background: #128c7e; 130 | } 131 | 132 | @media only screen and (min-width: 520px) { 133 | *{ 134 | /* cursor: url("data:image/svg+xml;utf8,"), auto; */ 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from 'react'; 2 | 3 | import {Background, OverLay} from 'components/background'; 4 | import Home from 'containers/home'; 5 | import {loadSettings} from 'store/actions/index'; 6 | 7 | import 'slick-carousel/slick/slick.css'; 8 | import 'slick-carousel/slick/slick-theme.css'; 9 | import './App.css'; 10 | 11 | function App() { 12 | 13 | useEffect(() => { 14 | if (!window.onstart) { 15 | // console.log("Loading settings..."); 16 | window.onstart = loadSettings(); 17 | } 18 | }); 19 | 20 | return ( 21 |
22 |
23 | 24 | 25 | 26 |
27 |
28 | ); 29 | } 30 | 31 | export default App; 32 | -------------------------------------------------------------------------------- /src/components/background/back.scss: -------------------------------------------------------------------------------- 1 | .background { 2 | min-width: 100vw; 3 | min-height: 100%; 4 | background-color: #fefefe; 5 | background-repeat: no-repeat; 6 | background-size: cover; 7 | background-position: center; 8 | transition: all 0.2s ease; 9 | } 10 | 11 | .app-overlay, .brightness-overlay{ 12 | position: absolute; 13 | pointer-events: none; 14 | inset: 0; 15 | } 16 | 17 | .brightness-overlay{ 18 | background: #000; 19 | } 20 | -------------------------------------------------------------------------------- /src/components/background/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { useSelector } from 'react-redux'; 3 | import "./back.scss"; 4 | 5 | export const Background = () => { 6 | const wall = useSelector((state) => state.wallpaper); 7 | 8 | return ( 9 |
12 | ); 13 | } 14 | 15 | export const OverLay = () => { 16 | const bright = useSelector((state) => state.quickpanel.lazy_bright) 17 | 18 | return ( 19 |
20 |
21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /src/components/bottomnav/bottom.scss: -------------------------------------------------------------------------------- 1 | .bottom-nav{ 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | transition: background-color 200ms ease-in-out; 6 | } 7 | 8 | .bt-nav-container{ 9 | display: flex; 10 | justify-content: space-around; 11 | padding: 0.1em 1em; 12 | width: 100%; 13 | max-width: 50em; 14 | 15 | .uicon{ 16 | padding: 0.5em; 17 | color: var(--med-txt); 18 | // filter: drop-shadow(1px 1px 4px rgba(254, 254, 254, 0.6)); 19 | } 20 | 21 | &[data-invert="true"]{ 22 | .uicon{ 23 | color: var(--gray-txt); 24 | } 25 | } 26 | 27 | .bar-icon{ 28 | transform: rotateZ(90deg); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/components/bottomnav/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useRef} from 'react'; 2 | import { useSelector, useDispatch } from 'react-redux'; 3 | import {Icon} from 'components/utils'; 4 | import parse from 'color-parse'; 5 | import rgba from 'color-rgba'; 6 | 7 | import './bottom.scss'; 8 | 9 | const BottomNav = (props) => { 10 | const [invert, setInvert] = useState(props.invert); 11 | const navBar = useRef(); 12 | const dispatch = useDispatch(); 13 | 14 | const istransparent = (bgcolor)=>{ 15 | var colors = parse(bgcolor) 16 | return colors.alpha < 0.1; 17 | } 18 | 19 | const refreshInvert = ()=>{ 20 | var bgcolor = getComputedStyle(navBar.current).getPropertyValue('background-color'); 21 | if(!istransparent(bgcolor)){ 22 | var arr = rgba(bgcolor), 23 | avg = (arr[0]+arr[1]+arr[2])/3 24 | 25 | if(avg<128) setInvert(true) 26 | else setInvert(false) 27 | }else setInvert(false) 28 | } 29 | 30 | useEffect(()=>{ 31 | if(navBar.current && props.invert==null){ 32 | setTimeout(refreshInvert,100) 33 | }else if (props.invert!=null) { 34 | setInvert(props.invert) 35 | } 36 | }, [props.bg, props.invert]) 37 | 38 | return ( 39 |
42 |
43 | 44 | 45 | 46 |
47 |
48 | ); 49 | }; 50 | 51 | export default BottomNav; 52 | -------------------------------------------------------------------------------- /src/components/icons.js: -------------------------------------------------------------------------------- 1 | export const NetworkIcon = (props) => { 2 | // network icon that is responsive to a status props indicating network strength 3 | const status = props.status || 4; 4 | return ( 5 |
6 | 12 | 13 | 1 ? props.fill : props.filldim} 21 | > 22 | 2 ? props.fill : props.filldim} 30 | > 31 | 3 ? props.fill : props.filldim} 39 | > 40 | 41 |
42 | ); 43 | }; 44 | 45 | // Battery Icon by Google Inc. - Iconscout 46 | export const BatteryIcon = (props) => { 47 | var h = ((props.battery.level || 100)*33); 48 | 49 | return ( 50 |
51 | 56 | 61 | 62 | 63 | 70 | 71 | 74 | 75 | 76 | 77 |
78 | ); 79 | }; 80 | 81 | export const pinned = (props) => { 82 | return ( 83 | 93 | 95 | 96 | 97 | ); 98 | }; 99 | 100 | export const seentick = (props) => { 101 | return ( 102 | 112 | 113 | 114 | 115 | ); 116 | }; 117 | -------------------------------------------------------------------------------- /src/components/main.scss: -------------------------------------------------------------------------------- 1 | body { 2 | --dark-txt: #000; 3 | --med-dark: #111; 4 | --txt-col: #222; 5 | --med-txt: #3c3c3c; 6 | --comp-txt: #ddd; 7 | --light-txt: #aaa; 8 | --comp-clr: #e6e6e6; 9 | --gray-txt: #555; 10 | --sat-txt: #777; 11 | --mid-txt: #888; 12 | --clrPrm: #0067c0; 13 | --scroll: rgb(255 255 255 / 80%); 14 | --white: #fefefe; 15 | --black: #010101; 16 | --active-blue: #0181fd; 17 | } 18 | 19 | .med-txt { 20 | color: var(--med-txt); 21 | } 22 | 23 | .light-txt { 24 | color: var(--light-txt); 25 | } 26 | 27 | .comp-txt { 28 | color: var(--comp-txt); 29 | } 30 | 31 | .gray-txt { 32 | color: var(--gray-txt); 33 | } 34 | 35 | .sat-txt { 36 | color: var(--sat-txt); 37 | } 38 | 39 | .backblur { 40 | backdrop-filter: blur(20px); 41 | -webkit-backdrop-filter: blur(20px); 42 | } 43 | 44 | .prtclk { 45 | * { 46 | pointer-events: none; 47 | } 48 | } 49 | 50 | .txt-ovf { 51 | display: -webkit-box; 52 | -webkit-line-clamp: 1; 53 | -webkit-box-orient: vertical; 54 | overflow: hidden; 55 | text-overflow: ellipsis; 56 | } 57 | 58 | .wb-line-2 { 59 | -webkit-line-clamp: 2; 60 | } 61 | 62 | .wb-line-3 { 63 | -webkit-line-clamp: 3; 64 | } 65 | 66 | .wb-line-4 { 67 | -webkit-line-clamp: 4; 68 | } 69 | 70 | .status-bar { 71 | // position: absolute; 72 | height: var(--stbar-h); 73 | width: 100%; 74 | display: flex; 75 | font-size: 0.8em; 76 | padding: 1em 1em 0; 77 | box-sizing: border-box; 78 | display: flex; 79 | align-items: center; 80 | justify-content: space-between; 81 | transition: background-color 200ms ease-in-out; 82 | color: var(--txt-col); 83 | 84 | &[data-invert="true"] { 85 | color: var(--comp-txt); 86 | } 87 | } 88 | 89 | .status-row { 90 | display: flex; 91 | align-items: center; 92 | 93 | & > div { 94 | margin: 0 2px; 95 | } 96 | 97 | .battery-level { 98 | font-size: 0.9em; 99 | height: 14px; 100 | margin-right: 0.25em; 101 | } 102 | } 103 | @keyframes fastfadein { 104 | 0% { 105 | opacity: 0; 106 | } 107 | 108 | 99% { 109 | opacity: 0; 110 | } 111 | 112 | 100% { 113 | opacity: 1; 114 | } 115 | } 116 | @keyframes pop-up { 117 | from { 118 | transform: scale(0.5); 119 | } 120 | 121 | to { 122 | transform: scale(1); 123 | } 124 | } 125 | @keyframes pop-up2 { 126 | from { 127 | transform: scale(0.5); 128 | } 129 | 130 | to { 131 | transform: scale(1); 132 | } 133 | } 134 | 135 | .press-in { 136 | transition: transform 200ms ease-in-out; 137 | 138 | &:active { 139 | transform: scale(0.86); 140 | } 141 | } 142 | 143 | .softpress-in { 144 | transition: transform 200ms ease-in-out; 145 | 146 | &:active { 147 | transform: scale(0.94); 148 | } 149 | } 150 | 151 | .quick-trans { 152 | transition: transform 100ms ease-in-out; 153 | } 154 | 155 | .flex-column { 156 | display: flex; 157 | flex-direction: column; 158 | } 159 | 160 | .active-light-lit { 161 | transition: all 200ms ease-in-out; 162 | 163 | &:active { 164 | background: rgba(254, 254, 254, 0.25); 165 | } 166 | } 167 | 168 | .active-dark-lit { 169 | transition: all 200ms ease-in-out; 170 | 171 | &:active { 172 | background: rgba(0, 0, 0, 0.25); 173 | } 174 | } 175 | 176 | .xlit:active { 177 | background: rgba(0, 0, 0, 0.12); 178 | } 179 | 180 | .vidCont { 181 | .react-video, 182 | video { 183 | height: 100%; 184 | } 185 | 186 | .play-icon { 187 | position: absolute; 188 | width: 60px; 189 | height: 60px; 190 | background: rgba(0, 0, 0, 0.5); 191 | border-radius: 4em; 192 | color: var(--white); 193 | z-index: 1; 194 | opacity: 0; 195 | transition: all 200ms ease-in-out; 196 | } 197 | 198 | &:hover .play-icon, 199 | .play-icon:hover { 200 | opacity: 1; 201 | } 202 | 203 | .play-icon.opacity-100 { 204 | opacity: 1; 205 | } 206 | } 207 | 208 | .video-control-container { 209 | width: 100%; 210 | display: flex; 211 | align-items: center; 212 | position: absolute; 213 | bottom: 0; 214 | 215 | .video-progress { 216 | flex-grow: 1; 217 | margin: 0 0.8em; 218 | } 219 | 220 | .MuiSlider-rail { 221 | background: var(--comp-txt); 222 | opacity: 0.8; 223 | } 224 | 225 | .MuiSlider-thumb, 226 | .MuiSlider-track { 227 | opacity: 1; 228 | } 229 | 230 | .prog-text { 231 | color: var(--comp-txt); 232 | font-size: 0.8em; 233 | font-weight: 500; 234 | padding: 0 0.5em; 235 | } 236 | } 237 | -------------------------------------------------------------------------------- /src/components/quickpanel/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { useSelector, useDispatch } from 'react-redux'; 3 | import Hammer, { displayName, propTypes } from '@win11react/react-hammerjs'; 4 | import Slider from '@mui/material/Slider'; 5 | import Swiper from 'react-slick'; 6 | 7 | import { Icon } from 'components/utils'; 8 | import StatusBar from 'components/statusbar'; 9 | import { dispatchAction, dispatchAct } from 'store/actions'; 10 | 11 | import './qkpanel.scss'; 12 | 13 | const DateObj = (props) => { 14 | const date = useSelector((state) => state.global.date) 15 | const time = useSelector((state) => state.global.time) 16 | 17 | var datestring = new Date(date.year, date.month, date.day).toLocaleString( 18 | "en-us", 19 | { weekday: "short", day: "numeric", month: "long" } 20 | ); 21 | 22 | return props.showtime ? ( 23 |
24 |
25 | {time.hours}:{time.minutes} 26 |
27 |
{datestring}
28 |
29 | ) : ( 30 |
31 |
{datestring}
32 |
33 | ) 34 | } 35 | 36 | export default function QuickPanel() { 37 | const [brightness, setBrightness] = useState(100) 38 | const quickpanel = useSelector((state) => state.quickpanel) 39 | const display = useSelector((state) => state.global.display) 40 | 41 | const closePanel = (e) => { 42 | if (e.target.classList.contains("quickpanel-container")) { 43 | dispatchAct({ type: "quickpanel/close" }) 44 | } 45 | } 46 | 47 | const handleBright = (e, value) => setBrightness(value) 48 | const extendPanel = () => dispatchAct({ type: "quickpanel/extend" }) 49 | const collapsePanel = (e) => { 50 | dispatchAct({ type: "quickpanel/collapse" }) 51 | } 52 | 53 | useEffect(() => { 54 | dispatchAct({type: "quickpanel/setLazyBright", payload: brightness}) 55 | }, [brightness]) 56 | 57 | return ( 58 | 63 |
66 | 67 |
68 | 69 | 600} /> 70 |
71 | 72 | 73 |
74 | 75 |
76 | 77 | 79 |
80 |
81 |
82 | 83 |
84 | 85 | ) 86 | } 87 | 88 | const QuickTool = (props) => { 89 | const [toolCount, setToolCount] = useState(12) 90 | const display = useSelector((state) => state.global.display) 91 | const settings = { 92 | dots: true, 93 | arrows: false, 94 | infinite: false, 95 | speed: 200 96 | } 97 | 98 | useEffect(() => { 99 | if(display.height > 600) setToolCount(12) 100 | else setToolCount(8) 101 | },[display.height]) 102 | 103 | return ( 104 |
105 |
106 | {props.tools && props.tools.slice(0,6).map((item) => { 107 | return ( 108 |
109 | 110 |
111 | ); 112 | })} 113 |
114 | 117 | {props.tools && props.tools.map((temp, idx) => { 118 | if(idx%toolCount==0){ 119 | return ( 120 |
121 | {props.tools.slice(idx, idx+toolCount).map((item,i) => { 122 | return ( 123 |
125 |
126 | 127 |
128 |
{item.name}
129 |
130 | ); 131 | })} 132 |
133 | ) 134 | } 135 | })} 136 | 137 |
138 | ) 139 | } 140 | -------------------------------------------------------------------------------- /src/components/quickpanel/qkpanel.scss: -------------------------------------------------------------------------------- 1 | .quickpanel-container { 2 | position: absolute; 3 | top: 0; 4 | width: 100%; 5 | height: 100%; 6 | pointer-events: none; 7 | background: rgba(0, 0, 0, 0); 8 | opacity: 0; 9 | z-index: -1; 10 | transition: 0.3s all ease-in-out; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | 15 | &[data-open="true"] { 16 | pointer-events: auto; 17 | z-index: 1000; 18 | opacity: 1; 19 | background: rgba(0, 0, 0, 0.2); 20 | 21 | .quickpanel { 22 | transform: translateY(0); 23 | } 24 | } 25 | } 26 | 27 | .quickpanel { 28 | width: 100%; 29 | max-width: 540px; 30 | max-height: 50%; 31 | // padding: 0 1.6em 0.5em; 32 | padding-bottom: 0.5em; 33 | color: var(--med-txt); 34 | display: flex; 35 | flex-direction: column; 36 | align-items: center; 37 | overflow: hidden; 38 | 39 | & > div { 40 | width: 100%; 41 | padding: 0 1.6em; 42 | } 43 | 44 | .quick-panel-bottom-bar { 45 | width: 32px; 46 | height: 4px; 47 | background: var(--light-txt); 48 | border-radius: 10px; 49 | } 50 | 51 | .notif-panel { 52 | padding-left: 0; 53 | padding-right: 0; 54 | } 55 | 56 | border-radius: 0 0 1em 1em; 57 | background: #fefefe; 58 | transform: translateY(-100%); 59 | transition: all 0.3s ease-in-out; 60 | 61 | &[data-extended="true"] { 62 | max-height: 100%; 63 | } 64 | 65 | .date-and-setting { 66 | display: flex; 67 | justify-content: space-between; 68 | color: var(--med-txt); 69 | margin-bottom: 0.5em; 70 | transition: all 200ms ease-in-out; 71 | } 72 | 73 | .date-day { 74 | font-weight: 600; 75 | color: var(--txt-col); 76 | } 77 | 78 | .quick-panel-time { 79 | max-height: 0; 80 | padding: 0; 81 | opacity: 0; 82 | font-weight: 500; 83 | transition: all 200ms linear; 84 | display: flex; 85 | overflow: hidden; 86 | flex-direction: column; 87 | align-items: center; 88 | 89 | &[data-extended="true"] { 90 | opacity: 1; 91 | padding: 2em 0; 92 | max-height: 240px; 93 | } 94 | } 95 | } 96 | 97 | .notif-panel { 98 | padding-top: 1em; 99 | text-align: center; 100 | 101 | .mini-quick-panel { 102 | padding: 0 1.6em; 103 | display: flex; 104 | width: 100%; 105 | justify-content: space-between; 106 | transition: all 300ms ease-in-out; 107 | margin-bottom: 1em; 108 | 109 | &[data-ext="true"] { 110 | position: absolute; 111 | width: 150%; 112 | opacity: 0; 113 | z-index: -1; 114 | pointer-events: none; 115 | } 116 | } 117 | 118 | .mini-quick-panel-item { 119 | padding: 8px; 120 | background-color: var(--comp-txt); 121 | border-radius: 50%; 122 | 123 | .mini-quick-icon { 124 | color: var(--sat-txt); 125 | } 126 | 127 | &[data-active="true"] { 128 | background: var(--active-blue); 129 | 130 | svg { 131 | color: #fefefe; 132 | } 133 | } 134 | } 135 | 136 | .extended-quick { 137 | max-height: 0; 138 | overflow: hidden; 139 | opacity: 0; 140 | padding: 0 1.6em; 141 | pointer-events: none; 142 | transition: all 200ms ease-in-out; 143 | 144 | .quick-tool-container { 145 | width: 100%; 146 | display: grid !important; 147 | grid-template-columns: auto auto auto auto; 148 | place-items: center; 149 | align-items: flex-start; 150 | justify-content: space-between; 151 | // margin-right: 1em; 152 | // margin: 0 1em; 153 | } 154 | 155 | .quick-tool-item { 156 | max-width: 42px; 157 | margin: 0.5em 0; 158 | display: flex; 159 | flex-direction: column; 160 | align-items: center; 161 | 162 | .mini-quick-panel-item { 163 | margin-bottom: 0.5em; 164 | } 165 | 166 | .quick-tool-info { 167 | font-size: 0.75em; 168 | line-height: 1em; 169 | font-weight: 600; 170 | width: 200%; 171 | } 172 | } 173 | } 174 | 175 | .extended-quick-open { 176 | max-height: 800px; 177 | pointer-events: auto; 178 | // overflow: visible; 179 | opacity: 1; 180 | animation: fastfadein 200ms linear; 181 | } 182 | 183 | .slick-list { 184 | margin: 0 -2em; 185 | } 186 | 187 | .slick-slide > div { 188 | margin: 0 2em; 189 | } 190 | 191 | .slick-dots { 192 | position: relative; 193 | bottom: 0; 194 | 195 | li { 196 | width: 6px; 197 | } 198 | } 199 | } 200 | -------------------------------------------------------------------------------- /src/components/statusbar.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect, useRef} from 'react'; 2 | import { useSelector } from 'react-redux'; 3 | import Hammer from '@win11react/react-hammerjs'; 4 | 5 | import parse from 'color-parse'; 6 | import rgba from 'color-rgba'; 7 | 8 | import { Icon } from 'components/utils'; 9 | import { dispatchAction } from 'store/actions'; 10 | import { NetworkIcon, BatteryIcon } from 'components/icons'; 11 | 12 | import './main.scss'; 13 | 14 | const StatusBar = (props) => { 15 | const [invert, setInvert] = useState(props.invert); 16 | const statusBar = useRef(); 17 | const battery = useSelector((state) => state.global.battery); 18 | const time = useSelector((state) => state.global.time); 19 | 20 | const istransparent = (bgcolor)=>{ 21 | var colors = parse(bgcolor) 22 | return colors.alpha < 0.1; 23 | } 24 | 25 | useEffect(()=>{ 26 | if(props.invert!=null){ 27 | setInvert(props.invert) 28 | }else if(props.bg || (invert && !props.bg)){ 29 | if(statusBar.current){ 30 | var bgcolor = getComputedStyle(statusBar.current).getPropertyValue('background-color'); 31 | if(!istransparent(bgcolor)){ 32 | var arr = rgba(bgcolor), 33 | avg = (arr[0]+arr[1]+arr[2])/3 34 | 35 | if(avg<128) setInvert(true) 36 | else setInvert(false) 37 | }else{ 38 | setInvert(false) 39 | } 40 | } 41 | } 42 | }, [props.bg]) 43 | 44 | return ( 45 | 46 |
49 |
50 |
{time.hours}:{time.minutes}
53 |
54 | 55 | 56 |
57 |
58 | {Math.round(battery.level * 100) + "%"} 59 |
60 | 62 |
63 |
64 |
65 | 66 | ); 67 | }; 68 | 69 | export default StatusBar; 70 | -------------------------------------------------------------------------------- /src/components/widgets/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import { useSelector, useDispatch } from 'react-redux' 3 | import Calendar from 'react-calendar' 4 | 5 | import {Icon} from 'components/utils' 6 | import {dispatchAction, dispatchAct, openAppPage} from 'store/actions'; 7 | import './widget.scss' 8 | 9 | const ClockDate = (props)=>{ 10 | const date = useSelector((state) => state.global.date); 11 | var datestring = new Date(date.year, date.month, date.day).toLocaleString("en-us",{ 12 | weekday: "short", day: "numeric", month: props.datemin?"short":"long" 13 | }); 14 | 15 | var classNameString = props.className || "" 16 | return
{datestring}
17 | } 18 | 19 | export const GoogleSearch = () => { 20 | 21 | const handleClick = () => { 22 | openAppPage("google","google.search") 23 | } 24 | 25 | return ( 26 |
27 |
28 | 29 | 30 |
31 |
32 | ); 33 | }; 34 | 35 | export const AnalogClock = () => { 36 | const time = useSelector((state) => state.global.time); 37 | 38 | const calculateAngles = ()=>{ 39 | var hr = time.hours >= 12 ? time.hours - 12 : time.hours, 40 | mn = time.minutes 41 | 42 | hr *= 30 43 | hr += mn/2 44 | mn *= 6 45 | return [hr, mn] 46 | } 47 | 48 | return ( 49 |
50 |
51 |
54 |
55 |
56 |
59 |
60 |
61 |
62 |
63 | 64 |
65 | ); 66 | }; 67 | 68 | export const MinimalClock = () => { 69 | const time = useSelector((state) => state.global.time); 70 | 71 | return ( 72 |
73 |
74 |
{time.hours}:{time.minutes}
75 |
{time.abb}
76 |
77 | 78 |
79 | ); 80 | }; 81 | 82 | export const MinimalVertClock = () => { 83 | const time = useSelector((state) => state.global.time); 84 | const fillZero = (x)=>{ 85 | return (x<9?"0":"") + x 86 | } 87 | 88 | return ( 89 |
90 |
91 |
{fillZero(time.hours)}
92 |
{time.minutes}
93 |
94 | 95 |
96 | ); 97 | }; 98 | 99 | export const DayCountdown = ()=>{ 100 | return ( 101 |
102 |
Mom's B'day
103 |
215
104 |
days left
105 |
106 | ) 107 | } 108 | 109 | export const WideCalender = ()=>{ 110 | const date = useSelector((state) => state.global.date); 111 | var datemonth = new Date(date.year, date.month, date.day).toLocaleString("en-us",{month: "long"}); 112 | 113 | const formatShortWeekday = (label, date)=>{ 114 | return date.toLocaleString("en-us",{weekday: "short"})[0] 115 | } 116 | 117 | return ( 118 |
119 |
{datemonth}
120 |
121 | 125 | 126 |
127 |
128 |
Disneyland
129 |
All day
130 |
131 |
132 |
Meeting
133 |
11:00 AM - 2:00 PM
134 |
135 |
136 |
Business
137 |
3:30 PM - 8:00 PM
138 |
139 |
140 |
141 |
142 | ) 143 | } 144 | 145 | export const WideWeather = ()=>{ 146 | const date = useSelector((state) => state.global.date); 147 | const weather = useSelector((state) => state.widget.weather); 148 | var datemonth = new Date(date.year, date.month, date.day).toLocaleString("en-us",{month: "long"}); 149 | var iconurl = "https://www.metaweather.com/static/img/weather/" 150 | 151 | return ( 152 |
153 |
154 | 155 | {weather.city} 156 |
157 | 158 |
159 | 160 |
{weather.temperature}°
161 |
162 |
163 | {weather && weather.predictions.map((pred, i)=>{ 164 | return( 165 |
166 | 167 |
{pred.day}
168 |
169 | ) 170 | })} 171 |
172 |
173 | ) 174 | } 175 | 176 | export const ShortWeather = ()=>{ 177 | const date = useSelector((state) => state.global.date); 178 | const weather = useSelector((state) => state.widget.weather); 179 | var datemonth = new Date(date.year, date.month, date.day).toLocaleString("en-us",{month: "long"}); 180 | var iconurl = "https://www.metaweather.com/static/img/weather/" 181 | 182 | return ( 183 |
184 |
185 | 186 |
{weather.temperature}°
187 |
188 |
189 | 190 | {weather.city} 191 |
192 | 193 |
194 | ) 195 | } 196 | -------------------------------------------------------------------------------- /src/components/widgets/widget.scss: -------------------------------------------------------------------------------- 1 | .google-search-container { 2 | width: 100%; 3 | padding: 0 1em; 4 | display: flex; 5 | } 6 | 7 | .google-input-container { 8 | background: #fefefe; 9 | border-radius: 200px; 10 | padding: 0.8em; 11 | flex-grow: 1; 12 | } 13 | 14 | .analog-clock-container { 15 | width: 100%; 16 | display: flex; 17 | flex-direction: column; 18 | align-items: center; 19 | 20 | .clock-body { 21 | width: 60%; 22 | aspect-ratio: 1 / 1; 23 | max-width: 160px; 24 | max-height: 160px; 25 | background: #fafafa; 26 | border-radius: 50%; 27 | position: relative; 28 | box-shadow: 0 -4px 16px rgba(36, 36, 36, 0.1), 0 4px 16px rgba(36, 36, 36, 0.1); 29 | 30 | .clock-center { 31 | position: absolute; 32 | background: #333; 33 | inset: 50%; 34 | width: 8px; 35 | height: 8px; 36 | margin-top: -4px; 37 | margin-left: -4px; 38 | border-radius: 50%; 39 | } 40 | 41 | .hour-container, 42 | .minute-container { 43 | width: 100%; 44 | height: 100%; 45 | position: absolute; 46 | inset: 0; 47 | display: grid; 48 | place-items: center; 49 | } 50 | 51 | .hour-hand, 52 | .minute-hand { 53 | width: 4px; 54 | border-radius: 8px; 55 | transform: translateY(-50%); 56 | } 57 | 58 | .hour-hand { 59 | height: 20%; 60 | background: #444; 61 | } 62 | 63 | .minute-hand { 64 | height: 40%; 65 | background: #888; 66 | } 67 | } 68 | 69 | .clock-date { 70 | font-size: 0.9em; 71 | margin-top: 0.5em; 72 | color: var(--med-txt); 73 | } 74 | } 75 | 76 | .digital-time-container, 77 | .vert-time-container { 78 | width: 100%; 79 | display: flex; 80 | flex-direction: column; 81 | align-items: center; 82 | color: var(--med-txt); 83 | } 84 | 85 | .vert-time-container > div { 86 | width: 100%; 87 | padding: 0 1em; 88 | } 89 | 90 | .cell-container { 91 | // box-sizing: border-box; 92 | // border: solid 1px red; 93 | } 94 | 95 | .calender-container { 96 | box-sizing: border-box; 97 | background: #fefefe; 98 | border-radius: 1em; 99 | padding: 0.6em 1em; 100 | position: absolute; 101 | inset: 0.5em 1em; 102 | overflow-x: hidden; 103 | overflow-y: scroll; 104 | 105 | .react-calendar { 106 | width: 66%; 107 | 108 | .react-calendar__month-view__days__day--weekend { 109 | color: red; 110 | } 111 | 112 | .react-calendar__tile--now { 113 | color: #fefefe; 114 | position: relative; 115 | transform: translateX(-36%); 116 | 117 | abbr { 118 | position: absolute; 119 | inset: 0 0.3em; 120 | text-align: center; 121 | font-weight: 400; 122 | background: #444; 123 | border-radius: 6px; 124 | } 125 | } 126 | 127 | abbr { 128 | display: block; 129 | text-decoration: none; 130 | font-size: 0.72em; 131 | font-weight: 600; 132 | padding: 0.2em 0; 133 | text-align: left; 134 | } 135 | } 136 | 137 | .calender-events { 138 | display: grid; 139 | grid-template-rows: 1fr 1fr 1fr; 140 | width: 33%; 141 | 142 | .event-container { 143 | color: var(--med-txt); 144 | border: 0 solid var(--comp-txt); 145 | border-left-width: 2px; 146 | padding-left: 0.5em; 147 | position: relative; 148 | 149 | &::after { 150 | content: ""; 151 | position: absolute; 152 | top: -2px; 153 | left: -4px; 154 | width: 6px; 155 | height: 6px; 156 | border-radius: 20px; 157 | background: #277beb; 158 | } 159 | 160 | .event-time { 161 | height: 16px; 162 | color: var(--sat-txt); 163 | font-weight: 300; 164 | overflow: hidden; 165 | } 166 | } 167 | } 168 | } 169 | 170 | .countdown-container { 171 | position: absolute; 172 | inset: 0.5em 1em; 173 | text-align: center; 174 | background: #fefefe; 175 | display: flex; 176 | flex-direction: column; 177 | justify-content: center; 178 | padding: 0.5em; 179 | border-radius: 1em; 180 | } 181 | 182 | .weather-container { 183 | box-sizing: border-box; 184 | background: #fefefe; 185 | border-radius: 1em; 186 | padding: 0.6em 1em; 187 | position: absolute; 188 | inset: 0.5em 1em; 189 | display: flex; 190 | flex-direction: column; 191 | align-items: center; 192 | color: var(--med-txt); 193 | letter-spacing: 1px; 194 | overflow-x: hidden; 195 | overflow-y: scroll; 196 | 197 | .city-container { 198 | display: flex; 199 | 200 | span { 201 | font-size: 1rem; 202 | } 203 | } 204 | 205 | .weather-date { 206 | font-size: 0.9em; 207 | font-weight: 100; 208 | color: var(--gray-txt); 209 | } 210 | 211 | .main-weather { 212 | display: flex; 213 | align-items: center; 214 | flex-grow: 1; 215 | } 216 | 217 | .today-temperature { 218 | font-size: 3em; 219 | font-weight: 100; 220 | margin-left: 0.3em; 221 | } 222 | 223 | .weather-pred-container { 224 | display: flex; 225 | justify-content: space-between; 226 | 227 | .weather-pred { 228 | margin: 0 0.8em; 229 | display: flex; 230 | flex-direction: column; 231 | align-items: center; 232 | } 233 | 234 | .pred-day { 235 | font-size: 0.8em; 236 | } 237 | } 238 | } 239 | 240 | .short-weather-container { 241 | .today-temperature { 242 | font-size: 2.5em; 243 | margin-left: 0.1em; 244 | } 245 | 246 | .main-weather .uicon { 247 | height: 100%; 248 | } 249 | } 250 | -------------------------------------------------------------------------------- /src/containers/apps/google/google.scss: -------------------------------------------------------------------------------- 1 | .google-home, .google-spage, .search-frame { 2 | padding: 1em 0; 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | box-sizing: border-box; 8 | } 9 | 10 | .google-land, .google-spage{ 11 | .namelogo { 12 | width: 100%; 13 | } 14 | 15 | .search-box-container { 16 | width: 96%; 17 | padding: 0.5em 1em; 18 | margin-top: 2em; 19 | margin-right: 2%; 20 | margin-bottom: 1em; 21 | border-radius: 2em; 22 | box-shadow: 1px 2px 8px rgba(74, 71, 71, 0.15); 23 | } 24 | 25 | .search-input { 26 | display: flex; 27 | align-items: center; 28 | 29 | svg { 30 | color: var(--light-txt); 31 | } 32 | 33 | .search-inp { 34 | flex-grow: 1; 35 | 36 | input { 37 | padding: 0.25em 0.5em; 38 | } 39 | 40 | fieldset { 41 | display: none; 42 | } 43 | } 44 | } 45 | 46 | .news-container { 47 | padding: 0 0.5em; 48 | 49 | .news-box { 50 | margin: 0.6em 0; 51 | color: var(--mid-txt); 52 | } 53 | 54 | .news-title { 55 | font-size: 0.96em; 56 | color: var(--med-txt); 57 | } 58 | 59 | .imageCont { 60 | border-radius: 0.8em; 61 | overflow: hidden; 62 | margin-bottom: 0.5em; 63 | } 64 | } 65 | } 66 | 67 | .google-spage{ 68 | .search-box-container{ 69 | box-sizing: border-box; 70 | padding: 0.5em 0.25em; 71 | margin: 0; 72 | width: 90%; 73 | border: 0 solid var(--comp-txt); 74 | border-radius: 0; 75 | border-bottom-width: 2px; 76 | box-shadow: none; 77 | 78 | .search-inp input{ 79 | padding: 0.25em 1em; 80 | } 81 | } 82 | 83 | .search-suggestions{ 84 | flex-grow: 1; 85 | width: 100%; 86 | overflow-y: scroll; 87 | margin-top: 0.5em; 88 | color: var(--light-txt); 89 | 90 | .trending-search{ 91 | margin-top: 1em; 92 | 93 | .sugg-title{ 94 | margin-bottom: 0.5em; 95 | } 96 | } 97 | 98 | .sugg-title{ 99 | padding: 0 0.5em; 100 | margin: 0 1.5em; 101 | font-size: 0.68em; 102 | letter-spacing: 1px; 103 | font-weight: 600; 104 | } 105 | 106 | .sugg-box{ 107 | display: flex; 108 | padding: 0.5em 1.5em; 109 | 110 | span{ 111 | margin-left: 1em; 112 | font-weight: 500; 113 | color: var(--txt-col); 114 | } 115 | } 116 | } 117 | } 118 | 119 | .search-frame{ 120 | padding: 0; 121 | 122 | iframe{ 123 | width: 100%; 124 | height: 100%; 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /src/containers/apps/google/index.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from 'react' 2 | import {useSelector, useDispatch} from 'react-redux' 3 | 4 | import TextField from '@mui/material/TextField' 5 | 6 | import {Icon, Image} from 'components/utils' 7 | import {dispatchAction, dispatchAct} from 'store/actions' 8 | 9 | import './google.scss' 10 | import newsdata from './news.json' 11 | 12 | export const GoogleApp = () => { 13 | const app = useSelector(state => state.home.apps.google || {}) 14 | const home = useSelector(state => state.home) 15 | const show = home.ishome==false && home.stack.at(-1)==app.payload 16 | const pagetree = app && app.pagetree || { 17 | "main": { 18 | "search" : {}, 19 | "result" : {} 20 | } 21 | } 22 | 23 | useEffect(()=>{ 24 | if(app && !app.pagetree){ 25 | dispatchAct({type: "home/setApp", payload: { 26 | id: app.payload, 27 | data: { 28 | ... app, 29 | pagetree: pagetree, 30 | path: ['main'] 31 | } 32 | }}) 33 | } 34 | }, [app]) 35 | 36 | return 37 | } 38 | 39 | const AppContainer = ({app, show}) => { 40 | const [searchtxt, setTxt] = useState('') 41 | const clstring = `${app.payload}-wrapper` 42 | const path = app.path || ['main'] 43 | 44 | const handlleReset = () => setTxt('') 45 | const openResults = () => dispatchAct({ 46 | type: "home/navApp", 47 | payload: "google.result" 48 | }) 49 | 50 | const handleTxtChange = (e) => setTxt(e.target.value) 51 | const handleSuggClk = (e) => { 52 | setTxt(e.target.innerText) 53 | openResults() 54 | } 55 | 56 | const handleSearch = (e) => { 57 | if(e.key == "Enter" && searchtxt.length) openResults() 58 | } 59 | 60 | const checkstate = (comp) => { 61 | return path.includes(comp) ? ( 62 | path.at(-1) == comp ? 1 : 2 63 | ) : 0; 64 | } 65 | 66 | const sdata = { 67 | "sugg": ["videos", "old songs", "hd wallpapers", "love", "new movies", "new songs", "cool photos", "images"], 68 | "trend": ["T20 World Cup", "Squid Game", "Afghanistan", "Ethereum Price", "Baked oats", "Battlefield 2042", "Black Widow"] 69 | } 70 | 71 | return ( 72 |
73 |
74 | {checkstate('main')==1 && ( 75 |
76 |
77 | 78 | 79 |
81 |
82 | 83 | 84 | 85 |
86 |
87 |
88 | {newsdata.articles.map((article,i) => { 89 | return ( 90 |
91 | 92 |
93 | {article.title} 94 |
95 |
96 | 97 | {article.source.name} 98 |
99 | 100 | 101 |
102 |
103 | ) 104 | })} 105 |
106 |
107 |
108 | )} 109 | {checkstate('search')==1 && ( 110 |
111 |
112 |
113 | 114 | 116 | {searchtxt.length ? ( 117 | 118 | ) : } 119 |
120 |
121 |
122 |
123 |
TRY SEARCHING FOR
124 | {sdata.sugg.map((x,i) => ( 125 |
127 | 128 | {x} 129 |
130 | 131 |
132 | ))} 133 |
134 |
135 |
TRENDING SEARCHES
136 | {sdata.trend.map((x,i) => ( 137 |
139 | 140 | {x} 141 |
142 | ))} 143 |
144 |
145 |
146 | )} 147 | {checkstate('result')==1 && ( 148 |
149 | 150 |
151 | )} 152 |
153 |
154 | ); 155 | } 156 | -------------------------------------------------------------------------------- /src/containers/apps/index.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from 'react'; 2 | import {useSelector, useDispatch} from 'react-redux'; 3 | 4 | import './index.scss'; 5 | import './themes.scss'; 6 | 7 | export * from './whatsapp'; 8 | export * from './youtube'; 9 | export * from './playstore'; 10 | export * from './google'; 11 | -------------------------------------------------------------------------------- /src/containers/apps/index.scss: -------------------------------------------------------------------------------- 1 | .app-wrapper{ 2 | pointer-events: auto; 3 | height: 100%; 4 | border-radius: 0; 5 | transition: all 200ms ease-in-out; 6 | animation: popup ease-in-out 200ms; 7 | 8 | &[data-open="false"]{ 9 | border-radius: 1em; 10 | transform: scale(0.58); 11 | opacity: 0; 12 | pointer-events: none; 13 | 14 | *{ 15 | pointer-events: none; 16 | } 17 | } 18 | } 19 | 20 | .app-inner-wrapper{ 21 | height: 100%; 22 | overflow: hidden; 23 | position: relative; 24 | } 25 | 26 | .app-icon-container{ 27 | height: 70%; 28 | display: grid; 29 | place-items: center; 30 | } 31 | 32 | @keyframes popup { 33 | from{ 34 | border-radius: 1em; 35 | transform: scale(0.8); 36 | opacity: 0; 37 | } 38 | 39 | to{ 40 | border-radius: 0; 41 | transform: scale(1); 42 | opacity: 1; 43 | } 44 | } 45 | 46 | .full-hide{ 47 | height: 100%; 48 | overflow: hidden; 49 | } 50 | -------------------------------------------------------------------------------- /src/containers/apps/playstore/index.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from 'react'; 2 | import {useSelector, useDispatch} from 'react-redux'; 3 | 4 | import {Icon, Image, LazyComponent} from 'components/utils'; 5 | import {dispatchAction, dispatchAct} from 'store/actions'; 6 | 7 | export const PlaystoreApp = () => { 8 | const app = useSelector(state => state.home.apps.playstore || {}); 9 | const home = useSelector(state => state.home); 10 | const show = home.ishome==false && home.stack.at(-1)==app.payload; 11 | 12 | return 13 | } 14 | 15 | const AppContainer = ({app, show}) => { 16 | const clstring = `${app.payload}-wrapper`; 17 | 18 | return ( 19 |
20 |
21 | 22 | Playstore 23 |
24 |
25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/containers/apps/themes.scss: -------------------------------------------------------------------------------- 1 | .app-wrapper{ 2 | --app-bg: #fefefe; 3 | background: var(--app-bg); 4 | } 5 | 6 | .whatsapp-wrapper, .playstore-wrapper{ 7 | --app-bg: #fefefe; 8 | background: var(--app-bg); 9 | 10 | --teal: #128c7e; 11 | --teal-dark: #075e54; 12 | --light-teal: #02a884; 13 | --light-green: #25d366; 14 | --white: #fefefe; 15 | --blue: #34b7f1; 16 | --check-blue: #34b7f1; 17 | --link-blue: #5bc2df; 18 | --bubble-green: #dcf8c6; 19 | } 20 | 21 | .whatsapp-viewport, .playstore-viewport{ 22 | --app-bg: #fefefe; 23 | --teal: #128c7e; 24 | --teal-dark: #075e54; 25 | 26 | --statusbg: var(--teal); 27 | --navbg: var(--app-bg); 28 | } 29 | 30 | .youtube-wrapper{ 31 | --app-bg: #fefefe; 32 | --pm-txt: #121212; 33 | background: var(--app-bg); 34 | // color: #fefefe; 35 | } 36 | 37 | .youtube-viewport{ 38 | --app-bg: #fefefe; 39 | --statusbg: var(--app-bg); 40 | --navbg: var(--app-bg); 41 | } 42 | 43 | 44 | .google-wrapper{ 45 | --app-bg: #fefefe; 46 | background: var(--app-bg); 47 | } 48 | 49 | .google-viewport{ 50 | --app-bg: #fefefe; 51 | 52 | --statusbg: var(--app-bg); 53 | --navbg: var(--app-bg); 54 | } 55 | -------------------------------------------------------------------------------- /src/containers/apps/whatsapp/elements/extra.scss: -------------------------------------------------------------------------------- 1 | // media player && status screen 2 | 3 | .media-viewer-container, .status-container{ 4 | position: absolute; 5 | inset: 0; 6 | background: #010101; 7 | transition: all 200ms ease-in-out; 8 | 9 | &[value="hide"] { 10 | opacity: 0; 11 | pointer-events: none; 12 | } 13 | 14 | .whatsapp-top-nav { 15 | background: none; 16 | color: var(--comp-txt); 17 | position: absolute; 18 | top: 0; 19 | padding: 0.5em; 20 | z-index: 1; 21 | 22 | .chat-name { 23 | span:nth-child(1) { 24 | font-size: 1.2em; 25 | } 26 | 27 | span:nth-child(2) { 28 | font-size: 0.64em; 29 | line-height: 0.75em; 30 | } 31 | } 32 | } 33 | 34 | .media-screen { 35 | display: grid; 36 | place-items: center; 37 | height: 100%; 38 | 39 | .vidCont { 40 | height: 100%; 41 | } 42 | 43 | .video-control-container { 44 | .MuiSlider-thumb, 45 | .MuiSlider-track { 46 | background: var(--light-teal); 47 | } 48 | } 49 | } 50 | } 51 | 52 | .status-container{ 53 | 54 | .whatsapp-top-nav{ 55 | display: flex; 56 | flex-direction: column; 57 | 58 | .imageCont{ 59 | margin: 0 0.5em; 60 | } 61 | } 62 | 63 | .status-msg-container{ 64 | height: 100%; 65 | background: #2e92ee; 66 | display: grid; 67 | place-items: center; 68 | padding: 1em; 69 | text-align: center; 70 | font-size: 2em; 71 | color: var(--comp-txt); 72 | } 73 | 74 | .caption-container{ 75 | position: absolute; 76 | bottom: 1.5em; 77 | padding: 0.5em 0; 78 | width: 100%; 79 | color: var(--white); 80 | background: rgba(1, 1, 1, 0.5); 81 | font-weight: 500; 82 | text-align: center; 83 | } 84 | } 85 | 86 | .progress-bar-container{ 87 | display: flex; 88 | height: 2px; 89 | border-radius: 1em; 90 | margin-bottom: 0.5em; 91 | 92 | .progress-bar{ 93 | flex-grow: 1; 94 | background: rgba(136, 136, 136, 0.5); 95 | margin: 0 1.5px; 96 | overflow: hidden; 97 | 98 | &[data-lit="true"]{ 99 | background: var(--white); 100 | } 101 | 102 | .progress-fill{ 103 | width: 0; 104 | height: 100%; 105 | background: var(--white); 106 | transition: width 400ms linear; 107 | } 108 | } 109 | } 110 | 111 | // chat screen 112 | 113 | .chat-profile { 114 | display: flex; 115 | align-items: center; 116 | padding: 0.2em; 117 | border-radius: 2em; 118 | } 119 | 120 | .chat-screen-container { 121 | position: absolute; 122 | inset: 0; 123 | --msg-incoming: #fefefe; 124 | --msg-outgoing: #e7ffdd; 125 | --msg-toast: #d3eaf7; 126 | // --msg-outgoing: #e1ffc7; 127 | .chat-screen { 128 | flex-grow: 1; 129 | overflow: hidden; 130 | } 131 | 132 | .chat-input-container { 133 | display: flex; 134 | align-items: flex-end; 135 | padding: 0.2em 0.4em; 136 | 137 | .chat-input-wrapper { 138 | display: flex; 139 | align-items: flex-end; 140 | background: var(--white); 141 | color: var(--mid-txt); 142 | border-radius: 24px; 143 | padding: 0.2em 0.4em; 144 | flex-grow: 1; 145 | 146 | .uicon { 147 | margin: 0.36em 0.24em; 148 | } 149 | } 150 | 151 | .chat-input-field { 152 | padding: 0.2em; 153 | flex-grow: 1; 154 | 155 | & > div { 156 | border: none; 157 | padding: 0.3em 0; 158 | color: var(--med-txt); 159 | } 160 | 161 | fieldset { 162 | display: none; 163 | } 164 | } 165 | 166 | .mic-icon, 167 | .send-icon { 168 | color: var(--white); 169 | background: var(--light-teal); 170 | height: 45px; 171 | aspect-ratio: 1 / 1; 172 | margin-left: 0.5em; 173 | border-radius: 4em; 174 | } 175 | 176 | .mic-icon { 177 | animation: pop-up ease-in-out 200ms; 178 | } 179 | 180 | .send-icon { 181 | animation: pop-up2 ease-in-out 200ms; 182 | } 183 | } 184 | } 185 | 186 | .chat-container { 187 | position: relative; 188 | flex-grow: 1; 189 | overflow-y: scroll; 190 | padding: 0.5em 1em; 191 | 192 | .chat-scroll-container { 193 | // position: absolute; 194 | min-height: 100%; 195 | height: max-content; 196 | } 197 | 198 | .chat-toast { 199 | position: relative; 200 | display: flex; 201 | flex-direction: column; 202 | // margin: 0.5em 0; 203 | &[value="0"] { 204 | align-items: flex-start; 205 | } 206 | 207 | &[value="1"] { 208 | align-items: center; 209 | } 210 | 211 | &[value="2"] { 212 | align-items: flex-end; 213 | } 214 | } 215 | 216 | .msg-box { 217 | position: relative; 218 | min-width: 4em; 219 | max-width: 80%; 220 | padding: 0.2em 0.3em; 221 | border-radius: 0.5em; 222 | margin: 0.125em 0; 223 | font-size: 0.9em; 224 | 225 | .imageCont { 226 | margin-top: 0.125em; 227 | 228 | img { 229 | border-radius: 0.5em; 230 | } 231 | } 232 | 233 | .vidCont { 234 | margin-top: 0.125em; 235 | border-radius: 0.5em; 236 | overflow: hidden; 237 | } 238 | 239 | pre { 240 | padding: 0 0.2em; 241 | font-family: inherit; 242 | white-space: pre-wrap; 243 | word-wrap: break-word; 244 | max-width: 100%; 245 | color: var(--med-txt); 246 | 247 | a { 248 | color: var(--link-blue); 249 | font-weight: 500; 250 | white-space: pre-wrap; 251 | overflow-wrap: break-word; 252 | } 253 | } 254 | 255 | .chat-date { 256 | margin-left: 0.5em; 257 | margin-top: 0.5em; 258 | float: right; 259 | font-size: 0.7em; 260 | font-weight: 500; 261 | color: var(--sat-txt); 262 | fill: var(--sat-txt); 263 | display: flex; 264 | align-items: center; 265 | 266 | .uicon { 267 | margin-left: 0.2em; 268 | margin-bottom: 2px; 269 | } 270 | } 271 | 272 | & > .chat-date { 273 | position: absolute; 274 | bottom: 0.5em; 275 | right: 1em; 276 | -webkit-text-stroke-color: #fefefe; 277 | -webkit-text-stroke-width: thin; 278 | } 279 | } 280 | 281 | .in-msg { 282 | background: var(--msg-incoming); 283 | } 284 | 285 | .out-msg { 286 | background: var(--msg-outgoing); 287 | } 288 | 289 | .first-msg { 290 | margin-top: 0.5em; 291 | position: relative; 292 | z-index: 0; 293 | 294 | &::after { 295 | content: ""; 296 | position: absolute; 297 | top: 0; 298 | width: 1em; 299 | height: 1.2em; 300 | z-index: -1; 301 | } 302 | } 303 | 304 | .in-msg.first-msg::after { 305 | left: -0.5em; 306 | background: var(--msg-incoming); 307 | clip-path: polygon(0 0,100% 0,100% 100%); 308 | } 309 | 310 | .out-msg.first-msg::after { 311 | right: -0.5em; 312 | background: var(--msg-outgoing); 313 | clip-path: polygon(0 0,100% 0,0 100%); 314 | } 315 | 316 | .msg-toast { 317 | margin: 0.5em 0; 318 | width: auto; 319 | max-width: 90%; 320 | padding: 0.2em 0.5em; 321 | border-radius: 0.5em; 322 | font-size: 0.72em; 323 | text-align: center; 324 | background: var(--msg-toast); 325 | box-shadow: 1px 1px 1px rgba(18, 18, 18, 0.25); 326 | word-spacing: 2px; 327 | } 328 | } 329 | 330 | // all status 331 | .status-date { 332 | font-size: 0.8em; 333 | font-weight: 500; 334 | color: var(--light-txt); 335 | } 336 | 337 | .my-status { 338 | padding: 0.5em 0; 339 | 340 | .chat-status { 341 | margin: 0; 342 | } 343 | } 344 | -------------------------------------------------------------------------------- /src/containers/apps/whatsapp/whatsapp.scss: -------------------------------------------------------------------------------- 1 | .teal-green { 2 | color: var(--teal); 3 | } 4 | 5 | .wp-inner-wrapper { 6 | // font-family: "Sans-serif"; 7 | } 8 | 9 | .whatsapp-home { 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | } 14 | 15 | .whatsapp-top-nav { 16 | width: 100%; 17 | display: flex; 18 | position: relative; 19 | justify-content: space-between; 20 | padding: 0.5em 0.6em 0.5em 0.2em; 21 | background: var(--teal); 22 | color: var(--white); 23 | 24 | .brand-name { 25 | font-weight: 400; 26 | font-size: 1.25em; 27 | padding-left: 0.4em; 28 | letter-spacing: 1px; 29 | } 30 | 31 | .w-nav-icons { 32 | display: flex; 33 | 34 | .uicon { 35 | margin-left: 1em; 36 | } 37 | } 38 | } 39 | 40 | .w-nav-tab { 41 | width: 100%; 42 | display: flex; 43 | justify-content: space-between; 44 | position: relative; 45 | 46 | .nav-slider { 47 | height: 4px; 48 | position: absolute; 49 | background: var(--white); 50 | bottom: 0; 51 | transition: all 200ms ease-in-out; 52 | } 53 | 54 | .tab-option { 55 | font-weight: 200; 56 | font-size: 0.88em; 57 | padding: 0.5em; 58 | opacity: 0.5; 59 | flex-grow: 1; 60 | text-align: center; 61 | margin: 0 0.5em; 62 | 63 | &[value="true"] { 64 | opacity: 1; 65 | } 66 | } 67 | } 68 | 69 | .home-nav-tab { 70 | background: var(--teal); 71 | color: var(--white); 72 | 73 | .tab-option:first-child { 74 | flex-grow: 0; 75 | margin: 0; 76 | } 77 | } 78 | 79 | .whatsapp-home-page { 80 | width: 100%; 81 | flex-grow: 1; 82 | overflow: hidden; 83 | 84 | .call-logs-container, 85 | .chats-status-container, 86 | .home-chats-container { 87 | height: 100%; 88 | overflow-y: scroll; 89 | } 90 | } 91 | 92 | .home-chats { 93 | height: max-content; 94 | padding: 0.5em; 95 | color: var(--med-txt); 96 | 97 | .all-chat-container { 98 | padding: 0.5em 0; 99 | display: flex; 100 | 101 | .short-info { 102 | flex-grow: 1; 103 | margin-left: 0.8em; 104 | position: relative; 105 | } 106 | 107 | .imageCont { 108 | border-radius: 50%; 109 | overflow: hidden; 110 | } 111 | 112 | .chat-info { 113 | display: flex; 114 | 115 | .chat-name { 116 | flex-grow: 1; 117 | font-size: 1.1em; 118 | font-weight: 600; 119 | } 120 | 121 | .chat-date { 122 | font-size: 0.72em; 123 | font-weight: 400; 124 | color: var(--sat-txt); 125 | } 126 | } 127 | 128 | .latest-message-container { 129 | display: flex; 130 | position: absolute; 131 | width: 100%; 132 | } 133 | 134 | .latest-message { 135 | flex-grow: 1; 136 | display: flex; 137 | font-size: 0.84em; 138 | font-weight: 500; 139 | color: var(--sat-txt); 140 | fill: var(--sat-txt); 141 | position: relative; 142 | max-width: 100%; 143 | 144 | .uicon { 145 | margin-right: 0.2em; 146 | } 147 | 148 | span { 149 | overflow: hidden; 150 | display: -webkit-box; 151 | -webkit-line-clamp: 1; 152 | -webkit-box-orient: vertical; 153 | text-overflow: ellipsis; 154 | } 155 | } 156 | 157 | .chat-acts { 158 | display: flex; 159 | 160 | .unread { 161 | font-size: 0.64em; 162 | padding: 0.2em 0.76em; 163 | border-radius: 50%; 164 | margin: 0 0.5em; 165 | color: var(--white); 166 | background: var(--light-green); 167 | } 168 | } 169 | } 170 | } 171 | 172 | .seentick { 173 | &[data-payload="2"] { 174 | color: var(--blue); 175 | fill: var(--blue); 176 | } 177 | } 178 | 179 | .quick-wtool-container { 180 | position: absolute; 181 | bottom: 1em; 182 | right: 1em; 183 | padding: 0.8em; 184 | border-radius: 3em; 185 | background: var(--light-teal); 186 | color: var(--white); 187 | } 188 | 189 | .camera-container { 190 | height: 100%; 191 | overflow: hidden; 192 | background: black; 193 | } 194 | 195 | .all-contacts, 196 | .call-logs, 197 | .chats-status, 198 | .my-status { 199 | height: max-content; 200 | color: var(--med-txt); 201 | 202 | .call-log, 203 | .chat-status, 204 | .contact-cotainer { 205 | display: flex; 206 | align-items: center; 207 | padding: 0.5em 1em; 208 | // margin-bottom: 1em; 209 | .status-preview-container { 210 | position: relative; 211 | // background: var(--teal); 212 | border-radius: 50%; 213 | padding: 3px; 214 | // overflow: hidden; 215 | .status-preview { 216 | position: absolute; 217 | width: 100%; 218 | height: 100%; 219 | inset: 0; 220 | // transform: scale(-1, 1); 221 | svg { 222 | width: 100%; 223 | height: 100%; 224 | } 225 | 226 | .notviewed { 227 | stroke: var(--teal); 228 | } 229 | 230 | .viewed { 231 | stroke: var(--light-txt); 232 | } 233 | } 234 | 235 | .imageCont { 236 | border: 1px solid var(--white); 237 | } 238 | } 239 | } 240 | } 241 | 242 | .call-logs { 243 | padding-top: 0.5em; 244 | 245 | .status-date { 246 | display: flex; 247 | 248 | .callConnected, 249 | .callMade { 250 | color: var(--light-green); 251 | } 252 | 253 | .callMissed { 254 | color: #eb3434; 255 | } 256 | } 257 | } 258 | 259 | .scale-trans { 260 | opacity: 1; 261 | transform: scale(1); 262 | transition: 200ms ease-in-out; 263 | pointer-events: auto; 264 | transition-property: transform, opacity; 265 | 266 | &[data-vis="0"] { 267 | transform: scale(0.9); 268 | pointer-events: none; 269 | opacity: 0; 270 | } 271 | 272 | &[data-vis="2"] { 273 | transform: scale(1.1); 274 | pointer-events: none; 275 | opacity: 0; 276 | } 277 | } 278 | 279 | // all contacts container 280 | .contacts-container { 281 | position: absolute; 282 | inset: 0; 283 | 284 | .contact-cotainer { 285 | .imageCont, .uicon{ 286 | min-width: 38px; 287 | min-height: 38px; 288 | color: #fefefe; 289 | background: var(--light-teal); 290 | } 291 | } 292 | } 293 | 294 | .all-contacts { 295 | padding-top: 0.5em; 296 | height: 100%; 297 | overflow-y: scroll; 298 | 299 | .status-date { 300 | flex-grow: 1; 301 | overflow: hidden; 302 | display: -webkit-box; 303 | -webkit-line-clamp: 1; 304 | -webkit-box-orient: vertical; 305 | text-overflow: ellipsis; 306 | } 307 | } 308 | -------------------------------------------------------------------------------- /src/containers/apps/youtube/extra.scss: -------------------------------------------------------------------------------- 1 | .yt-vid-view { 2 | position: absolute; 3 | width: 100%; 4 | height: 100%; 5 | max-height: 100%; 6 | bottom: 0; 7 | background: var(--app-bg); 8 | transition: max-height 200ms ease-in-out; 9 | 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | } 14 | 15 | .mini-yt-vid { 16 | bottom: 56px; 17 | max-height: 120px; 18 | height: auto; 19 | flex-direction: row; 20 | 21 | .yt-vid-box { 22 | width: 25%; 23 | height: 3.2em; 24 | overflow: hidden; 25 | } 26 | 27 | .yt-watch-container { 28 | width: 75%; 29 | flex-direction: row; 30 | justify-content: space-between; 31 | 32 | & > div{ 33 | width: auto; 34 | } 35 | 36 | .yt-vid-info { 37 | padding: 0.5em; 38 | 39 | .vid-title { 40 | font-size: 0.8em; 41 | -webkit-line-clamp: 1; 42 | } 43 | } 44 | } 45 | } 46 | 47 | .yt-vid-box { 48 | width: 100%; 49 | height: 14em; 50 | background: #343434; 51 | 52 | .vidCont{ 53 | width: 100%; 54 | height: 100%; 55 | } 56 | } 57 | 58 | .yt-watch-container { 59 | display: flex; 60 | flex-direction: column; 61 | align-items: center; 62 | width: 100%; 63 | height: 50%; 64 | flex-grow: 1; 65 | overflow-y: scroll; 66 | 67 | & > div{ 68 | width: 100%; 69 | } 70 | 71 | .yt-vid-info { 72 | padding: 0.5em 0.8em; 73 | 74 | .vid-title { 75 | font-size: 0.92em; 76 | -webkit-line-clamp: 2; 77 | } 78 | 79 | .vid-stat { 80 | font-weight: 500; 81 | color: var(--light-txt); 82 | font-size: 0.72em; 83 | } 84 | 85 | .vid-acts { 86 | display: flex; 87 | justify-content: space-around; 88 | font-size: 0.75em; 89 | color: var(--med-txt); 90 | margin: 1em 0; 91 | } 92 | } 93 | 94 | .yt-mini-ctrl{ 95 | display: flex; 96 | padding: 0 4px; 97 | color: var(--med-txt); 98 | } 99 | 100 | .yt-channel-row { 101 | display: flex; 102 | align-items: center; 103 | position: relative; 104 | justify-content: space-between; 105 | border: solid 0 #ddd; 106 | border-width: 1px 0; 107 | 108 | .imageCont { 109 | padding: 0.5em; 110 | overflow: hidden; 111 | 112 | img { 113 | border-radius: 50%; 114 | } 115 | } 116 | 117 | .text-xss { 118 | font-weight: 500; 119 | } 120 | 121 | .subscribed-container { 122 | display: flex; 123 | align-items: center; 124 | padding: 0 1em; 125 | } 126 | 127 | .red-txt { 128 | color: #df0404; 129 | } 130 | } 131 | 132 | .yt-comment-box{ 133 | padding: 0.5em 1em; 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/containers/apps/youtube/index.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from 'react'; 2 | import {useSelector, useDispatch} from 'react-redux'; 3 | 4 | import {Icon, Image, LazyComponent} from 'components/utils'; 5 | import {dispatchAction, dispatchAct} from 'store/actions'; 6 | import {Home, ViewPage, TrendingPage, SubsPage, LibPage} from './extra'; 7 | import './youtube.scss'; 8 | 9 | export const YoutubeApp = () => { 10 | const app = useSelector(state => state.home.apps.youtube || {}) 11 | const home = useSelector(state => state.home) 12 | const show = home.ishome==false && home.stack.at(-1)==app.payload 13 | const pagetree = app && app.pagetree || { 14 | "main": { 15 | "home" : {}, 16 | "subs" : {}, 17 | "lib" : {} 18 | } 19 | } 20 | 21 | useEffect(()=>{ 22 | if(app && !app.pagetree){ 23 | dispatchAct({type: "home/setApp", payload: { 24 | id: app.payload, 25 | data: { 26 | ... app, 27 | pagetree: pagetree, 28 | path: ['main'] 29 | } 30 | }}) 31 | } 32 | }, [app]) 33 | 34 | return 35 | } 36 | 37 | const AppContainer = ({app, show}) => { 38 | const ydata = useSelector(state => state.youtube) 39 | const [tab, setTab] = useState(0) 40 | const clstring = `${app.payload}-wrapper` 41 | 42 | const changeTab = (e)=>{ 43 | if(e.target.dataset.payload) setTab(e.target.dataset.payload) 44 | } 45 | 46 | return ( 47 |
48 |
49 |
50 |
51 | 52 |
53 | 54 | 55 | 56 | 57 |
58 |
59 | {tab == 0 && } 60 | {tab == 1 && } 61 | {tab == 3 && } 62 | {tab == 4 && } 63 | {} 64 |
65 | 67 | 69 | 70 | 72 | 74 |
75 |
76 |
77 |
78 | ); 79 | } 80 | -------------------------------------------------------------------------------- /src/containers/apps/youtube/youtube.scss: -------------------------------------------------------------------------------- 1 | .youtube-home { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | height: 100%; 7 | } 8 | 9 | .yt-bottom-nav, 10 | .yt-top-nav { 11 | width: 100%; 12 | display: flex; 13 | position: relative; 14 | justify-content: space-between; 15 | padding: 0.5em 0.6em; 16 | color: var(--txt-col); 17 | 18 | .y-nav-icons { 19 | display: flex; 20 | 21 | .imageCont, 22 | .uicon { 23 | margin: 0 0.5em; 24 | } 25 | } 26 | } 27 | 28 | .yt-bottom-nav { 29 | padding: 0.5em; 30 | color: var(--med-txt); 31 | align-items: center; 32 | display: grid; 33 | grid-template-columns: repeat(5, 1fr); 34 | transition: transform 200ms ease-in-out; 35 | 36 | &[data-hide="true"]{ 37 | transform: translateY(60px); 38 | pointer-events: none; 39 | } 40 | 41 | .uicon { 42 | font-size: 0.7em; 43 | } 44 | } 45 | 46 | .yt-page { 47 | width: 100%; 48 | flex-grow: 1; 49 | overflow-y: scroll; 50 | } 51 | 52 | .yt-item-container { 53 | margin-bottom: 0.5em; 54 | 55 | .yt-vid-thumbnail { 56 | min-height: 12em; 57 | background: var(--comp-txt); 58 | } 59 | 60 | .yt-vid-info { 61 | display: flex; 62 | width: 100%; 63 | margin-top: 0.5em; 64 | margin-bottom: 1em; 65 | padding: 0 0.5em; 66 | 67 | .imageCont { 68 | min-width: 36px; 69 | 70 | img { 71 | border-radius: 2em; 72 | } 73 | } 74 | 75 | .yt-vid-title { 76 | font-size: 0.84em; 77 | font-weight: 600; 78 | overflow: hidden; 79 | display: -webkit-box; 80 | -webkit-line-clamp: 1; 81 | -webkit-box-orient: vertical; 82 | text-overflow: ellipsis; 83 | } 84 | 85 | .yt-vid-extra { 86 | font-size: 0.64em; 87 | font-weight: 500; 88 | color: var(--sat-txt); 89 | } 90 | } 91 | } 92 | 93 | .yt-trending-page {} 94 | 95 | .yt-trending-catg { 96 | display: grid; 97 | grid-template-columns: repeat(2, auto); 98 | grid-row-gap: 0.5em; 99 | grid-column-gap: 0.5em; 100 | padding: 1em; 101 | 102 | .yt-catg { 103 | display: flex; 104 | padding: 0.5em; 105 | color: var(--white); 106 | font-size: 0.9em; 107 | font-weight: 500; 108 | border-radius: 6px; 109 | 110 | img { 111 | filter: saturate(0) brightness(3); 112 | margin-left: 0.25em; 113 | margin-right: 0.5em; 114 | } 115 | 116 | &:nth-child(1) { 117 | background: rgb(195,9,9); 118 | background: linear-gradient(135deg, rgba(195,9,9,1) 0%, rgba(235,59,59,1) 100%); 119 | } 120 | 121 | &:nth-child(2) { 122 | background: rgb(9,195,83); 123 | background: linear-gradient(135deg, rgba(21, 143, 69, 1) 0%, rgba(59,235,141,1) 100%); 124 | } 125 | 126 | &:nth-child(3) { 127 | background: rgb(235,176,93); 128 | background: linear-gradient(135deg, rgba(186, 142, 79, 1) 0%, rgba(240,207,180,1) 100%); 129 | } 130 | 131 | &:nth-child(4) { 132 | background: rgb(59,65,226); 133 | background: linear-gradient(135deg, rgba(59,65,226,1) 0%, rgba(180,196,240,1) 100%); 134 | } 135 | 136 | &:nth-child(5) { 137 | background: rgb(163,163,163); 138 | background: linear-gradient(135deg, rgba(103, 101, 101, 1) 0%, rgba(218,221,198,1) 100%); 139 | } 140 | 141 | &:nth-child(6) { 142 | background: rgb(29,210,71); 143 | background: linear-gradient(135deg, rgba(33, 167, 64, 1) 0%, rgba(106,208,121,1) 100%); 144 | 145 | & img { 146 | filter: saturate(0) invert(1) brightness(3); 147 | } 148 | } 149 | } 150 | } 151 | 152 | .ch-text-all { 153 | padding-left: 1em; 154 | padding-right: 0.5em; 155 | font-size: 0.8em; 156 | color: #125dc2; 157 | } 158 | 159 | .yt-subs-container { 160 | display: flex; 161 | align-items: center; 162 | padding: 0 0.25em; 163 | margin-bottom: 0.5em; 164 | 165 | .yt-channels-sc { 166 | flex-grow: 1; 167 | overflow-x: scroll; 168 | 169 | .yt-ch-body { 170 | display: flex; 171 | width: max-content; 172 | } 173 | } 174 | 175 | .yt-channel { 176 | display: flex; 177 | flex-direction: column; 178 | align-items: center; 179 | padding: 0.5em 0.5em 0.25em; 180 | box-sizing: border-box; 181 | 182 | &[data-state="1"] { 183 | background: rgba(74, 124, 224, 0.5); 184 | } 185 | 186 | &[data-state="2"] { 187 | opacity: 0.25; 188 | } 189 | 190 | .ch-name { 191 | max-width: 48px; 192 | font-size: 0.64em; 193 | text-align: center; 194 | } 195 | 196 | .imageCont { 197 | border-radius: 2em; 198 | overflow: hidden; 199 | } 200 | } 201 | } 202 | 203 | .yt-his-container { 204 | margin-top: 0.5em; 205 | 206 | .yt-his-title { 207 | padding: 0.25em 0.5em; 208 | display: flex; 209 | justify-content: space-between; 210 | } 211 | 212 | .yt-his-vids { 213 | width: 100%; 214 | overflow-x: scroll; 215 | } 216 | 217 | .yt-his-scbody { 218 | width: max-content; 219 | display: flex; 220 | } 221 | 222 | .yt-his-vid { 223 | width: 8em; 224 | margin: 0 0.5em; 225 | 226 | .his-vid-title { 227 | max-height: 48px; 228 | -webkit-line-clamp: 2; 229 | font-size: 0.72em; 230 | } 231 | 232 | .his-chname { 233 | color: var(--med-txt); 234 | font-weight: 400; 235 | font-size: 0.64em; 236 | } 237 | } 238 | } 239 | 240 | .yt-lib-cont { 241 | color: var(--med-txt); 242 | .yt-lib-icon svg{ 243 | fill: var(--med-txt); 244 | } 245 | } 246 | -------------------------------------------------------------------------------- /src/containers/home/home.scss: -------------------------------------------------------------------------------- 1 | .viewport { 2 | position: absolute; 3 | width: 100%; 4 | height: 100%; 5 | top: 0; 6 | overflow: hidden; 7 | display: flex; 8 | flex-direction: column; 9 | z-index: 0; 10 | } 11 | 12 | .home { 13 | width: 100%; 14 | // height: 100%; 15 | // font-size: 3em; 16 | font-weight: 600; 17 | color: #1e252b; 18 | flex-grow: 1; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | position: relative; 23 | // padding: 0 1.6em; 24 | .homescreen-container { 25 | width: 100%; 26 | height: 100%; 27 | position: relative; 28 | flex-grow: 1; 29 | display: flex; 30 | flex-direction: column; 31 | align-items: center; 32 | } 33 | } 34 | 35 | .favorite-bar { 36 | width: 100%; 37 | // height: 2em; 38 | padding: 0 0.5em 0.6em; 39 | display: flex; 40 | justify-content: space-around; 41 | } 42 | 43 | .homescreen { 44 | position: absolute; 45 | inset: 0; 46 | 47 | .pages-container { 48 | height: 100%; 49 | display: flex; 50 | flex-direction: column; 51 | } 52 | } 53 | 54 | .pages-container { 55 | .slick-list { 56 | flex-grow: 1; 57 | } 58 | 59 | .slick-track { 60 | height: 100%; 61 | } 62 | 63 | .slick-slide > div { 64 | height: 100%; 65 | } 66 | 67 | .page-container { 68 | width: 100%; 69 | height: 100%; 70 | display: flex !important; 71 | // place-items: center; 72 | flex-direction: column; 73 | align-items: center; 74 | padding: 0.5em; 75 | padding-bottom: 0; 76 | } 77 | 78 | .slick-dots { 79 | position: relative; 80 | bottom: 0; 81 | 82 | li { 83 | width: 6px; 84 | } 85 | } 86 | } 87 | 88 | .grid-page { 89 | width: 100%; 90 | max-height: 100%; 91 | flex-grow: 1; 92 | display: grid; 93 | grid-template-columns: repeat(4, 1fr); 94 | grid-template-rows: repeat(6, 1fr); 95 | // grid-template-rows: repeat(6, auto); 96 | 97 | .page-cell { 98 | box-sizing: border-box; 99 | border: solid 1px red; 100 | } 101 | } 102 | 103 | .cell-container { 104 | display: grid; 105 | position: relative; 106 | place-items: center; 107 | align-items: center; 108 | 109 | .app-container{ 110 | display: flex; 111 | flex-direction: column; 112 | align-items: center; 113 | } 114 | 115 | .app-name { 116 | font-size: 0.8em; 117 | color: var(--med-txt); 118 | font-weight: 600; 119 | margin: 4px 0; 120 | } 121 | } 122 | 123 | .uicon[data-padd="true"] { 124 | background: #fefefe; 125 | 126 | & > * { 127 | transform: scale(0.75); 128 | } 129 | } 130 | 131 | .apps-wrapper, .recent-apps-container{ 132 | position: absolute; 133 | inset: 0; 134 | } 135 | 136 | .full-height-swiper{ 137 | height: 100%; 138 | 139 | .slick-list, .slick-track{ 140 | height: 100%; 141 | } 142 | 143 | .slick-slide > div{ 144 | height: 100%; 145 | } 146 | } 147 | 148 | .recent-apps-container{ 149 | opacity: 0; 150 | transition: opacity 200ms ease-in-out; 151 | pointer-events: none; 152 | 153 | &[data-hide="false"]{ 154 | pointer-events: auto; 155 | opacity: 1; 156 | } 157 | } 158 | 159 | .recent-slider{ 160 | height: 100%; 161 | transform: scale(1); 162 | box-sizing: border-box; 163 | transition: transform 200ms ease-in-out; 164 | 165 | &[data-hide="false"]{ 166 | transform: scale(0.58); 167 | } 168 | 169 | .slick-list { 170 | margin: 0 -1.5em; 171 | overflow: visible; 172 | } 173 | 174 | .slick-slide > div { 175 | margin: 0 1.5em; 176 | } 177 | } 178 | 179 | .mini-app-container{ 180 | background: #444; 181 | height: 100%; 182 | border-radius: 2em; 183 | // overflow: hidden; 184 | position: relative; 185 | opacity: 1; 186 | transform: translateY(0); 187 | transition-property: opacity, transform; 188 | 189 | &[data-rem="true"]{ 190 | animation: fade-up 600ms ease-in-out; 191 | } 192 | } 193 | 194 | .closing-all-apps .mini-app-container{ 195 | animation: fade-up 600ms ease-in-out; 196 | } 197 | 198 | @keyframes fade-up { 199 | 0%{ 200 | opacity: 1; 201 | transform: translateY(0); 202 | } 203 | 204 | 33%{ 205 | opacity: 0; 206 | transform: translateY(-50%); 207 | } 208 | 209 | 100%{ 210 | opacity: 0; 211 | transform: translateY(-50%); 212 | } 213 | } 214 | 215 | .mini-app-icon{ 216 | width: 100%; 217 | position: absolute; 218 | display: flex; 219 | flex-direction: column; 220 | align-items: center; 221 | transform: translateY(-50%); 222 | z-index: 1; 223 | 224 | .uicon{ 225 | width: 20%; 226 | border-radius: 40%; 227 | // width: max-content; 228 | } 229 | } 230 | 231 | .close-recent-container{ 232 | width: 100%; 233 | height: 20%; 234 | position: absolute; 235 | bottom: 0; 236 | display: grid; 237 | place-items: center; 238 | 239 | .close-all-btn{ 240 | padding: 0.5em 3em; 241 | border-radius: 2em; 242 | color: var(--comp-txt); 243 | background: rgba(68, 68, 68, 0.25); 244 | } 245 | } 246 | 247 | .no-recent-container{ 248 | position: absolute; 249 | inset: 0; 250 | display: grid; 251 | place-items: center; 252 | font-size: 1.2em; 253 | letter-spacing: 1px; 254 | word-spacing: 2px; 255 | color: var(--med-txt); 256 | } 257 | 258 | .mini-app-holder{ 259 | position: relative; 260 | width: 100%; 261 | height: 100%; 262 | border-radius: 2em; 263 | overflow: hidden; 264 | } 265 | 266 | .mini-app-wrapper{ 267 | height: 100%; 268 | border-radius: 0; 269 | } 270 | 271 | .recent-cover{ 272 | position: absolute; 273 | inset: 0; 274 | z-index: 10; 275 | } 276 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 6 | 7 | @font-face { 8 | font-family: "SamsungOne400"; 9 | src: url("https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/SamsungOneKorean-400.woff2") 10 | format("woff2"), 11 | url(https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/SamsungOneKorean-400.woff) 12 | format("woff"); 13 | font-weight: 400; 14 | } 15 | 16 | @font-face { 17 | font-family: "SamsungOne500"; 18 | src: url("https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/SamsungOneKorean-500.woff2") 19 | format("woff2"), 20 | url(https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/SamsungOneKorean-500.woff) 21 | format("woff"); 22 | font-weight: 500; 23 | } 24 | 25 | @font-face { 26 | font-family: "SamsungOne700"; 27 | src: url("https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/SamsungOneKorean-700.woff2") 28 | format("woff2"), 29 | url(https://d3unf4s5rp9dfh.cloudfront.net/ONEUI/SamsungOneKorean-700.woff) 30 | format("woff"); 31 | font-weight: 700; 32 | } 33 | 34 | html, body{ 35 | margin: 0; 36 | padding: 0; 37 | height: 100%; 38 | } 39 | 40 | body { 41 | font-family: "SamsungOne500", sans-serif; 42 | 43 | -webkit-font-smoothing: antialiased; 44 | -moz-osx-font-smoothing: grayscale; 45 | /* font-family: "SamsungOne500-kr",-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", */ 46 | /* "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", */ 47 | /* sans-serif; */ 48 | 49 | background: #121212; 50 | /* color: #fefefe; */ 51 | user-select: none; 52 | overflow: hidden; 53 | } 54 | 55 | * { 56 | scrollbar-width: none; 57 | } 58 | 59 | *::selection { 60 | /* background: initial; */ 61 | } 62 | 63 | code { 64 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 65 | monospace; 66 | } 67 | 68 | #root{ 69 | width: 100%; 70 | height: 100%; 71 | display: grid; 72 | place-items: center; 73 | } 74 | 75 | .App { 76 | position: relative; 77 | width: 100%; 78 | height: 100%; 79 | max-width: 440px; 80 | max-height: 100vh; 81 | } 82 | 83 | .appwrap { 84 | position: relative; 85 | height: 100%; 86 | z-index: 0; 87 | overflow: hidden; 88 | } 89 | 90 | .redbd{ 91 | box-sizing: border-box; 92 | border: solid 1px red; 93 | } 94 | 95 | .dpShad { 96 | filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.25)); 97 | } 98 | 99 | .mdShad { 100 | filter: drop-shadow(0 1px 4px rgba(41, 41, 41, 0.2)); 101 | } 102 | 103 | .ltShad { 104 | filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); 105 | } 106 | 107 | *::-webkit-scrollbar { 108 | width: 4px; 109 | height: 4px; 110 | background-color: transparent; 111 | } 112 | 113 | *:hover::-webkit-scrollbar-thumb{ 114 | background: rgba(32, 24, 148, 0.4); 115 | } 116 | 117 | *::-webkit-scrollbar-thumb { 118 | width: 4px; 119 | height: 4px; 120 | border-radius: 10px; 121 | background-color: transparent; 122 | } 123 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import store from './store'; 6 | import * as Sentry from "@sentry/react"; 7 | import { BrowserTracing } from "@sentry/tracing"; 8 | import { Provider } from 'react-redux'; 9 | import * as serviceWorkerRegistration from './serviceWorkerRegistration'; 10 | 11 | Sentry.init({ 12 | dsn: "https://202b09d8695844e89470727c1c381957@o575799.ingest.sentry.io/6385094", 13 | integrations: [new BrowserTracing()], 14 | 15 | // Set tracesSampleRate to 1.0 to capture 100% 16 | // of transactions for performance monitoring. 17 | // We recommend adjusting this value in production 18 | tracesSampleRate: 1.0, 19 | }); 20 | 21 | ReactDOM.render( 22 | 23 | 24 | 25 | 26 | , 27 | document.getElementById('root') 28 | ); 29 | 30 | // If you want your app to work offline and load faster, you can change 31 | // unregister() to register() below. Note this comes with some pitfalls. 32 | // Learn more about service workers: https://bit.ly/CRA-PWA 33 | serviceWorkerRegistration.register(); 34 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/service-worker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-restricted-globals */ 2 | 3 | // This service worker can be customized! 4 | // See https://developers.google.com/web/tools/workbox/modules 5 | // for the list of available Workbox modules, or add any other 6 | // code you'd like. 7 | // You can also remove this file if you'd prefer not to use a 8 | // service worker, and the Workbox build step will be skipped. 9 | 10 | import { clientsClaim } from 'workbox-core'; 11 | import { ExpirationPlugin } from 'workbox-expiration'; 12 | import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching'; 13 | import { registerRoute } from 'workbox-routing'; 14 | import { StaleWhileRevalidate } from 'workbox-strategies'; 15 | 16 | clientsClaim(); 17 | 18 | // Precache all of the assets generated by your build process. 19 | // Their URLs are injected into the manifest variable below. 20 | // This variable must be present somewhere in your service worker file, 21 | // even if you decide not to use precaching. See https://cra.link/PWA 22 | precacheAndRoute(self.__WB_MANIFEST); 23 | 24 | // Set up App Shell-style routing, so that all navigation requests 25 | // are fulfilled with your index.html shell. Learn more at 26 | // https://developers.google.com/web/fundamentals/architecture/app-shell 27 | const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$'); 28 | registerRoute( 29 | // Return false to exempt requests from being fulfilled by index.html. 30 | ({ request, url }) => { 31 | // If this isn't a navigation, skip. 32 | if (request.mode !== 'navigate') { 33 | return false; 34 | } // If this is a URL that starts with /_, skip. 35 | 36 | if (url.pathname.startsWith('/_')) { 37 | return false; 38 | } // If this looks like a URL for a resource, because it contains // a file extension, skip. 39 | 40 | if (url.pathname.match(fileExtensionRegexp)) { 41 | return false; 42 | } // Return true to signal that we want to use the handler. 43 | 44 | return true; 45 | }, 46 | createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html') 47 | ); 48 | 49 | // An example runtime caching route for requests that aren't handled by the 50 | // precache, in this case same-origin .png requests like those from in public/ 51 | registerRoute( 52 | // Add in any other file extensions or routing criteria as needed. 53 | ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst. 54 | new StaleWhileRevalidate({ 55 | cacheName: 'images', 56 | plugins: [ 57 | // Ensure that once this runtime cache reaches a maximum size the 58 | // least-recently used images are removed. 59 | new ExpirationPlugin({ maxEntries: 50 }), 60 | ], 61 | }) 62 | ); 63 | 64 | // This allows the web app to trigger skipWaiting via 65 | // registration.waiting.postMessage({type: 'SKIP_WAITING'}) 66 | self.addEventListener('message', (event) => { 67 | if (event.data && event.data.type === 'SKIP_WAITING') { 68 | self.skipWaiting(); 69 | } 70 | }); 71 | 72 | // Any other custom service worker logic can go here. 73 | -------------------------------------------------------------------------------- /src/serviceWorkerRegistration.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://cra.link/PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/) 19 | ); 20 | 21 | export function register(config) { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Let's check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl, config); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://cra.link/PWA' 45 | ); 46 | }); 47 | } else { 48 | // Is not localhost. Just register service worker 49 | registerValidSW(swUrl, config); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl, config) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then((registration) => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | if (installingWorker == null) { 62 | return; 63 | } 64 | installingWorker.onstatechange = () => { 65 | if (installingWorker.state === 'installed') { 66 | if (navigator.serviceWorker.controller) { 67 | // At this point, the updated precached content has been fetched, 68 | // but the previous service worker will still serve the older 69 | // content until all client tabs are closed. 70 | console.log( 71 | 'New content is available and will be used when all ' + 72 | 'tabs for this page are closed. See https://cra.link/PWA.' 73 | ); 74 | 75 | // Execute callback 76 | if (config && config.onUpdate) { 77 | config.onUpdate(registration); 78 | } 79 | } else { 80 | // At this point, everything has been precached. 81 | // It's the perfect time to display a 82 | // "Content is cached for offline use." message. 83 | console.log('Content is cached for offline use.'); 84 | 85 | // Execute callback 86 | if (config && config.onSuccess) { 87 | config.onSuccess(registration); 88 | } 89 | } 90 | } 91 | }; 92 | }; 93 | }) 94 | .catch((error) => { 95 | console.error('Error during service worker registration:', error); 96 | }); 97 | } 98 | 99 | function checkValidServiceWorker(swUrl, config) { 100 | // Check if the service worker can be found. If it can't reload the page. 101 | fetch(swUrl, { 102 | headers: { 'Service-Worker': 'script' }, 103 | }) 104 | .then((response) => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then((registration) => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log('No internet connection found. App is running in offline mode.'); 124 | }); 125 | } 126 | 127 | export function unregister() { 128 | if ('serviceWorker' in navigator) { 129 | navigator.serviceWorker.ready 130 | .then((registration) => { 131 | registration.unregister(); 132 | }) 133 | .catch((error) => { 134 | console.error(error.message); 135 | }); 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /src/store/actions/data/apps.js: -------------------------------------------------------------------------------- 1 | var apps = [ 2 | { 3 | name: 'Assistant', 4 | icon: 'assistant', 5 | type: 'app', 6 | padd: true 7 | }, 8 | { 9 | name: 'BuyMeACoffee', 10 | icon: 'buyme', 11 | action: 'home/openLink', 12 | payload: 'https://buymeacoffee.com/blueedgetechno', 13 | type: 'app' 14 | }, 15 | { 16 | name: 'Calender', 17 | icon: 'calender', 18 | type: 'app', 19 | padd: true 20 | }, 21 | { 22 | name: 'Chrome', 23 | icon: 'chrome', 24 | type: 'app', 25 | padd: true 26 | }, 27 | { 28 | name: 'Classroom', 29 | icon: 'classroom', 30 | type: 'app', 31 | padd: true 32 | }, 33 | { 34 | name: 'Contacts', 35 | icon: 'contacts', 36 | type: 'app' 37 | }, 38 | { 39 | name: 'Discord', 40 | icon: 'discord', 41 | type: 'app', 42 | action: 'home/openLink', 43 | payload: 'https://discord.gg/NcjaNdwtnR' 44 | }, 45 | { 46 | name: 'Docs', 47 | icon: 'docs', 48 | type: 'app', 49 | padd: true 50 | }, 51 | { 52 | name: 'Drive', 53 | icon: 'drive', 54 | type: 'app', 55 | padd: true 56 | }, 57 | { 58 | name: 'Duo', 59 | icon: 'duo', 60 | type: 'app' 61 | }, 62 | { 63 | name: 'Earth', 64 | icon: 'earth', 65 | type: 'app' 66 | }, 67 | { 68 | name: 'Forms', 69 | icon: 'forms', 70 | type: 'app', 71 | padd: true 72 | }, 73 | { 74 | name: 'GBoard', 75 | icon: 'gboard', 76 | type: 'app', 77 | padd: true 78 | }, 79 | { 80 | name: 'Github', 81 | icon: 'github', 82 | type: 'app', 83 | action: 'home/openLink', 84 | payload: 'https://github.com/blueedgetechno/androidInReact', 85 | padd: true 86 | }, 87 | { 88 | name: 'Gmail', 89 | icon: 'gmail', 90 | type: 'app', 91 | action: 'home/openLink', 92 | payload: 'mailto:blueedgetechno@gmail.com', 93 | padd: true 94 | }, 95 | { 96 | name: 'Search', 97 | icon: 'google', 98 | type: 'app', 99 | padd: true 100 | }, 101 | { 102 | name: 'Google Fit', 103 | icon: 'googlefit', 104 | type: 'app', 105 | padd: true 106 | }, 107 | { 108 | name: 'GPay', 109 | icon: 'googlepay', 110 | type: 'app', 111 | padd: true 112 | }, 113 | { 114 | name: 'Keep Notes', 115 | icon: 'keep', 116 | type: 'app', 117 | padd: true 118 | }, 119 | { 120 | name: 'Maps', 121 | icon: 'maps', 122 | type: 'app', 123 | padd: true 124 | }, 125 | { 126 | name: 'Meet', 127 | icon: 'meet', 128 | type: 'app', 129 | padd: true 130 | }, 131 | { 132 | name: 'Messages', 133 | icon: 'messages', 134 | type: 'app' 135 | }, 136 | { 137 | name: 'News', 138 | icon: 'news', 139 | type: 'app' 140 | }, 141 | { 142 | name: 'Photos', 143 | icon: 'photos', 144 | type: 'app', 145 | padd: true 146 | }, 147 | { 148 | name: 'Books', 149 | icon: 'playbooks', 150 | type: 'app', 151 | padd: true 152 | }, 153 | { 154 | name: 'Movies', 155 | icon: 'playmovies', 156 | type: 'app', 157 | padd: true 158 | }, 159 | { 160 | name: 'Play Store', 161 | icon: 'playstore', 162 | type: 'app', 163 | padd: true 164 | }, 165 | { 166 | name: 'Apps', 167 | icon: 'ssapps', 168 | type: 'app' 169 | }, 170 | { 171 | name: 'Settings', 172 | icon: 'settings', 173 | type: 'app' 174 | }, 175 | { 176 | name: 'Sheets', 177 | icon: 'sheets', 178 | type: 'app', 179 | padd: true 180 | }, 181 | { 182 | name: 'Slides', 183 | icon: 'slides', 184 | type: 'app', 185 | padd: true 186 | }, 187 | { 188 | name: 'Browser', 189 | icon: 'ssbrowser', 190 | type: 'app' 191 | }, 192 | { 193 | name: 'Calculator', 194 | icon: 'sscalculator', 195 | type: 'app' 196 | }, 197 | { 198 | name: 'Calender', 199 | icon: 'sscalender', 200 | type: 'app' 201 | }, 202 | { 203 | name: 'Camera', 204 | icon: 'sscamera', 205 | type: 'app' 206 | }, 207 | { 208 | name: 'Clock', 209 | icon: 'ssclock', 210 | type: 'app' 211 | }, 212 | { 213 | name: 'Contacts', 214 | icon: 'sscontacts', 215 | type: 'app' 216 | }, 217 | { 218 | name: 'Files', 219 | icon: 'ssfiles', 220 | type: 'app' 221 | }, 222 | { 223 | name: 'Gallery', 224 | icon: 'ssgallery', 225 | type: 'app' 226 | }, 227 | { 228 | name: 'Health', 229 | icon: 'sshealth', 230 | type: 'app' 231 | }, 232 | { 233 | name: 'Keyboard', 234 | icon: 'sskeyboard', 235 | type: 'app' 236 | }, 237 | { 238 | name: 'Mail', 239 | icon: 'ssmail', 240 | type: 'app' 241 | }, 242 | { 243 | name: 'Members', 244 | icon: 'ssmember', 245 | type: 'app' 246 | }, 247 | { 248 | name: 'Messages', 249 | icon: 'ssmessages', 250 | type: 'app' 251 | }, 252 | { 253 | name: 'Music', 254 | icon: 'ssmusic', 255 | type: 'app' 256 | }, 257 | { 258 | name: 'Notes', 259 | icon: 'ssnotes', 260 | type: 'app' 261 | }, 262 | { 263 | name: 'Phone', 264 | icon: 'ssphone', 265 | type: 'app' 266 | }, 267 | { 268 | name: 'Radio', 269 | icon: 'ssradio', 270 | type: 'app' 271 | }, 272 | { 273 | name: 'Reader', 274 | icon: 'ssreader', 275 | type: 'app' 276 | }, 277 | { 278 | name: 'Recorder', 279 | icon: 'ssrecorder', 280 | type: 'app' 281 | }, 282 | { 283 | name: 'Themes', 284 | icon: 'ssthemes', 285 | type: 'app' 286 | }, 287 | { 288 | name: 'Translate', 289 | icon: 'sstranslate', 290 | type: 'app' 291 | }, 292 | { 293 | name: 'Unescape', 294 | icon: 'unescape', 295 | type: 'app', 296 | action: 'home/openLink', 297 | payload: 'https://blueedge.me/unescape' 298 | }, 299 | { 300 | name: 'Videos', 301 | icon: 'ssvideo', 302 | type: 'app' 303 | }, 304 | { 305 | name: 'Translate', 306 | icon: 'translate', 307 | type: 'app' 308 | }, 309 | { 310 | name: 'Twitter', 311 | icon: 'twitter', 312 | type: 'app', 313 | action: 'home/openLink', 314 | payload: 'https://twitter.com/blueedgetechno' 315 | }, 316 | { 317 | name: 'WhatsApp', 318 | icon: 'whatsapp', 319 | type: 'app' 320 | }, 321 | { 322 | name: 'Youtube', 323 | icon: 'youtube', 324 | type: 'app', 325 | padd: true 326 | } 327 | ] 328 | 329 | export default apps 330 | -------------------------------------------------------------------------------- /src/store/actions/data/preset.js: -------------------------------------------------------------------------------- 1 | import apps from './apps' 2 | 3 | const srandom = (seed)=>{ 4 | var x = Math.sin(seed++) * 10000 5 | return x - Math.floor(x) 6 | } 7 | 8 | const shuffle = (arr, seed)=>{ 9 | var m = arr.length, t, i 10 | while (m) { 11 | i = Math.floor(srandom(seed) * m--) 12 | t = arr[m] 13 | arr[m] = arr[i] 14 | arr[i] = t 15 | ++seed 16 | } 17 | 18 | return arr 19 | } 20 | 21 | export const favbar = [ 22 | "twitter", "github","settings","whatsapp" 23 | ] 24 | 25 | export const page1wid = [ 26 | [1,2,1,5,"GoogleSearch"], 27 | [2,4,3,5,"ShortWeather"], 28 | [2,4,1,3,"MinimalVertClock"], 29 | [4,6,3,5,"AnalogClock"], 30 | [4,6,1,2,"MinimalClock"] 31 | ] 32 | 33 | export const page2wid = [ 34 | [4,6,1,3,"DayCountdown"] 35 | ] 36 | 37 | export const page3wid = [ 38 | [3,6,1,5,"WideWeather"] 39 | ] 40 | 41 | export const page4wid = [ 42 | [1,4,1,5,"WideCalender"] 43 | ] 44 | 45 | const page1arr = [ 46 | "playstore", "youtube", "google", "unescape" 47 | ] 48 | 49 | const page2arr = [ 50 | "ssphone", "gmail", "discord", "buyme" 51 | ] 52 | 53 | export const page1apps = apps.filter(x => page1arr.includes(x.icon)).sort((a, b) => { 54 | return page1arr.indexOf(a.icon) > page1arr.indexOf(b.icon) ? 1 : -1 55 | }) 56 | 57 | export const page2bar = apps.filter(x => page2arr.includes(x.icon)).sort((a, b) => { 58 | return page2arr.indexOf(a.icon) > page2arr.indexOf(b.icon) ? 1 : -1 59 | }) 60 | 61 | var remapps = shuffle(apps.filter(x => { 62 | return !page1arr.includes(x.icon) && !page2arr.includes(x.icon) && !favbar.includes(x.icon) 63 | }), new Date().getFullYear()) 64 | 65 | export const page2apps = [...remapps.slice(0,12)] 66 | export const page3apps = [...remapps.slice(12,20)] 67 | -------------------------------------------------------------------------------- /src/store/actions/prototypes.js: -------------------------------------------------------------------------------- 1 | const {round, floor, random, min, max, abs} = Math; 2 | 3 | Array.prototype.remove = function(a) { 4 | var idx = this.indexOf(a) 5 | for (var i = idx; i < this.length - 1; i++) { 6 | this[i] = this[i+1] 7 | } 8 | 9 | this.length -= 1 10 | } 11 | 12 | String.prototype.strip = function(c) { 13 | var i = 0, 14 | j = this.length - 1; 15 | while (this[i] === c) i++; 16 | while (this[j] === c) j--; 17 | return this.slice(i, j + 1); 18 | } 19 | 20 | String.prototype.csum = function() { 21 | return [...Array(this.length)].map((x,i) => this.charCodeAt(i)).reduce((a,b) => a+b) 22 | } 23 | 24 | String.prototype.reverse = function() { 25 | return this.split('').reverse().join('') 26 | } 27 | 28 | String.prototype.count = function(c) { 29 | var result = 0, 30 | i = 0; 31 | for (i; i < this.length; i++) 32 | if (this[i] == c) result++; 33 | return result; 34 | }; 35 | 36 | String.prototype.capitalize = function() { 37 | return this.charAt(0).toUpperCase() + this.slice(1); 38 | }; 39 | 40 | Number.prototype.quantf = function() { 41 | if(this < 1000) return this + 1 - 1 42 | else if(this < 1e6) return Math.floor(this/1000)+"K" 43 | else if(this < 1e9) return Math.floor(this/1e5)/10 +"M" 44 | else return Math.floor(this/1e8)/10 +"B" 45 | }; 46 | 47 | Date.prototype.time12 = function() { 48 | return this.toLocaleTimeString("en-US", { 49 | hour: "numeric", 50 | minute: "numeric" 51 | }) 52 | }; 53 | 54 | Date.prototype.time24 = function() { 55 | return this.toLocaleTimeString("en-US", { 56 | hour: "numeric", 57 | minute: "numeric", 58 | hour12: false 59 | }) 60 | }; 61 | 62 | Date.prototype.pastdate = function() { 63 | if(this.toDateString() == new Date().toDateString()) return "Today" 64 | else if (this.toDateString() == new Date(new Date() - 24*3600000).toDateString()) { 65 | return "Yesterday" 66 | }else{ 67 | return this.toLocaleDateString("en-US", { 68 | month: "long", 69 | day: "numeric", 70 | year: "numeric" 71 | }) 72 | } 73 | }; 74 | 75 | Date.prototype.minifyTime = function(t) { 76 | if(!t) t = round((new Date() - this)/(60*1000)) 77 | 78 | if(t < 60) return `${t} min ago` 79 | else{ 80 | var d = new Date(new Date() - t*60*1000), 81 | timestr = d.pastdate() + ', ' 82 | 83 | timestr += d.time12() 84 | return timestr 85 | } 86 | } 87 | 88 | Date.prototype.minifyDate = function(t) { 89 | if(!t) t = round((new Date() - this)/(60*1000)) 90 | 91 | if(t < 60) return `${t} min ago` 92 | else if(t < 1440) return `${Math.floor(t/60)} hours ago` 93 | else if(t < 43200) return `${Math.floor(t/1440)} days ago` 94 | else if(t < 525600) return `${Math.floor(t/43200)} months ago` 95 | else return `${Math.floor(t/525600)} years ago` 96 | } 97 | 98 | Date.prototype.pastdatetime = function() { 99 | var timestr = "", cdate = new Date(); 100 | if(this.toDateString() == cdate.toDateString()) timestr = "Today" 101 | else if (this.toDateString() == new Date(cdate - 24*36*1e5).toDateString()) { 102 | timestr = "Yesterday" 103 | }else if(this.getFullYear() == cdate.getFullYear()){ 104 | timestr = this.toLocaleDateString("en-US", { 105 | month: "long", 106 | day: "numeric" 107 | }) 108 | }else{ 109 | timestr = this.toLocaleDateString("en-US", { 110 | day: "numeric", 111 | month: "numeric", 112 | year: "2-digit" 113 | }) 114 | } 115 | 116 | timestr += ", " 117 | timestr += this.time12() 118 | 119 | return timestr 120 | }; 121 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import thunk from "redux-thunk"; 3 | 4 | // reducers who will be repsonsible for all the actions and state handling 5 | import wallReducer from './reducers/wallpaper'; 6 | import quickpanelReducer from './reducers/quickpanel'; 7 | import globalReducer from "./reducers/global"; 8 | import homeReducer from "./reducers/home"; 9 | import widgetReducer from "./reducers/widget"; 10 | 11 | import WhatsAppReducer from './reducers/apps/whatsapp'; 12 | import YouTubeReducer from './reducers/apps/youtube'; 13 | 14 | const allReducers = { 15 | wallpaper: wallReducer, 16 | quickpanel: quickpanelReducer, 17 | global: globalReducer, 18 | home: homeReducer, 19 | widget: widgetReducer, 20 | whatsapp: WhatsAppReducer, 21 | youtube: YouTubeReducer 22 | }; 23 | 24 | const store = configureStore({ 25 | reducer: allReducers, 26 | middleware: [thunk] 27 | }); 28 | 29 | export default store; 30 | -------------------------------------------------------------------------------- /src/store/reducers/apps/whatsapp.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | var initialState = {}; 3 | 4 | const closeExtras = (state, action) => { 5 | if(action.type != 'home/closeAllApps' && action.payload != "whatsapp") return 6 | state.media.vis = false 7 | state.status.vis = false 8 | } 9 | 10 | const WhatsApp = createSlice({ 11 | name: "whatsapp", 12 | initialState: initialState, 13 | reducers: { 14 | setData: (state, action) => { 15 | Object.keys(action.payload).forEach(key => { 16 | state[key] = action.payload[key] 17 | }); 18 | }, 19 | setProp: (state, action) => { 20 | state[action.payload.key] = action.payload.value 21 | }, 22 | setChatProp: (state, action) => { 23 | const {id, key, value} = action.payload; 24 | if(!id || !state.chats[id]) return 25 | state.chats[id][key] = value 26 | 27 | }, 28 | setMedia: (state, action) => { 29 | if(action.payload) state.media = action.payload; 30 | state.media.vis = true 31 | // component variable that indicates the home goback action 32 | // to not goback and just turn it off 33 | state.comp = true 34 | }, 35 | setStatus: (state, action) => { 36 | state.status.vis = true 37 | state.status.id = action.payload || -1; 38 | state.comp = true 39 | }, 40 | setViewStatus: (state, action) => { 41 | var {id, count} = action.payload 42 | if(id==-1) return 43 | 44 | var contact = state.chats[id] 45 | if(!contact) return 46 | 47 | for (var i = 0; i < contact.status.length; i++) { 48 | if(i { 55 | var contact = {...state.chats[action.payload.id]} 56 | if(!contact) return 57 | 58 | contact.chat = contact.chat || [] 59 | var msg = { 60 | type: "2", 61 | msg: action.payload.msg, 62 | media: action.payload.media, 63 | src: action.payload.src, 64 | seen: 1, 65 | time: new Date().toISOString() 66 | } 67 | 68 | contact.chat.push(msg) 69 | state.chats[action.payload.id].chat = contact.chat 70 | } 71 | }, 72 | extraReducers: { 73 | 'home/goBack': (state, action) => { 74 | state.media.vis = false 75 | state.status.vis = false 76 | state.comp = false 77 | }, 78 | 'home/closeApp': closeExtras, 79 | 'home/closeAllApps': closeExtras 80 | } 81 | }); 82 | 83 | export default WhatsApp.reducer; 84 | -------------------------------------------------------------------------------- /src/store/reducers/apps/youtube.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | var initialState = {} 4 | 5 | const YouTube = createSlice({ 6 | name: "youtube", 7 | initialState: initialState, 8 | reducers: { 9 | setData: (state, action) => { 10 | Object.keys(action.payload).forEach(key => { 11 | state[key] = action.payload[key] 12 | }); 13 | }, 14 | setProp: (state, action) => { 15 | state[action.payload.key] = action.payload.value 16 | }, 17 | watchVideo: (state, action) => { 18 | state.watch.id = action.payload 19 | state.comp = true 20 | }, 21 | closeVid: (state, action) => { 22 | state.watch.id = null 23 | state.comp = false 24 | }, 25 | toggleSub: (state, action) => { 26 | if(state.subd.includes(action.payload)){ 27 | state.subd = state.subd.filter(x => x!= action.payload) 28 | }else{ 29 | var tmp = [...state.subd] 30 | tmp.push(action.payload) 31 | state.subd = [...tmp] 32 | } 33 | } 34 | }, 35 | extraReducers: { 36 | 'home/goBack': (state, action) => { 37 | state.comp = false 38 | } 39 | } 40 | }); 41 | 42 | export default YouTube.reducer; 43 | -------------------------------------------------------------------------------- /src/store/reducers/global.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | time: { 5 | hours: 0, 6 | minutes: 0, 7 | abb: "", 8 | military: false 9 | }, 10 | date: { 11 | day: 1, 12 | month: 0, 13 | year: 1970 14 | }, 15 | battery: { 16 | charging: false, 17 | level: 1, 18 | }, 19 | display: { 20 | width: window.innerWidth, 21 | height: window.innerHeight 22 | } 23 | }; 24 | 25 | const Global = createSlice({ 26 | name: "global", 27 | initialState: initialState, 28 | reducers: { 29 | battery: (state, action) => { 30 | state.battery = action.payload; 31 | }, 32 | time: (state, action) => { 33 | state.time.hours = action.payload.hours; 34 | state.time.minutes = action.payload.minutes; 35 | state.time.abb = action.payload.abb; 36 | }, 37 | date: (state, action) => { 38 | state.date = action.payload; 39 | }, 40 | resolution: (state, action) => { 41 | state.display.width = action.payload.width; 42 | state.display.height = action.payload.height; 43 | } 44 | }, 45 | }); 46 | 47 | export default Global.reducer; 48 | -------------------------------------------------------------------------------- /src/store/reducers/home.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | var initialState = { 4 | slides: { 5 | count: 4, 6 | list: {} 7 | }, 8 | apps: {}, 9 | stack: [], 10 | ishome: true, 11 | recent: false, 12 | favbar: [] 13 | }; 14 | 15 | var dev = "" 16 | if(process.env.REACT_APP_ENV=="development" && dev!=""){ 17 | initialState.stack.push(dev) 18 | initialState.ishome = false 19 | } 20 | 21 | const searchpath = (tree, page, path="-")=>{ 22 | var t_path = null; 23 | if(path.includes("-" + page + "-")) return path 24 | 25 | Object.keys(tree).forEach(key => { 26 | t_path = t_path || searchpath(tree[key], page, path + key + "-") 27 | }); 28 | 29 | return t_path 30 | } 31 | 32 | const Home = createSlice({ 33 | name: "home", 34 | initialState: initialState, 35 | reducers: { 36 | setApps: (state, action) => { 37 | state.apps = action.payload 38 | }, 39 | setApp: (state, action) => { 40 | if(state.apps[action.payload.id]){ 41 | state.apps[action.payload.id] = action.payload.data 42 | } 43 | }, 44 | setAppKey: (state, action) => { 45 | var {id, key, value} = action.payload; 46 | if(state.apps[id]){ 47 | state.apps[id][key] = value 48 | } 49 | }, 50 | navApp: (state, action) => { 51 | var [id, page] = action.payload.split("."), 52 | tmp_path = searchpath({...state.apps[id].pagetree}, page) 53 | 54 | if(tmp_path){ 55 | state.apps[id].path = tmp_path.strip("-").split("-") 56 | } 57 | }, 58 | goBack: (state, action) => { 59 | if(state.ishome || state.recent || !state.stack.length) return 60 | var cr_app = state.stack.at(-1), 61 | tmp = {...state.apps[cr_app]} 62 | if(tmp.comp) return 63 | 64 | if(tmp.path && tmp.path.length){ 65 | if(tmp.path.length==1){ // set home 66 | state.ishome = true 67 | state.recent = false 68 | }else{ 69 | tmp.path.pop() 70 | state.apps[cr_app] = {...tmp} 71 | } 72 | } 73 | }, 74 | setSlide: (state, action) => { 75 | state.slides.list[action.payload.id] = action.payload.data 76 | }, 77 | setFavBar: (state, action) => { 78 | state.favbar = action.payload 79 | }, 80 | setHome: (state, action) => { 81 | state.ishome = true 82 | state.recent = false 83 | }, 84 | setRecent: (state, action) => { 85 | state.recent = true 86 | state.ishome = true 87 | }, 88 | closeRecent: (state, action) => { 89 | state.recent = false 90 | state.ishome = true 91 | }, 92 | openLink: (state, action) => { 93 | window.open(action.payload, '_blank') 94 | }, 95 | openApp: (state, action) => { 96 | if(!action.payload) return; 97 | 98 | var tmp = [...state.stack] 99 | if(tmp.includes(action.payload)){ 100 | tmp.remove(action.payload) 101 | } 102 | 103 | tmp.push(action.payload) 104 | state.stack = [...tmp] 105 | state.ishome = false 106 | state.recent = false 107 | }, 108 | closeApp: (state, action) => { 109 | if(!action.payload) return; 110 | 111 | var tmp = [...state.stack] 112 | if(tmp.includes(action.payload)){ 113 | tmp.remove(action.payload) 114 | if(state.apps[action.payload]){ 115 | state.apps[action.payload].comp = false 116 | state.apps[action.payload].path = ['main'] 117 | } 118 | } 119 | 120 | state.stack = [...tmp] 121 | }, 122 | closeAllApps: (state, action) => { 123 | var tmp = [] 124 | 125 | for (var i = 0; i < state.stack.length; i++) { 126 | state.apps[state.stack[i]].comp = false 127 | state.apps[state.stack[i]].path = ['main'] 128 | } 129 | 130 | state.stack = [...tmp] 131 | state.ishome = true 132 | state.recent = false 133 | } 134 | }, 135 | }); 136 | 137 | export default Home.reducer; 138 | -------------------------------------------------------------------------------- /src/store/reducers/quickpanel.js: -------------------------------------------------------------------------------- 1 | import { 2 | createSlice 3 | } from "@reduxjs/toolkit"; 4 | 5 | const intialState = { 6 | open: false, 7 | extended: false, 8 | config: [{ 9 | name: "Wifi", 10 | state: 1, 11 | icon: "Wifi", 12 | }, { 13 | name: "Mobile data", 14 | state: 1, 15 | icon: "SwapVert", 16 | }, { 17 | name: "Ring", 18 | state: 0, 19 | icon: "VolumeUp", 20 | }, { 21 | name: "Bluetooth", 22 | state: 0, 23 | icon: "Bluetooth", 24 | }, { 25 | name: "Silent", 26 | state: 0, 27 | icon: "NotificationsOff", 28 | }, { 29 | name: "Auto Rotate", 30 | state: 0, 31 | icon: "WifiProtectedSetup", 32 | }, { 33 | name: "Airplane", 34 | state: 0, 35 | icon: "AirplanemodeActive", 36 | }, { 37 | name: "Flash light", 38 | state: 0, 39 | icon: "FlashlightOn", 40 | }, { 41 | name: "Eye comfort", 42 | state: 0, 43 | icon: "Visibility", 44 | }, { 45 | name: "Power mode", 46 | state: 0, 47 | icon: "BatterySaver", 48 | }, { 49 | name: "Location", 50 | state: 0, 51 | icon: "LocationOn", 52 | }, { 53 | name: "Hotspot", 54 | state: 0, 55 | icon: "CellTower", 56 | }, { 57 | name: "Connect", 58 | state: 0, 59 | icon: "Phonelink", 60 | }, { 61 | name: "Do not disturb", 62 | state: 0, 63 | icon: "DoNotDisturbOn", 64 | }, { 65 | name: "Screen Lock", 66 | state: 0, 67 | icon: "Lock", 68 | }, { 69 | name: "Screenshot", 70 | state: 0, 71 | icon: "Screenshot", 72 | }, { 73 | name: "Switch Sim", 74 | state: 0, 75 | icon: "SimCardOutlined", 76 | }, { 77 | name: "Kid Space", 78 | state: 0, 79 | icon: "ChildCare", 80 | }], 81 | lazy_bright: 100 82 | }; 83 | 84 | const QuickPanel = createSlice({ 85 | name: "quickpanel", 86 | initialState: intialState, 87 | reducers: { 88 | open: (state, action) => { 89 | state.open = true; 90 | }, 91 | close: (state, action) => { 92 | state.open = false; 93 | state.extended = false; 94 | }, 95 | toggle: (state, action) => { 96 | state.open = !state.open; 97 | if (!state.open) { 98 | state.extended = false; 99 | } 100 | }, 101 | extend: (state, action) => { 102 | state.open = true; 103 | state.extended = true; 104 | }, 105 | collapse: (state, action) => { 106 | state.open = true; 107 | state.extended = false; 108 | }, 109 | toggleTool: (state, action) => { 110 | if(state.config[action.payload]){ 111 | state.config[action.payload].state ^= 1 112 | } 113 | }, 114 | setLazyBright: (state, action) => { 115 | state.lazy_bright = action.payload 116 | } 117 | }, 118 | }); 119 | 120 | export default QuickPanel.reducer; 121 | -------------------------------------------------------------------------------- /src/store/reducers/wallpaper.js: -------------------------------------------------------------------------------- 1 | import {createSlice} from '@reduxjs/toolkit'; 2 | 3 | const walls = ["default.jpg"] 4 | const intialState = {wps: 0,src: walls[0]} 5 | 6 | const wallSlice = createSlice({ 7 | name: "wallaper", 8 | initialState: intialState, 9 | reducers: { 10 | setWall: (state, action) => { 11 | state.src = action.payload 12 | }, 13 | setWps: (state, action) => { 14 | state.wps = action.payload 15 | state.src = walls[action.payload] 16 | } 17 | } 18 | }) 19 | 20 | export default wallSlice.reducer; 21 | -------------------------------------------------------------------------------- /src/store/reducers/widget.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | weather: { 5 | city: "New york", 6 | temperature: "32", 7 | icon: "c", 8 | predictions: [ 9 | { 10 | date: "2020-01-01", 11 | day: "Mon", 12 | temperature: "33", 13 | icon: "lr" 14 | },{ 15 | date: "2020-01-02", 16 | day: "Tue", 17 | temperature: "34", 18 | icon: "t" 19 | },{ 20 | date: "2020-01-03", 21 | day: "Wed", 22 | temperature: "35", 23 | icon: "lc" 24 | },{ 25 | date: "2020-01-04", 26 | day: "Thu", 27 | temperature: "36", 28 | icon: "hr" 29 | } 30 | ] 31 | } 32 | }; 33 | 34 | const Widget = createSlice({ 35 | name: "widget", 36 | initialState: initialState, 37 | reducers: { 38 | weather: (state, action) => { 39 | state.weather = action.payload; 40 | } 41 | }, 42 | }); 43 | 44 | export default Widget.reducer; 45 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | "./src/**/*.{js,jsx,ts,tsx}", 4 | ], 5 | theme: { 6 | extend: {}, 7 | }, 8 | plugins: [], 9 | } 10 | -------------------------------------------------------------------------------- /timeline.md: -------------------------------------------------------------------------------- 1 | ## The major problems I faced during the development 2 | 3 | (ps: This is just the tip of iceberg) 4 | 5 | ##### How do you change apps? 6 | - either hide them all at once and show one of them when called 7 | 8 | or 9 | 10 | - use a long slider with all apps and scroll (or rather snap) it accordingly 11 | on demand (✔️) 12 | 13 | ##### So the problem is how to statically order the apps without losing the state in the Swiper 14 | - Make your own swiper ?? 15 | - Use Iframe and router 16 | - Somehow ? 17 | 18 | **sol**: render them separately (the apps and recent menu) 19 | 20 | ##### This weird bug when stack array is being changed, it transfers the state 21 | - yeah, because that is what happens when you dynamically change the array in react, dumbass 22 | 23 | - to fix the CSS tranlateUp transition, I used animation instead of transition 24 | 25 | - to make it more fruitful, I manually handled the scrolls and gave up on the last item 26 | 27 | ##### How do you make the glimpse of apps appear in the recent menu without breaking the whole thing 28 | - duplicate the innerHTML 29 | 30 | - make sure to handle the react states properly 31 | 32 | - I had to disable the lazy component for that to work (¬_¬") 33 | 34 | ##### Sometime the bottom nav back button should not revoke back action in few cases 35 | For any certain apps like media opened in case of whatsApp, it need to be handled 36 | not by pagination of components. So how do you accommodate this without breaking 37 | the current navigation system? 38 | 39 | **sol**: Make a common value that tells the global back action handler to skip this 40 | call and listen it in the custom app reducer by using extraReducers properties 41 | of @redux/toolkit 42 | 43 | ##### How to reiterate the previous state of the app when collapsed? 44 | - Either use a separate reducer for that app 45 | 46 | or 47 | 48 | - if the requirement is small make the changes in the main apps reducer 49 | 50 | ##### How to transition between pages of an app without have to repeat the same code for every app 51 | - Make a navigation system with predefined path and fetch the page state for each app accordingly 52 | - I know! I made it sound easier XD 53 | 54 | ##### Now the problem with nav system is that it is declaring the app pagetree when the app is opened first time 55 | i.e it need to be opened atleast once before getting called to open from externally. 56 | 57 | The problem with this is that apps like google can be opened by a widget and user should be able to open the app from widget before opening from app icon 58 | 59 | - The simplest solution is to manually trigger the openApp action before triggering navapp action, everytime. (¬_¬ ) 60 | 61 | - Another is to call the openApp action from navApp 62 | action once for all 63 | - The problem with solution is that there won't be any buffer time for the app to open and define its pagetree, rendering the navapp action useless (╯°□°）╯︵ ┻━┻ 64 | 65 | **sol** : Make an action that first opens the app and then triggers the navApp action 66 | with some delay (⌐■_■), Hotel ? Trivago ... 67 | --------------------------------------------------------------------------------