diff --git a/Chat-App/app.js b/Chat-App/app.js index 89af2d331..70320287b 100644 --- a/Chat-App/app.js +++ b/Chat-App/app.js @@ -1,37 +1,110 @@ -const { log } = require('console'); -const express = require('express'); -const path=require('path'); -const app = express(); -const PORT = process.env.port || 3000; -const server=app.listen(PORT, () => { - console.log(`Server is running on port ${PORT}.`); -} -) -const io=require('socket.io')(server); +import { useState, useEffect, useRef } from 'react'; +import io from 'socket.io-client'; +import moment from 'moment'; + +const socket = io('http://localhost:3000'); // Ensure this URL is correct for your server + +function App() { + const [name, setName] = useState('anonymous'); + const [totalClients, setTotalClients] = useState(0); + const [messages, setMessages] = useState([]); + const [messageInput, setMessageInput] = useState(''); + const [feedback, setFeedback] = useState(''); + + const messageTone = useRef(new Audio('/iphone_text_message.mp3')); + const messageContainerRef = useRef(null); + + useEffect(() => { + if (messageContainerRef.current) { + messageContainerRef.current.scrollTo(0, messageContainerRef.current.scrollHeight); + } + }, [messages, feedback]); + + useEffect(() => { + socket.on('clients-total', (data) => setTotalClients(data)); + socket.on('chat-message', (data) => { + messageTone.current.play(); + setMessages((prev) => [...prev, { ...data, type: 'incoming' }]); + }); + socket.on('feedback', (data) => setFeedback(data.feedback)); -app.use(express.static(path.join(__dirname, 'public'))); + return () => { + socket.off('clients-total'); + socket.off('chat-message'); + socket.off('feedback'); + }; + }, []); -let socketsConnected=new Set(); + const sendMessage = (e) => { + e.preventDefault(); + if (messageInput.trim() === '') return; + const data = { name, message: messageInput, dateTime: new Date() }; + socket.emit('message', data); + setMessages((prev) => [...prev, { ...data, type: 'outgoing' }]); + setMessageInput(''); + socket.emit('feedback', { feedback: '' }); // Clear feedback on send + }; -io.on('connection', onConnected); - + const handleTyping = () => socket.emit('feedback', { feedback: `✍🏻 ${name} is typing...` }); + const handleBlur = () => socket.emit('feedback', { feedback: '' }); -function onConnected(socket){ - socketsConnected.add(socket.id); - io.emit("clients-total", socketsConnected.size); - socket.on('disconnect', () => { - console.log("Socket disconnected: " + socket.id); - socketsConnected.delete(socket.id); - io.emit("clients-total", socketsConnected.size); - }) + return ( +
+ {/* Main Chat Container with Glassmorphism Effect */} +
+ + {/* Header */} +
+

+ Chit Chat 🚀 +

+

👥 {totalClients} Online

+
- socket.on('message', (data) => { - // console.log(data); - socket.broadcast.emit('chat-message', data); - }) + {/* Chat Window */} +
+
+ {messages.map((msg, index) => ( +
+
+

{msg.message}

+

+ {msg.name} ● {moment(msg.dateTime).fromNow()} +

+
+
+ ))} +
+ {feedback &&

{feedback}

} +
- socket.on('feedback', (data) => { - socket.broadcast.emit('feedback', data); - }) + {/* Input Form */} + +
+
+ ); } +export default App; \ No newline at end of file diff --git a/Chat-App/public/index.css b/Chat-App/public/index.css new file mode 100644 index 000000000..f50c7ad4a --- /dev/null +++ b/Chat-App/public/index.css @@ -0,0 +1,24 @@ +/* Custom Scrollbar Styling */ +.custom-scrollbar::-webkit-scrollbar { + width: 8px; +} + +.custom-scrollbar::-webkit-scrollbar-track { + background: transparent; +} + +.custom-scrollbar::-webkit-scrollbar-thumb { + background-color: rgba(13, 187, 219, 0.5); + border-radius: 20px; + border: 2px solid transparent; +} + +/* Fade-in animation for new messages */ +@keyframes fadeIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +.animate-fade-in { + animation: fadeIn 0.3s ease-out; +} \ No newline at end of file diff --git a/Chat-App/public/index.html b/Chat-App/public/index.html index 022f6326a..4c6df17bc 100644 --- a/Chat-App/public/index.html +++ b/Chat-App/public/index.html @@ -4,6 +4,7 @@ + Chat App @@ -11,48 +12,38 @@

