feat: Implement dynamic loading of application links from a JSON configuration using a new JavaScript module.
This commit is contained in:
Achintha Isuru
145
firebase/internal-launchpad/assets/data/links.json
Normal file
145
firebase/internal-launchpad/assets/data/links.json
Normal file
@@ -0,0 +1,145 @@
|
||||
[
|
||||
{
|
||||
"title": "Applications",
|
||||
"iconColorClass": "bg-primary-100",
|
||||
"iconSvg": "<svg class=\"w-6 h-6 text-primary-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9\"></path></svg>",
|
||||
"links": [
|
||||
{
|
||||
"title": "Control Tower",
|
||||
"url": "https://krow-workforce-dev.web.app",
|
||||
"badge": "Dev",
|
||||
"badgeColorClass": "bg-blue-500",
|
||||
"containerClass": "bg-gradient-to-r from-blue-50 to-blue-100 hover:from-blue-100 hover:to-blue-200",
|
||||
"iconClass": "w-2 h-2 bg-blue-500 rounded-full",
|
||||
"textHoverClass": "group-hover:text-blue-700"
|
||||
},
|
||||
{
|
||||
"title": "Control Tower",
|
||||
"url": "https://krow-workforce-staging.web.app",
|
||||
"badge": "Staging",
|
||||
"badgeColorClass": "bg-amber-500",
|
||||
"containerClass": "bg-gradient-to-r from-amber-50 to-amber-100 hover:from-amber-100 hover:to-amber-200",
|
||||
"iconClass": "w-2 h-2 bg-amber-500 rounded-full",
|
||||
"textHoverClass": "group-hover:text-amber-700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Legacy Mobile Apps",
|
||||
"iconColorClass": "bg-green-100",
|
||||
"iconSvg": "<svg class=\"w-6 h-6 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z\"></path></svg>",
|
||||
"links": [
|
||||
{
|
||||
"title": "Google Play Store",
|
||||
"url": "https://play.google.com/store/apps/dev?id=9163719228191263405&hl=en",
|
||||
"badge": "Live",
|
||||
"badgeColorClass": "bg-green-500",
|
||||
"containerClass": "bg-gradient-to-r from-green-50 to-emerald-100 hover:from-green-100 hover:to-emerald-200",
|
||||
"iconSvg": "<svg class=\"w-5 h-5 text-green-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z\"></path></svg>",
|
||||
"textHoverClass": "group-hover:text-green-700"
|
||||
},
|
||||
{
|
||||
"title": "Apple App Store",
|
||||
"url": "https://apps.apple.com/us/developer/thinkloops-llc/id1719034287",
|
||||
"badge": "Live",
|
||||
"badgeColorClass": "bg-gray-700",
|
||||
"containerClass": "bg-gradient-to-r from-gray-50 to-gray-100 hover:from-gray-100 hover:to-gray-200",
|
||||
"iconSvg": "<svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z\"></path></svg>",
|
||||
"textHoverClass": "group-hover:text-gray-700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Cloud Infrastructure",
|
||||
"iconColorClass": "bg-purple-100",
|
||||
"iconSvg": "<svg class=\"w-6 h-6 text-purple-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z\"></path></svg>",
|
||||
"links": [
|
||||
{
|
||||
"title": "Firebase Console",
|
||||
"url": "https://console.firebase.google.com/project/krow-workforce-dev/overview",
|
||||
"badge": "Dev",
|
||||
"badgeColorClass": "bg-blue-500",
|
||||
"containerClass": "bg-gradient-to-r from-blue-50 to-indigo-100 hover:from-blue-100 hover:to-indigo-200",
|
||||
"iconSvg": "<svg class=\"w-5 h-5 text-orange-500\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M3.89 15.672L6.255.461A.542.542 0 017.27.288l2.543 4.771zm16.794 3.692l-2.25-14.03a.542.542 0 00-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 001.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 00-.96 0L3.53 17.984z\"></path></svg>",
|
||||
"textHoverClass": "group-hover:text-indigo-700"
|
||||
},
|
||||
{
|
||||
"title": "Firebase Console",
|
||||
"url": "https://console.firebase.google.com/project/krow-workforce-staging/overview",
|
||||
"badge": "Staging",
|
||||
"badgeColorClass": "bg-amber-500",
|
||||
"containerClass": "bg-gradient-to-r from-amber-50 to-orange-100 hover:from-amber-100 hover:to-orange-200",
|
||||
"iconSvg": "<svg class=\"w-5 h-5 text-orange-500\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M3.89 15.672L6.255.461A.542.542 0 017.27.288l2.543 4.771zm16.794 3.692l-2.25-14.03a.542.542 0 00-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 001.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 00-.96 0L3.53 17.984z\"></path></svg>",
|
||||
"textHoverClass": "group-hover:text-orange-700"
|
||||
},
|
||||
{
|
||||
"title": "Google Cloud",
|
||||
"url": "https://console.cloud.google.com/welcome/new?project=krow-workforce-dev",
|
||||
"badge": "Dev",
|
||||
"badgeColorClass": "bg-blue-500",
|
||||
"containerClass": "bg-gradient-to-r from-blue-50 to-cyan-100 hover:from-blue-100 hover:to-cyan-200",
|
||||
"iconSvg": "<svg class=\"w-5 h-5 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12.19 2.38a8.85 8.85 0 00-10.4 9.28l5.18-5.18a4.89 4.89 0 012.5-.72 4.89 4.89 0 011.72-.07zm7.6 2.24a8.85 8.85 0 01-7.6 14.91l4.5-4.5a4.89 4.89 0 002.45-2.55 4.89 4.89 0 00.65-7.86z\"></path></svg>",
|
||||
"textHoverClass": "group-hover:text-cyan-700"
|
||||
},
|
||||
{
|
||||
"title": "Google Cloud",
|
||||
"url": "https://console.cloud.google.com/welcome/new?project=krow-workforce-staging",
|
||||
"badge": "Staging",
|
||||
"badgeColorClass": "bg-amber-500",
|
||||
"containerClass": "bg-gradient-to-r from-amber-50 to-yellow-100 hover:from-amber-100 hover:to-yellow-200",
|
||||
"iconSvg": "<svg class=\"w-5 h-5 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12.19 2.38a8.85 8.85 0 00-10.4 9.28l5.18-5.18a4.89 4.89 0 012.5-.72 4.89 4.89 0 011.72-.07zm7.6 2.24a8.85 8.85 0 01-7.6 14.91l4.5-4.5a4.89 4.89 0 002.45-2.55 4.89 4.89 0 00.65-7.86z\"></path></svg>",
|
||||
"textHoverClass": "group-hover:text-yellow-700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Design",
|
||||
"iconColorClass": "bg-pink-100",
|
||||
"iconSvg": "<svg class=\"w-6 h-6 text-pink-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a2 2 0 01-2 2h-2zM15 7h6a2 2 0 012 2v8a2 2 0 01-2 2h-6a2 2 0 01-2-2V9a2 2 0 012-2z\"></path></svg>",
|
||||
"links": [
|
||||
{
|
||||
"title": "Staff App Figma File",
|
||||
"url": "#",
|
||||
"badge": "Design",
|
||||
"badgeColorClass": "bg-pink-500",
|
||||
"containerClass": "bg-gradient-to-r from-pink-50 to-rose-100 hover:from-pink-100 hover:to-rose-200",
|
||||
"iconSvg": "<svg class=\"w-5 h-5 text-pink-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12,2C14.2,2 16,3.8 16,6C16,8.2 14.2,10 12,10C9.8,10 8,8.2 8,6C8,3.8 9.8,2 12,2M12,10C14.2,10 16,11.8 16,14C16,16.2 14.2,18 12,18C9.8,18 8,16.2 8,14C8,11.8 9.8,10 12,10M12,18C14.2,18 16,19.8 16,22H8C8,19.8 9.8,18 12,18Z\"></path></svg>",
|
||||
"textHoverClass": "group-hover:text-pink-700"
|
||||
},
|
||||
{
|
||||
"title": "Staff App Preview",
|
||||
"url": "#",
|
||||
"badge": "Preview",
|
||||
"badgeColorClass": "bg-purple-500",
|
||||
"containerClass": "bg-gradient-to-r from-purple-50 to-fuchsia-100 hover:from-purple-100 hover:to-fuchsia-200",
|
||||
"iconSvg": "<svg class=\"w-5 h-5 text-purple-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"></path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\"></path></svg>",
|
||||
"textHoverClass": "group-hover:text-purple-700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Resources",
|
||||
"iconColorClass": "bg-indigo-100",
|
||||
"iconSvg": "<svg class=\"w-6 h-6 text-indigo-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\"></path></svg>",
|
||||
"links": [
|
||||
{
|
||||
"title": "GitHub Repository",
|
||||
"subtitle": "View source code",
|
||||
"url": "https://github.com/Oloodi/krow-workforce",
|
||||
"containerClass": "bg-gradient-to-r from-gray-50 to-slate-100 hover:from-gray-100 hover:to-slate-200",
|
||||
"iconSvg": "<svg class=\"w-5 h-5 text-gray-900\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"></path></svg>",
|
||||
"textHoverClass": "group-hover:text-gray-700",
|
||||
"arrowIcon": true
|
||||
},
|
||||
{
|
||||
"title": "Team Communication",
|
||||
"subtitle": "Google Chat",
|
||||
"url": "https://chat.google.com/",
|
||||
"containerClass": "bg-gradient-to-r from-green-50 to-teal-100 hover:from-green-100 hover:to-teal-200",
|
||||
"iconSvg": "<svg class=\"w-5 h-5 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\"></path></svg>",
|
||||
"textHoverClass": "group-hover:text-teal-700",
|
||||
"arrowIcon": true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
63
firebase/internal-launchpad/assets/js/links-loader.js
Normal file
63
firebase/internal-launchpad/assets/js/links-loader.js
Normal file
@@ -0,0 +1,63 @@
|
||||
async function loadLinks() {
|
||||
const container = document.getElementById('links-container');
|
||||
if (!container) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('./assets/data/links.json');
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load links: ${response.status}`);
|
||||
}
|
||||
|
||||
const groups = await response.json();
|
||||
|
||||
container.innerHTML = groups.map(group => `
|
||||
<!-- ${group.title} Card -->
|
||||
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
||||
<div class="flex items-center space-x-3 mb-6">
|
||||
<div class="w-10 h-10 ${group.iconColorClass} rounded-lg flex items-center justify-center">
|
||||
${group.iconSvg}
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900">${group.title}</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
${group.links.map(link => `
|
||||
<a href="${link.url}" target="_blank"
|
||||
class="flex items-center justify-between p-4 ${link.containerClass} rounded-xl transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
${link.iconClass ? `<div class="${link.iconClass}"></div>` : link.iconSvg}
|
||||
${link.subtitle ? `
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 ${link.textHoverClass}">${link.title}</div>
|
||||
<div class="text-xs text-gray-500">${link.subtitle}</div>
|
||||
</div>
|
||||
` : `
|
||||
<span class="font-medium text-gray-900 ${link.textHoverClass}">${link.title}</span>
|
||||
`}
|
||||
</div>
|
||||
${link.badge ? `
|
||||
<span class="px-3 py-1 ${link.badgeColorClass} text-white text-xs font-semibold rounded-full">${link.badge}</span>
|
||||
` : ''}
|
||||
${link.arrowIcon ? `
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
` : ''}
|
||||
</a>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading links:', error);
|
||||
container.innerHTML = `
|
||||
<div class="col-span-full p-4 bg-red-50 text-red-600 rounded-xl border border-red-200">
|
||||
Failed to load application links. Please try refreshing the page.
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Load links when the DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', loadLinks);
|
||||
@@ -73,9 +73,12 @@
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: .7;
|
||||
}
|
||||
@@ -102,21 +105,29 @@
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #4b5563; /* text-gray-600 */
|
||||
color: #4b5563;
|
||||
/* text-gray-600 */
|
||||
text-align: left;
|
||||
background-color: #f9fafb; /* bg-gray-50 */
|
||||
border-radius: 0.5rem; /* rounded-lg */
|
||||
background-color: #f9fafb;
|
||||
/* bg-gray-50 */
|
||||
border-radius: 0.5rem;
|
||||
/* rounded-lg */
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.accordion-button:hover {
|
||||
background-color: #f3f4f6; /* bg-gray-100 */
|
||||
background-color: #f3f4f6;
|
||||
/* bg-gray-100 */
|
||||
}
|
||||
|
||||
.accordion-button .chevron {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.accordion-button[aria-expanded="true"] .chevron {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.accordion-panel {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
@@ -130,8 +141,13 @@
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@@ -143,6 +159,7 @@
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@@ -199,7 +216,8 @@
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.markdown-content ul, .markdown-content ol {
|
||||
.markdown-content ul,
|
||||
.markdown-content ol {
|
||||
margin-bottom: 1em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
@@ -263,7 +281,8 @@
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.markdown-content th, .markdown-content td {
|
||||
.markdown-content th,
|
||||
.markdown-content td {
|
||||
border: 1px solid #e5e7eb;
|
||||
padding: 0.5em;
|
||||
text-align: left;
|
||||
@@ -312,7 +331,9 @@
|
||||
<a href="#" id="nav-home" onclick="showView('home', this)"
|
||||
class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 bg-primary-50 border border-primary-200 font-medium mb-2">
|
||||
<svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
|
||||
</path>
|
||||
</svg>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
@@ -344,180 +365,11 @@
|
||||
<p class="text-gray-600">Your central hub for workforce management infrastructure</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
||||
<!-- Applications Card -->
|
||||
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
||||
<div class="flex items-center space-x-3 mb-6">
|
||||
<div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
|
||||
</svg>
|
||||
<div id="links-container" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- Links will be loaded dynamically -->
|
||||
<div class="col-span-full flex justify-center p-12">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900">Applications</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<a href="https://krow-workforce-dev.web.app" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-xl hover:from-blue-100 hover:to-blue-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-2 h-2 bg-blue-500 rounded-full"></div>
|
||||
<span class="font-medium text-gray-900 group-hover:text-blue-700">Control Tower</span>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full">Dev</span>
|
||||
</a>
|
||||
|
||||
<a href="https://krow-workforce-staging.web.app" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-amber-50 to-amber-100 rounded-xl hover:from-amber-100 hover:to-amber-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-2 h-2 bg-amber-500 rounded-full"></div>
|
||||
<span class="font-medium text-gray-900 group-hover:text-amber-700">Control Tower</span>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">Staging</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Legacy Mobile Apps Card -->
|
||||
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
||||
<div class="flex items-center space-x-3 mb-6">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900">Legacy Mobile Apps</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<a href="https://play.google.com/store/apps/dev?id=9163719228191263405&hl=en" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-green-50 to-emerald-100 rounded-xl hover:from-green-100 hover:to-emerald-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"></path>
|
||||
</svg>
|
||||
<span class="font-medium text-gray-900 group-hover:text-green-700">Google Play Store</span>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-green-500 text-white text-xs font-semibold rounded-full">Live</span>
|
||||
</a>
|
||||
|
||||
<a href="https://apps.apple.com/us/developer/thinkloops-llc/id1719034287" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl hover:from-gray-100 hover:to-gray-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"></path>
|
||||
</svg>
|
||||
<span class="font-medium text-gray-900 group-hover:text-gray-700">Apple App Store</span>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-gray-700 text-white text-xs font-semibold rounded-full">Live</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cloud Consoles Card -->
|
||||
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
||||
<div class="flex items-center space-x-3 mb-6">
|
||||
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900">Cloud Infrastructure</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<a href="https://console.firebase.google.com/project/krow-workforce-dev/overview" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-indigo-100 rounded-xl hover:from-blue-100 hover:to-indigo-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M3.89 15.672L6.255.461A.542.542 0 017.27.288l2.543 4.771zm16.794 3.692l-2.25-14.03a.542.542 0 00-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 001.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 00-.96 0L3.53 17.984z"></path>
|
||||
</svg>
|
||||
<span class="font-medium text-gray-900 group-hover:text-indigo-700">Firebase Console</span>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full">Dev</span>
|
||||
</a>
|
||||
|
||||
<a href="https://console.firebase.google.com/project/krow-workforce-staging/overview" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-amber-50 to-orange-100 rounded-xl hover:from-amber-100 hover:to-orange-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M3.89 15.672L6.255.461A.542.542 0 017.27.288l2.543 4.771zm16.794 3.692l-2.25-14.03a.542.542 0 00-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 001.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 00-.96 0L3.53 17.984z"></path>
|
||||
</svg>
|
||||
<span class="font-medium text-gray-900 group-hover:text-orange-700">Firebase Console</span>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">Staging</span>
|
||||
</a>
|
||||
|
||||
<a href="https://console.cloud.google.com/welcome/new?project=krow-workforce-dev" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-cyan-100 rounded-xl hover:from-blue-100 hover:to-cyan-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12.19 2.38a8.85 8.85 0 00-10.4 9.28l5.18-5.18a4.89 4.89 0 012.5-.72 4.89 4.89 0 011.72-.07zm7.6 2.24a8.85 8.85 0 01-7.6 14.91l4.5-4.5a4.89 4.89 0 002.45-2.55 4.89 4.89 0 00.65-7.86z"></path>
|
||||
</svg>
|
||||
<span class="font-medium text-gray-900 group-hover:text-cyan-700">Google Cloud</span>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full">Dev</span>
|
||||
</a>
|
||||
|
||||
<a href="https://console.cloud.google.com/welcome/new?project=krow-workforce-staging" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-amber-50 to-yellow-100 rounded-xl hover:from-amber-100 hover:to-yellow-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12.19 2.38a8.85 8.85 0 00-10.4 9.28l5.18-5.18a4.89 4.89 0 012.5-.72 4.89 4.89 0 011.72-.07zm7.6 2.24a8.85 8.85 0 01-7.6 14.91l4.5-4.5a4.89 4.89 0 002.45-2.55 4.89 4.89 0 00.65-7.86z"></path>
|
||||
</svg>
|
||||
<span class="font-medium text-gray-900 group-hover:text-yellow-700">Google Cloud</span>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">Staging</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Access & Resources Card -->
|
||||
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
||||
<div class="flex items-center space-x-3 mb-6">
|
||||
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900">Resources</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<a href="https://github.com/Oloodi/krow-workforce" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-slate-100 rounded-xl hover:from-gray-100 hover:to-slate-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-gray-900" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 group-hover:text-gray-700">GitHub Repository</div>
|
||||
<div class="text-xs text-gray-500">View source code</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="https://chat.google.com/" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-green-50 to-teal-100 rounded-xl hover:from-green-100 hover:to-teal-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 group-hover:text-teal-700">Team Communication</div>
|
||||
<div class="text-xs text-gray-500">Google Chat</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -526,19 +378,26 @@
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 id="diagram-title" class="text-2xl font-bold text-gray-900"></h3>
|
||||
<div class="flex items-center space-x-2 bg-white rounded-xl shadow-lg p-2 border border-gray-200">
|
||||
<button id="zoomInBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Zoom In">
|
||||
<button id="zoomInBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
title="Zoom In">
|
||||
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="zoomOutBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Zoom Out">
|
||||
<button id="zoomOutBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
title="Zoom Out">
|
||||
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="resetBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Reset View">
|
||||
<button id="resetBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
title="Reset View">
|
||||
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@@ -563,6 +422,9 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Links Loader -->
|
||||
<script src="assets/js/links-loader.js"></script>
|
||||
|
||||
<!-- Panzoom -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user