|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ConnectPics - Visual communication, simplified</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
} |
|
|
|
|
|
.logo-container { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.logo-icon { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%); |
|
|
border-radius: 10px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin-right: 10px; |
|
|
color: white; |
|
|
font-size: 20px; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.logo-text { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
font-weight: 700; |
|
|
background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
display: inline-block; |
|
|
font-size: 24px; |
|
|
} |
|
|
|
|
|
.tagline { |
|
|
font-size: 14px; |
|
|
color: #6b7280; |
|
|
font-style: italic; |
|
|
margin-left: 10px; |
|
|
} |
|
|
|
|
|
.card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.sentence-strip { |
|
|
min-height: 100px; |
|
|
background-color: #f3f4f6; |
|
|
border-radius: 0.5rem; |
|
|
} |
|
|
|
|
|
.drag-item { |
|
|
cursor: grab; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.drag-item:active { |
|
|
cursor: grabbing; |
|
|
} |
|
|
|
|
|
.drag-item.dragging { |
|
|
opacity: 0.5; |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.drop-zone { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.symbol-img { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
object-fit: contain; |
|
|
} |
|
|
|
|
|
.recent-symbol { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
object-fit: contain; |
|
|
} |
|
|
|
|
|
.category-tab.active { |
|
|
background-color: #e0e7ff; |
|
|
color: #4f46e5; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.hidden { |
|
|
display: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-3 flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="logo-container"> |
|
|
<div class="logo-icon">CP</div> |
|
|
<div> |
|
|
<span class="logo-text">ConnectPics</span> |
|
|
<span class="tagline">Visual communication, simplified</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="text-gray-600 hover:text-gray-900" id="user-btn"> |
|
|
<i class="fas fa-user-circle text-2xl"></i> |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-gray-900" id="settings-btn"> |
|
|
<i class="fas fa-cog text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-6"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-1 bg-white rounded-lg shadow p-4"> |
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Categories</h2> |
|
|
<ul class="space-y-2" id="category-tabs"> |
|
|
<li> |
|
|
<button class="w-full text-left px-3 py-2 rounded-md category-tab active" data-category="food"> |
|
|
<i class="fas fa-utensils mr-2"></i> Food |
|
|
</button> |
|
|
</li> |
|
|
<li> |
|
|
<button class="w-full text-left px-3 py-2 rounded-md category-tab hover:bg-gray-100 text-gray-700" data-category="activities"> |
|
|
<i class="fas fa-running mr-2"></i> Activities |
|
|
</button> |
|
|
</li> |
|
|
<li> |
|
|
<button class="w-full text-left px-3 py-2 rounded-md category-tab hover:bg-gray-100 text-gray-700" data-category="emotions"> |
|
|
<i class="fas fa-smile mr-2"></i> Emotions |
|
|
</button> |
|
|
</li> |
|
|
<li> |
|
|
<button class="w-full text-left px-3 py-2 rounded-md category-tab hover:bg-gray-100 text-gray-700" data-category="places"> |
|
|
<i class="fas fa-home mr-2"></i> Places |
|
|
</button> |
|
|
</li> |
|
|
<li> |
|
|
<button class="w-full text-left px-3 py-2 rounded-md category-tab hover:bg-gray-100 text-gray-700" data-category="people"> |
|
|
<i class="fas fa-users mr-2"></i> People |
|
|
</button> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Quick Actions</h2> |
|
|
<button class="w-full mb-2 flex items-center justify-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700" id="new-card-btn"> |
|
|
<i class="fas fa-plus-circle mr-2"></i> New Card |
|
|
</button> |
|
|
<button class="w-full flex items-center justify-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700" id="save-sentence-btn"> |
|
|
<i class="fas fa-save mr-2"></i> Save Sentence |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Recent Sentences</h2> |
|
|
<div class="space-y-2" id="recent-sentences"> |
|
|
<div class="bg-gray-100 p-2 rounded-md recent-sentence" data-sentence="I want apple"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/4322/4322991.png" alt="I" class="recent-symbol rounded-md mr-2"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/1057/1057241.png" alt="want" class="recent-symbol rounded-md mr-2"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/415/415733.png" alt="apple" class="recent-symbol rounded-md"> |
|
|
</div> |
|
|
<div class="mt-1 text-sm text-gray-600">"I want apple"</div> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-2 rounded-md recent-sentence" data-sentence="I feel happy"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/4322/4322991.png" alt="I" class="recent-symbol rounded-md mr-2"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/1049/1049204.png" alt="feel" class="recent-symbol rounded-md mr-2"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/2583/2583344.png" alt="happy" class="recent-symbol rounded-md"> |
|
|
</div> |
|
|
<div class="mt-1 text-sm text-gray-600">"I feel happy"</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-3 space-y-6"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:space-x-4 space-y-2 md:space-y-0"> |
|
|
<div class="relative flex-grow"> |
|
|
<input type="text" placeholder="Search cards..." class="w-full pl-10 pr-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" id="search-input"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
<select class="px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" id="size-filter"> |
|
|
<option value="all">All Sizes</option> |
|
|
<option value="small">Small</option> |
|
|
<option value="medium">Medium</option> |
|
|
<option value="large">Large</option> |
|
|
</select> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700" id="filter-btn"> |
|
|
<i class="fas fa-filter mr-2"></i> Filter |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-800" id="category-title">Food Cards</h2> |
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4" id="cards-container"> |
|
|
|
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true" data-category="food"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/415/415733.png" alt="Apple" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Apple</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true" data-category="food"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/2909/2909503.png" alt="Banana" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Banana</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true" data-category="food"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/2707/2707987.png" alt="Bread" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Bread</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true" data-category="food"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/2505/2505475.png" alt="Milk" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Milk</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true" data-category="food"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/305/305991.png" alt="Juice" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Juice</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true" data-category="food"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/3196/3196879.png" alt="Cookie" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Cookie</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true" data-category="food"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/1404/1404945.png" alt="Pizza" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Pizza</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true" data-category="food"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/2718/2718224.png" alt="Sandwich" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Sandwich</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="activities"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/2936/2936886.png" alt="Run" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Run</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="activities"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/2936/2936886.png" alt="Jump" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Jump</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="activities"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/1042/1042339.png" alt="Swim" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Swim</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="activities"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/857/857455.png" alt="Dance" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Dance</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="emotions"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/2583/2583344.png" alt="Happy" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Happy</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="emotions"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/2583/2583404.png" alt="Sad" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Sad</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="emotions"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/2583/2583388.png" alt="Angry" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Angry</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="emotions"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/2583/2583399.png" alt="Tired" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Tired</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="places"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/619/619153.png" alt="Home" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Home</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="places"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/619/619162.png" alt="School" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">School</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="places"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/619/619165.png" alt="Park" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Park</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="places"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/619/619167.png" alt="Store" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Store</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="people"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/4322/4322991.png" alt="I" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">I</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="people"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/4322/4322994.png" alt="You" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">You</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="people"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/4322/4323005.png" alt="Mom" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Mom</span> |
|
|
</div> |
|
|
<div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move hidden" draggable="true" data-category="people"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/4322/4323004.png" alt="Dad" class="symbol-img mb-2"> |
|
|
<span class="text-sm font-medium text-center">Dad</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Sentence Builder</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300" id="speak-btn"> |
|
|
<i class="fas fa-play mr-1"></i> Speak |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300" id="clear-btn"> |
|
|
<i class="fas fa-trash-alt mr-1"></i> Clear |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="sentence-strip drop-zone p-4 mb-4 flex items-center min-h-24"> |
|
|
<div class="flex items-center space-x-2" id="sentence-container"> |
|
|
<div class="text-gray-400 italic">Drag cards here to build a sentence</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between"> |
|
|
<div class="text-sm text-gray-500"> |
|
|
<span id="word-count">0</span> words in sentence |
|
|
</div> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700" id="share-btn"> |
|
|
<i class="fas fa-share-alt mr-2"></i> Share with Partner |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-6"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<div class="logo-container"> |
|
|
<div class="logo-icon">CP</div> |
|
|
<div> |
|
|
<span class="logo-text">ConnectPics</span> |
|
|
<span class="tagline">Visual communication, simplified</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-300 hover:text-white" id="about-link">About</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white" id="features-link">Features</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white" id="support-link">Support</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white" id="privacy-link">Privacy</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm"> |
|
|
© 2023 ConnectPics. All rights reserved. |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="user-modal"> |
|
|
<div class="bg-white rounded-lg p-6 max-w-md w-full"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">User Profile</h3> |
|
|
<button class="text-gray-500 hover:text-gray-700" id="close-user-modal"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="User" class="w-16 h-16 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-medium">John Doe</h4> |
|
|
<p class="text-gray-600 text-sm">[email protected]</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<button class="w-full text-left px-4 py-2 hover:bg-gray-100 rounded-md"> |
|
|
<i class="fas fa-user mr-2"></i> Edit Profile |
|
|
</button> |
|
|
<button class="w-full text-left px-4 py-2 hover:bg-gray-100 rounded-md"> |
|
|
<i class="fas fa-sign-out-alt mr-2"></i> Logout |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="settings-modal"> |
|
|
<div class="bg-white rounded-lg p-6 max-w-md w-full"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Settings</h3> |
|
|
<button class="text-gray-500 hover:text-gray-700" id="close-settings-modal"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Theme</label> |
|
|
<select class="w-full px-3 py-2 border rounded-md"> |
|
|
<option>Light</option> |
|
|
<option>Dark</option> |
|
|
<option>System</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Card Size</label> |
|
|
<select class="w-full px-3 py-2 border rounded-md"> |
|
|
<option>Small</option> |
|
|
<option>Medium</option> |
|
|
<option>Large</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="sound-toggle" class="mr-2"> |
|
|
<label for="sound-toggle" class="text-sm">Enable sound effects</label> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-6 w-full bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700"> |
|
|
Save Settings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="new-card-modal"> |
|
|
<div class="bg-white rounded-lg p-6 max-w-md w-full"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Create New Card</h3> |
|
|
<button class="text-gray-500 hover:text-gray-700" id="close-new-card-modal"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Word</label> |
|
|
<input type="text" class="w-full px-3 py-2 border rounded-md" placeholder="Enter the word"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Category</label> |
|
|
<select class="w-full px-3 py-2 border rounded-md"> |
|
|
<option>Food</option> |
|
|
<option>Activities</option> |
|
|
<option>Emotions</option> |
|
|
<option>Places</option> |
|
|
<option>People</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Upload Image</label> |
|
|
<div class="border-2 border-dashed rounded-md p-4 text-center"> |
|
|
<i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> |
|
|
<p class="text-sm text-gray-500">Drag & drop image or click to browse</p> |
|
|
<input type="file" class="hidden"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-6 w-full bg-green-600 text-white py-2 rounded-md hover:bg-green-700"> |
|
|
Create Card |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="save-sentence-modal"> |
|
|
<div class="bg-white rounded-lg p-6 max-w-md w-full"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Save Sentence</h3> |
|
|
<button class="text-gray-500 hover:text-gray-700" id="close-save-sentence-modal"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium mb-1">Sentence Name</label> |
|
|
<input type="text" class="w-full px-3 py-2 border rounded-md" placeholder="e.g. 'I want apple'"> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button class="px-4 py-2 border rounded-md hover:bg-gray-100" id="cancel-save-sentence"> |
|
|
Cancel |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700" id="confirm-save-sentence"> |
|
|
Save |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="share-modal"> |
|
|
<div class="bg-white rounded-lg p-6 max-w-md w-full"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Share Sentence</h3> |
|
|
<button class="text-gray-500 hover:text-gray-700" id="close-share-modal"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium mb-1">Share with</label> |
|
|
<select class="w-full px-3 py-2 border rounded-md"> |
|
|
<option>Mom</option> |
|
|
<option>Dad</option> |
|
|
<option>Teacher</option> |
|
|
<option>Therapist</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button class="px-4 py-2 border rounded-md hover:bg-gray-100" id="cancel-share"> |
|
|
Cancel |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700" id="confirm-share"> |
|
|
Share |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="about-modal"> |
|
|
<div class="bg-white rounded-lg p-6 max-w-2xl w-full"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">About ConnectPics</h3> |
|
|
<button class="text-gray-500 hover:text-gray-700" id="close-about-modal"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<p>ConnectPics is a visual communication tool designed to help individuals with communication difficulties express themselves through symbols and pictures.</p> |
|
|
<p>Our mission is to make communication accessible to everyone, regardless of their verbal abilities.</p> |
|
|
<div class="flex items-center mt-4"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/4322/4322991.png" alt="I" class="w-10 h-10 mr-2"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/1057/1057241.png" alt="love" class="w-10 h-10 mr-2"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/4322/4322991.png" alt="you" class="w-10 h-10"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const categoryTabs = document.querySelectorAll('.category-tab'); |
|
|
const cardsContainer = document.getElementById('cards-container'); |
|
|
const categoryTitle = document.getElementById('category-title'); |
|
|
|
|
|
categoryTabs.forEach(tab => { |
|
|
tab.addEventListener('click', function() { |
|
|
|
|
|
categoryTabs.forEach(t => t.classList.remove('active', 'bg-indigo-100', 'text-indigo-700')); |
|
|
this.classList.add('active', 'bg-indigo-100', 'text-indigo-700'); |
|
|
|
|
|
|
|
|
const category = this.dataset.category; |
|
|
|
|
|
|
|
|
categoryTitle.textContent = `${this.textContent.trim()} Cards`; |
|
|
|
|
|
|
|
|
const cards = cardsContainer.querySelectorAll('.card'); |
|
|
cards.forEach(card => { |
|
|
if (card.dataset.category === category) { |
|
|
card.classList.remove('hidden'); |
|
|
} else { |
|
|
card.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const userBtn = document.getElementById('user-btn'); |
|
|
const userModal = document.getElementById('user-modal'); |
|
|
const closeUserModal = document.getElementById('close-user-modal'); |
|
|
|
|
|
const settingsBtn = document.getElementById('settings-btn'); |
|
|
const settingsModal = document.getElementById('settings-modal'); |
|
|
const closeSettingsModal = document.getElementById('close-settings-modal'); |
|
|
|
|
|
const newCardBtn = document.getElementById('new-card-btn'); |
|
|
const newCardModal = document.getElementById('new-card-modal'); |
|
|
const closeNewCardModal = document.getElementById('close-new-card-modal'); |
|
|
|
|
|
const saveSentenceBtn = document.getElementById('save-sentence-btn'); |
|
|
const saveSentenceModal = document.getElementById('save-sentence-modal'); |
|
|
const closeSaveSentenceModal = document.getElementById('close-save-sentence-modal'); |
|
|
const cancelSaveSentence = document.getElementById('cancel-save-sentence'); |
|
|
const confirmSaveSentence = document.getElementById('confirm-save-sentence'); |
|
|
|
|
|
const shareBtn = document.getElementById('share-btn'); |
|
|
const shareModal = document.getElementById('share-modal'); |
|
|
const closeShareModal = document.getElementById('close-share-modal'); |
|
|
const cancelShare = document.getElementById('cancel-share'); |
|
|
const confirmShare = document.getElementById('confirm-share'); |
|
|
|
|
|
const aboutLink = document.getElementById('about-link'); |
|
|
const aboutModal = document.getElementById('about-modal'); |
|
|
const closeAboutModal = document.getElementById('close-about-modal'); |
|
|
|
|
|
|
|
|
userBtn.addEventListener('click', () => userModal.classList.remove('hidden')); |
|
|
closeUserModal.addEventListener('click', () => userModal.classList.add('hidden')); |
|
|
|
|
|
settingsBtn.addEventListener('click', () => settingsModal.classList.remove('hidden')); |
|
|
closeSettingsModal.addEventListener('click', () => settingsModal.classList.add('hidden')); |
|
|
|
|
|
newCardBtn.addEventListener('click', () => newCardModal.classList.remove('hidden')); |
|
|
closeNewCardModal.addEventListener('click', () => newCardModal.classList.add('hidden')); |
|
|
|
|
|
saveSentenceBtn.addEventListener('click', () => saveSentenceModal.classList.remove('hidden')); |
|
|
closeSaveSentenceModal.addEventListener('click', () => saveSentenceModal.classList.add('hidden')); |
|
|
cancelSaveSentence.addEventListener('click', () => saveSentenceModal.classList.add('hidden')); |
|
|
confirmSaveSentence.addEventListener('click', function() { |
|
|
alert('Sentence saved successfully!'); |
|
|
saveSentenceModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
shareBtn.addEventListener('click', () => shareModal.classList.remove('hidden')); |
|
|
closeShareModal.addEventListener('click', () => shareModal.classList.add('hidden')); |
|
|
cancelShare.addEventListener('click', () => shareModal.classList.add('hidden')); |
|
|
confirmShare.addEventListener('click', function() { |
|
|
alert('Sentence shared successfully!'); |
|
|
shareModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
aboutLink.addEventListener('click', () => aboutModal.classList.remove('hidden')); |
|
|
closeAboutModal.addEventListener('click', () => aboutModal.classList.add('hidden')); |
|
|
|
|
|
|
|
|
const recentSentences = document.querySelectorAll('.recent-sentence'); |
|
|
const sentenceContainer = document.getElementById('sentence-container'); |
|
|
const wordCount = document.getElementById('word-count'); |
|
|
|
|
|
recentSentences.forEach(sentence => { |
|
|
sentence.addEventListener('click', function() { |
|
|
|
|
|
sentenceContainer.innerHTML = ''; |
|
|
|
|
|
|
|
|
const sentenceText = this.dataset.sentence; |
|
|
const words = sentenceText.split(' '); |
|
|
|
|
|
|
|
|
const allCards = document.querySelectorAll('.card'); |
|
|
|
|
|
|
|
|
words.forEach(word => { |
|
|
|
|
|
let foundCard = null; |
|
|
allCards.forEach(card => { |
|
|
if (card.querySelector('span').textContent.toLowerCase() === word.toLowerCase()) { |
|
|
foundCard = card; |
|
|
} |
|
|
}); |
|
|
|
|
|
if (foundCard) { |
|
|
|
|
|
const newCard = foundCard.cloneNode(true); |
|
|
newCard.classList.remove('drag-item'); |
|
|
newCard.classList.add('relative'); |
|
|
|
|
|
|
|
|
const deleteBtn = document.createElement('button'); |
|
|
deleteBtn.className = 'absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs'; |
|
|
deleteBtn.innerHTML = '<i class="fas fa-times"></i>'; |
|
|
deleteBtn.addEventListener('click', function() { |
|
|
newCardWrapper.remove(); |
|
|
updateWordCount(); |
|
|
}); |
|
|
|
|
|
const cardWrapper = document.createElement('div'); |
|
|
cardWrapper.className = 'relative mx-1'; |
|
|
cardWrapper.appendChild(newCard); |
|
|
cardWrapper.appendChild(deleteBtn); |
|
|
|
|
|
sentenceContainer.appendChild(cardWrapper); |
|
|
} |
|
|
}); |
|
|
|
|
|
updateWordCount(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const dragItems = document.querySelectorAll('.drag-item'); |
|
|
const dropZone = document.querySelector('.drop-zone'); |
|
|
|
|
|
|
|
|
dragItems.forEach(item => { |
|
|
item.addEventListener('dragstart', function(e) { |
|
|
e.dataTransfer.setData('text/plain', item.innerHTML); |
|
|
item.classList.add('dragging'); |
|
|
}); |
|
|
|
|
|
item.addEventListener('dragend', function() { |
|
|
item.classList.remove('dragging'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
dropZone.addEventListener('dragover', function(e) { |
|
|
e.preventDefault(); |
|
|
this.classList.add('active'); |
|
|
}); |
|
|
|
|
|
dropZone.addEventListener('dragleave', function() { |
|
|
this.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
dropZone.addEventListener('drop', function(e) { |
|
|
e.preventDefault(); |
|
|
this.classList.remove('active'); |
|
|
|
|
|
const data = e.dataTransfer.getData('text/plain'); |
|
|
|
|
|
|
|
|
if (sentenceContainer.innerHTML.includes('Drag cards here')) { |
|
|
sentenceContainer.innerHTML = ''; |
|
|
} |
|
|
|
|
|
|
|
|
const newCard = document.createElement('div'); |
|
|
newCard.className = 'card bg-white border rounded-lg p-2 flex flex-col items-center cursor-move'; |
|
|
newCard.innerHTML = data; |
|
|
|
|
|
|
|
|
const deleteBtn = document.createElement('button'); |
|
|
deleteBtn.className = 'absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs'; |
|
|
deleteBtn.innerHTML = '<i class="fas fa-times"></i>'; |
|
|
deleteBtn.addEventListener('click', function() { |
|
|
newCardWrapper.remove(); |
|
|
updateWordCount(); |
|
|
}); |
|
|
|
|
|
const cardWrapper = document.createElement('div'); |
|
|
cardWrapper.className = 'relative mx-1'; |
|
|
cardWrapper.appendChild(newCard); |
|
|
cardWrapper.appendChild(deleteBtn); |
|
|
|
|
|
sentenceContainer.appendChild(cardWrapper); |
|
|
updateWordCount(); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateWordCount() { |
|
|
const words = sentenceContainer.querySelectorAll('.card'); |
|
|
wordCount.textContent = words.length; |
|
|
|
|
|
if (words.length === 0) { |
|
|
sentenceContainer.innerHTML = '<div class="text-gray-400 italic">Drag cards here to build a sentence</div>'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('speak-btn').addEventListener('click', function() { |
|
|
const words = []; |
|
|
sentenceContainer.querySelectorAll('.card span').forEach(span => { |
|
|
words.push(span.textContent); |
|
|
}); |
|
|
|
|
|
if (words.length > 0) { |
|
|
const utterance = new SpeechSynthesisUtterance(words.join(' ')); |
|
|
speechSynthesis.speak(utterance); |
|
|
} else { |
|
|
alert('Please add some words to the sentence first.'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('clear-btn').addEventListener('click', function() { |
|
|
sentenceContainer.innerHTML = '<div class="text-gray-400 italic">Drag cards here to build a sentence</div>'; |
|
|
updateWordCount(); |
|
|
}); |
|
|
|
|
|
|
|
|
const searchInput = document.getElementById('search-input'); |
|
|
searchInput.addEventListener('input', function() { |
|
|
const searchTerm = this.value.toLowerCase(); |
|
|
const cards = document.querySelectorAll('.card:not(.hidden)'); |
|
|
|
|
|
cards.forEach(card => { |
|
|
const cardText = card.querySelector('span').textContent.toLowerCase(); |
|
|
if (cardText.includes(searchTerm)) { |
|
|
card.classList.remove('hidden'); |
|
|
} else { |
|
|
card.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('filter-btn').addEventListener('click', function() { |
|
|
const sizeFilter = document.getElementById('size-filter').value; |
|
|
alert(`Filtering by size: ${sizeFilter}`); |
|
|
|
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=theaimoron/pecs-app-for-students" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
