Upload a Video – Golf Coach<\/title>\n <style>\n :root {\n --primary-color: #3AB795; \/* Mint green from screenshots *\/\n --secondary-color: #075E54; \/* Darker green *\/\n --accent-color: #4A90E2; \/* Blue accent *\/\n --light-bg: #E9F5F2; \/* Light mint background *\/\n --gray-bg: #F9F9F9;\n --white: #FFFFFF;\n --text-dark: #333333;\n --text-medium: #555555;\n --text-light: #888888;\n --border-radius: 10px;\n --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background-color: var(--gray-bg);\n color: var(--text-dark);\n line-height: 1.6;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n \n header {\n background-color: var(--white);\n padding: 16px 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-shadow: var(--shadow);\n border-radius: var(--border-radius);\n margin-bottom: 24px;\n }\n \n .header-left {\n display: flex;\n align-items: center;\n }\n \n .back-btn {\n margin-right: 16px;\n cursor: pointer;\n display: flex;\n align-items: center;\n color: var(--secondary-color);\n }\n \n .page-title {\n font-size: 1.4rem;\n font-weight: 500;\n color: var(--secondary-color);\n }\n \n .content-wrapper {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n }\n \n .upload-section {\n grid-column: 1 \/ 2;\n }\n \n .description-section {\n grid-column: 2 \/ 3;\n }\n \n \/* For mobile view *\/\n @media (max-width: 768px) {\n .content-wrapper {\n grid-template-columns: 1fr;\n }\n \n .upload-section, .description-section {\n grid-column: 1;\n }\n }\n \n .card {\n background-color: var(--white);\n border-radius: var(--border-radius);\n box-shadow: var(--shadow);\n padding: 24px;\n margin-bottom: 24px;\n }\n \n .card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n }\n \n .card-title {\n font-size: 1.2rem;\n color: var(--secondary-color);\n font-weight: 500;\n }\n \n .upload-box {\n height: 240px;\n border: 2px dashed var(--primary-color);\n border-radius: var(--border-radius);\n background-color: var(--light-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 24px;\n overflow: hidden;\n position: relative;\n }\n \n .upload-icon {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n background-color: var(--primary-color);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n }\n \n .title-section {\n margin-bottom: 24px;\n }\n \n .title-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n }\n \n .title-label {\n font-size: 1.1rem;\n color: var(--text-medium);\n font-weight: 400;\n }\n \n .edit-icon {\n color: var(--primary-color);\n cursor: pointer;\n }\n \n .date-text {\n font-size: 0.9rem;\n color: var(--text-light);\n margin-bottom: 16px;\n }\n \n .tags-section {\n margin-bottom: 24px;\n }\n \n .tags-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n }\n \n .tags-title {\n font-size: 1.1rem;\n color: var(--text-medium);\n font-weight: 400;\n }\n \n .tags-btn {\n background-color: var(--light-bg);\n color: var(--primary-color);\n border: 1px solid var(--primary-color);\n border-radius: 50px;\n padding: 10px 16px;\n font-size: 1rem;\n cursor: pointer;\n text-align: center;\n width: 100%;\n transition: all 0.2s ease;\n }\n \n .tags-btn:hover {\n background-color: var(--primary-color);\n color: white;\n }\n \n .description-card {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n \n .description-header {\n display: flex;\n align-items: center;\n margin-bottom: 16px;\n }\n \n .icon-wrapper {\n width: 36px;\n height: 36px;\n background-color: var(--light-bg);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 10px;\n }\n \n .pencil-icon {\n color: var(--primary-color);\n font-size: 1.2rem;\n }\n \n .description-title {\n font-size: 1.1rem;\n font-weight: 500;\n color: var(--secondary-color);\n }\n \n .description-input {\n width: 100%;\n padding: 12px;\n border: 1px solid #ddd;\n border-radius: var(--border-radius);\n font-size: 1rem;\n resize: none;\n flex-grow: 1;\n min-height: 150px;\n }\n \n .send-to-coach-btn {\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: 50px;\n width: 100%;\n padding: 14px 16px;\n font-size: 1rem;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-top: 24px;\n transition: all 0.2s ease;\n }\n \n .send-to-coach-btn:hover {\n background-color: var(--secondary-color);\n }\n \n .send-to-coach-btn svg {\n margin-right: 8px;\n }\n \n .modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n }\n \n .modal.active {\n opacity: 1;\n visibility: visible;\n }\n \n .modal-content {\n background-color: var(--white);\n border-radius: var(--border-radius);\n width: 90%;\n max-width: 500px;\n padding: 24px;\n position: relative;\n transform: translateY(20px);\n transition: all 0.3s ease;\n }\n \n .modal.active .modal-content {\n transform: translateY(0);\n }\n \n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 24px;\n }\n \n .modal-title {\n font-size: 1.2rem;\n font-weight: 500;\n color: var(--secondary-color);\n }\n \n .close-btn {\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n color: var(--text-light);\n }\n \n .tag-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n margin-bottom: 24px;\n }\n \n .tag-option {\n display: flex;\n align-items: center;\n padding: 12px;\n border-radius: var(--border-radius);\n border: 1px solid #ddd;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n \n .tag-option:hover {\n border-color: var(--primary-color);\n background-color: var(--light-bg);\n }\n \n .tag-option.selected {\n background-color: var(--light-bg);\n border-color: var(--primary-color);\n }\n \n .tag-checkbox {\n margin-right: 10px;\n }\n \n .confirm-btn {\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: 50px;\n width: 100%;\n padding: 14px 16px;\n font-size: 1rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n \n .confirm-btn:hover {\n background-color: var(--secondary-color);\n }\n \n .hidden-file-input {\n display: none;\n }\n \n #videoPreview {\n display: none;\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: var(--border-radius);\n position: absolute;\n top: 0;\n left: 0;\n }\n \n .loading {\n display: none;\n text-align: center;\n margin: 16px 0;\n color: var(--primary-color);\n }\n \n .loading-spinner {\n display: inline-block;\n width: 20px;\n height: 20px;\n border: 3px solid rgba(58, 183, 149, 0.3);\n border-radius: 50%;\n border-top-color: var(--primary-color);\n animation: spin 1s ease-in-out infinite;\n margin-right: 10px;\n }\n \n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n \n .selected-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 10px;\n }\n \n .tag-pill {\n background-color: var(--light-bg);\n color: var(--primary-color);\n border-radius: 50px;\n padding: 6px 12px;\n font-size: 0.9rem;\n display: inline-flex;\n align-items: center;\n }\n \n .tag-pill .remove {\n margin-left: 6px;\n cursor: pointer;\n font-size: 0.8rem;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <div class=\"header-left\">\n <div class=\"back-btn\" id=\"backBtn\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line>\n <polyline points=\"12 19 5 12 12 5\"><\/polyline>\n <\/svg>\n <\/div>\n <div class=\"page-title\">Upload a Video<\/div>\n <\/div>\n <\/header>\n \n <div class=\"content-wrapper\">\n <div class=\"upload-section\">\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-title\">Video Upload<\/div>\n <\/div>\n \n <div class=\"upload-box\" id=\"uploadBox\">\n <input type=\"file\" id=\"videoInput\" class=\"hidden-file-input\" accept=\"video\/*\">\n <video id=\"videoPreview\" controls><\/video>\n <div class=\"upload-icon\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 5v14\"><\/path>\n <path d=\"M5 12h14\"><\/path>\n <\/svg>\n <\/div>\n <\/div>\n \n <div class=\"title-section\">\n <div class=\"title-header\">\n <div class=\"title-label\" id=\"titleLabel\">Edit title<\/div>\n <div class=\"edit-icon\" id=\"editTitleBtn\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\"><\/path>\n <\/svg>\n <\/div>\n <\/div>\n \n <div class=\"date-text\">\n <span id=\"currentDate\">4\/24\/2025 at 2:46 PM<\/span>\n <\/div>\n <\/div>\n \n <div class=\"tags-section\">\n <div class=\"tags-header\">\n <div class=\"tags-title\">Tags<\/div>\n <\/div>\n \n <button class=\"tags-btn\" id=\"openTagsBtn\">Select tags<\/button>\n \n <div class=\"selected-tags\" id=\"selectedTagsDisplay\">\n \n <\/div>\n <\/div>\n \n <div class=\"loading\" id=\"loadingIndicator\">\n <div class=\"loading-spinner\"><\/div>\n <span>Uploading video to coach…<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"description-section\">\n <div class=\"card description-card\">\n <div class=\"description-header\">\n <div class=\"icon-wrapper\">\n <div class=\"pencil-icon\">\u270f\ufe0f<\/div>\n <\/div>\n <div class=\"description-title\">Add Description<\/div>\n <\/div>\n \n <textarea class=\"description-input\" id=\"descriptionInput\" placeholder=\"Describe your video, technique, or any questions you have for your coach...\"><\/textarea>\n \n <button class=\"send-to-coach-btn\" id=\"sendToCoachBtn\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"><\/line>\n <polygon points=\"22 2 15 22 11 13 2 9 22 2\"><\/polygon>\n <\/svg>\n Send to Coach\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"modal\" id=\"tagModal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <div class=\"modal-title\">Select Tags<\/div>\n <button class=\"close-btn\" id=\"closeTagsBtn\">×<\/button>\n <\/div>\n \n <div class=\"tag-grid\">\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"drills\">\n <label for=\"drills\">Drills<\/label>\n <\/div>\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"driver\">\n <label for=\"driver\">Driver<\/label>\n <\/div>\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"iron\">\n <label for=\"iron\">Iron<\/label>\n <\/div>\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"pitching\">\n <label for=\"pitching\">Pitching<\/label>\n <\/div>\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"chipping\">\n <label for=\"chipping\">Chipping<\/label>\n <\/div>\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"putting\">\n <label for=\"putting\">Putting<\/label>\n <\/div>\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"bunker\">\n <label for=\"bunker\">Bunker<\/label>\n <\/div>\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"fairway\">\n <label for=\"fairway\">Fairway Wood<\/label>\n <\/div>\n <\/div>\n \n <button class=\"confirm-btn\" id=\"confirmTagsBtn\">Confirm<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Initialize elements\n const backBtn = document.getElementById('backBtn');\n const uploadBox = document.getElementById('uploadBox');\n const videoInput = document.getElementById('videoInput');\n const videoPreview = document.getElementById('videoPreview');\n const editTitleBtn = document.getElementById('editTitleBtn');\n const titleLabel = document.getElementById('titleLabel');\n const openTagsBtn = document.getElementById('openTagsBtn');\n const closeTagsBtn = document.getElementById('closeTagsBtn');\n const confirmTagsBtn = document.getElementById('confirmTagsBtn');\n const tagModal = document.getElementById('tagModal');\n const selectedTagsDisplay = document.getElementById('selectedTagsDisplay');\n const currentDate = document.getElementById('currentDate');\n const sendToCoachBtn = document.getElementById('sendToCoachBtn');\n const loadingIndicator = document.getElementById('loadingIndicator');\n const descriptionInput = document.getElementById('descriptionInput');\n \n \/\/ Video file storage\n let selectedVideoFile = null;\n \n \/\/ Set current date\n const now = new Date();\n const formattedDate = `${now.getDate()}\/${now.getMonth() + 1}\/${now.getFullYear()} at ${now.getHours() % 12 || 12}:${now.getMinutes().toString().padStart(2, '0')} ${now.getHours() >= 12 ? 'PM' : 'AM'}`;\n currentDate.textContent = formattedDate;\n \n \/\/ Handle back button\n backBtn.addEventListener('click', () => {\n window.history.back();\n });\n \n \/\/ Handle upload box click\n uploadBox.addEventListener('click', () => {\n videoInput.click();\n });\n \n \/\/ Handle video selection\n videoInput.addEventListener('change', (e) => {\n const file = e.target.files[0];\n \n if (file) {\n selectedVideoFile = file;\n const videoURL = URL.createObjectURL(file);\n videoPreview.src = videoURL;\n videoPreview.style.display = 'block';\n uploadBox.querySelector('.upload-icon').style.display = 'none';\n }\n });\n \n \/\/ Handle title editing\n editTitleBtn.addEventListener('click', () => {\n const currentTitle = titleLabel.textContent;\n const newTitle = prompt('Enter video title:', currentTitle === 'Edit title' ? '' : currentTitle);\n \n if (newTitle !== null) {\n titleLabel.textContent = newTitle || 'Edit title';\n }\n });\n \n \/\/ Handle tags modal\n openTagsBtn.addEventListener('click', () => {\n tagModal.classList.add('active');\n });\n \n closeTagsBtn.addEventListener('click', () => {\n tagModal.classList.remove('active');\n });\n \n \/\/ Handle tag selection\n const tagOptions = document.querySelectorAll('.tag-option');\n tagOptions.forEach(option => {\n option.addEventListener('click', function() {\n const checkbox = this.querySelector('.tag-checkbox');\n checkbox.checked = !checkbox.checked;\n this.classList.toggle('selected', checkbox.checked);\n });\n });\n \n \/\/ Close modal when clicking outside\n window.addEventListener('click', (e) => {\n if (e.target === tagModal) {\n tagModal.classList.remove('active');\n }\n });\n \n \/\/ Update selected tags display\n function updateSelectedTagsDisplay() {\n selectedTagsDisplay.innerHTML = '';\n const checkboxes = document.querySelectorAll('.tag-checkbox:checked');\n \n checkboxes.forEach(checkbox => {\n const tagPill = document.createElement('div');\n tagPill.className = 'tag-pill';\n tagPill.innerHTML = `${checkbox.id} <span class=\"remove\" data-tag=\"${checkbox.id}\">×<\/span>`;\n selectedTagsDisplay.appendChild(tagPill);\n \n \/\/ Add remove functionality\n tagPill.querySelector('.remove').addEventListener('click', function(e) {\n e.stopPropagation();\n const tagId = this.getAttribute('data-tag');\n const tagCheckbox = document.getElementById(tagId);\n tagCheckbox.checked = false;\n document.querySelector(`.tag-option:has(#${tagId})`).classList.remove('selected');\n updateSelectedTagsDisplay();\n });\n });\n }\n \n \/\/ Confirm tag selection\n confirmTagsBtn.addEventListener('click', () => {\n updateSelectedTagsDisplay();\n tagModal.classList.remove('active');\n });\n \n \/\/ Handle \"Send to Coach\" button click\n sendToCoachBtn.addEventListener('click', () => {\n if (!selectedVideoFile) {\n alert(\"Please select a video first\");\n return;\n }\n \n \/\/ Show loading indicator\n loadingIndicator.style.display = 'block';\n sendToCoachBtn.disabled = true;\n \n \/\/ Collect video metadata\n const videoData = {\n title: titleLabel.textContent !== 'Edit title' ? titleLabel.textContent : 'Untitled Video',\n description: descriptionInput.value,\n tags: [],\n date: formattedDate\n };\n \n \/\/ Get selected tags\n const checkboxes = document.querySelectorAll('.tag-checkbox:checked');\n checkboxes.forEach(checkbox => {\n videoData.tags.push(checkbox.id);\n });\n \n \/\/ Upload to cloud\n uploadToCloud(selectedVideoFile, videoData);\n });\n \n \/\/ Function to upload video to cloud storage\n function uploadToCloud(file, metadata) {\n console.log('Uploading to cloud:', file.name);\n console.log('Video metadata:', metadata);\n \n \/\/ Simulate upload process\n setTimeout(() => {\n \/\/ Hide loading indicator when done\n loadingIndicator.style.display = 'none';\n sendToCoachBtn.disabled = false;\n \n \/\/ Show success message\n alert(\"Video successfully sent to your coach!\");\n \n \/\/ Redirect back to main page\n window.location.href = '\/';\n }, 3000);\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Upload a Video – Golf Coach Upload a Video Video Upload Edit title 4\/24\/2025 at 2:46 PM Tags Select tags Uploading video to coach… \u270f\ufe0f Add Description Send to Coach Select Tags × Drills Driver Iron Pitching Chipping Putting Bunker Fairway Wood Confirm<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1662","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/pages\/1662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/comments?post=1662"}],"version-history":[{"count":3,"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/pages\/1662\/revisions"}],"predecessor-version":[{"id":1666,"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/pages\/1662\/revisions\/1666"}],"wp:attachment":[{"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/media?parent=1662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1662,"date":"2025-04-23T23:53:36","date_gmt":"2025-04-23T18:23:36","guid":{"rendered":"https:\/\/devenv1.golfai.in\/?page_id=1662"},"modified":"2025-04-24T00:41:36","modified_gmt":"2025-04-23T19:11:36","slug":"upload-video","status":"publish","type":"page","link":"https:\/\/devenv1.golfai.in\/hi\/upload-video\/","title":{"rendered":"\u0935\u0940\u0921\u093f\u092f\u094b \u0905\u092a\u0932\u094b\u0921 \u0915\u0930\u0947\u0902"},"content":{"rendered":"\n\n\n\n \n \n Upload a Video – Golf Coach<\/title>\n <style>\n :root {\n --primary-color: #3AB795; \/* Mint green from screenshots *\/\n --secondary-color: #075E54; \/* Darker green *\/\n --accent-color: #4A90E2; \/* Blue accent *\/\n --light-bg: #E9F5F2; \/* Light mint background *\/\n --gray-bg: #F9F9F9;\n --white: #FFFFFF;\n --text-dark: #333333;\n --text-medium: #555555;\n --text-light: #888888;\n --border-radius: 10px;\n --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background-color: var(--gray-bg);\n color: var(--text-dark);\n line-height: 1.6;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n \n header {\n background-color: var(--white);\n padding: 16px 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-shadow: var(--shadow);\n border-radius: var(--border-radius);\n margin-bottom: 24px;\n }\n \n .header-left {\n display: flex;\n align-items: center;\n }\n \n .back-btn {\n margin-right: 16px;\n cursor: pointer;\n display: flex;\n align-items: center;\n color: var(--secondary-color);\n }\n \n .page-title {\n font-size: 1.4rem;\n font-weight: 500;\n color: var(--secondary-color);\n }\n \n .content-wrapper {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n }\n \n .upload-section {\n grid-column: 1 \/ 2;\n }\n \n .description-section {\n grid-column: 2 \/ 3;\n }\n \n \/* For mobile view *\/\n @media (max-width: 768px) {\n .content-wrapper {\n grid-template-columns: 1fr;\n }\n \n .upload-section, .description-section {\n grid-column: 1;\n }\n }\n \n .card {\n background-color: var(--white);\n border-radius: var(--border-radius);\n box-shadow: var(--shadow);\n padding: 24px;\n margin-bottom: 24px;\n }\n \n .card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n }\n \n .card-title {\n font-size: 1.2rem;\n color: var(--secondary-color);\n font-weight: 500;\n }\n \n .upload-box {\n height: 240px;\n border: 2px dashed var(--primary-color);\n border-radius: var(--border-radius);\n background-color: var(--light-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 24px;\n overflow: hidden;\n position: relative;\n }\n \n .upload-icon {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n background-color: var(--primary-color);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n }\n \n .title-section {\n margin-bottom: 24px;\n }\n \n .title-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n }\n \n .title-label {\n font-size: 1.1rem;\n color: var(--text-medium);\n font-weight: 400;\n }\n \n .edit-icon {\n color: var(--primary-color);\n cursor: pointer;\n }\n \n .date-text {\n font-size: 0.9rem;\n color: var(--text-light);\n margin-bottom: 16px;\n }\n \n .tags-section {\n margin-bottom: 24px;\n }\n \n .tags-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n }\n \n .tags-title {\n font-size: 1.1rem;\n color: var(--text-medium);\n font-weight: 400;\n }\n \n .tags-btn {\n background-color: var(--light-bg);\n color: var(--primary-color);\n border: 1px solid var(--primary-color);\n border-radius: 50px;\n padding: 10px 16px;\n font-size: 1rem;\n cursor: pointer;\n text-align: center;\n width: 100%;\n transition: all 0.2s ease;\n }\n \n .tags-btn:hover {\n background-color: var(--primary-color);\n color: white;\n }\n \n .description-card {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n \n .description-header {\n display: flex;\n align-items: center;\n margin-bottom: 16px;\n }\n \n .icon-wrapper {\n width: 36px;\n height: 36px;\n background-color: var(--light-bg);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 10px;\n }\n \n .pencil-icon {\n color: var(--primary-color);\n font-size: 1.2rem;\n }\n \n .description-title {\n font-size: 1.1rem;\n font-weight: 500;\n color: var(--secondary-color);\n }\n \n .description-input {\n width: 100%;\n padding: 12px;\n border: 1px solid #ddd;\n border-radius: var(--border-radius);\n font-size: 1rem;\n resize: none;\n flex-grow: 1;\n min-height: 150px;\n }\n \n .send-to-coach-btn {\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: 50px;\n width: 100%;\n padding: 14px 16px;\n font-size: 1rem;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-top: 24px;\n transition: all 0.2s ease;\n }\n \n .send-to-coach-btn:hover {\n background-color: var(--secondary-color);\n }\n \n .send-to-coach-btn svg {\n margin-right: 8px;\n }\n \n .modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n }\n \n .modal.active {\n opacity: 1;\n visibility: visible;\n }\n \n .modal-content {\n background-color: var(--white);\n border-radius: var(--border-radius);\n width: 90%;\n max-width: 500px;\n padding: 24px;\n position: relative;\n transform: translateY(20px);\n transition: all 0.3s ease;\n }\n \n .modal.active .modal-content {\n transform: translateY(0);\n }\n \n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 24px;\n }\n \n .modal-title {\n font-size: 1.2rem;\n font-weight: 500;\n color: var(--secondary-color);\n }\n \n .close-btn {\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n color: var(--text-light);\n }\n \n .tag-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n margin-bottom: 24px;\n }\n \n .tag-option {\n display: flex;\n align-items: center;\n padding: 12px;\n border-radius: var(--border-radius);\n border: 1px solid #ddd;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n \n .tag-option:hover {\n border-color: var(--primary-color);\n background-color: var(--light-bg);\n }\n \n .tag-option.selected {\n background-color: var(--light-bg);\n border-color: var(--primary-color);\n }\n \n .tag-checkbox {\n margin-right: 10px;\n }\n \n .confirm-btn {\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: 50px;\n width: 100%;\n padding: 14px 16px;\n font-size: 1rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n \n .confirm-btn:hover {\n background-color: var(--secondary-color);\n }\n \n .hidden-file-input {\n display: none;\n }\n \n #videoPreview {\n display: none;\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: var(--border-radius);\n position: absolute;\n top: 0;\n left: 0;\n }\n \n .loading {\n display: none;\n text-align: center;\n margin: 16px 0;\n color: var(--primary-color);\n }\n \n .loading-spinner {\n display: inline-block;\n width: 20px;\n height: 20px;\n border: 3px solid rgba(58, 183, 149, 0.3);\n border-radius: 50%;\n border-top-color: var(--primary-color);\n animation: spin 1s ease-in-out infinite;\n margin-right: 10px;\n }\n \n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n \n .selected-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 10px;\n }\n \n .tag-pill {\n background-color: var(--light-bg);\n color: var(--primary-color);\n border-radius: 50px;\n padding: 6px 12px;\n font-size: 0.9rem;\n display: inline-flex;\n align-items: center;\n }\n \n .tag-pill .remove {\n margin-left: 6px;\n cursor: pointer;\n font-size: 0.8rem;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <div class=\"header-left\">\n <div class=\"back-btn\" id=\"backBtn\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line>\n <polyline points=\"12 19 5 12 12 5\"><\/polyline>\n <\/svg>\n <\/div>\n <div class=\"page-title\">Upload a Video<\/div>\n <\/div>\n <\/header>\n \n <div class=\"content-wrapper\">\n <div class=\"upload-section\">\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-title\">Video Upload<\/div>\n <\/div>\n \n <div class=\"upload-box\" id=\"uploadBox\">\n <input type=\"file\" id=\"videoInput\" class=\"hidden-file-input\" accept=\"video\/*\">\n <video id=\"videoPreview\" controls><\/video>\n <div class=\"upload-icon\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 5v14\"><\/path>\n <path d=\"M5 12h14\"><\/path>\n <\/svg>\n <\/div>\n <\/div>\n \n <div class=\"title-section\">\n <div class=\"title-header\">\n <div class=\"title-label\" id=\"titleLabel\">Edit title<\/div>\n <div class=\"edit-icon\" id=\"editTitleBtn\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\"><\/path>\n <\/svg>\n <\/div>\n <\/div>\n \n <div class=\"date-text\">\n <span id=\"currentDate\">4\/24\/2025 at 2:46 PM<\/span>\n <\/div>\n <\/div>\n \n <div class=\"tags-section\">\n <div class=\"tags-header\">\n <div class=\"tags-title\">Tags<\/div>\n <\/div>\n \n <button class=\"tags-btn\" id=\"openTagsBtn\">Select tags<\/button>\n \n <div class=\"selected-tags\" id=\"selectedTagsDisplay\">\n \n <\/div>\n <\/div>\n \n <div class=\"loading\" id=\"loadingIndicator\">\n <div class=\"loading-spinner\"><\/div>\n <span>Uploading video to coach…<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"description-section\">\n <div class=\"card description-card\">\n <div class=\"description-header\">\n <div class=\"icon-wrapper\">\n <div class=\"pencil-icon\">\u270f\ufe0f<\/div>\n <\/div>\n <div class=\"description-title\">Add Description<\/div>\n <\/div>\n \n <textarea class=\"description-input\" id=\"descriptionInput\" placeholder=\"Describe your video, technique, or any questions you have for your coach...\"><\/textarea>\n \n <button class=\"send-to-coach-btn\" id=\"sendToCoachBtn\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"><\/line>\n <polygon points=\"22 2 15 22 11 13 2 9 22 2\"><\/polygon>\n <\/svg>\n Send to Coach\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"modal\" id=\"tagModal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <div class=\"modal-title\">Select Tags<\/div>\n <button class=\"close-btn\" id=\"closeTagsBtn\">×<\/button>\n <\/div>\n \n <div class=\"tag-grid\">\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"drills\">\n <label for=\"drills\">Drills<\/label>\n <\/div>\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"driver\">\n <label for=\"driver\">Driver<\/label>\n <\/div>\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"iron\">\n <label for=\"iron\">Iron<\/label>\n <\/div>\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"pitching\">\n <label for=\"pitching\">Pitching<\/label>\n <\/div>\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"chipping\">\n <label for=\"chipping\">Chipping<\/label>\n <\/div>\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"putting\">\n <label for=\"putting\">Putting<\/label>\n <\/div>\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"bunker\">\n <label for=\"bunker\">Bunker<\/label>\n <\/div>\n <div class=\"tag-option\">\n <input type=\"checkbox\" class=\"tag-checkbox\" id=\"fairway\">\n <label for=\"fairway\">Fairway Wood<\/label>\n <\/div>\n <\/div>\n \n <button class=\"confirm-btn\" id=\"confirmTagsBtn\">Confirm<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Initialize elements\n const backBtn = document.getElementById('backBtn');\n const uploadBox = document.getElementById('uploadBox');\n const videoInput = document.getElementById('videoInput');\n const videoPreview = document.getElementById('videoPreview');\n const editTitleBtn = document.getElementById('editTitleBtn');\n const titleLabel = document.getElementById('titleLabel');\n const openTagsBtn = document.getElementById('openTagsBtn');\n const closeTagsBtn = document.getElementById('closeTagsBtn');\n const confirmTagsBtn = document.getElementById('confirmTagsBtn');\n const tagModal = document.getElementById('tagModal');\n const selectedTagsDisplay = document.getElementById('selectedTagsDisplay');\n const currentDate = document.getElementById('currentDate');\n const sendToCoachBtn = document.getElementById('sendToCoachBtn');\n const loadingIndicator = document.getElementById('loadingIndicator');\n const descriptionInput = document.getElementById('descriptionInput');\n \n \/\/ Video file storage\n let selectedVideoFile = null;\n \n \/\/ Set current date\n const now = new Date();\n const formattedDate = `${now.getDate()}\/${now.getMonth() + 1}\/${now.getFullYear()} at ${now.getHours() % 12 || 12}:${now.getMinutes().toString().padStart(2, '0')} ${now.getHours() >= 12 ? 'PM' : 'AM'}`;\n currentDate.textContent = formattedDate;\n \n \/\/ Handle back button\n backBtn.addEventListener('click', () => {\n window.history.back();\n });\n \n \/\/ Handle upload box click\n uploadBox.addEventListener('click', () => {\n videoInput.click();\n });\n \n \/\/ Handle video selection\n videoInput.addEventListener('change', (e) => {\n const file = e.target.files[0];\n \n if (file) {\n selectedVideoFile = file;\n const videoURL = URL.createObjectURL(file);\n videoPreview.src = videoURL;\n videoPreview.style.display = 'block';\n uploadBox.querySelector('.upload-icon').style.display = 'none';\n }\n });\n \n \/\/ Handle title editing\n editTitleBtn.addEventListener('click', () => {\n const currentTitle = titleLabel.textContent;\n const newTitle = prompt('Enter video title:', currentTitle === 'Edit title' ? '' : currentTitle);\n \n if (newTitle !== null) {\n titleLabel.textContent = newTitle || 'Edit title';\n }\n });\n \n \/\/ Handle tags modal\n openTagsBtn.addEventListener('click', () => {\n tagModal.classList.add('active');\n });\n \n closeTagsBtn.addEventListener('click', () => {\n tagModal.classList.remove('active');\n });\n \n \/\/ Handle tag selection\n const tagOptions = document.querySelectorAll('.tag-option');\n tagOptions.forEach(option => {\n option.addEventListener('click', function() {\n const checkbox = this.querySelector('.tag-checkbox');\n checkbox.checked = !checkbox.checked;\n this.classList.toggle('selected', checkbox.checked);\n });\n });\n \n \/\/ Close modal when clicking outside\n window.addEventListener('click', (e) => {\n if (e.target === tagModal) {\n tagModal.classList.remove('active');\n }\n });\n \n \/\/ Update selected tags display\n function updateSelectedTagsDisplay() {\n selectedTagsDisplay.innerHTML = '';\n const checkboxes = document.querySelectorAll('.tag-checkbox:checked');\n \n checkboxes.forEach(checkbox => {\n const tagPill = document.createElement('div');\n tagPill.className = 'tag-pill';\n tagPill.innerHTML = `${checkbox.id} <span class=\"remove\" data-tag=\"${checkbox.id}\">×<\/span>`;\n selectedTagsDisplay.appendChild(tagPill);\n \n \/\/ Add remove functionality\n tagPill.querySelector('.remove').addEventListener('click', function(e) {\n e.stopPropagation();\n const tagId = this.getAttribute('data-tag');\n const tagCheckbox = document.getElementById(tagId);\n tagCheckbox.checked = false;\n document.querySelector(`.tag-option:has(#${tagId})`).classList.remove('selected');\n updateSelectedTagsDisplay();\n });\n });\n }\n \n \/\/ Confirm tag selection\n confirmTagsBtn.addEventListener('click', () => {\n updateSelectedTagsDisplay();\n tagModal.classList.remove('active');\n });\n \n \/\/ Handle \"Send to Coach\" button click\n sendToCoachBtn.addEventListener('click', () => {\n if (!selectedVideoFile) {\n alert(\"Please select a video first\");\n return;\n }\n \n \/\/ Show loading indicator\n loadingIndicator.style.display = 'block';\n sendToCoachBtn.disabled = true;\n \n \/\/ Collect video metadata\n const videoData = {\n title: titleLabel.textContent !== 'Edit title' ? titleLabel.textContent : 'Untitled Video',\n description: descriptionInput.value,\n tags: [],\n date: formattedDate\n };\n \n \/\/ Get selected tags\n const checkboxes = document.querySelectorAll('.tag-checkbox:checked');\n checkboxes.forEach(checkbox => {\n videoData.tags.push(checkbox.id);\n });\n \n \/\/ Upload to cloud\n uploadToCloud(selectedVideoFile, videoData);\n });\n \n \/\/ Function to upload video to cloud storage\n function uploadToCloud(file, metadata) {\n console.log('Uploading to cloud:', file.name);\n console.log('Video metadata:', metadata);\n \n \/\/ Simulate upload process\n setTimeout(() => {\n \/\/ Hide loading indicator when done\n loadingIndicator.style.display = 'none';\n sendToCoachBtn.disabled = false;\n \n \/\/ Show success message\n alert(\"Video successfully sent to your coach!\");\n \n \/\/ Redirect back to main page\n window.location.href = '\/';\n }, 3000);\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Upload a Video – Golf Coach Upload a Video Video Upload Edit title 4\/24\/2025 at 2:46 PM Tags Select tags Uploading video to coach… \u270f\ufe0f Add Description Send to Coach Select Tags × Drills Driver Iron Pitching Chipping Putting Bunker Fairway Wood Confirm<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1662","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/pages\/1662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/comments?post=1662"}],"version-history":[{"count":3,"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/pages\/1662\/revisions"}],"predecessor-version":[{"id":1666,"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/pages\/1662\/revisions\/1666"}],"wp:attachment":[{"href":"https:\/\/devenv1.golfai.in\/hi\/wp-json\/wp\/v2\/media?parent=1662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}