Chit Chat🚀

- + - -
-
+
-
- -
+
+ + +

Total clients: 2

- - - + - \ No newline at end of file diff --git a/Chat-App/public/style.css b/Chat-App/public/style.css index 8994e487d..d73dbddd5 100644 --- a/Chat-App/public/style.css +++ b/Chat-App/public/style.css @@ -1,153 +1,189 @@ -@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;1,1000&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,700;1,400&display=swap'); -*{ +* { margin: 0; - scroll-behavior: smooth; padding: 0; box-sizing: border-box; + scroll-behavior: smooth; } -body{ - +body { font-family: 'Nunito Sans', sans-serif; - - /* display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background-color: #ebebee; */ -background-image:url(https://coolbackgrounds.io/images/backgrounds/index/compute-ea4c57a4.png); display: grid; place-items: center; - background-color: #ebebee; - + min-height: 100vh; + background-color: #1a1a1a; + background-image: url(https://coolbackgrounds.io/images/backgrounds/index/compute-ea4c57a4.png); + background-size: cover; + background-position: center; + background-attachment: fixed; } -.title{ +.title { margin: 20px 0; + color: #ffffff; + font-size: 2.5rem; + text-shadow: 0px 0px 10px rgba(0, 183, 255, 0.5); } -.main{ - border:8px solid #dddd; - border-radius: 24px; +.main { + width: 420px; + max-width: 95vw; + border-radius: 16px; overflow: hidden; - box-shadow: 10px 5px 8px #575757; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); + background-color: #2c2c2e; + border: 1px solid #444; } -.name{ + +.name { display: flex; - font-size: 32px; - font-weight: 700; - padding: 8px 16px; - color: #7e7e7e; - background-color: #ebebeb; + align-items: center; + font-size: 20px; + padding: 12px 16px; + color: #e0e0e0; + background-color: #3a3a3c; } -.name > span{ - - color: #bbbb; + +.name > span { + color: #888; + margin-right: 12px; } -.name-input{ - font-size: 24px; +.name-input { + font-size: 18px; font-weight: 700; - color: #7e7e7e; + color: #f5f5f7; flex-grow: 1; - border:none; - margin: 0px 12px; + border: none; outline: none; - background-color: #ebebeb; + background-color: transparent; } -.message-container{ - /* margin: auto; */ +.message-container { display: flex; - /* border-radius: 24px 24px 24px 24px; */ flex-direction: column; - background-color: #ffffff; - width: 400px; + background-color: #1c1c1e; + width: 100%; height: 600px; overflow-y: scroll; - overflow-x: hidden; + padding: 10px; +} + +/* Custom Scrollbar */ +.message-container::-webkit-scrollbar { + width: 8px; +} + +.message-container::-webkit-scrollbar-track { + background: #2c2c2e; } -.message-left, .message-right{ +.message-container::-webkit-scrollbar-thumb { + background-color: #555; + border-radius: 20px; + border: 2px solid #2c2c2e; +} + +.message-left, +.message-right { list-style: none; - padding:8px 12px; - max-width: 250px; - margin: 12px; - font-size: 18px; + padding: 10px 16px; + margin: 8px; + max-width: 75%; + font-size: 16px; word-wrap: break-word; - + border-radius: 18px; } -.message-left{ - border-radius: 20px 20px 20px 0px; +.message-left { align-self: flex-start; - background-color: #ebebeb; - box-shadow: -2px 2px 4px #dcdcdc; + background-color: #3a3a3c; + color: #f5f5f7; + border-bottom-left-radius: 4px; } - -.message-right{ - border-radius: 20px 20px 20px 0px; +.message-right { align-self: flex-end; - background-color: #2d2d2d; - box-shadow: 2px 2px 4px #dcdcdc; + background-color: #007aff; /* iOS blue */ color: #ffffff; + border-bottom-right-radius: 4px; +} +.message-right > p > span, +.message-left > p > span { + display: block; + font-size: 11px; + margin-top: 5px; + color: #e0e0e0; + opacity: 0.8; } -.message-right > p > span,.message-left > p > span{ - display: block; - font-style: italic; - font-size: italic; - font-size: 12px; - margin-top: 4px; +.message-right > p > span { + color: #e5e5ea; } -.feedback{ - font-size: italic; + +.feedback { + font-style: italic; font-size: 14px; - padding:0px 16px 16px 16px; - color:#2d2d2d; - text-align: center; + padding: 16px; + color: #999; + text-align: left; + width: 100%; } -.message-form{ +.message-form { display: flex; align-items: center; - justify-content: space-between; - width: 400px; + background-color: #3a3a3c; + padding: 8px; } -.message-input{ +.message-input { flex-grow: 1; - height: 48px; + height: 40px; font-size: 16px; - border:none; + border: none; outline: none; - padding: 0px 12px; - margin-top: 0.4px; - background-color: #ffff; + padding: 0 16px; + background-color: #2c2c2e; + color: #f5f5f7; + border-radius: 20px; +} + +.v-divider { + display: none; /* Not needed in this design */ } -.send-button{ - height: 48px; +.send-button { + height: 40px; font-size: 16px; border: none; outline: none; - background-color: #ffff; - padding: 0px 20px; + background: #007aff; + color: white; + padding: 0 20px; + margin-left: 8px; cursor: pointer; - + border-radius: 20px; + transition: background-color 0.2s ease, transform 0.1s ease; +} + +.send-button:hover { + background-color: #0056b3; } -.v-divider{ - height: 48px; - width: 2px; - background-color: #f6f6f6; + +.send-button:active { + transform: scale(0.95); } -.clients-total{ - margin: 20px 0; - color: #7e7e7e; +.send-button i { + margin-left: 6px; +} +.clients-total { + margin: 15px 0; + color: #b0b0b0; + font-weight: 300; } \ No newline at end of file diff --git a/Tic-Tac-Toe Game/index.html b/Tic-Tac-Toe Game/index.html index b84004b9b..e128c9c5a 100644 --- a/Tic-Tac-Toe Game/index.html +++ b/Tic-Tac-Toe Game/index.html @@ -2,88 +2,91 @@ - - - - - - - - Tic-Tac-Toe + + + + + + + + Tic-Tac-Toe + +
+
+
+
+
- -
-
-
-
+ + - -
-
Tic Tac Toe
-
-
Select which player you want to be?
-
- - -
-
+ +
+
+
+ X's turn + O's turn +
+
- -
-
-
- X's turn - O's turn -
-
-
-
-
- - - -
-
- - - -
-
- - - -
-
+
+
+ + + +
+
+ + + +
+
+ + + +
+
- -
-
-
- -
+ +
+
+
+ +
-
-

