Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PECS Pro - Digital Picture Exchange System</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> | |
| /* Custom styles */ | |
| .drag-area { | |
| min-height: 120px; | |
| border: 2px dashed #ccc; | |
| border-radius: 8px; | |
| transition: all 0.3s ease; | |
| } | |
| .drag-area.active { | |
| border-color: #4f46e5; | |
| background-color: #eef2ff; | |
| } | |
| .picture-card { | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .picture-card:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .picture-card.selected { | |
| border: 2px solid #4f46e5; | |
| box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3); | |
| } | |
| .sentence-strip { | |
| min-height: 80px; | |
| background-color: #f9fafb; | |
| border-radius: 8px; | |
| } | |
| .sentence-card { | |
| transition: all 0.2s ease; | |
| } | |
| .sentence-card:hover { | |
| transform: translateY(-2px); | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background-color: #e5e7eb; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| background-color: #4f46e5; | |
| transition: width 0.3s ease; | |
| } | |
| /* Animation for speaking */ | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| .speaking { | |
| animation: pulse 1s infinite; | |
| } | |
| /* Custom scrollbar */ | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #c7d2fe; | |
| border-radius: 10px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #a5b4fc; | |
| } | |
| /* Tab animation */ | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Modal animation */ | |
| .modal { | |
| transition: all 0.3s ease; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| .modal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-indigo-600 text-white shadow-md"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-comments text-2xl"></i> | |
| <h1 class="text-xl font-bold">PECS Pro</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="settings-btn" class="p-2 rounded-full hover:bg-indigo-700 transition"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| <button id="user-btn" class="p-2 rounded-full hover:bg-indigo-700 transition"> | |
| <i class="fas fa-user"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 container mx-auto px-4 py-6"> | |
| <!-- Tabs Navigation --> | |
| <div class="flex border-b border-gray-200 mb-6"> | |
| <button class="tab-btn py-2 px-4 font-medium text-gray-600 hover:text-indigo-600 transition border-b-2 border-transparent hover:border-indigo-300" data-tab="cards"> | |
| <i class="fas fa-images mr-2"></i>Picture Cards | |
| </button> | |
| <button class="tab-btn py-2 px-4 font-medium text-gray-600 hover:text-indigo-600 transition border-b-2 border-transparent hover:border-indigo-300" data-tab="sentence"> | |
| <i class="fas fa-layer-group mr-2"></i>Sentence Builder | |
| </button> | |
| <button class="tab-btn py-2 px-4 font-medium text-gray-600 hover:text-indigo-600 transition border-b-2 border-transparent hover:border-indigo-300" data-tab="progress"> | |
| <i class="fas fa-chart-line mr-2"></i>Progress Tracking | |
| </button> | |
| <button class="tab-btn py-2 px-4 font-medium text-gray-600 hover:text-indigo-600 transition border-b-2 border-transparent hover:border-indigo-300" data-tab="partner"> | |
| <i class="fas fa-handshake mr-2"></i>Partner Mode | |
| </button> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div class="tab-contents"> | |
| <!-- Picture Cards Tab --> | |
| <div id="cards-tab" class="tab-content active"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Picture Card Library</h2> | |
| <div class="flex space-x-3"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search cards..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button id="add-card-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Add Card | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex space-x-2 overflow-x-auto pb-2 custom-scrollbar"> | |
| <button class="category-btn px-4 py-1 bg-indigo-100 text-indigo-800 rounded-full font-medium" data-category="all">All</button> | |
| <button class="category-btn px-4 py-1 bg-gray-100 text-gray-800 rounded-full font-medium" data-category="food">Food</button> | |
| <button class="category-btn px-4 py-1 bg-gray-100 text-gray-800 rounded-full font-medium" data-category="activities">Activities</button> | |
| <button class="category-btn px-4 py-1 bg-gray-100 text-gray-800 rounded-full font-medium" data-category="emotions">Emotions</button> | |
| <button class="category-btn px-4 py-1 bg-gray-100 text-gray-800 rounded-full font-medium" data-category="places">Places</button> | |
| <button class="category-btn px-4 py-1 bg-gray-100 text-gray-800 rounded-full font-medium" data-category="people">People</button> | |
| <button class="category-btn px-4 py-1 bg-gray-100 text-gray-800 rounded-full font-medium" data-category="requests">Requests</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <!-- Sample Picture Cards --> | |
| <div class="picture-card bg-white rounded-lg shadow p-3 flex flex-col items-center" data-category="food" data-label="Apple"> | |
| <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-2"> | |
| <span class="text-3xl">🍎</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">Apple</span> | |
| </div> | |
| <div class="picture-card bg-white rounded-lg shadow p-3 flex flex-col items-center" data-category="food" data-label="Banana"> | |
| <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-2"> | |
| <span class="text-3xl">🍌</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">Banana</span> | |
| </div> | |
| <div class="picture-card bg-white rounded-lg shadow p-3 flex flex-col items-center" data-category="activities" data-label="Play"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-2"> | |
| <span class="text-3xl">⚽</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">Play</span> | |
| </div> | |
| <div class="picture-card bg-white rounded-lg shadow p-3 flex flex-col items-center" data-category="emotions" data-label="Happy"> | |
| <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-2"> | |
| <span class="text-3xl">😊</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">Happy</span> | |
| </div> | |
| <div class="picture-card bg-white rounded-lg shadow p-3 flex flex-col items-center" data-category="emotions" data-label="Sad"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-2"> | |
| <span class="text-3xl">😢</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">Sad</span> | |
| </div> | |
| <div class="picture-card bg-white rounded-lg shadow p-3 flex flex-col items-center" data-category="places" data-label="Home"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-2"> | |
| <span class="text-3xl">🏠</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">Home</span> | |
| </div> | |
| <div class="picture-card bg-white rounded-lg shadow p-3 flex flex-col items-center" data-category="people" data-label="Mom"> | |
| <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-2"> | |
| <span class="text-3xl">👩</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">Mom</span> | |
| </div> | |
| <div class="picture-card bg-white rounded-lg shadow p-3 flex flex-col items-center" data-category="people" data-label="Dad"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-2"> | |
| <span class="text-3xl">👨</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">Dad</span> | |
| </div> | |
| <div class="picture-card bg-white rounded-lg shadow p-3 flex flex-col items-center" data-category="requests" data-label="Help"> | |
| <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-2"> | |
| <span class="text-3xl">🆘</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">Help</span> | |
| </div> | |
| <div class="picture-card bg-white rounded-lg shadow p-3 flex flex-col items-center" data-category="requests" data-label="Bathroom"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-2"> | |
| <span class="text-3xl">🚽</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">Bathroom</span> | |
| </div> | |
| <div class="picture-card bg-white rounded-lg shadow p-3 flex flex-col items-center" data-category="food" data-label="Water"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-2"> | |
| <span class="text-3xl">💧</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">Water</span> | |
| </div> | |
| <div class="picture-card bg-white rounded-lg shadow p-3 flex flex-col items-center" data-category="activities" data-label="Read"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-2"> | |
| <span class="text-3xl">📖</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">Read</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sentence Builder Tab --> | |
| <div id="sentence-tab" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Sentence Builder</h2> | |
| <div class="flex space-x-3"> | |
| <button id="clear-sentence-btn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition"> | |
| <i class="fas fa-trash-alt mr-2"></i> Clear | |
| </button> | |
| <button id="save-sentence-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition"> | |
| <i class="fas fa-save mr-2"></i> Save | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="sentence-strip drag-area p-4 mb-4 flex items-center" id="sentence-strip"> | |
| <p class="text-gray-400" id="empty-message">Drag picture cards here to build a sentence</p> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button id="speak-sentence-btn" class="bg-green-600 text-white px-6 py-3 rounded-full hover:bg-green-700 transition flex items-center"> | |
| <i class="fas fa-volume-up text-xl mr-2"></i> Speak Sentence | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-3">Saved Sentences</h3> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="sentence-card bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <span class="text-xl">🍎</span> | |
| <span class="text-xl">➕</span> | |
| <span class="text-xl">💧</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">"I want apple and water"</p> | |
| <div class="flex justify-between"> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-play"></i> Speak | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash-alt"></i> Delete | |
| </button> | |
| </div> | |
| </div> | |
| <div class="sentence-card bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <span class="text-xl">🏠</span> | |
| <span class="text-xl">➡️</span> | |
| <span class="text-xl">🚗</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">"Go home by car"</p> | |
| <div class="flex justify-between"> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-play"></i> Speak | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash-alt"></i> Delete | |
| </button> | |
| </div> | |
| </div> | |
| <div class="sentence-card bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <span class="text-xl">👩</span> | |
| <span class="text-xl">➕</span> | |
| <span class="text-xl">📖</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">"Mom read book"</p> | |
| <div class="flex justify-between"> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-play"></i> Speak | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash-alt"></i> Delete | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Progress Tracking Tab --> | |
| <div id="progress-tab" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Progress Tracking</h2> | |
| <div class="flex space-x-3"> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition"> | |
| <i class="fas fa-download mr-2"></i> Export Data | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Communication Progress</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Independent Requests</span> | |
| <span class="text-sm font-medium text-gray-700">75%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Sentence Building</span> | |
| <span class="text-sm font-medium text-gray-700">60%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Vocabulary Growth</span> | |
| <span class="text-sm font-medium text-gray-700">85%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Recent Activity</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-comment text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">"I want apple"</p> | |
| <p class="text-xs text-gray-500">Today, 10:15 AM</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-layer-group text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">Created new sentence</p> | |
| <p class="text-xs text-gray-500">Today, 9:30 AM</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-images text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">Added 3 new picture cards</p> | |
| <p class="text-xs text-gray-500">Yesterday, 3:45 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Communication Report</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Exchanges</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Independent</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prompted</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vocabulary Used</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 words</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12 words</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 days ago</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10 words</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Partner Mode Tab --> | |
| <div id="partner-tab" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Communication Partner Mode</h2> | |
| <div class="flex space-x-3"> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition"> | |
| <i class="fas fa-plus mr-2"></i> New Session | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Current Session</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-700 mb-1">Session Time</p> | |
| <p class="text-xl font-semibold text-indigo-600">15:32</p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-700 mb-1">Exchanges</p> | |
| <p class="text-xl font-semibold text-indigo-600">8</p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-700 mb-1">Independent</p> | |
| <p class="text-xl font-semibold text-indigo-600">5</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 md:col-span-2"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Session Notes</h3> | |
| <textarea class="w-full h-32 px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Add notes about the communication session..."></textarea> | |
| <div class="mt-4 flex space-x-3"> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition"> | |
| <i class="fas fa-microphone mr-2"></i> Record Audio | |
| </button> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition"> | |
| <i class="fas fa-save mr-2"></i> Save Notes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Recent Communication Exchanges</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-4 p-3 bg-blue-50 rounded-lg"> | |
| <div class="bg-blue-100 p-2 rounded-full"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium text-gray-800">"I want apple"</p> | |
| <p class="text-xs text-gray-500">2 minutes ago</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-check-circle"></i> Reinforce | |
| </button> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-edit"></i> Model | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4 p-3 bg-green-50 rounded-lg"> | |
| <div class="bg-green-100 p-2 rounded-full"> | |
| <i class="fas fa-user text-green-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium text-gray-800">"Go bathroom"</p> | |
| <p class="text-xs text-gray-500">5 minutes ago</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-check-circle"></i> Reinforce | |
| </button> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-edit"></i> Model | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4 p-3 bg-blue-50 rounded-lg"> | |
| <div class="bg-blue-100 p-2 rounded-full"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium text-gray-800">"Play ball"</p> | |
| <p class="text-xs text-gray-500">8 minutes ago</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-check-circle"></i> Reinforce | |
| </button> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-edit"></i> Model | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 border-t border-gray-200 py-4"> | |
| <div class="container mx-auto px-4 text-center text-sm text-gray-600"> | |
| <p>PECS Pro - Digital Picture Exchange Communication System</p> | |
| <p class="mt-1">© 2023 PECS Pro. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Add Card Modal --> | |
| <div id="add-card-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="modal bg-white rounded-lg shadow-xl w-full max-w-md transform transition-all"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Add New Picture Card</h3> | |
| <button id="close-add-card-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Card Label</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter label for the card"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Category</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="food">Food</option> | |
| <option value="activities">Activities</option> | |
| <option value="emotions">Emotions</option> | |
| <option value="places">Places</option> | |
| <option value="people">People</option> | |
| <option value="requests">Requests</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Symbol/Image</label> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex-1"> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center"> | |
| <i class="fas fa-image text-3xl text-gray-400 mb-2"></i> | |
| <p class="text-sm text-gray-500">Click to upload image</p> | |
| <input type="file" class="hidden"> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm text-gray-500 mb-2">Or select emoji:</p> | |
| <div class="grid grid-cols-4 gap-2"> | |
| <button class="text-2xl p-2 hover:bg-gray-100 rounded">🍎</button> | |
| <button class="text-2xl p-2 hover:bg-gray-100 rounded">🍌</button> | |
| <button class="text-2xl p-2 hover:bg-gray-100 rounded">⚽</button> | |
| <button class="text-2xl p-2 hover:bg-gray-100 rounded">😊</button> | |
| <button class="text-2xl p-2 hover:bg-gray-100 rounded">🏠</button> | |
| <button class="text-2xl p-2 hover:bg-gray-100 rounded">👩</button> | |
| <button class="text-2xl p-2 hover:bg-gray-100 rounded">🆘</button> | |
| <button class="text-2xl p-2 hover:bg-gray-100 rounded">📖</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4 flex justify-end space-x-3"> | |
| <button id="cancel-add-card" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button> | |
| <button id="save-add-card" class="px-4 py-2 bg-indigo-600 rounded-lg text-white hover:bg-indigo-700">Save Card</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Modal --> | |
| <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="modal bg-white rounded-lg shadow-xl w-full max-w-md transform transition-all"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Settings</h3> | |
| <button id="close-settings-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-6"> | |
| <div> | |
| <h4 class="text-md font-medium text-gray-800 mb-3">Display Settings</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-700">Card Size</span> | |
| <select class="w-32 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>Small</option> | |
| <option selected>Medium</option> | |
| <option>Large</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-700">Color Theme</span> | |
| <select class="w-32 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>Light</option> | |
| <option>Dark</option> | |
| <option selected>System</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-700">Text Size</span> | |
| <select class="w-32 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>Small</option> | |
| <option selected>Medium</option> | |
| <option>Large</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-md font-medium text-gray-800 mb-3">Speech Settings</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-700">Voice</span> | |
| <select class="w-32 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>Male</option> | |
| <option selected>Female</option> | |
| <option>Child</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-700">Speech Rate</span> | |
| <select class="w-32 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>Slow</option> | |
| <option selected>Normal</option> | |
| <option>Fast</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-700">Word Highlighting</span> | |
| <label class="android-switch"> | |
| <input type="checkbox" checked> | |
| <span class="android-slider"></span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-md font-medium text-gray-800 mb-3">Language</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-700">Interface Language</span> | |
| <select class="w-32 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option selected>English</option> | |
| <option>Spanish</option> | |
| <option>French</option> | |
| <option>German</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-700">Speech Language</span> | |
| <select class="w-32 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option selected>English</option> | |
| <option>Spanish</option> | |
| <option>French</option> | |
| <option>German</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4 flex justify-end space-x-3"> | |
| <button id="cancel-settings" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button> | |
| <button id="save-settings" class="px-4 py-2 bg-indigo-600 rounded-lg text-white hover:bg-indigo-700">Save Settings</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User Profile Modal --> | |
| <div id="user-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="modal bg-white rounded-lg shadow-xl w-full max-w-md transform transition-all"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">User Profile</h3> | |
| <button id="close-user-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-user text-3xl text-indigo-600"></i> | |
| </div> | |
| <h4 class="text-md font-medium text-gray-800">John Doe</h4> | |
| <p class="text-sm text-gray-500">Student</p> | |
| </div> | |
| <div> | |
| <h4 class="text-md font-medium text-gray-800 mb-3">Profile Information</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Name</label> | |
| <input type="text" value="John Doe" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" value="john@example.com" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Role</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>Student</option> | |
| <option>Therapist</option> | |
| <option>Teacher</option> | |
| <option>Parent</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-md font-medium text-gray-800 mb-3">Account Settings</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-700">Sync Data</span> | |
| <label class="android-switch"> | |
| <input type="checkbox" checked> | |
| <span class="android-slider"></span> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-700">Dark Mode</span> | |
| <label class="android-switch"> | |
| <input type="checkbox"> | |
| <span class="android-slider"></span> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-700">Notifications</span> | |
| <label class="android-switch"> | |
| <input type="checkbox" checked> | |
| <span class="android-slider"></span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4 flex justify-between"> | |
| <button id="logout-btn" class="px-4 py-2 text-red-600 hover:text-red-800"> | |
| <i class="fas fa-sign-out-alt mr-2"></i> Logout | |
| </button> | |
| <div class="flex space-x-3"> | |
| <button id="cancel-user" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button> | |
| <button id="save-user" class="px-4 py-2 bg-indigo-600 rounded-lg text-white hover:bg-indigo-700">Save Changes</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const tabBtns = document.querySelectorAll('.tab-btn'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| const categoryBtns = document.querySelectorAll('.category-btn'); | |
| const pictureCards = document.querySelectorAll('.picture-card'); | |
| const sentenceStrip = document.getElementById('sentence-strip'); | |
| const emptyMessage = document.getElementById('empty-message'); | |
| const speakSentenceBtn = document.getElementById('speak-sentence-btn'); | |
| const clearSentenceBtn = document.getElementById('clear-sentence-btn'); | |
| const saveSentenceBtn = document.getElementById('save-sentence-btn'); | |
| const addCardBtn = document.getElementById('add-card-btn'); | |
| const addCardModal = document.getElementById('add-card-modal'); | |
| const closeAddCardModal = document.getElementById('close-add-card-modal'); | |
| const cancelAddCard = document.getElementById('cancel-add-card'); | |
| const saveAddCard = document.getElementById('save-add-card'); | |
| const settingsBtn = document.getElementById('settings-btn'); | |
| const settingsModal = document.getElementById('settings-modal'); | |
| const closeSettingsModal = document.getElementById('close-settings-modal'); | |
| const cancelSettings = document.getElementById('cancel-settings'); | |
| const saveSettings = document.getElementById('save-settings'); | |
| const userBtn = document.getElementById('user-btn'); | |
| const userModal = document.getElementById('user-modal'); | |
| const closeUserModal = document.getElementById('close-user-modal'); | |
| const cancelUser = document.getElementById('cancel-user'); | |
| const saveUser = document.getElementById('save-user'); | |
| const logoutBtn = document.getElementById('logout-btn'); | |
| // Tab Switching | |
| tabBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const tabId = btn.getAttribute('data-tab'); | |
| // Update active tab button | |
| tabBtns.forEach(tb => tb.classList.remove('border-indigo-600', 'text-indigo-600')); | |
| btn.classList.add('border-indigo-600', 'text-indigo-600'); | |
| // Update active tab content | |
| tabContents.forEach(tc => tc.classList.remove('active')); | |
| document.getElementById(`${tabId}-tab`).classList.add('active'); | |
| }); | |
| }); | |
| // Category Filtering | |
| categoryBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const category = btn.getAttribute('data-category'); | |
| // Update active category button | |
| categoryBtns.forEach(cb => { | |
| cb.classList.remove('bg-indigo-100', 'text-indigo-800'); | |
| cb.classList.add('bg-gray-100', 'text-gray-800'); | |
| }); | |
| btn.classList.remove('bg-gray-100', 'text-gray-800'); | |
| btn.classList.add('bg-indigo-100', 'text-indigo-800'); | |
| // Filter picture cards | |
| pictureCards.forEach(card => { | |
| if (category === 'all' || card.getAttribute('data-category') === category) { | |
| card.style.display = 'flex'; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| // Drag and Drop for Sentence Building | |
| pictureCards.forEach(card => { | |
| card.setAttribute('draggable', 'true'); | |
| card.addEventListener('dragstart', (e) => { | |
| e.dataTransfer.setData('text/plain', card.getAttribute('data-label')); | |
| card.classList.add('opacity-50'); | |
| }); | |
| card.addEventListener('dragend', () => { | |
| card.classList.remove('opacity-50'); | |
| }); | |
| }); | |
| sentenceStrip.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| sentenceStrip.classList.add('active'); | |
| }); | |
| sentenceStrip.addEventListener('dragleave', () => { | |
| sentenceStrip.classList.remove('active'); | |
| }); | |
| sentenceStrip.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| sentenceStrip.classList.remove('active'); | |
| const label = e.dataTransfer.getData('text/plain'); | |
| addToSentence(label); | |
| }); | |
| function addToSentence(label) { | |
| if (emptyMessage.style.display !== 'none') { | |
| emptyMessage.style.display = 'none'; | |
| } | |
| const card = document.createElement('div'); | |
| card.className = 'inline-flex items-center justify-center bg-white rounded-full shadow-md w-12 h-12 mx-1'; | |
| card.innerHTML = ` | |
| <span class="text-xl">${getEmojiForLabel(label)}</span> | |
| `; | |
| sentenceStrip.appendChild(card); | |
| } | |
| function getEmojiForLabel(label) { | |
| // This is a simplified version - in a real app you'd want to store the emoji with the card data | |
| const emojiMap = { | |
| 'Apple': '🍎', | |
| 'Banana': '🍌', | |
| 'Play': '⚽', | |
| 'Happy': '😊', | |
| 'Sad': '😢', | |
| 'Home': '🏠', | |
| 'Mom': '👩', | |
| 'Dad': '👨', | |
| 'Help': '🆘', | |
| 'Bathroom': '🚽', | |
| 'Water': '💧', | |
| 'Read': '📖' | |
| }; | |
| return emojiMap[label] || '❓'; | |
| } | |
| // Clear Sentence | |
| clearSentenceBtn.addEventListener('click', () => { | |
| while (sentenceStrip.firstChild) { | |
| sentenceStrip.removeChild(sentenceStrip.firstChild); | |
| } | |
| emptyMessage.style.display = 'block'; | |
| }); | |
| // Speak Sentence | |
| speakSentenceBtn.addEventListener('click', () => { | |
| if (window.speechSynthesis) { | |
| // In a real app, you would construct the sentence from the cards | |
| const sentence = "I want apple and water"; // Placeholder | |
| const utterance = new SpeechSynthesisUtterance(sentence); | |
| speakSentenceBtn.classList.add('speaking'); | |
| utterance.onend = () => { | |
| speakSentenceBtn.classList.remove('speaking'); | |
| }; | |
| window.speechSynthesis.speak(utterance); | |
| } else { | |
| alert('Speech synthesis not supported in your browser'); | |
| } | |
| }); | |
| // Save Sentence | |
| saveSentenceBtn.addEventListener('click', () => { | |
| // In a real app, you would save the sentence structure | |
| alert('Sentence saved!'); | |
| }); | |
| // Modal Controls | |
| function showModal(modal) { | |
| modal.classList.remove('hidden'); | |
| setTimeout(() => { | |
| modal.querySelector('.modal').classList.add('active'); | |
| }, 10); | |
| } | |
| function hideModal(modal) { | |
| modal.querySelector('.modal').classList.remove('active'); | |
| setTimeout(() => { | |
| modal.classList.add('hidden'); | |
| }, 300); | |
| } | |
| // Add Card Modal | |
| addCardBtn.addEventListener('click', () => showModal(addCardModal)); | |
| closeAddCardModal.addEventListener('click', () => hideModal(addCardModal)); | |
| cancelAddCard.addEventListener('click', () => hideModal(addCardModal)); | |
| saveAddCard.addEventListener('click', () => { | |
| // In a real app, you would save the new card | |
| hideModal(addCardModal); | |
| alert('New card added!'); | |
| }); | |
| // Settings Modal | |
| settingsBtn.addEventListener('click', () => showModal(settingsModal)); | |
| closeSettingsModal.addEventListener('click', () => hideModal(settingsModal)); | |
| cancelSettings.addEventListener('click', () => hideModal(settingsModal)); | |
| saveSettings.addEventListener('click', () => { | |
| // In a real app, you would save the settings | |
| hideModal(settingsModal); | |
| alert('Settings saved!'); | |
| }); | |
| // User Modal | |
| userBtn.addEventListener('click', () => showModal(userModal)); | |
| closeUserModal.addEventListener('click', () => hideModal(userModal)); | |
| cancelUser.addEventListener('click', () => hideModal(userModal)); | |
| saveUser.addEventListener('click', () => { | |
| // In a real app, you would save the user profile | |
| hideModal(userModal); | |
| alert('Profile updated!'); | |
| }); | |
| // Logout | |
| logoutBtn.addEventListener('click', () => { | |
| if (confirm('Are you sure you want to logout?')) { | |
| alert('Logged out successfully'); | |
| // In a real app, you would redirect to login page | |
| } | |
| }); | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Set first tab as active | |
| tabBtns[0].classList.add('border-indigo-600', 'text-indigo-600'); | |
| // Set first category as active | |
| categoryBtns[0].classList.remove('bg-gray-100', 'text-gray-800'); | |
| categoryBtns[0].classList.add('bg-indigo-100', 'text-indigo-800'); | |
| }); | |
| </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" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |