Explore the Future of 3D Experiences
31 |Immerse yourself in cutting-edge technology and interactive 3D videos that redefine your visual experience.
32 |
56 | {Array(repeat)
57 | .fill(0)
58 | .map((_, i) => (
59 |
72 | );
73 | }
74 |
--------------------------------------------------------------------------------
/dev-portfolio/src/components/ui/ripple.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | interface RippleProps {
6 | mainCircleSize?: number;
7 | mainCircleOpacity?: number;
8 | numCircles?: number;
9 | className?: string;
10 | }
11 |
12 | const Ripple = React.memo(function Ripple({
13 | mainCircleSize = 210,
14 | mainCircleOpacity = 0.24,
15 | numCircles = 8,
16 | className,
17 | }: RippleProps) {
18 | return (
19 |
68 | {children}
69 |
70 | ))}
71 |
25 | {Array.from({ length: numCircles }, (_, i) => {
26 | const size = mainCircleSize + i * 70;
27 | const opacity = mainCircleOpacity - i * 0.03;
28 | const animationDelay = `${i * 0.06}s`;
29 | const borderStyle = i === numCircles - 1 ? "dashed" : "solid";
30 | const borderOpacity = 5 + i * 5;
31 |
32 | return (
33 |
51 | );
52 | })}
53 |
54 | );
55 | });
56 |
57 | Ripple.displayName = "Ripple";
58 |
59 | export default Ripple;
60 |
--------------------------------------------------------------------------------
/dev-portfolio/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Separator = React.forwardRef<
9 | React.ElementRef
10 | 
11 | 
12 |
19 | )
20 | }
21 |
22 | export default HeroSection
--------------------------------------------------------------------------------
/ecom-react-appwrite/src/components/layout/Layout.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Navbar from '../navbar/Navbar'
3 | import Footer from '../footer/Footer'
4 |
5 | function Layout({children}) {
6 | return (
7 |
13 |
18 | {head}
14 | {/*CELEBRATING 25 YEARS IN UAE
*/} 15 |{para}
16 | 17 |
8 |
14 | )
15 | }
16 |
17 | export default Layout
--------------------------------------------------------------------------------
/ecom-react-appwrite/src/components/loader/Loader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function Loader() {
4 | return (
5 |
10 | {children}
11 |
12 |
13 |
6 |
14 | )
15 | }
16 |
17 | export default Loader
--------------------------------------------------------------------------------
/ecom-react-appwrite/src/components/productCard/ProductCard.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
2 | @import url('https://fonts.googleapis.com/css2?family=Mr+De+Haviland&display=swap');
3 |
4 | .gold-primary{
5 | background: linear-gradient(90deg, #E6C361 0%, #C38D48 100%);
6 | }
7 | .gold-primary-2{
8 | background: linear-gradient(90deg, #E6C361 0%, #C38D48 100%) !important;
9 | transition: all 0.3s ease-in-out 0.1s;
10 | outline: none !important;
11 | &:hover {
12 | outline: none !important;
13 | background: linear-gradient(90deg, #C38D48 0%, #E6C361 100%) !important;
14 | transform: scale(0.95);
15 | }
16 | }
17 |
18 | .coverobject{
19 | object-fit: cover !important; /* Keep the aspect ratio and cover the container */
20 | }
21 | // font
22 | .mr-font{
23 | font-family: "Mr De Haviland", cursive;
24 | }
25 | .rale-font{
26 | font-family: "Raleway", sans-serif;
27 | }
28 |
29 | .featured-product{
30 | background-color: #f4f4f4;
31 | margin-top: 100px;
32 | }
33 |
34 | @media screen and (max-width: 600px) {
35 | .cust-card{
36 | // border: 1px solid red !important;
37 | width: 100%;
38 | }
39 | }
--------------------------------------------------------------------------------
/ecom-react-appwrite/src/context/data/myContext.jsx:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 |
3 | const myContext = createContext();
4 |
5 | export default myContext;
--------------------------------------------------------------------------------
/ecom-react-appwrite/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/ecom-react-appwrite/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import { Provider } from 'react-redux'
5 | import { store } from './redux/store.jsx'
6 | import './index.css'
7 | import 'animate.css';
8 |
9 | ReactDOM.createRoot(document.getElementById('root')).render(
10 |
7 |
11 | Loading...
12 |
13 | 404! Not found
6 | )
7 | }
8 |
9 | export default NoPage
--------------------------------------------------------------------------------
/ecom-react-appwrite/src/pages/other/Other.scss:
--------------------------------------------------------------------------------
1 | .return{
2 | font-family: 'Raleway';
3 | .heading-content{
4 |
5 | width: 100%;
6 | margin: auto;
7 | text-align: center;
8 | margin-top: 100px;
9 | h3{
10 | font-size: 40px;
11 | }
12 | h4{
13 | font-size: 40px;
14 | text-transform: uppercase;
15 | }
16 | img{
17 | display: block;;
18 | text-align: center;
19 | margin: auto;
20 | }
21 | }
22 | }
23 | .contact{
24 | .gold-primary{
25 | background-color: #E6C361;
26 | background: linear-gradient(90deg, #E6C361 0%, #C38D48 100%);
27 | }
28 | .text-primary{
29 | font-family: #E6C361;
30 | font-size: 40px;
31 | }
32 | h2{
33 | font-family: 'Raleway' !important;
34 | font-size: 40px;
35 | margin-top: 20px;
36 | }
37 | img{
38 | display: block;
39 | margin: auto;
40 | }
41 | input,textarea{
42 | outline: none;
43 | }
44 | textarea{}
45 | }
46 | .about{
47 | font-family: 'Raleway';
48 | }
49 | .gold-primary{
50 | background-color: #E6C361;
51 | background: linear-gradient(90deg, #E6C361 0%, #C38D48 100%);
52 | }
--------------------------------------------------------------------------------
/ecom-react-appwrite/src/pages/productInfo/ProductInfo.scss:
--------------------------------------------------------------------------------
1 | .product{
2 | font-family: 'Raleway';
3 | &-btn{
4 | background: linear-gradient(90deg, #E6C361 0%, #C38D48 100%);
5 | &:hover{
6 | background: linear-gradient(10deg, #C38D48 0%, #E6C361 100%);
7 | }
8 | }
9 | }
--------------------------------------------------------------------------------
/ecom-react-appwrite/src/pages/registration/Register.scss:
--------------------------------------------------------------------------------
1 | .login{
2 |
3 | &-bg{
4 | background-color: #111;
5 | font-family: 'Raleway';
6 | }
7 | &-btn{
8 | background: linear-gradient(90deg, #E6C361 0%, #C38D48 100%);
9 | &:hover{
10 | background: linear-gradient(90deg, #C38D48 0%, #E6C361 100%);
11 | }
12 | }
13 | }
14 |
15 | .singup{
16 |
17 | &-bg{
18 | background-color: #111;
19 | font-family: 'Raleway';
20 | }
21 | &-btn{
22 | background: linear-gradient(90deg, #E6C361 0%, #C38D48 100%);
23 | &:hover{
24 | background: linear-gradient(90deg, #C38D48 0%, #E6C361 100%);
25 | }
26 | }
27 | }
--------------------------------------------------------------------------------
/ecom-react-appwrite/src/redux/cartSlice.jsx:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 |
3 | const initialState = JSON.parse(localStorage.getItem('cart')) ?? [];
4 |
5 | const cartSlice = createSlice({
6 | name: 'cart',
7 | initialState,
8 | reducers : {
9 | addToCart(state, action){
10 | state.push(action.payload)
11 | },
12 | deleteFromCart(state,action){
13 |
14 | return state.filter(item => item.$id != action.payload.$id);
15 | },
16 | clearCart(state) {
17 | // Clear the cart
18 | return [];
19 | },
20 | }
21 | })
22 |
23 | export const {addToCart, deleteFromCart, clearCart} = cartSlice.actions;
24 |
25 | export default cartSlice.reducer;
--------------------------------------------------------------------------------
/ecom-react-appwrite/src/redux/store.jsx:
--------------------------------------------------------------------------------
1 | import { configureStore } from "@reduxjs/toolkit";
2 | import cartSlice from "./cartSlice";
3 |
4 | export const store = configureStore({
5 | reducer :{
6 | cart : cartSlice
7 | },
8 | devTools : true
9 | })
--------------------------------------------------------------------------------
/ecom-react-appwrite/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,ts,jsx,tsx}",
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
--------------------------------------------------------------------------------
/ecom-react-appwrite/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "rewrites": [
3 | {
4 | "source": "/(.*)",
5 | "destination": "/index.html"
6 | }
7 | ]
8 | }
--------------------------------------------------------------------------------
/ecom-react-appwrite/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/flaslight-effect/hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithharshad/instagram/0e04d19feb08dc7cbb4302eae6e28014fc3c38e7/flaslight-effect/hero.png
--------------------------------------------------------------------------------
/flaslight-effect/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Ancient Philosophy
25 |26 | Discover the timeless wisdom of classical thought and its enduring 27 | relevance in our modern world. Journey through centuries of 28 | philosophical discourse that has shaped human understanding and 29 | continues to influence our perspective on life's greatest questions. 30 |
31 |
11 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/jokes-extension/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, sans-serif;
3 | margin: 0;
4 | padding: 0;
5 | }
6 |
7 | .container {
8 | width: 300px;
9 | margin: 20px auto;
10 | text-align: center;
11 | }
12 |
13 | h1 {
14 | color: #333;
15 | }
16 |
17 | button {
18 | background-color: #4ca3af;
19 | color: white;
20 | padding: 10px 20px;
21 | margin: 10px 0;
22 | border: none;
23 | cursor: pointer;
24 | }
25 |
26 | button:hover {
27 | background-color: rgb(69, 122, 160);
28 | }
29 |
30 | p {
31 | margin-top: 20px;
32 | font-style: italic;
33 | }
--------------------------------------------------------------------------------
/make-pc-speak/Readme.md:
--------------------------------------------------------------------------------
1 | # Text-to-Speech Web App
2 |
3 | This simple web app allows users to input text and have it spoken using the Speech Synthesis Web API. The app includes features such as controlling the speed and pitch of the speech, pausing and resuming, and displaying a caption of the spoken words.
4 |
5 | ## Features
6 |
7 | - Input text in a textarea.
8 | - Adjust the speed and pitch of the speech.
9 | - Play, pause, and stop buttons for controlling speech synthesis.
10 | - Real-time caption display of spoken words.
11 | - Ability to resume speech from where it was paused.
--------------------------------------------------------------------------------
/make-pc-speak/assets/pause-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithharshad/instagram/0e04d19feb08dc7cbb4302eae6e28014fc3c38e7/make-pc-speak/assets/pause-button.png
--------------------------------------------------------------------------------
/make-pc-speak/assets/play-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithharshad/instagram/0e04d19feb08dc7cbb4302eae6e28014fc3c38e7/make-pc-speak/assets/play-button.png
--------------------------------------------------------------------------------
/make-pc-speak/assets/stop-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithharshad/instagram/0e04d19feb08dc7cbb4302eae6e28014fc3c38e7/make-pc-speak/assets/stop-button.png
--------------------------------------------------------------------------------
/netflix-clone/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react/jsx-no-target-blank': 'off',
16 | 'react-refresh/only-export-components': [
17 | 'warn',
18 | { allowConstantExport: true },
19 | ],
20 | },
21 | }
22 |
--------------------------------------------------------------------------------
/netflix-clone/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/netflix-clone/README.md:
--------------------------------------------------------------------------------
1 | # Netflix Clone 1.0
2 |
3 | ## Description
4 | This project is a Netflix clone built using React.js. It provides a user interface similar to Netflix for browsing movies and TV shows, including features like fetching trending content, displaying Netflix originals, playing trailers & more.
5 |
6 | ## Installation
7 | To run this project locally, follow these steps:
8 |
9 | 1. Clone this repository to your local machine.
10 | 2. Install dependencies by running `npm install`.
11 | 3. Replace the API keys for TMDB and YouTube with your own keys in the appropriate files.
12 | 4. Start the development server by running `npm run dev`.
13 |
14 | ```javascript
15 | const API_KEY = 'YOUR_TMDB_API_KEY_HERE'; // Replace 'YOUR_TMDB_API_KEY_HERE' with your TMDB API key
16 | const YT_API_KEY = 'YOUR_YOUTUBE_API_KEY_HERE'; // Replace 'YOUR_YOUTUBE_API_KEY_HERE' with your YouTube Data API key
17 |
--------------------------------------------------------------------------------
/netflix-clone/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Joke Generator
12 | 13 | 14 |
22 | |
26 | ))}
27 |
28 | );
29 | }
30 |
31 | export default App;
32 |
--------------------------------------------------------------------------------
/netflix-clone/src/Navbar.css:
--------------------------------------------------------------------------------
1 | .nav {
2 | position: fixed;
3 | top: 0;
4 | width: 100%;
5 | padding: 20px;
6 | height: 30px;
7 | z-index: 1;
8 |
9 | /* Animation */
10 | transition-timing-function: ease-in;
11 | transition: all 0.5s;
12 |
13 | }
14 |
15 | .nav_black {
16 | background-color: #111;
17 | }
18 |
19 | .nav_logo {
20 | position: fixed;
21 | left: 20px;
22 | width: 80px;
23 | object-fit: contain;
24 | }
25 |
26 | .nav_avatar {
27 | position: fixed;
28 | right: 20px;
29 | width: 30px;
30 | object-fit: contain;
31 | }
--------------------------------------------------------------------------------
/netflix-clone/src/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useCallback } from 'react';
2 | import './Navbar.css';
3 |
4 | const NAVBAR_HEIGHT_THRESHOLD = 100; // Threshold for when to show black navbar
5 |
6 | const Navbar = () => {
7 | const [isNavbarBlack, setIsNavbarBlack] = useState(false);
8 |
9 | const handleScroll = useCallback(() => {
10 | const shouldShowBlackNavbar = window.scrollY > NAVBAR_HEIGHT_THRESHOLD;
11 | setIsNavbarBlack(shouldShowBlackNavbar);
12 | }, []);
13 |
14 | useEffect(() => {
15 | window.addEventListener('scroll', handleScroll);
16 | return () => {
17 | window.removeEventListener('scroll', handleScroll);
18 | };
19 | }, [handleScroll]);
20 |
21 | return (
22 |
23 | 
28 | 
33 |
34 | );
35 | };
36 |
37 | export default Navbar;
38 |
--------------------------------------------------------------------------------
/netflix-clone/src/Poster.css:
--------------------------------------------------------------------------------
1 | .banner {
2 | color: white;
3 | object-fit: contain;
4 | height: 448px;
5 | }
6 |
7 | .banner_contents {
8 | margin-left: 30px;
9 | padding-top: 140px;
10 | height: 190px;
11 | }
12 |
13 | .banner_title {
14 | font-size: 3rem;
15 | font-weight: 800;
16 | padding-bottom: 0.3rem;
17 | }
18 |
19 | .banner_description {
20 | width: 45rem;
21 | line-height: 1.3;
22 | font-size: 0.8rem;
23 | max-width: 360px;
24 | height: 80px;
25 | }
26 |
27 | .banner_button {
28 | cursor: pointer;
29 | color: white;
30 | outline: none;
31 | border: none;
32 | font-weight: 700;
33 | border-radius: 0.2vw;
34 | padding-left: 2rem;
35 | padding-right: 2rem;
36 | padding-top: 0.5rem;
37 | padding-bottom: 0.5rem;
38 | margin-right: 1rem;
39 | background-color: rgb(51, 51, 51, 0.5);
40 |
41 | }
42 |
43 | .banner_button:hover {
44 | color: #000;
45 | background-color: #e6e6e6;
46 | transition: all 0.2s;
47 | }
48 |
49 | .banner--fadeBottom {
50 | height: 7.4rem;
51 | background-image: linear-gradient(180deg, transparent, rgba(37, 37, 37, 0.61), #111);
52 | }
--------------------------------------------------------------------------------
/netflix-clone/src/Poster.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useCallback } from 'react';
2 | import axios from './utils/axios';
3 | import {requests} from './utils/requests';
4 | import './Poster.css';
5 |
6 | const truncate = (str, n) => (str?.length > n ? `${str.substr(0, n - 1)}...` : str);
7 |
8 | const Poster = () => {
9 | const [movie, setMovie] = useState(null);
10 |
11 | const fetchData = useCallback(async () => {
12 | try {
13 | const request = await axios.get(requests.fetchNetflixOriginals);
14 | const randomIndex = Math.floor(Math.random() * request.data.results.length);
15 | setMovie(request.data.results[randomIndex]);
16 | return request;
17 | } catch (error) {
18 | console.error('Error fetching data:', error);
19 | }
20 | }, []);
21 |
22 | useEffect(() => {
23 | fetchData();
24 | }, [fetchData]);
25 |
26 | return (
27 |
28 |
33 |
36 |
46 |
47 |
48 | 37 | {movie?.title || movie?.name || movie?.original_name} 38 |
39 | 40 |
41 |
42 |
43 |
44 | {truncate(movie?.overview, 150)}
45 |
12 |
13 |
14 |
17 |
18 |
24 |
25 |
26 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/snap-notes/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/snap-notes/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | .env
26 | src/.env
27 |
--------------------------------------------------------------------------------
/snap-notes/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": false,
5 | "tsx": false,
6 | "tailwind": {
7 | "config": "tailwind.config.js",
8 | "css": "src/index.css",
9 | "baseColor": "slate",
10 | "cssVariables": true,
11 | "prefix": ""
12 | },
13 | "aliases": {
14 | "components": "@/components",
15 | "utils": "@/lib/utils"
16 | }
17 | }
--------------------------------------------------------------------------------
/snap-notes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
27 |
28 |
29 |
30 |
31 |
32 |
39 |
33 |
34 |
35 |
36 |
37 |
38 |
19 |
26 | );
27 | }
28 |
29 | export default Footer;
30 |
--------------------------------------------------------------------------------
/snap-notes/src/components/footer/H5Share.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | function H5Share() {
4 | return (
5 |
20 |
22 |
23 |
25 |
6 |
25 |
26 | );
27 | }
28 |
29 | export default H5Share;
30 |
--------------------------------------------------------------------------------
/snap-notes/src/components/layout/Layout.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Navbar from "../navbar/Navbar";
3 | import Footer from "../footer/Footer";
4 |
5 | function Layout({ children }) {
6 | return (
7 |
8 |
12 | );
13 | }
14 |
15 | export default Layout;
16 |
--------------------------------------------------------------------------------
/snap-notes/src/components/loader/Loader.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | function Loader() {
4 | return (
5 | {children}
10 |
11 |
6 |
30 | );
31 | }
32 |
33 | export default Loader;
34 |
--------------------------------------------------------------------------------
/snap-notes/src/components/notes/ProductCard.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
2 | @import url('https://fonts.googleapis.com/css2?family=Mr+De+Haviland&display=swap');
3 |
4 | .gold-primary{
5 | background: linear-gradient(90deg, #E6C361 0%, #C38D48 100%);
6 | }
7 | .gold-primary-2{
8 | background: linear-gradient(90deg, #E6C361 0%, #C38D48 100%) !important;
9 | transition: all 0.3s ease-in-out 0.1s;
10 | outline: none !important;
11 | &:hover {
12 | outline: none !important;
13 | background: linear-gradient(90deg, #C38D48 0%, #E6C361 100%) !important;
14 | transform: scale(0.95);
15 | }
16 | }
17 |
18 | .coverobject{
19 | object-fit: cover !important; /* Keep the aspect ratio and cover the container */
20 | }
21 | // font
22 | .mr-font{
23 | font-family: "Mr De Haviland", cursive;
24 | }
25 | .rale-font{
26 | font-family: "Raleway", sans-serif;
27 | }
28 |
29 | .featured-product{
30 | background-color: #f4f4f4;
31 | margin-top: 100px;
32 | }
33 |
34 | @media screen and (max-width: 600px) {
35 | .cust-card{
36 | // border: 1px solid red !important;
37 | width: 100%;
38 | }
39 | }
--------------------------------------------------------------------------------
/snap-notes/src/components/ui/avatar.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as AvatarPrimitive from "@radix-ui/react-avatar";
3 |
4 | import { cn } from "@/lib/utils";
5 |
6 | const Avatar = React.forwardRef(({ className, ...props }, ref) => (
7 |
11 |
27 | Loading...
28 |
29 | 404! Not found
;
5 | }
6 |
7 | export default NoPage;
8 |
--------------------------------------------------------------------------------
/snap-notes/src/pages/registration/Register.scss:
--------------------------------------------------------------------------------
1 | .login{
2 |
3 | &-bg{
4 | background-color: #111;
5 | font-family: 'Raleway';
6 | }
7 | &-btn{
8 | background: linear-gradient(90deg, #E6C361 0%, #C38D48 100%);
9 | &:hover{
10 | background: linear-gradient(90deg, #C38D48 0%, #E6C361 100%);
11 | }
12 | }
13 | }
14 |
15 | .singup{
16 |
17 | &-bg{
18 | background-color: #111;
19 | font-family: 'Raleway';
20 | }
21 | &-btn{
22 | background: linear-gradient(90deg, #E6C361 0%, #C38D48 100%);
23 | &:hover{
24 | background: linear-gradient(90deg, #C38D48 0%, #E6C361 100%);
25 | }
26 | }
27 | }
--------------------------------------------------------------------------------
/snap-notes/src/pages/trash/Trash.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import Layout from "../../components/layout/Layout";
3 | import NoteCard from "../../components/notes/NoteCard";
4 | import AddNote from "../../components/addNote/AddNote";
5 |
6 | function Home() {
7 | return (
8 |
10 |
14 |
11 |
13 |
31 | Hello, World!
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/todo-extension/background.js:
--------------------------------------------------------------------------------
1 | chrome.storage.local.get("todos", (data) => {
2 | if (!data.todos) {
3 | chrome.storage.local.set({ todos: [] });
4 | }
5 | });
6 |
7 | function getTodos() {
8 | return new Promise((resolve) => {
9 | chrome.storage.local.get("todos", (data) => {
10 | resolve(data.todos);
11 | });
12 | });
13 | }
14 |
15 | function addTodo(todo) {
16 | getTodos().then((todos) => {
17 | todo.id = Math.random().toString(36).substring(2, 15); // Generate unique ID
18 | todos.push(todo);
19 | chrome.storage.local.set({ todos });
20 | });
21 | }
22 |
23 | function updateTodo(id, updatedTodo) {
24 | getTodos().then((todos) => {
25 | const index = todos.findIndex((todo) => todo.id === id);
26 | if (index !== -1) {
27 | todos[index] = updatedTodo;
28 | chrome.storage.local.set({ todos });
29 | }
30 | });
31 | }
32 |
33 | function deleteTodo(id) {
34 | getTodos().then((todos) => {
35 | const filteredTodos = todos.filter((todo) => todo.id !== id);
36 | chrome.storage.local.set({ todos: filteredTodos });
37 | });
38 | }
39 |
40 | chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
41 | if (message.action === "getTodos") {
42 | getTodos().then((todos) => sendResponse(todos));
43 | } else if (message.action === "addTodo") {
44 | addTodo(message.todo);
45 | } else if (message.action === "updateTodo") {
46 | updateTodo(message.id, message.updatedTodo);
47 | } else if (message.action === "deleteTodo") {
48 | deleteTodo(message.id);
49 | }
50 | });
51 |
--------------------------------------------------------------------------------
/todo-extension/manifest.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "manifest_version": 3,
4 | "name": "My To-Do",
5 | "version": "1.0",
6 | "description": "A simple to-do list extension for Chrome",
7 | "permissions": ["storage"],
8 |
9 | "action": {
10 | "default_popup": "popup.html"
11 | }
12 | }
--------------------------------------------------------------------------------
/todo-extension/popup.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, sans-serif;
3 | background-color: #f7f7f7;
4 | }
5 |
6 | .todo-container {
7 | width: 300px;
8 | margin: 20px auto;
9 | background-color: #fff;
10 | border-radius: 5px;
11 | padding: 20px;
12 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
13 | }
14 |
15 | h2 {
16 | text-align: center;
17 | color: #333;
18 | }
19 |
20 | #todo-list {
21 | list-style-type: none;
22 | padding: 0;
23 | }
24 |
25 | li {
26 | margin-bottom: 10px;
27 | padding: 10px;
28 | background-color: #f0f0f0;
29 | border-radius: 5px;
30 | display: flex;
31 | align-items: center;
32 | }
33 |
34 | .todo-text {
35 | flex: 1;
36 | }
37 |
38 | .todo-actions {
39 | display: flex;
40 | align-items: center;
41 | }
42 |
43 | button {
44 | border: none;
45 | background-color: #3498db;
46 | color: #fff;
47 | padding: 5px 10px;
48 | border-radius: 3px;
49 | cursor: pointer;
50 | transition: background-color 0.3s;
51 | margin-left: 5px;
52 | }
53 |
54 | button:hover {
55 | background-color: #2980b9;
56 | }
57 |
58 | input[type="text"] {
59 | width: calc(100% - 75px);
60 | padding: 5px;
61 | border: 1px solid #ccc;
62 | border-radius: 3px;
63 | }
64 |
65 | #add-todo {
66 | width: 50px;
67 | margin-left: 5px;
68 | background-color: rgb(43, 202, 43);
69 | }
70 | .delete{
71 | background-color: rgb(242, 81, 81);
72 | }
73 |
74 | #clear-all{
75 | background-color: rgb(224, 11, 11);
76 | }
--------------------------------------------------------------------------------
/todo-extension/popup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
11 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/todoapp/README.md:
--------------------------------------------------------------------------------
1 | # ToDo App
2 |
3 | A simple ToDo app that allows users to manage their tasks. Tasks are stored locally in the browser's storage.
4 |
5 | ## Features
6 |
7 | - Add new tasks
8 | - Mark tasks as completed
9 | - Remove tasks
10 | - Tasks are stored in the browser's local storage
11 |
12 | ## Technologies Used
13 |
14 | - HTML
15 | - CSS
16 | - JavaScript
--------------------------------------------------------------------------------
/todoapp/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Todo List
12 |
26 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/todoapp/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, sans-serif;
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | height: 100vh;
7 | margin: 0;
8 | }
9 |
10 |
11 | #app {
12 | width: 350px;
13 | text-align: center;
14 | }
15 | input {
16 | outline: none;
17 | padding: 5px;
18 | border: none;
19 | border: 1px solid rgb(190, 130, 220);
20 | border-radius: 4px;
21 | }
22 | ul {
23 | list-style: none;
24 | padding: 0;
25 | }
26 |
27 | li {
28 | display: flex;
29 | justify-content: space-between;
30 | border: 1px solid #ddd;
31 | padding: 8px;
32 | margin-bottom: 5px;
33 | }
34 | li>span{
35 | flex: 1;
36 | text-align: left;
37 |
38 | /* border: 1px solid red; */
39 | }
40 | li.completed {
41 | background-color: #d3ffd39f;
42 | opacity: 0.9;
43 | }
44 |
45 | button {
46 | background-color: rgb(190, 130, 220);
47 | color: white;
48 | border: none;
49 | padding: 5px 10px;
50 | text-align: center;
51 | text-decoration: none;
52 | display: inline-block;
53 | font-size: 12px;
54 | cursor: pointer;
55 | border-radius: 4px;
56 | }
57 | .bg-btn{
58 | background-color: #5789fe;
59 | color: white;
60 | border: none;
61 | padding: 0px 0px;
62 | padding: 5px;
63 | border-radius: 100%;
64 | text-align: center;
65 | text-decoration: none;
66 | display: inline-block;
67 | font-size: 12px;
68 | cursor: pointer;
69 | margin-right: 20px;
70 | }
71 | .done-bg-btn{
72 | background-color: #fba122;
73 | }
74 | .del-bg-btn {
75 | background-color: #ff4141;
76 | }
77 | .clear{
78 | background-color: #ff4141;
79 | }
--------------------------------------------------------------------------------
/valentines-day/app.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('DOMContentLoaded', function() {
2 | var pages = document.querySelectorAll('.page');
3 |
4 | // Counter to keep track of completed page flip animations
5 | var completedAnimations = 1;
6 |
7 | // Function to display heart2 when all page flip animations are complete
8 | function showHeart2() {
9 | var heart2 = document.getElementById('heart2');
10 | var pageContent = document.getElementById('page-content');
11 | heart2.style.visibility = 'visible';
12 | pageContent.style.visibility = 'visible';
13 | heart2.style.animation = 'heartPopup2 0.3s ease infinite';
14 | // pageContent.style.animation = 'textDisplay 1s ease infinite';
15 | }
16 |
17 | // Function to handle animation end event
18 | function onAnimationEnd() {
19 | completedAnimations++;
20 | // If all page flip animations are complete, show heart2
21 | if (completedAnimations === (pages.length)) {
22 | showHeart2();
23 | }
24 | }
25 |
26 | // Attach animation end event listener to each page
27 | pages.forEach(function(page) {
28 | page.addEventListener('animationend', onAnimationEnd);
29 | console.log('hello 2')
30 | });
31 | });
32 |
--------------------------------------------------------------------------------
/valentines-day/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Todo App
27 | 33 | 34 | 35 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/valentines-day/p3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithharshad/instagram/0e04d19feb08dc7cbb4302eae6e28014fc3c38e7/valentines-day/p3.png
--------------------------------------------------------------------------------
/vue-landing-page/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/vue-landing-page/README.md:
--------------------------------------------------------------------------------
1 | # Vue 3 + TypeScript + Vite + Bootstrap
2 |
3 | This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `
28 |
29 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | Happy Valentine's Day ❤️
28 |Life without you is like
HTML without CSS