Designed & Developed with ❤️ by Atif

-
- +
+ +
+

Designed & Developed with ❤️ by Atif

+
+ + - + - + \ No newline at end of file diff --git a/Tic-Tac-Toe Game/script.js b/Tic-Tac-Toe Game/script.js index bc0495c8d..5651ce2a1 100644 --- a/Tic-Tac-Toe Game/script.js +++ b/Tic-Tac-Toe Game/script.js @@ -1,118 +1,224 @@ +// Tic-Tac-Toe game logic (clean names, replay + main menu to change player) -//selecting all required elements -const selectBox = document.querySelector(".select-box"), - selectBtnX = selectBox.querySelector(".options .playerX"), - selectBtnO = selectBox.querySelector(".options .playerO"), - playBoard = document.querySelector(".play-board"), - players = document.querySelector(".players"), - allBox = document.querySelectorAll("section span"), - resultBox = document.querySelector(".result-box"), - wonText = resultBox.querySelector(".won-text"), - replayBtn = resultBox.querySelector("button"); - -window.onload = () => { //once window loaded - for (let i = 0; i < allBox.length; i++) { //add onclick attribute in all available span - allBox[i].setAttribute("onclick", "clickedBox(this)"); - } +const selectBox = document.querySelector(".select-box"); +const chooseXButton = selectBox.querySelector(".options .playerX"); +const chooseOButton = selectBox.querySelector(".options .playerO"); + +const playBoard = document.querySelector(".play-board"); +const playersBar = document.querySelector(".players"); +const cellElements = Array.from(document.querySelectorAll(".play-area section span")); + +const resultBox = document.querySelector(".result-box"); +const resultText = resultBox.querySelector(".won-text"); +const replayButton = resultBox.querySelector(".replay-btn"); +const mainMenuButton = resultBox.querySelector(".mainmenu-btn"); + +// Game state +let humanSymbol = "X"; +let botSymbol = "O"; +let currentTurn = "X"; +let botEnabled = true; +let gameActive = false; + +const winningLines = [ + [0,1,2],[3,4,5],[6,7,8], + [0,3,6],[1,4,7],[2,5,8], + [0,4,8],[2,4,6] +]; + +// Start game when player chooses X or O +chooseXButton.addEventListener("click", () => startNewGame("X")); +chooseOButton.addEventListener("click", () => startNewGame("O")); + +function startNewGame(chosenSymbol) { + humanSymbol = chosenSymbol; + botSymbol = (chosenSymbol === "X") ? "O" : "X"; + currentTurn = "X"; + gameActive = true; + + // Update slider UI to reflect selection (keeps existing CSS behavior) + if (humanSymbol === "O") { + playersBar.classList.add("active", "player"); + } else { + playersBar.classList.remove("player"); + playersBar.classList.remove("active"); + } + + clearBoardVisuals(); + attachCellListeners(); + + selectBox.classList.add("hide"); + playBoard.classList.add("show"); + resultBox.classList.remove("show"); + + // If bot starts as X, let it move first + if (botEnabled && botSymbol === "X") { + boardDisablePointer(true); + setTimeout(botMakeMove, randomDelayMs()); + } else { + boardDisablePointer(false); + } } -selectBtnX.onclick = () => { - selectBox.classList.add("hide"); //hide select box - playBoard.classList.add("show"); //show the playboard section +function attachCellListeners() { + cellElements.forEach(cell => { + cell.removeEventListener("click", onCellClicked); + cell.addEventListener("click", onCellClicked); + }); +} + +function removeCellListeners() { + cellElements.forEach(cell => { + cell.removeEventListener("click", onCellClicked); + }); +} + +function onCellClicked(e) { + const cell = e.currentTarget; + if (!gameActive) return; + if (cell.dataset.mark) return; // already marked + if (currentTurn !== humanSymbol) return; // not human's turn + + markCell(cell, humanSymbol); + evaluateGameState(humanSymbol); + + if (gameActive && botEnabled) { + boardDisablePointer(true); + setTimeout(botMakeMove, randomDelayMs()); + } +} + +function markCell(cell, symbol) { + cell.textContent = symbol; + cell.dataset.mark = symbol; + cell.classList.add("marked"); + cell.style.pointerEvents = "none"; + + // Toggle slider to reflect turn visually + playersBar.classList.toggle("active"); + + currentTurn = (symbol === "X") ? "O" : "X"; } -selectBtnO.onclick = () => { - selectBox.classList.add("hide"); //hide select box - playBoard.classList.add("show"); //show the playboard section - players.setAttribute("class", "players active player"); //set class attribute in players with players active player values +function botMakeMove() { + if (!gameActive) return; + + const emptyCells = cellElements.filter(c => !c.dataset.mark); + if (emptyCells.length === 0) { + boardDisablePointer(false); + return; + } + + // simple random bot (replace with smarter bot later if desired) + const chosen = emptyCells[Math.floor(Math.random() * emptyCells.length)]; + markCell(chosen, botSymbol); + evaluateGameState(botSymbol); + + boardDisablePointer(false); } -let playerXIcon = "fas fa-times"; //class name of fontawesome cross icon -let playerOIcon = "far fa-circle"; //class name of fontawesome circle icon -let playerSign = "X"; //this is a global variable beacuse we've used this variable inside multiple functions -let runBot = true; //this also a global variable with boolen value..we used this variable to stop the bot once match won by someone or drawn - -// user click function -function clickedBox(element) { - if (players.classList.contains("player")) { - playerSign = "O"; //if player choose (O) then change playerSign to O - element.innerHTML = ``; //adding circle icon tag inside user clicked element/box - players.classList.add("active"); ///add active class in players - element.setAttribute("id", playerSign); //set id attribute in span/box with player choosen sign - } else { - element.innerHTML = ``; //adding cross icon tag inside user clicked element/box - players.classList.add("active"); //add active class in players - element.setAttribute("id", playerSign); //set id attribute in span/box with player choosen sign - } - selectWinner(); //caliing selectWinner function - element.style.pointerEvents = "none"; //once user select any box then that box can'be clicked again - playBoard.style.pointerEvents = "none"; //add pointerEvents none to playboard so user can't immediately click on any other box until bot select - let randomTimeDelay = ((Math.random() * 1000) + 200).toFixed(); //generating random number so bot will randomly delay to select unselected box - setTimeout(() => { - bot(); //calling bot function - }, randomTimeDelay); //passing random delay value +function evaluateGameState(lastMoverSymbol) { + const isWinner = winningLines.some(line => + line.every(idx => cellElements[idx].dataset.mark === lastMoverSymbol) + ); + + if (isWinner) { + gameActive = false; + showResult(`${lastMoverSymbol} wins!`); + return; + } + + const isDraw = cellElements.every(c => c.dataset.mark); + if (isDraw) { + gameActive = false; + showResult("Match has been drawn!"); + } } -// bot auto select function -function bot() { - let array = []; //creating empty array...we'll store unclicked boxes index - if (runBot) { //if runBot is true - playerSign = "O"; //change the playerSign to O so if player has chosen X then bot will O - for (let i = 0; i < allBox.length; i++) { - if (allBox[i].childElementCount == 0) { //if the box/span has no children means tag - array.push(i); //inserting unclicked boxes number/index inside array - } - } - let randomBox = array[Math.floor(Math.random() * array.length)]; //getting random index from array so bot will select random unselected box - if (array.length > 0) { //if array length is greater than 0 - if (players.classList.contains("player")) { - playerSign = "X"; //if player has chosen O then bot will X - allBox[randomBox].innerHTML = ``; //adding cross icon tag inside bot selected element - players.classList.remove("active"); //remove active class in players - allBox[randomBox].setAttribute("id", playerSign); //set id attribute in span/box with player choosen sign - } else { - allBox[randomBox].innerHTML = ``; //adding circle icon tag inside bot selected element - players.classList.remove("active"); //remove active class in players - allBox[randomBox].setAttribute("id", playerSign); //set id attribute in span/box with player choosen sign - } - selectWinner(); //calling selectWinner function - } - allBox[randomBox].style.pointerEvents = "none"; //once bot select any box then user can't click on that box - playBoard.style.pointerEvents = "auto"; //add pointerEvents auto in playboard so user can again click on box - playerSign = "X"; //if player has chosen X then bot will be O right then we change the playerSign again to X so user will X because above we have changed the playerSign to O for bot - } +function showResult(message) { + boardDisablePointer(true); + + if (message === "Match has been drawn!") { + resultText.textContent = message; + } else { + const winner = message[0]; // X or O + resultText.innerHTML = `Player

