PP Project Portal CODE + /* ================================================ STUDIOOS PROJECT PORTAL PHASE 5.2 FINAL CSS STYLING LAYER ================================================ */ #studioOS { --bg: #0f172a; --panel: #111827; --card: #1f2937; --border: #334155; --text: #f8fafc; --muted: #94a3b8; --accent: #6366f1; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); padding: 24px; border-radius: 18px; width: 100%; box-sizing: border-box; } /* ============================== HEADER ============================== */ .studioHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding: 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; } .studioBrand h1 { margin: 0; font-size: 32px; } .studioBrand p { color: var(--muted); margin: 5px 0 0; } /* ============================== BUTTONS ============================== */ button { background: var(--accent); color: white; border: none; padding: 10px 16px; border-radius: 10px; cursor: pointer; transition: .2s ease; } button:hover { transform: translateY(-2px); opacity: .9; } .studioActions { display: flex; gap: 12px; } /* ============================== DASHBOARD GRID ============================== */ #dashboard { display: grid; grid-template-columns: repeat( auto-fit, minmax(320px,1fr) ); gap: 20px; } /* ============================== PANELS ============================== */ .dashboardPanel { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 20px; overflow: hidden; } .panelHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .panelHeader h2 { margin: 0; font-size: 20px; } /* ============================== PROJECT CARDS ============================== */ .projectCard { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 12px; transition: .2s ease; } .projectCard:hover { border-color: var(--accent); transform: translateY(-3px); } /* ============================== PRIORITY COLORS ============================== */ .priorityCritical { border-left: 5px solid var(--danger); } .priorityHigh { border-left: 5px solid var(--warning); } .priorityMedium { border-left: 5px solid #3b82f6; } .priorityLow { border-left: 5px solid var(--success); } /* ============================== STATUS BADGES ============================== */ .statusBadge { display: inline-block; padding: 5px 10px; border-radius: 999px; font-size: 12px; background: #334155; } .waitingStatusBadge { color: #fbbf24; background: rgba( 245, 158, 11, .15 ); padding: 8px; border-radius: 8px; } /* ============================== TAGS ============================== */ .projectTag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; color: white; font-size: 12px; margin: 3px; } /* ============================== SEARCH ============================== */ #projectSearch { width: 100%; background: var(--card); color: white; border: 1px solid var(--border); padding: 14px; border-radius: 12px; font-size: 16px; } /* ============================== CALENDAR ============================== */ .calendarHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .calendarGrid { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; } .calendarDay, .calendarEmpty { min-height: 100px; background: var(--card); border-radius: 12px; padding: 8px; } .calendarDay.today { border: 2px solid var(--accent); } .calendarProject { margin-top: 5px; background: var(--accent); border-radius: 6px; padding: 4px; font-size: 11px; } /* ============================== TIMELINE ============================== */ .timelineRow { display: flex; gap: 15px; margin-bottom: 15px; } .timelineTitle { width: 180px; } .timelineTrack { flex: 1; height: 32px; background: #0b1220; border-radius: 10px; position: relative; } .timelineBar { position: absolute; height: 100%; background: var(--accent); border-radius: 10px; padding: 8px; font-size: 12px; } /* ============================== ANALYTICS ============================== */ .analyticsGrid { display: grid; grid-template-columns: repeat( auto-fit, minmax(150px,1fr) ); gap: 15px; } .analyticsCard { background: var(--card); padding: 20px; border-radius: 14px; } .analyticsCard strong { font-size: 30px; } /* ============================== MODAL ============================== */ .modal { position: fixed; inset: 0; background: rgba( 0, 0, 0, .7 ); display: none; align-items: center; justify-content: center; } .modalContent { background: var(--panel); padding: 25px; border-radius: 18px; width: min( 600px, 90% ); } /* ============================== MOBILE ============================== */ @media(max-width:700px){ #studioOS { padding: 15px; } .studioHeader { flex-direction: column; gap: 20px; align-items: stretch; } .studioActions { flex-direction: column; } #dashboard { grid-template-columns: 1fr; } .calendarGrid { grid-template-columns: repeat(2,1fr); } .timelineRow { flex-direction: column; } .timelineTitle { width: auto; } } /* ================================================ STUDIOOS PROJECT PORTAL PHASE 5.3 JAVASCRIPT CONSOLIDATION FOUNDATION ================================================ */ (function(){ "use strict"; ////////////////////////////////////////////////////// // GLOBAL APPLICATION OBJECT ////////////////////////////////////////////////////// window.StudioOS = { version:"1.0", initialized:false, projects:[], state:{}, settings:{}, storageKey:"studioOS_database" }; ////////////////////////////////////////////////////// // UTILITY FUNCTIONS ////////////////////////////////////////////////////// StudioOS.utils = { generateID:function(){ return ( Date.now() + Math.random() .toString(36) .substring(2) ); }, today:function(){ return new Date() .toISOString() .split("T")[0]; } }; ////////////////////////////////////////////////////// // DATABASE LOAD ////////////////////////////////////////////////////// StudioOS.loadDatabase=function(){ const saved = localStorage.getItem( this.storageKey ); if(saved){ this.state = JSON.parse( saved ); this.projects = this.state.projects || []; } else{ this.state={ projects:[], created: new Date() .toISOString() }; this.projects=[]; this.saveDatabase(); } }; ////////////////////////////////////////////////////// // DATABASE SAVE ////////////////////////////////////////////////////// StudioOS.saveDatabase=function(){ this.state.projects = this.projects; localStorage.setItem( this.storageKey, JSON.stringify( this.state ) ); }; ////////////////////////////////////////////////////// // NOTIFICATION SYSTEM ////////////////////////////////////////////////////// StudioOS.notify=function( message, type="info" ){ console.log( type.toUpperCase() + ":" + message ); }; ////////////////////////////////////////////////////// // BASIC PROJECT FINDER ////////////////////////////////////////////////////// StudioOS.findProject=function(id){ return this.projects.find( project=>project.id===id ); }; ////////////////////////////////////////////////////// // CREATE PROJECT FOUNDATION ////////////////////////////////////////////////////// StudioOS.createProject=function(data={}){ const project={ id: this.utils.generateID(), title: data.title || "Untitled Project", client: data.client || "", type: data.type || "General", priority: data.priority || "Medium", dueDate: data.dueDate || null, created: new Date() .toISOString(), archived:false, focused:false, waitingOnClient:false, status:{ fixed:false, footageBackedUp:false, draftDelivered:false, waitingFeedback:false, revisions:false, completed:false }, tasks:[], tags:[] }; this.projects.push( project ); this.saveDatabase(); this.refresh(); return project; }; ////////////////////////////////////////////////////// // DELETE PROJECT ////////////////////////////////////////////////////// StudioOS.deleteProject=function(id){ this.projects = this.projects.filter( project=>project.id!==id ); this.saveDatabase(); this.refresh(); }; ////////////////////////////////////////////////////// // OPEN PROJECT PLACEHOLDER ////////////////////////////////////////////////////// StudioOS.openProject=function(id){ const project = this.findProject(id); if(!project){ return; } console.log( "Opening project:", project.title ); }; ////////////////////////////////////////////////////// // INITIALIZE APPLICATION ////////////////////////////////////////////////////// StudioOS.initialize=function(){ if(this.initialized){ return; } this.loadDatabase(); this.initialized=true; console.log( "StudioOS initialized" ); this.refresh(); }; ////////////////////////////////////////////////////// // MASTER REFRESH ////////////////////////////////////////////////////// StudioOS.refresh=function(){ console.log( "Refreshing StudioOS" ); }; ////////////////////////////////////////////////////// // BUTTON CONNECTIONS ////////////////////////////////////////////////////// StudioOS.connectButtons=function(){ const newButton = document.getElementById( "newProjectButton" ); if(newButton){ newButton.onclick=function(){ StudioOS.createProject({ title: "New Project" }); }; } const settingsButton = document.getElementById( "settingsButton" ); if(settingsButton){ settingsButton.onclick=function(){ const panel= document.getElementById( "settings" ); if(panel){ panel.scrollIntoView({ behavior:"smooth" }); } }; } }; ////////////////////////////////////////////////////// // START APPLICATION ////////////////////////////////////////////////////// document.addEventListener( "DOMContentLoaded", function(){ StudioOS.connectButtons(); StudioOS.initialize(); } ); })(); /* ================================================ STUDIOOS PROJECT PORTAL PHASE 5.4 STORAGE & BACKUP SYSTEM ================================================ */ ////////////////////////////////////////////////////// // BACKUP SETTINGS ////////////////////////////////////////////////////// StudioOS.backup = { version:"1.0", filePrefix:"StudioOS_Backup" }; ////////////////////////////////////////////////////// // EXPORT DATABASE ////////////////////////////////////////////////////// StudioOS.exportBackup=function(){ const backupData={ app: "StudioOS", version: this.backup.version, exported: new Date() .toISOString(), data: this.state }; const json = JSON.stringify( backupData, null, 2 ); const blob = new Blob( [json], { type: "application/json" } ); const url = URL.createObjectURL( blob ); const link = document.createElement( "a" ); link.href=url; link.download = this.backup.filePrefix + "_" + new Date() .toISOString() .split("T")[0] + ".json"; document.body.appendChild( link ); link.click(); document.body.removeChild( link ); URL.revokeObjectURL( url ); this.notify( "Backup exported successfully", "success" ); }; ////////////////////////////////////////////////////// // IMPORT DATABASE ////////////////////////////////////////////////////// StudioOS.importBackup=function(file){ if(!file){ return; } const reader = new FileReader(); reader.onload=function(event){ try{ const backup = JSON.parse( event.target.result ); if( backup.app !== "StudioOS" ){ throw new Error( "Invalid backup file" ); } StudioOS.state = backup.data; StudioOS.projects = StudioOS.state.projects || []; StudioOS.saveDatabase(); StudioOS.refresh(); StudioOS.notify( "Backup restored successfully", "success" ); } catch(error){ StudioOS.notify( "Backup file invalid", "error" ); } }; reader.readAsText( file ); }; ////////////////////////////////////////////////////// // CREATE IMPORT BUTTON ////////////////////////////////////////////////////// StudioOS.createImportInput=function(){ const input = document.createElement( "input" ); input.type="file"; input.accept= ".json"; input.style.display= "none"; input.onchange=function(event){ const file = event.target.files[0]; StudioOS.importBackup( file ); }; document.body.appendChild( input ); return input; }; ////////////////////////////////////////////////////// // DATABASE RESET ////////////////////////////////////////////////////// StudioOS.clearDatabase=function(){ const confirmed = confirm( "This will permanently remove all StudioOS projects. Continue?" ); if(!confirmed){ return; } localStorage.removeItem( this.storageKey ); this.state={ projects:[] }; this.projects=[]; this.refresh(); this.notify( "Database cleared", "warning" ); }; ////////////////////////////////////////////////////// // AUTO BACKUP SNAPSHOT ////////////////////////////////////////////////////// StudioOS.createSnapshot=function(){ const snapshot={ date: new Date() .toISOString(), projects: this.projects.length }; localStorage.setItem( "studioOS_last_snapshot", JSON.stringify( snapshot ) ); }; ////////////////////////////////////////////////////// // BACKUP STATUS ////////////////////////////////////////////////////// StudioOS.getBackupStatus=function(){ const snapshot = localStorage.getItem( "studioOS_last_snapshot" ); if(!snapshot){ return { exists:false }; } return { exists:true, data: JSON.parse( snapshot ) }; }; ////////////////////////////////////////////////////// // SETTINGS PANEL CONNECTION ////////////////////////////////////////////////////// StudioOS.renderBackupControls=function(){ const container = document.getElementById( "dashboardSettings" ); if(!container){ return; } const section = document.createElement( "div" ); section.className= "backupControls"; section.innerHTML=`

