@@ Line 13: / Line 13: @@
 .sf-composer-input { flex: 1; background: #f0f2f5; border: none; border-radius: 20px; padding: 14px 20px; font-size: 17px; resize: none; min-height: 80px; outline: none; font-family: inherit; }
 .sf-composer-actions { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid #e4e6eb; gap: 12px; }
-.sf-action-buttons { display: flex; gap: 8px; }
+.sf-action-buttons { display: flex; gap: 8px; position: relative; }
 .sf-action-btn { width: 40px; height: 40px; border-radius: 8px; border: none; background: #f0f2f5; cursor: pointer; font-size: 18px; }
 .sf-action-btn:hover { background: #e4e6eb; }
@@ Line 27: / Line 27: @@
 .sf-post-content { padding: 0 16px 16px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
 .sf-post-image { width: 100%; max-height: 500px; object-fit: cover; }
+.sf-post-video { width: 100%; max-height: 500px; }
+.sf-post-location { padding: 8px 16px; font-size: 13px; color: #65676b; display: flex; align-items: center; gap: 4px; }
 .sf-post-stats { display: flex; justify-content: space-between; padding: 12px 16px; font-size: 14px; color: #65676b; border-bottom: 1px solid #e4e6eb; }
 .sf-post-stats-left { display: flex; align-items: center; gap: 6px; }
@@ Line 57: / Line 59: @@
 .sf-modal-btn-save { background: #1877f2; color: white; }
 #image-preview { display: none; padding: 12px 20px; background: white; margin-bottom: 20px; border-radius: 12px; }
-#image-preview img { max-width: 100%; max-height: 200px; border-radius: 8px; }
+#image-preview img, #image-preview video { max-width: 100%; max-height: 200px; border-radius: 8px; }
+#location-preview { display: none; padding: 8px 20px; background: white; margin-bottom: 10px; border-radius: 8px; font-size: 14px; color: #65676b; }
 .sf-tabs { display: flex; border-bottom: 2px solid #e4e6eb; margin-bottom: 16px; }
 .sf-tab { flex: 1; padding: 12px; text-align: center; cursor: pointer; font-weight: 600; color: #65676b; border-bottom: 2px solid transparent; margin-bottom: -2px; }
@@ Line 72: / Line 75: @@
 .sf-progress-fill { height: 100%; background: #1877f2; width: 0%; transition: width 0.3s; }
 .sf-preview-thumb { max-width: 100%; max-height: 150px; border-radius: 8px; margin-top: 12px; }
+.sf-emoji-picker { display: none; position: absolute; bottom: 50px; left: 50px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); padding: 12px; width: 280px; z-index: 100; }
+.sf-emoji-picker.active { display: block; }
+.sf-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; max-height: 200px; overflow-y: auto; }
+.sf-emoji-btn { background: none; border: none; font-size: 22px; padding: 6px; cursor: pointer; border-radius: 6px; }
+.sf-emoji-btn:hover { background: #f0f2f5; }
+.sf-emoji-tabs { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid #e4e6eb; padding-bottom: 8px; }
+.sf-emoji-tab { background: none; border: none; font-size: 18px; padding: 6px 10px; cursor: pointer; border-radius: 6px; opacity: 0.5; }
+.sf-emoji-tab:hover, .sf-emoji-tab.active { opacity: 1; background: #f0f2f5; }
 </style>
@@ Line 83: / Line 94: @@
 <div class="sf-composer-actions">
 <div class="sf-action-buttons">
-<button class="sf-action-btn" id="add-image-btn">🖼️</button>
+<button class="sf-action-btn" id="add-image-btn" title="Add Photo">🖼️</button>
-<button class="sf-action-btn">😊</button>
+<button class="sf-action-btn" id="add-emoji-btn" title="Add Emoji">😊</button>
-<button class="sf-action-btn">🎬</button>
+<button class="sf-action-btn" id="add-video-btn" title="Add Video">🎬</button>
-<button class="sf-action-btn">📍</button>
+<button class="sf-action-btn" id="add-location-btn" title="Add Location">📍</button>
+<div class="sf-emoji-picker" id="emoji-picker">
+<div class="sf-emoji-tabs">
+<button class="sf-emoji-tab active" data-cat="smileys">😀</button>
+<button class="sf-emoji-tab" data-cat="gestures">👋</button>
+<button class="sf-emoji-tab" data-cat="animals">🐱</button>
+<button class="sf-emoji-tab" data-cat="food">🍕</button>
+<button class="sf-emoji-tab" data-cat="activities">⚽</button>
+<button class="sf-emoji-tab" data-cat="objects">💡</button>
+<button class="sf-emoji-tab" data-cat="symbols">❤️</button>
+</div>
+<div class="sf-emoji-grid" id="emoji-grid"></div>
+</div>
 </div>
 <button class="sf-post-btn" id="post-btn">Post</button>
@@ Line 92: / Line 115: @@
 </div>
-<div id="image-preview"><img id="preview-img"><button id="remove-image-btn" style="margin-left:10px;padding:5px 10px;">Remove</button></div>
+<div id="location-preview">📍 <span id="location-text"></span> <button id="remove-location-btn" style="margin-left:10px;padding:2px 8px;font-size:12px;">✕</button></div>
+<div id="image-preview"><img id="preview-img"><video id="preview-video" controls style="display:none"></video><button id="remove-image-btn" style="margin-left:10px;padding:5px 10px;">Remove</button></div>
 <div id="timeline-container"><div class="sf-empty"><div class="sf-empty-icon">📝</div><div class="sf-empty-text">No posts yet</div><div class="sf-empty-sub">Be the first to share something!</div></div></div>
@@ Line 134: / Line 159: @@
 <button class="sf-modal-btn sf-modal-btn-cancel" id="image-cancel-btn">Cancel</button>
 <button class="sf-modal-btn sf-modal-btn-save" id="image-add-btn">Add Image</button>
+</div>
+</div>
+</div>
+<div class="sf-modal" id="video-modal">
+<div class="sf-modal-content">
+<div class="sf-modal-title">Add Video</div>
+<input type="text" class="sf-modal-input" id="video-url-input" placeholder="Paste video URL (YouTube, Vimeo, or direct link)...">
+<p style="font-size:12px;color:#65676b;margin-bottom:12px;">Supports YouTube, Vimeo, or direct video URLs</p>
+<div class="sf-modal-buttons">
+<button class="sf-modal-btn sf-modal-btn-cancel" id="video-cancel-btn">Cancel</button>
+<button class="sf-modal-btn sf-modal-btn-save" id="video-add-btn">Add Video</button>
+</div>
+</div>
+</div>
+<div class="sf-modal" id="location-modal">
+<div class="sf-modal-content">
+<div class="sf-modal-title">Add Location</div>
+<button class="sf-modal-btn sf-modal-btn-save" id="detect-location-btn" style="width:100%;margin-bottom:12px;">📍 Use Current Location</button>
+<p style="text-align:center;color:#65676b;margin-bottom:12px;">— or —</p>
+<input type="text" class="sf-modal-input" id="location-input" placeholder="Enter location manually...">
+<div class="sf-modal-buttons">
+<button class="sf-modal-btn sf-modal-btn-cancel" id="location-cancel-btn">Cancel</button>
+<button class="sf-modal-btn sf-modal-btn-save" id="location-add-btn">Add Location</button>
 </div>
 </div>
@@ Line 148: / Line 198: @@
 var photo=localStorage.getItem('sf_photo_'+user)||'';
 var pendingImg='';
+var pendingVideo='';
+var pendingLocation='';
 var uploadedFile=null;
+var mediaType='image';
+var emojis={
+smileys:['😀','😃','😄','😁','😅','😂','🤣','😊','😇','🙂','😉','😌','😍','🥰','😘','😋','😛','😜','🤪','😝','🤑','🤗','🤭','🤫','🤔','🤐','🤨','😐','😑','😶','😏','😒','🙄','😬','😮','🤯','😳','🥺','😢','😭','😤','😠','😡','🤬','😈','👿','💀','☠️','💩','🤡','👹','👺','👻','👽','🤖'],
+gestures:['👋','🤚','🖐️','✋','🖖','👌','🤌','🤏','✌️','🤞','🤟','🤘','🤙','👈','👉','👆','👇','☝️','👍','👎','✊','👊','🤛','🤜','👏','🙌','👐','🤲','🤝','🙏','✍️','💪','🦵','🦶','👂','👃','🧠','🫀','🫁','🦷','🦴','👀','👁️','👅','👄'],
+animals:['🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐨','🐯','🦁','🐮','🐷','🐸','🐵','🐔','🐧','🐦','🐤','🦆','🦅','🦉','🦇','🐺','🐗','🐴','🦄','🐝','🐛','🦋','🐌','🐞','🐜','🦟','🐢','🐍','🦎','🦂','🦀','🦑','🐙','🦐','🐠','🐟','🐬','🐳','🦈','🐊','🐅','🐆','🦓','🦍','🐘','🦛','🦏'],
+food:['🍎','🍊','🍋','🍌','🍉','🍇','🍓','🫐','🍈','🍒','🍑','🥭','🍍','🥥','🥝','🍅','🥑','🥦','🥬','🥒','🌶️','🫑','🌽','🥕','🫒','🧄','🧅','🥔','🍠','🥐','🥯','🍞','🥖','🥨','🧀','🥚','🍳','🧈','🥞','🧇','🥓','🥩','🍗','🍖','🦴','🌭','🍔','🍟','🍕','🫓','🥪','🥙','🧆','🌮','🌯','🫔','🥗','🥘','🫕','🥫','🍝','🍜','🍲','🍛','🍣','🍱','🥟','🦪','🍤','🍙','🍚','🍘','🍥','🥠','🥮','🍢','🍡','🍧','🍨','🍦','🥧','🧁','🍰','🎂','🍮','🍭','🍬','🍫','🍿','🍩','🍪'],
+activities:['⚽','🏀','🏈','⚾','🥎','🎾','🏐','🏉','🥏','🎱','🪀','🏓','🏸','🏒','🏑','🥍','🏏','🪃','🥅','⛳','🪁','🏹','🎣','🤿','🥊','🥋','🎽','🛹','🛼','🛷','⛸️','🥌','🎿','⛷️','🏂','🪂','🏋️','🤼','🤸','🤺','⛹️','🤾','🏌️','🏇','🧘','🏄','🏊','🤽','🚣','🧗','🚴','🚵','🎖️','🏆','🥇','🥈','🥉','🏅','🎪','🤹','🎭','🎨','🎬','🎤','🎧','🎼','🎹','🥁','🪘','🎷','🎺','🪗','🎸','🪕','🎻','🎲','♟️','🎯','🎳','🎮','🎰'],
+objects:['💡','🔦','🕯️','🪔','📱','💻','🖥️','🖨️','⌨️','🖱️','💾','💿','📀','📷','📸','📹','🎥','📽️','🎞️','📞','☎️','📟','📠','📺','📻','🎙️','🎚️','🎛️','🧭','⏱️','⏲️','⏰','🕰️','⌛','⏳','📡','🔋','🔌','💰','💵','💴','💶','💷','🪙','💳','💎','⚖️','🪜','🧰','🪛','🔧','🔨','⚒️','🛠️','⛏️','🪚','🔩','⚙️','🪤','🧱','⛓️','🧲','🔫','💣','🧨','🪓','🔪','🗡️','⚔️','🛡️','🚬','⚰️','🪦','⚱️','🏺','🔮','📿','🧿','💈','⚗️','🔭','🔬','🕳️','🩹','🩺','💊','💉','🩸','🧬','🦠','🧫','🧪','🌡️','🧹','🧺','🧻','🚽','🚿','🛁','🛀','🧼','🪥','🪒','🧽','🪣','🧴','🛎️','🔑','🗝️','🚪','🪑','🛋️','🛏️','🛌','🧸','🖼️','🪞','🪟','🛍️','🛒','🎁','🎈','🎏','🎀','🪄','🪅','🎊','🎉','🎎','🏮','🎐','🧧','✉️','📩','📨','📧','💌','📥','📤','📦','🏷️','📪','📫','📬','📭','📮','📯','📜','📃','📄','📑','🧾','📊','📈','📉','🗒️','🗓️','📆','📅','🗑️','📇','🗃️','🗳️','🗄️','📋','📁','📂','🗂️','🗞️','📰','📓','📔','📒','📕','📗','📘','📙','📚','📖','🔖','🧷','🔗','📎','🖇️','📐','📏','🧮','📌','📍','✂️','🖊️','🖋️','✒️','🖌️','🖍️','📝','✏️','🔍','🔎','🔏','🔐','🔒','🔓'],
+symbols:['❤️','🧡','💛','💚','💙','💜','🖤','🤍','🤎','💔','❣️','💕','💞','💓','💗','💖','💘','💝','💟','☮️','✝️','☪️','🕉️','☸️','✡️','🔯','🕎','☯️','☦️','🛐','⛎','♈','♉','♊','♋','♌','♍','♎','♏','♐','♑','♒','♓','🆔','⚛️','🉑','☢️','☣️','📴','📳','🈶','🈚','🈸','🈺','🈷️','✴️','🆚','💮','🉐','㊙️','㊗️','🈴','🈵','🈹','🈲','🅰️','🅱️','🆎','🆑','🅾️','🆘','❌','⭕','🛑','⛔','📛','🚫','💯','💢','♨️','🚷','🚯','🚳','🚱','🔞','📵','🚭','❗','❕','❓','❔','‼️','⁉️','🔅','🔆','〽️','⚠️','🚸','🔱','⚜️','🔰','♻️','✅','🈯','💹','❇️','✳️','❎','🌐','💠','Ⓜ️','🌀','💤','🏧','🚾','♿','🅿️','🛗','🈳','🈂️','🛂','🛃','🛄','🛅','🚹','🚺','🚼','⚧️','🚻','🚮','🎦','📶','🈁','🔣','ℹ️','🔤','🔡','🔠','🆖','🆗','🆙','🆒','🆕','🆓','0️⃣','1️⃣','2️⃣','3️⃣','4️⃣','5️⃣','6️⃣','7️⃣','8️⃣','9️⃣','🔟','🔢','#️⃣','*️⃣','⏏️','▶️','⏸️','⏯️','⏹️','⏺️','⏭️','⏮️','⏩','⏪','⏫','⏬','◀️','🔼','🔽','➡️','⬅️','⬆️','⬇️','↗️','↘️','↙️','↖️','↕️','↔️','↪️','↩️','⤴️','⤵️','🔀','🔁','🔂','🔄','🔃','🎵','🎶','➕','➖','➗','✖️','🟰','♾️','💲','💱','™️','©️','®️','〰️','➰','➿','🔚','🔙','🔛','🔝','🔜','✔️','☑️','🔘','🔴','🟠','🟡','🟢','🔵','🟣','⚫','⚪','🟤','🔺','🔻','🔸','🔹','🔶','🔷','🔳','🔲','▪️','▫️','◾','◽','◼️','◻️','🟥','🟧','🟨','🟩','🟦','🟪','⬛','⬜','🟫','🔈','🔇','🔉','🔊','🔔','🔕','📣','📢','👁️‍🗨️','💬','💭','🗯️','♠️','♣️','♥️','♦️','🃏','🎴','🀄','🕐','🕑','🕒','🕓','🕔','🕕','🕖','🕗','🕘','🕙','🕚','🕛','🕜','🕝','🕞','🕟','🕠','🕡','🕢','🕣','🕤','🕥','🕦','🕧']
+};
 function init(n){return n.split(/[\s_]+/).map(function(w){return w[0]||'';}).join('').substring(0,2).toUpperCase()||'?';}
@@ Line 197: / Line 260: @@
 });
+// Emoji picker
+function renderEmojis(cat){
+var grid=gel('emoji-grid');
+grid.innerHTML='';
+(emojis[cat]||[]).forEach(function(em){
+var btn=document.createElement('button');
+btn.className='sf-emoji-btn';
+btn.textContent=em;
+btn.addEventListener('click',function(){
+var ta=gel('post-content');
+var start=ta.selectionStart;
+var end=ta.selectionEnd;
+ta.value=ta.value.substring(0,start)+em+ta.value.substring(end);
+ta.selectionStart=ta.selectionEnd=start+em.length;
+ta.focus();
+});
+grid.appendChild(btn);
+});
+}
+document.querySelectorAll('.sf-emoji-tab').forEach(function(tab){
+tab.addEventListener('click',function(){
+document.querySelectorAll('.sf-emoji-tab').forEach(function(t){t.classList.remove('active');});
+tab.classList.add('active');
+renderEmojis(tab.dataset.cat);
+});
+});
+gel('add-emoji-btn').addEventListener('click',function(e){
+e.stopPropagation();
+var picker=gel('emoji-picker');
+picker.classList.toggle('active');
+if(picker.classList.contains('active'))renderEmojis('smileys');
+});
+document.addEventListener('click',function(e){
+if(!e.target.closest('.sf-emoji-picker')&&!e.target.closest('#add-emoji-btn')){
+gel('emoji-picker').classList.remove('active');
+}
+});
+// Video modal
+gel('add-video-btn').addEventListener('click',function(){
+gel('video-url-input').value='';
+gel('video-modal').classList.add('active');
+});
+gel('video-cancel-btn').addEventListener('click',function(){gel('video-modal').classList.remove('active');});
+gel('video-add-btn').addEventListener('click',function(){
+var url=gel('video-url-input').value.trim();
+if(url){
+pendingVideo=url;
+pendingImg='';
+mediaType='video';
+gel('preview-img').style.display='none';
+gel('preview-video').style.display='block';
+if(url.includes('youtube.com')||url.includes('youtu.be')){
+var vid=url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&]+)/);
+if(vid)gel('preview-video').poster='https://img.youtube.com/vi/'+vid[1]+'/0.jpg';
+gel('preview-video').src='';
+}else{
+gel('preview-video').src=url;
+}
+gel('image-preview').style.display='block';
+gel('video-modal').classList.remove('active');
+}else{
+alert('Please enter a video URL');
+}
+});
+// Location modal
+gel('add-location-btn').addEventListener('click',function(){
+gel('location-input').value='';
+gel('location-modal').classList.add('active');
+});
+gel('location-cancel-btn').addEventListener('click',function(){gel('location-modal').classList.remove('active');});
+gel('detect-location-btn').addEventListener('click',function(){
+if(navigator.geolocation){
+this.textContent='Detecting...';
+var btn=this;
+navigator.geolocation.getCurrentPosition(function(pos){
+fetch('https://nominatim.openstreetmap.org/reverse?format=json&lat='+pos.coords.latitude+'&lon='+pos.coords.longitude).then(function(r){return r.json();}).then(function(d){
+var loc=d.display_name||pos.coords.latitude+', '+pos.coords.longitude;
+loc=loc.split(',').slice(0,3).join(',');
+gel('location-input').value=loc;
+btn.textContent='📍 Use Current Location';
+}).catch(function(){
+gel('location-input').value=pos.coords.latitude+', '+pos.coords.longitude;
+btn.textContent='📍 Use Current Location';
+});
+},function(){
+alert('Could not get location');
+btn.textContent='📍 Use Current Location';
+});
+}else{
+alert('Geolocation not supported');
+}
+});
+gel('location-add-btn').addEventListener('click',function(){
+var loc=gel('location-input').value.trim();
+if(loc){
+pendingLocation=loc;
+gel('location-text').textContent=loc;
+gel('location-preview').style.display='block';
+gel('location-modal').classList.remove('active');
+}else{
+alert('Please enter a location');
+}
+});
+gel('remove-location-btn').addEventListener('click',function(){
+pendingLocation='';
+gel('location-preview').style.display='none';
+});
+// Image modal tabs
 document.querySelectorAll('.sf-tab').forEach(function(tab){
 tab.addEventListener('click',function(){
@@ Line 260: / Line 437: @@
 if(url){
 pendingImg=url;
+pendingVideo='';
+mediaType='image';
 gel('preview-img').src=url;
+gel('preview-img').style.display='block';
+gel('preview-video').style.display='none';
 gel('image-preview').style.display='block';
 gel('image-modal').classList.remove('active');
@@ Line 313: / Line 494: @@
 gel('upload-status').textContent='Upload complete!';
 pendingImg=resp.upload.imageinfo.url;
+pendingVideo='';
+mediaType='image';
 gel('preview-img').src=pendingImg;
+gel('preview-img').style.display='block';
+gel('preview-video').style.display='none';
 gel('image-preview').style.display='block';
 setTimeout(function(){gel('image-modal').classList.remove('active');},500);
@@ Line 331: / Line 516: @@
 }
-gel('remove-image-btn').addEventListener('click',function(){pendingImg='';gel('image-preview').style.display='none';});
+gel('remove-image-btn').addEventListener('click',function(){
+pendingImg='';
+pendingVideo='';
+gel('image-preview').style.display='none';
+});
 gel('post-btn').addEventListener('click',function(){
 var c=gel('post-content').value.trim();
-if(!(c||pendingImg)){alert('Write something or add image');return;}
+if(!(c||pendingImg||pendingVideo)){alert('Write something or add media');return;}
 var btn=this;btn.disabled=true;btn.textContent='Posting...';
 getToken().then(function(token){
-var params={action:'socialfeed',sfaction:'createpost',content:c||'(photo)',token:token};
+var params={action:'socialfeed',sfaction:'createpost',content:c||'(media)',token:token};
 if(pendingImg)params.image_url=pendingImg;
+if(pendingVideo)params.video_url=pendingVideo;
+if(pendingLocation)params.location=pendingLocation;
 return apiPost(params);
 }).then(function(d){
 if(d.error){alert('Error: '+d.error.info);btn.disabled=false;btn.textContent='Post';return;}
 gel('post-content').value='';
-pendingImg='';gel('image-preview').style.display='none';
+pendingImg='';pendingVideo='';pendingLocation='';
+gel('image-preview').style.display='none';
+gel('location-preview').style.display='none';
 btn.disabled=false;btn.textContent='Post';
 load();
@@ Line 371: / Line 564: @@
 if(p.username===user)h+='<button class="sf-post-menu" data-del="'+p.id+'">🗑️</button>';
 h+='</div><div class="sf-post-content">'+esc(p.content)+'</div>';
+if(p.location)h+='<div class="sf-post-location">📍 '+esc(p.location)+'</div>';
 if(p.image_url)h+='<img class="sf-post-image" src="'+p.image_url+'">';
+if(p.video_url){
+if(p.video_url.includes('youtube.com')||p.video_url.includes('youtu.be')){
+var vid=p.video_url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&]+)/);
+if(vid)h+='<iframe class="sf-post-video" src="https://www.youtube.com/embed/'+vid[1]+'" frameborder="0" allowfullscreen style="width:100%;height:315px;"></iframe>';
+}else{
+h+='<video class="sf-post-video" src="'+p.video_url+'" controls></video>';
+}
+}
 h+='<div class="sf-post-stats"><div class="sf-post-stats-left">';
 if(total>0)h+='<span class="sf-reaction-icon">👍</span><span>'+total+'</span>';

User:Docmoates/Social: Difference between revisions

Revision as of 02:59, 3 February 2026

Navigation menu

Search