${winner}

won the game!`; + } + + setTimeout(() => { + resultBox.classList.add("show"); + playBoard.classList.remove("show"); + }, 700); } -function getIdVal(classname) { - return document.querySelector(".box" + classname).id; //return id value +function clearBoardVisuals() { + cellElements.forEach(cell => { + cell.textContent = ""; + delete cell.dataset.mark; + cell.style.pointerEvents = "auto"; + cell.classList.remove("marked"); + }); } -function checkIdSign(val1, val2, val3, sign) { //checking all id value is equal to sign (X or O) or not if yes then return true - if (getIdVal(val1) == sign && getIdVal(val2) == sign && getIdVal(val3) == sign) { - return true; - } + +function boardDisablePointer(disable) { + playBoard.style.pointerEvents = disable ? "none" : "auto"; } -function selectWinner() { //if the one of following winning combination match then select the winner - if (checkIdSign(1, 2, 3, playerSign) || checkIdSign(4, 5, 6, playerSign) || checkIdSign(7, 8, 9, playerSign) || checkIdSign(1, 4, 7, playerSign) || checkIdSign(2, 5, 8, playerSign) || checkIdSign(3, 6, 9, playerSign) || checkIdSign(1, 5, 9, playerSign) || checkIdSign(3, 5, 7, playerSign)) { - runBot = false; //passing the false boolen value to runBot so bot won't run again - bot(); //calling bot function - setTimeout(() => { //after match won by someone then hide the playboard and show the result box after 700ms - resultBox.classList.add("show"); - playBoard.classList.remove("show"); - }, 1000); //1s = 1000ms - wonText.innerHTML = `Player