Database Backup

Export Backup Import Backup Clear Database `; container.appendChild( section ); const importer = this.createImportInput(); document .getElementById( "exportStudioOS" ) .onclick=()=>{ this.exportBackup(); }; document .getElementById( "importStudioOS" ) .onclick=()=>{ importer.click(); }; document .getElementById( "clearStudioOS" ) .onclick=()=>{ this.clearDatabase(); }; }; ////////////////////////////////////////////////////// // CONNECT BACKUP SYSTEM ////////////////////////////////////////////////////// const previousBackupRefresh = StudioOS.refresh; StudioOS.refresh=function(){ previousBackupRefresh.call( this ); this.createSnapshot(); }; /* ================================================ STUDIOOS PROJECT PORTAL PHASE 5.5 FINAL USER INTERFACE ASSEMBLY ================================================ */ ////////////////////////////////////////////////////// // UI STATE ////////////////////////////////////////////////////// StudioOS.ui = { activeProject:null, modalOpen:false }; ////////////////////////////////////////////////////// // PROJECT CARD BUILDER ////////////////////////////////////////////////////// StudioOS.createProjectCard=function(project){ const card = document.createElement( "div" ); card.className= "projectCard"; let priorityClass=""; if(project.priority==="Critical"){ priorityClass="priorityCritical"; } else if(project.priority==="High"){ priorityClass="priorityHigh"; } else if(project.priority==="Low"){ priorityClass="priorityLow"; } card.classList.add( priorityClass ); card.innerHTML=` Open `; card.querySelector( ".openProject" ) .onclick=()=>{ this.openProject( project.id ); }; return card; }; ////////////////////////////////////////////////////// // PROJECT LIST RENDER ////////////////////////////////////////////////////// StudioOS.renderProjects=function(){ const container = document.getElementById( "projectList" ); if(!container){ return; } container.innerHTML=""; const projects = this.projects.filter(project=>{ return !project.archived; }); if(projects.length===0){ container.innerHTML=` `; return; } projects.forEach(project=>{ container.appendChild( this.createProjectCard( project ) ); }); }; ////////////////////////////////////////////////////// // PRIORITY BOARD ////////////////////////////////////////////////////// StudioOS.renderPriority=function(){ const container = document.getElementById( "priorityProjects" ); if(!container){ return; } container.innerHTML=""; const priorityOrder=[ "Critical", "High", "Medium", "Low" ]; const projects = this.projects .filter(project=>{ return !project.archived; }) .sort((a,b)=>{ return ( priorityOrder .indexOf(a.priority) - priorityOrder .indexOf(b.priority) ); }); projects.forEach(project=>{ container.appendChild( this.createProjectCard( project ) ); }); }; ////////////////////////////////////////////////////// // FOCUS DISPLAY ////////////////////////////////////////////////////// StudioOS.renderFocus=function(){ const container = document.getElementById( "focusProjects" ); if(!container){ return; } const focused = this.projects.filter(project=>{ return project.focused; }); container.innerHTML=""; if(focused.length===0){ container.innerHTML=`

