diff --git a/Shradha_Thakur/Chat_bot/index.html b/Shradha_Thakur/Chat_bot/index.html new file mode 100644 index 0000000..aaeca26 --- /dev/null +++ b/Shradha_Thakur/Chat_bot/index.html @@ -0,0 +1,48 @@ + + + + + + Chatbot + + + + + + + + +
+ +
+

Blabbert

+ + +
+ +
+
+ + +
+
+ + + + + + + + + \ No newline at end of file diff --git a/Shradha_Thakur/Chat_bot/script.js b/Shradha_Thakur/Chat_bot/script.js new file mode 100644 index 0000000..fc4579b --- /dev/null +++ b/Shradha_Thakur/Chat_bot/script.js @@ -0,0 +1,136 @@ +function parseMarkdown(markdown) { + return markdown + .replace(/^# (.*$)/gim, '

$1

') + .replace(/^## (.*$)/gim, '

$1

') + .replace(/^### (.*$)/gim, '

$1

') + .replace(/\*\*(.*?)\*\*/gim, '$1') + .replace(/\*(.*?)\*/gim, '$1') + .replace(/\n/g, '
'); + +} + +const form = document.getElementById('chat-form'); +const userInput = document.getElementById('user-input'); +const chatBox = document.getElementById('chat-box'); +const apiKey = document.getElementById('api-key'); +const modelSelect = document.getElementById('model-select'); +let messages = []; +let chatSessions = JSON.parse(localStorage.getItem('chatSessions')) || []; + +const toggleHistoryBtn = document.getElementById('toggle-history'); +const sidebar = document.getElementById('sidebar'); +const historyList = document.getElementById('history-list'); + + + +function enterMessage(content, sender) { + const msg = document.createElement('div'); + msg.className = sender === 'user' ? 'user-msg' : 'bot-msg'; + chatBox.appendChild(msg); + msg.innerHTML = parseMarkdown(content); + chatBox.scrollTop = chatBox.scrollHeight; +} + +async function streaming(model, apikey, messages) { + const response = await fetch('https://openrouter.ai/api/v1/chat/completions', { + method: 'POST', + headers: { + 'Authorization': `Bearer ${apikey}`, + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + model, + messages, + stream: true + }) + }); + + const reader = response.body.getReader(); + const decoder = new TextDecoder(); + let result = ''; + const botDiv = document.createElement('div'); + botDiv.className = 'bot-msg'; + chatBox.appendChild(botDiv); + + while (true) { + const { done, value } = await reader.read(); + if (done) { + break; + } + + const chunk = decoder.decode(value, { stream: true }); + const lines = chunk.split('\n'); + for (const line of lines) { + if (line.startsWith('data:')) { + try { + const json = JSON.parse(line.slice(5)); + const token = json.choices[0]?.delta?.content || ''; + result += token; + botDiv.innerHTML = parseMarkdown(result); + chatBox.scrollTop = chatBox.scrollHeight; + } catch (e) { + console.warn('Invalid chunk:', line); + } + } + } + } + + messages.push({ role: 'assistant', content: result }); + localStorage.setItem('chatHistory', JSON.stringify(messages)); +} + +form.addEventListener('submit', async (e) => { + e.preventDefault(); + const text = userInput.value; + const key = apiKey.value; + const model = modelSelect.value; + + messages.push({ role: 'user', content: text }); + enterMessage(text, 'user'); + userInput.value = ''; + + await streaming(model, key, messages); + + +}); + + +toggleHistoryBtn.addEventListener('click', () => { + sidebar.classList.toggle('open'); + loadHistoryList(); +}); + +window.addEventListener('beforeunload', () => { + if (messages.length > 0) { + chatSessions.push([...messages]); + localStorage.setItem('chatSessions', JSON.stringify(chatSessions)); + } +}); + +function loadHistoryList() { + historyList.innerHTML = ''; + const sessions = JSON.parse(localStorage.getItem('chatSessions')) || []; + + sessions.forEach((session, idx) => { + const li = document.createElement('li'); + li.textContent = `Chat #${idx + 1} `; + li.addEventListener('click', () => { + chatBox.innerHTML = ''; + session.forEach(msg => enterMessage(msg.content, msg.role)); + }); + historyList.appendChild(li); + }); +} + + saved.forEach((msg, index) => { + if (msg.role === 'user') { + const li = document.createElement('li'); + li.textContent = msg.content; + li.addEventListener('click', () => { + alert(`Message at index ${index}: ${msg.content}`); + }); + historyList.appendChild(li); + } + }); + + diff --git a/Shradha_Thakur/Chat_bot/style.css b/Shradha_Thakur/Chat_bot/style.css new file mode 100644 index 0000000..81acf83 --- /dev/null +++ b/Shradha_Thakur/Chat_bot/style.css @@ -0,0 +1,286 @@ +@import url('https://fonts.googleapis.com/css2?family=Barrio&family=Poiret+One&display=swap'); + +body { + margin: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(to bottom, #001219,#005f73, #94d2bd); + min-height: 100vh; + color: #333; +} + +.container { + max-width: 800px; + margin: 0 auto; + padding: 20px; +} + + + +.header { + background: white; + border-radius: 10px; + padding: 20px; + margin-bottom: 20px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + display: flex; + align-items: center; + justify-content: space-between; + gap: 15px; +} + +.header h1 { + color: #001233; + margin: 0; + font-size: 40px; + + font-family: "Poiret One", sans-serif; + font-weight: bold; + font-style: normal; +} + + +#model-select { + background: #e0e0e0; + border: 2px solid #e0e0e0; + border-radius: 8px; + padding: 10px 12px; + font-size: 20px; + cursor: pointer; + min-width: 150px; + font-family: "Poiret One", sans-serif; + font-weight: bold; + font-style: normal; + +} + +#model-select:focus { + border-color: #001233; + outline: none; +} + +#api-key { + background: #979dac; + border: 2px solid #e0e0e0; + border-radius: 8px; + padding: 10px 12px; + font-size: 14px; + min-width: 200px; +} + +#api-key:focus { + border-color: #001233; + outline: none; +} + +#api-key::placeholder { + color: #979dac; +} + + +.chat-box { + background: #94d2bd; + border: 2px solid #001233; + border-radius: 10px; + height: 500px; + overflow-y: auto; + padding: 20px; + margin-bottom: 20px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +.chat-box::-webkit-scrollbar { + width: 8px; +} + +.chat-box::-webkit-scrollbar-track { + background: #979dac; + border-radius: 10px; +} + +.chat-box::-webkit-scrollbar-thumb { + background: #001233; + border-radius: 10px; +} + +.chat-box::-webkit-scrollbar-thumb:hover { + background: #001845; +} + + +.user-msg { + text-align: right; + margin: 10px 0; + padding: 12px 16px; + background: #0a9396; + color: white; + border-radius: 15px 15px 5px 15px; + max-width: 70%; + margin-left: auto; + word-wrap: break-word; +} + +.bot-msg { + text-align: left; + margin: 10px 0; + padding: 12px 16px; + background: #001233; + color: white; + border-radius: 15px 15px 15px 5px; + max-width: 70%; + margin-right: auto; + word-wrap: break-word; +} + + +#chat-form { + display: flex; + gap: 10px; + background: white; + padding: 15px; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +#user-input { + flex: 1; + padding: 12px 16px; + border: 2px solid #001233; + border-radius: 25px; + font-size: 16px; + outline: none; +} + +#user-input:focus { + border-color: #2196f3; +} + +#user-input::placeholder { + color: #888; +} + +button { + padding: 12px 24px; + background: #005f73; + color: white; + border: none; + border-radius: 25px; + font-size: 16px; + font-weight: 500; + cursor: pointer; + transition: background-color 0.2s; +} + +button:hover { + background: #001219; +} + +button:active { + background: #1565c0; +} + + +@media (max-width: 768px) { + .container { + padding: 15px; + } + + .header { + flex-direction: column; + gap: 10px; + } + + #model-select, + #api-key { + width: 100%; + } + + .chat-box { + height: 400px; + padding: 15px; + } + + .user-msg, + .bot-msg { + max-width: 85%; + } + + #chat-form { + padding: 12px; + } +} + +@media (max-width: 480px) { + .header h1 { + font-size: 20px; + } + + .chat-box { + height: 350px; + } + + #user-input { + padding: 10px 14px; + font-size: 14px; + } + + button { + padding: 10px 20px; + font-size: 14px; + } +} + +#toggle-history { + position: fixed; + top: 10px; + left: 10px; + z-index: 999; + background: #94d2bd; + color: #001233; + border: none; + padding: 10px; + font-size: 18px; + cursor: pointer; + font-family: "Poiret One", sans-serif; + font-weight: bold; + font-style: normal; + } + + #sidebar { + position: fixed; + top: 50; + left: -250px; + width: 250px; + height: 100%; + background-color: #f1f1f1; + box-shadow: 2px 0 5px rgba(0,0,0,0.5); + transition: left 0.3s ease; + padding: 20px; + padding-top: 80px; + overflow-y: auto; + z-index: 998; + } + + #sidebar.open { + left: 0; + } + + #sidebar h2 { + margin-top: 0; + } + + #history-list { + list-style: none; + padding: 0; + } + + #history-list li { + margin-bottom: 10px; + padding: 5px; + background: #e0e0e0; + border-radius: 4px; + cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + \ No newline at end of file diff --git a/Shradha_Thakur/Game/assets/ball1.png b/Shradha_Thakur/Game/assets/ball1.png new file mode 100644 index 0000000..2f84f43 Binary files /dev/null and b/Shradha_Thakur/Game/assets/ball1.png differ diff --git a/Shradha_Thakur/Game/assets/ball2.png b/Shradha_Thakur/Game/assets/ball2.png new file mode 100644 index 0000000..bfb8422 Binary files /dev/null and b/Shradha_Thakur/Game/assets/ball2.png differ diff --git a/Shradha_Thakur/Game/assets/ball3.png b/Shradha_Thakur/Game/assets/ball3.png new file mode 100644 index 0000000..790a6fe Binary files /dev/null and b/Shradha_Thakur/Game/assets/ball3.png differ diff --git a/Shradha_Thakur/Game/assets/ball4.png b/Shradha_Thakur/Game/assets/ball4.png new file mode 100644 index 0000000..6a0335c Binary files /dev/null and b/Shradha_Thakur/Game/assets/ball4.png differ diff --git a/Shradha_Thakur/Game/assets/coin.png b/Shradha_Thakur/Game/assets/coin.png new file mode 100644 index 0000000..13f5bf3 Binary files /dev/null and b/Shradha_Thakur/Game/assets/coin.png differ diff --git a/Shradha_Thakur/Game/assets/obstacle.png b/Shradha_Thakur/Game/assets/obstacle.png new file mode 100644 index 0000000..c404dab Binary files /dev/null and b/Shradha_Thakur/Game/assets/obstacle.png differ diff --git a/Shradha_Thakur/Game/assets/platform.avif b/Shradha_Thakur/Game/assets/platform.avif new file mode 100644 index 0000000..4bf3ad3 Binary files /dev/null and b/Shradha_Thakur/Game/assets/platform.avif differ diff --git a/Shradha_Thakur/Game/assets/platform2.png b/Shradha_Thakur/Game/assets/platform2.png new file mode 100644 index 0000000..986296d Binary files /dev/null and b/Shradha_Thakur/Game/assets/platform2.png differ diff --git a/Shradha_Thakur/Game/index.html b/Shradha_Thakur/Game/index.html new file mode 100644 index 0000000..b0204ee --- /dev/null +++ b/Shradha_Thakur/Game/index.html @@ -0,0 +1,36 @@ + + + + + + Save thy ball(s) + + + + +
+

Select Your Ball

+
+ + + + + +
+
+ + + + + + \ No newline at end of file diff --git a/Shradha_Thakur/Game/script.js b/Shradha_Thakur/Game/script.js new file mode 100644 index 0000000..3ed4dd1 --- /dev/null +++ b/Shradha_Thakur/Game/script.js @@ -0,0 +1,317 @@ + +const canvas = document.getElementById('gameCanvas'); +const ctx = canvas.getContext('2d'); + +function gameLoop (){ + update(); + draw(); + requestAnimationFrame(gameLoop); +} + +const GRAVITY = 0.5; +const JUMP_STRENGTH = -15; +let GAME_SPEED = 8; + +let speedIncreaseInterval = 5000; +let lastSpeedIncreaseTime = Date.now(); +let maxSpeed = 25; +let speedStep = 0.5; + + + + +const GAME_WIDTH = 1000; +const GAME_HEIGHT = 600; + +const playerImg = new Image(); +playerImg.src = 'assets/player.png'; + +const platformImg = new Image(); +platformImg.src = 'assets/platform.avif'; + +const obstacleImg = new Image(); +obstacleImg.src = 'assets/obstacle.png'; + +const coinImg = new Image(); +coinImg.src = 'assets/coin.png'; + + +class Player { + constructor(x, y, width, height) { + this.x = x; + this.y = y; + this.width = width; + this.height = height; + this.velocity = 0; + this.color = 'blue'; + } + + update() { + this.velocity += GRAVITY; + this.y += this.velocity; + if (this.y + this.height >= GAME_HEIGHT) { + this.y = GAME_HEIGHT - this.height; + this.velocity = 0; + } + } + draw() { + + ctx.drawImage(playerImg,this.x, this.y, this.width, this.height); + } + + jump(){ + this.velocity = JUMP_STRENGTH; + } +} + +class Platform { + constructor(x, y, width, height) { + this.x = x; + this.y = y; + this.width = width; + this.height = height; + this.color = 'green'; + } + + update(){ + this.x -= GAME_SPEED; + } + draw() { + ctx.drawImage(platformImg, this.x, this.y, this.width, this.height); + + } + isOffScreen(){ + return this.x + this.width < 0; + } +} + +class Obstacle { + constructor(x, y, width, height) { + this.x = x; + this.y = y; + this.width = width; + this.height = height; + this.color = 'red'; + } + + update(){ + this.x -= GAME_SPEED; + } + + draw() { + + ctx.drawImage(obstacleImg, this.x, this.y, this.width, this.height); + } + isOffScreen(){ + return this.x + this.width < 0; + } +} + +class Ring{ + constructor(x, y, width, height) { + this.x = x; + this.y = y; + this.width = width; + this.height = height; + this.color = 'yellow'; + } + update(){ + this.x -= GAME_SPEED; + } + + draw() { + + ctx.drawImage(coinImg, this.x, this.y, this.width, this.height); + } + isOffScreen(){ + return this.x + this.width < 0; + } + +} + +const pf_height= 800; +const pf_y = 0; +const pf_width = 1000; + +let platforms = []; + +function initGround(){ + for (let i = 0; i <= Math.ceil(GAME_WIDTH / pf_width) + 6 ; i++){ + platforms.push(new Platform(i*pf_width, pf_y, pf_width, pf_height)); + } + +} + +function updateGround(){ + + + console.log("Platforms length:", platforms.length); + if (platforms.length > 0) { + console.log("First platform X:", platforms[0].x); + console.log("Last platform X + Width:", platforms[platforms.length-1].x + platforms[platforms.length-1].width); + } + + for (let i = 0; i < platforms.length; i++){ + // GAME_SPEED += 0.00002; + platforms[i].update(); + } + + if (platforms.length >0 && platforms[0].isOffScreen()){ + platforms.shift(); + } + + const end_pf = platforms[platforms.length-1]; + if (end_pf.x + end_pf.width < GAME_WIDTH + pf_width) { + platforms.push(new Platform(end_pf.x + end_pf.width, pf_y, pf_width, pf_height)); + } + + +} + +let obstacles = []; +const player = new Player(50,150,80,100); +let collectables = []; +let score = 0; + + +function update(){ + updateGround(); + + const now = Date.now(); + if (now - lastSpeedIncreaseTime >= speedIncreaseInterval) { + if (GAME_SPEED < maxSpeed) { + GAME_SPEED += speedStep; + console.log("Speed increased to", GAME_SPEED.toFixed(2)); + } + lastSpeedIncreaseTime = now; + } + + + for(let i = 0; i < obstacles.length; i++){ + + if(isColliding(player, obstacles[i])){ + console.log("Game Over"); + gameover(); + break; + } + } + + if(Math.random()<0.5 && obstacles.length < 5){ + + const obstacleWidth = 50; + const obstacleHeight = 80; + const groundY = 520; + + if (Math.random() < 0.02 && obstacles.length < 3) { + obstacles.push(new Obstacle(GAME_WIDTH+700, groundY, obstacleWidth, obstacleHeight)); + } + + } + + for(let i = obstacles.length-1; i>=0; i--){ + obstacles[i].update(); + + if(obstacles[i].isOffScreen()){ + obstacles.splice(i, 1); + } + } + + if(Math.random()<0.6 && collectables.length < 5){ + + const ringWidth = 100; + const ringHeight = 100; + const groundY = 520; + + if (Math.random() < 0.02 && collectables.length < 3) { + collectables.push(new Ring(GAME_WIDTH+700, groundY, ringWidth, ringHeight)); + } + + } + + for(let i = collectables.length-1; i>=0; i--){ + collectables[i].update(); + + if(collectables[i].isOffScreen()){ + collectables.splice(i, 1); + continue; + } + + if(isColliding(player, collectables[i])){ + score += 1; + collectables.splice(i, 1); + } + } + + player.update(); + +} + +function draw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + for (let pf of platforms) pf.draw(); + for (let ob of obstacles) ob.draw(); + for (let c of collectables) c.draw(); + + player.draw(); + + ctx.fillStyle = 'black padding 20px bold'; + ctx.font = '40px Arial'; + ctx.fillText("SCORE: " + score, 20, 40); + + // ctx.fillStyle = 'black padding 20px bold'; + // ctx.font = '40px Arial'; + // ctx.fillText("SAVE THY BALL(s)"); + + ctx.font = '30px Arial'; + ctx.fillText("Speed: " + GAME_SPEED.toFixed(1), 20, 80); + + + +} + +function isColliding(r1,r2){ + return ( + r1.xr2.x && + r1.yr2.y + ); +} + +function gameover() { + alert("Game Over! Your Score is: " + score); + + + score = 0; + // isGameOver = false; + + + player.y = 150; + player.velocity = 0; + + + obstacles = []; + collectables = []; + platforms = []; + + + initGround(); + } + + +alert("Welcome to Save thy Ball!\n Press Space to Jump!\n Collect the coins to increase the score!\n All the best!!"); +initGround(); + +function selectBall(imagePath) { + playerImg.src = imagePath; + document.getElementById('ballSelection').style.display = 'none'; + gameLoop(); +} + + + +document.addEventListener('keydown', (e) => { + if (e.code === 'Space') { + player.jump(); + } + }); \ No newline at end of file diff --git a/Shradha_Thakur/Game/style.css b/Shradha_Thakur/Game/style.css new file mode 100644 index 0000000..3b4a7df --- /dev/null +++ b/Shradha_Thakur/Game/style.css @@ -0,0 +1,13 @@ +body { + margin: 0; + background: black; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + } + canvas { + border: 2px solid #000; + background-color: #fff; + } + \ No newline at end of file diff --git a/Shradha_Thakur/Snappy_site/index.html b/Shradha_Thakur/Snappy_site/index.html new file mode 100644 index 0000000..7cd49b0 --- /dev/null +++ b/Shradha_Thakur/Snappy_site/index.html @@ -0,0 +1,51 @@ + + + + + + Document + + + +
+

Cool site

+
+

Categories

+ +
+ +
+

Tags

+ +
+
+ +
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/Shradha_Thakur/Snappy_site/script.js b/Shradha_Thakur/Snappy_site/script.js new file mode 100644 index 0000000..f3f8f4f --- /dev/null +++ b/Shradha_Thakur/Snappy_site/script.js @@ -0,0 +1,73 @@ +// fetch('http://43.205.110.71:8000/health') +// .then(res => res.text()) +// .then(console.log); + + +//array me store karenge +//search how to use window for storing +let allCategories=[]; +let allItems = []; + +function applyFilter(){ + const cateogry = document.querySelector('.categories select').value; + const tag = document.querySelector('.tags select').value; + + const filtered = allItems.filter(item=>{ + const matchesCategory = cateogry === 'all' || item.category === cateogry; + const matchesTag = tag === 'all' || item.tags.split('|').includes(tag); + return matchesCategory && matchesTag; + }); + getItems(filtered); +} + + +async function fetchCatg(){ + const res = await fetch('http://43.205.110.71:8000/categories') + const data = await res.json(); + console.log(data); + + const catSelect = document.querySelector('.categories select'); + catSelect.addEventListener('change', applyFilter); + + const tagSelect = document.querySelector('.tags select'); + tagSelect.addEventListener('change', applyFilter); +} + + +async function getItems(items){ + const container = document.getElementById('items-container'); + container.innerHTML = ''; + items.forEach(item => { + const itemcard = document.createElement('div'); + itemcard.classList.add('item-card'); + itemcard.innerHTML = ` + Item +

${item.name}

+

${item.description}
+ Price: ${item.price}
+ Tags: ${item.tags}

+ `; + container.appendChild(itemcard); + }) +} + +async function fetchAllData(){ + const [catres, itemres] = await Promise.all([ + fetch('http://43.205.110.71:8000/categories'), + fetch('http://43.205.110.71:8000/items') + ]); + + allCategories = await catres.json(); + allItems = await itemres.json(); + getItems(allItems); + + +} + +window.onload = () => { + fetchCatg(); + fetchAllData(); +} + +//ask use of other apis +//promise.all ke alawa what tricks for fast loading diff --git a/Shradha_Thakur/Snappy_site/style.css b/Shradha_Thakur/Snappy_site/style.css new file mode 100644 index 0000000..bd3b695 --- /dev/null +++ b/Shradha_Thakur/Snappy_site/style.css @@ -0,0 +1,37 @@ +.search-bar{ + display: flex; + border: 2px solid black; + border-radius: 5px; + padding: 5px; + margin: 5px; + width: 1400px; + height: 80px; + justify-content: space-between; + align-items: center; + background-color: #94d2bd; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} +.tags,.categories{ + display: flex; + flex-direction: column; + gap: 0.5px; +} + +.items-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 16px; + padding: 20px; + } + .item-card { + border: 1px solid #ccc; + padding: 10px; + text-align: center; + } + .item-card img { + width: 100%; + height: 150px; + object-fit: cover; + } + +