${playerSign}

won the game!`; //displaying winning text with passing playerSign (X or O) - } else { //if all boxes/element have id value and still no one win then draw the match - if (getIdVal(1) != "" && getIdVal(2) != "" && getIdVal(3) != "" && getIdVal(4) != "" && getIdVal(5) != "" && getIdVal(6) != "" && getIdVal(7) != "" && getIdVal(8) != "" && getIdVal(9) != "") { - runBot = false; //passing the false boolen value to runBot so bot won't run again - bot(); //calling bot function - setTimeout(() => { //after match drawn then hide the playboard and show the result box after 700ms - resultBox.classList.add("show"); - playBoard.classList.remove("show"); - },1000); //1s = 1000ms - wonText.textContent = "Match has been drawn!"; //displaying draw match text - } - } + +function randomDelayMs() { + return Math.floor(Math.random() * 1000) + 200; } -replayBtn.onclick = () => { - window.location.reload(); //reload the current page on replay button click +/* Replay: rematch keeping the chosen player */ +replayButton.addEventListener("click", () => { + // Reset visuals and state for rematch + resultBox.classList.remove("show"); + clearBoardVisuals(); + attachCellListeners(); + + gameActive = true; + currentTurn = "X"; + + // Restore slider UI consistent with the chosen symbol + if (humanSymbol === "O") { + playersBar.classList.add("player", "active"); + } else { + playersBar.classList.remove("player"); + playersBar.classList.remove("active"); + } + + playBoard.classList.add("show"); + selectBox.classList.add("hide"); + + if (botEnabled && botSymbol === "X") { + boardDisablePointer(true); + setTimeout(botMakeMove, randomDelayMs()); + } else { + boardDisablePointer(false); + } +}); + +/* Main Menu: go back to player selection screen so user can change X/O */ +mainMenuButton.addEventListener("click", () => { + mainMenu(); +}); + +function mainMenu() { + // Hide playboard/result and show selection UI + resultBox.classList.remove("show"); + playBoard.classList.remove("show"); + selectBox.classList.remove("hide"); + + // Fully reset board and internal listeners + clearBoardVisuals(); + removeCellListeners(); + + // Reset slider UI to neutral state + playersBar.classList.remove("player"); + playersBar.classList.remove("active"); + + // Reset game state - user will choose again + gameActive = false; + currentTurn = "X"; + humanSymbol = "X"; + botSymbol = "O"; } \ No newline at end of file diff --git a/Youtube-Clone/index.html b/Youtube-Clone/index.html deleted file mode 100644 index f72ca1db4..000000000 --- a/Youtube-Clone/index.html +++ /dev/null @@ -1,764 +0,0 @@ - - - - YouTube - - - - - - - - -
-
-
- -
- -
-
- - -
-
- - - - -
-
- - - - - -
-
-
- - Home -
-
- - Explore -
-
- - Subscriptions -
-
- -
- -
-
- - Library -
-
- - History -
-
- - Your videos -
-
- - Watch later -
-
- - Liked videos -
-
- - Show more -
-
- -
- -
- - SUBSCRIPTIONS - -
- - Channel 1 -
-
- - Channel 2 -
-
- - Channel 3 -
-
- - Channel 4 -
-
- - Channel 5 -
-
- - Channel 6 -
-
- - Channel 7 -
-
- - Show 40 more -
-
- -
- -
- - MORE FROM YOUTUBE - -
- - YouTube Premium -
-
- - Movies -
-
- - Gaming -
-
- - Live -
-
- - Fashion & Beauty -
-
- - Learing -
-
- - Sports -
-
- -
- -
-
- - Settings -
-
- - Report history -
-
- - Help -
-
- - Send Feedback -
-
- -
- -
- About - Press - Copyright
- Contact us - Creators
- Advertise - Developers

- Terms - Privacy - Policy & Safety
- How YouTube works
- Test new features

- © 2021 Google LLC -
- -
- - Home -
-
- - Explore -
-
- - Subscriptions -
-
- - Library -
-
- - - - - -
- - - - - - - - - - - - - - - - - - -
- - - - - -
-
- - Home -
-
- - Trending -
-
- - Subscriptions -
-
- - Library -
-
- - - - - -
-
-
-
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
- -
-
- -
- -
-
- -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit

- Channel 1 - 10M views • 3 Months Ago -
-
-
-
-
-
- - - - - \ No newline at end of file diff --git a/Youtube_Logo/index.html b/Youtube_Logo/index.html new file mode 100644 index 000000000..b2d5ac53f --- /dev/null +++ b/Youtube_Logo/index.html @@ -0,0 +1,764 @@ + + + + YouTube + + + + + + + + +
+
+
+ +
+ +
+
+ + +
+
+ + + + +
+
+ + + + + +
+
+
+ + Home +
+
+ + Explore +
+
+ + Subscriptions +
+
+ +
+ +
+
+ + Library +
+
+ + History +
+
+ + Your videos +
+
+ + Watch later +
+
+ + Liked videos +
+
+ + Show more +
+
+ +
+ +
+ + SUBSCRIPTIONS + +
+ + Channel 1 +
+
+ + Channel 2 +
+
+ + Channel 3 +
+
+ + Channel 4 +
+
+ + Channel 5 +
+
+ + Channel 6 +
+
+ + Channel 7 +
+
+ + Show 40 more +
+
+ +
+ +
+ + MORE FROM YOUTUBE + +
+ + YouTube Premium +
+
+ + Movies +
+
+ + Gaming +
+
+ + Live +
+
+ + Fashion & Beauty +
+
+ + Learing +
+
+ + Sports +
+
+ +
+ +
+
+ + Settings +
+
+ + Report history +
+
+ + Help +
+
+ + Send Feedback +
+
+ +
+ +
+ About + Press + Copyright
+ Contact us + Creators
+ Advertise + Developers

+ Terms + Privacy + Policy & Safety
+ How YouTube works
+ Test new features

+ © 2021 Google LLC +
+ +
+ + Home +
+
+ + Explore +
+
+ + Subscriptions +
+
+ + Library +
+
+ + + + + +
+ + + + + + + + + + + + + + + + + + +
+ + + + + +
+
+ + Home +
+
+ + Trending +
+
+ + Subscriptions +
+
+ + Library +
+
+ + + + + +
+
+
+
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+ +
+
+ +
+ +
+
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+ Channel 1 + 10M views • 3 Months Ago +
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/Youtube-Clone/README.md b/youtube-clone/README.md similarity index 100% rename from Youtube-Clone/README.md rename to youtube-clone/README.md diff --git a/Youtube-Clone/Resources/favicon_32x32.png b/youtube-clone/Resources/favicon_32x32.png similarity index 100% rename from Youtube-Clone/Resources/favicon_32x32.png rename to youtube-clone/Resources/favicon_32x32.png diff --git a/Youtube-Clone/Resources/youtube_logo.png b/youtube-clone/Resources/youtube_logo.png similarity index 100% rename from Youtube-Clone/Resources/youtube_logo.png rename to youtube-clone/Resources/youtube_logo.png diff --git a/Youtube-Clone/Resources/youtube_logo.webp b/youtube-clone/Resources/youtube_logo.webp similarity index 100% rename from Youtube-Clone/Resources/youtube_logo.webp rename to youtube-clone/Resources/youtube_logo.webp diff --git a/Youtube-Clone/css/styles.css b/youtube-clone/css/styles.css similarity index 100% rename from Youtube-Clone/css/styles.css rename to youtube-clone/css/styles.css diff --git a/youtube-clone/index.html b/youtube-clone/index.html index c52204094..4bd29e892 100644 --- a/youtube-clone/index.html +++ b/youtube-clone/index.html @@ -23,4 +23,4 @@

YouTube Clone

- + \ No newline at end of file