No focus projects selected.

`; return; } focused.forEach(project=>{ const item = document.createElement( "div" ); item.className= "projectCard"; item.innerHTML=` ⭐ ${project.title} `; container.appendChild( item ); }); }; ////////////////////////////////////////////////////// // PROJECT MODAL ////////////////////////////////////////////////////// StudioOS.openProject=function(id){ const project = this.findProject( id ); if(!project){ return; } this.ui.activeProject= project; const modal = document.getElementById( "projectModal" ); const editor = document.getElementById( "projectEditor" ); if(!modal || !editor){ return; } editor.innerHTML=`

${project.title}

Client: ${project.client || ""}

Priority: ${project.priority}

Status: ${ project.status.completed ? "Completed" : "Active" }

`; modal.style.display="flex"; }; ////////////////////////////////////////////////////// // CLOSE MODAL ////////////////////////////////////////////////////// StudioOS.closeProject=function(){ const modal = document.getElementById( "projectModal" ); if(modal){ modal.style.display="none"; } }; ////////////////////////////////////////////////////// // SEARCH SYSTEM ////////////////////////////////////////////////////// StudioOS.connectSearch=function(){ const input = document.getElementById( "projectSearch" ); if(!input){ return; } input.oninput=function(){ const value = this.value .toLowerCase(); const results = StudioOS.projects.filter(project=>{ return project.title .toLowerCase() .includes(value); }); const container = document.getElementById( "searchResults" ); container.innerHTML=""; results.forEach(project=>{ container.innerHTML += ` `; }); }; }; ////////////////////////////////////////////////////// // MASTER UI REFRESH ////////////////////////////////////////////////////// StudioOS.refresh=function(){ this.renderProjects(); this.renderPriority(); this.renderFocus(); }; ////////////////////////////////////////////////////// // UI STARTUP ////////////////////////////////////////////////////// StudioOS.startInterface=function(){ this.connectSearch(); const close = document.getElementById( "closeModal" ); if(close){ close.onclick=()=>{ this.closeProject(); }; } this.refresh(); }; ////////////////////////////////////////////////////// // FINAL START ////////////////////////////////////////////////////// document.addEventListener( "DOMContentLoaded", function(){ StudioOS.startInterface(); } );