Spaces:

Goood
/

digital-maturity-maestro

Running

App Files Files Community

Goood commited on Jan 16

Commit

701eb9d

verified ·

1 Parent(s): 75af189

keep going

Browse files

Files changed (10) hide show

README.md +6 -3
assessment.html +46 -0
components/assessment-card.js +43 -0
components/navbar.js +38 -0
components/progress-tracker.js +70 -0
components/question-card.js +50 -0
index.html +79 -19
results.html +138 -0
script.js +91 -0
style.css +37 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Digital Maturity Maestro
-emoji: 📊
 colorFrom: green
 colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Digital Maturity Maestro 🎯
 colorFrom: green
 colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

assessment.html ADDED Viewed

	@@ -0,0 +1,46 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Assessment | Digital Maturity Maestro</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/progress-tracker.js"></script>
+    <script src="components/question-card.js"></script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <div class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-gray-800 mb-4" id="dimension-title">Assessment</h1>
+            <p class="text-xl text-gray-600 max-w-3xl mx-auto" id="dimension-description">
+                Answer questions to evaluate your digital maturity
+            </p>
+        </div>
+        <custom-progress-tracker current-step="2"></custom-progress-tracker>
+        <div id="questions-container" class="max-w-4xl mx-auto space-y-6">
+            <!-- Questions will be dynamically inserted here -->
+        </div>
+        <div class="flex justify-between mt-12 max-w-4xl mx-auto">
+            <button id="prev-btn" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition">
+                Previous
+            </button>
+            <button id="next-btn" class="px-6 py-3 bg-yellow-500 text-white rounded-lg font-medium hover:bg-yellow-600 transition">
+                Next
+            </button>
+        </div>
+    </main>
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+</body>
+</html>

components/assessment-card.js ADDED Viewed

	@@ -0,0 +1,43 @@

+class CustomAssessmentCard extends HTMLElement {
+    connectedCallback() {
+        const dimension = this.getAttribute('dimension') || 'Dimension';
+        const icon = this.getAttribute('icon') || 'help-circle';
+        const description = this.getAttribute('description') || 'Assessment dimension';
+        const progress = this.getAttribute('progress') || '0';
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .card-container {
+                    transition: all 0.2s ease;
+                }
+                .card-container:hover {
+                    transform: translateY(-4px);
+                }
+                .progress-bar {
+                    transition: width 0.6s ease;
+                }
+            </style>
+            <div class="card-container bg-white rounded-xl shadow-md p-6 cursor-pointer h-full flex flex-col">
+                <div class="flex items-center mb-4">
+                    <div class="p-3 rounded-lg bg-yellow-50 mr-4">
+                        <i data-feather="${icon}" class="text-yellow-500"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-800">${dimension}</h3>
+                </div>
+                <p class="text-gray-600 mb-6 flex-grow">${description}</p>
+                <div class="mt-auto">
+                    <div class="flex justify-between items-center mb-2">
+                        <span class="text-sm font-medium text-gray-700">Progress</span>
+                        <span class="text-sm font-medium text-yellow-600">${progress}%</span>
+                    </div>
+                    <div class="w-full bg-gray-200 rounded-full h-2.5">
+                        <div class="progress-bar bg-yellow-500 h-2.5 rounded-full" style="width: ${progress}%"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-assessment-card', CustomAssessmentCard);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,38 @@

+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .navbar {
+                    transition: all 0.3s ease;
+                }
+                .nav-link:hover {
+                    color: #f59e0b;
+                }
+                .nav-link.active {
+                    color: #f59e0b;
+                    border-bottom: 2px solid #f59e0b;
+                }
+            </style>
+            <nav class="navbar bg-white shadow-sm py-4">
+                <div class="container mx-auto px-4 flex justify-between items-center">
+                    <div class="flex items-center space-x-2">
+                        <i data-feather="layers" class="text-yellow-500"></i>
+                        <span class="text-xl font-semibold text-gray-800">DMM 5.0 Assessment</span>
+                    </div>
+                    <div class="hidden md:flex space-x-8">
+                        <a href="index.html" class="nav-link active text-gray-700 font-medium">Home</a>
+                        <a href="about.html" class="nav-link text-gray-700 font-medium">About</a>
+                        <a href="results.html" class="nav-link text-gray-700 font-medium">Results</a>
+                        <a href="help.html" class="nav-link text-gray-700 font-medium">Help</a>
+                    </div>
+                    <button class="md:hidden focus:outline-none">
+                        <i data-feather="menu" class="text-gray-700"></i>
+                    </button>
+                </div>
+            </nav>
+        `;
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

components/progress-tracker.js ADDED Viewed

	@@ -0,0 +1,70 @@

+class CustomProgressTracker extends HTMLElement {
+    connectedCallback() {
+        const currentStep = this.getAttribute('current-step') || '1';
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .step {
+                    width: 2.5rem;
+                    height: 2.5rem;
+                }
+                .step.active {
+                    background-color: #f59e0b;
+                    color: white;
+                }
+                .step.inactive {
+                    background-color: #e5e7eb;
+                    color: #6b7280;
+                }
+                .connector {
+                    height: 2px;
+                    background-color: #e5e7eb;
+                }
+                .connector.active {
+                    background-color: #f59e0b;
+                }
+            </style>
+            <div class="flex items-center justify-center mb-12">
+                <div class="flex items-center">
+                    <!-- Step 1 -->
+                    <div class="step rounded-full flex items-center justify-center font-medium ${currentStep === '1' ? 'active' : 'inactive'}">
+                        1
+                    </div>
+                    <div class="connector w-16 mx-2 ${currentStep >= '2' ? 'active' : ''}"></div>
+                    <!-- Step 2 -->
+                    <div class="step rounded-full flex items-center justify-center font-medium ${currentStep === '2' ? 'active' : currentStep > '2' ? 'active' : 'inactive'}">
+                        2
+                    </div>
+                    <div class="connector w-16 mx-2 ${currentStep >= '3' ? 'active' : ''}"></div>
+                    <!-- Step 3 -->
+                    <div class="step rounded-full flex items-center justify-center font-medium ${currentStep === '3' ? 'active' : currentStep > '3' ? 'active' : 'inactive'}">
+                        3
+                    </div>
+                    <div class="connector w-16 mx-2 ${currentStep >= '4' ? 'active' : ''}"></div>
+                    <!-- Step 4 -->
+                    <div class="step rounded-full flex items-center justify-center font-medium ${currentStep === '4' ? 'active' : currentStep > '4' ? 'active' : 'inactive'}">
+                        4
+                    </div>
+                    <div class="connector w-16 mx-2 ${currentStep >= '5' ? 'active' : ''}"></div>
+                    <!-- Step 5 -->
+                    <div class="step rounded-full flex items-center justify-center font-medium ${currentStep === '5' ? 'active' : currentStep > '5' ? 'active' : 'inactive'}">
+                        5
+                    </div>
+                    <div class="connector w-16 mx-2 ${currentStep >= '6' ? 'active' : ''}"></div>
+                    <!-- Step 6 -->
+                    <div class="step rounded-full flex items-center justify-center font-medium ${currentStep === '6' ? 'active' : 'inactive'}">
+                        6
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-progress-tracker', CustomProgressTracker);

components/question-card.js ADDED Viewed

	@@ -0,0 +1,50 @@

+class CustomQuestionCard extends HTMLElement {
+    connectedCallback() {
+        const question = this.getAttribute('question') || 'Question';
+        const description = this.getAttribute('description') || '';
+        const options = JSON.parse(this.getAttribute('options') || '[]');
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .card {
+                    transition: all 0.2s ease;
+                }
+                .option:hover {
+                    background-color: #fef3c7;
+                }
+                .option.selected {
+                    background-color: #fef3c7;
+                    border-color: #f59e0b;
+                }
+            </style>
+            <div class="card bg-white rounded-xl shadow-md p-6">
+                <h3 class="text-xl font-semibold text-gray-800 mb-2">${question}</h3>
+                ${description ? `<p class="text-gray-600 mb-4">${description}</p>` : ''}
+                <div class="space-y-3">
+                    ${options.map((option, index) => `
+                        <div class="option p-4 border rounded-lg cursor-pointer transition" data-value="${option.value}">
+                            <div class="flex items-center">
+                                <div class="w-5 h-5 rounded-full border border-gray-300 mr-3 flex-shrink-0"></div>
+                                <span>${option.label}</span>
+                            </div>
+                        </div>
+                    `).join('')}
+                </div>
+            </div>
+        `;
+        // Add click handlers for options
+        this.shadowRoot.querySelectorAll('.option').forEach(option => {
+            option.addEventListener('click', () => {
+                this.shadowRoot.querySelectorAll('.option').forEach(opt => {
+                    opt.classList.remove('selected');
+                });
+                option.classList.add('selected');
+                this.setAttribute('selected', option.getAttribute('data-value'));
+            });
+        });
+    }
+}
+customElements.define('custom-question-card', CustomQuestionCard);

index.html CHANGED Viewed

@@ -1,19 +1,79 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TM Forum DMM 5.0 Assessment</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/assessment-card.js"></script>
+    <script src="components/progress-tracker.js"></script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <div class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-gray-800 mb-4">DMM 5.0 Assessment</h1>
+            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+                Evaluate your digital maturity across all 6 dimensions of the TM Forum's Digital Maturity Model
+            </p>
+        </div>
+        <custom-progress-tracker current-step="1"></custom-progress-tracker>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
+            <custom-assessment-card
+                dimension="Strategy & Leadership"
+                icon="target"
+                description="Assess your digital strategy and leadership capabilities"
+                progress="0">
+            </custom-assessment-card>
+            <custom-assessment-card
+                dimension="Customer Experience"
+                icon="users"
+                description="Evaluate your customer-centric digital capabilities"
+                progress="0">
+            </custom-assessment-card>
+            <custom-assessment-card
+                dimension="Operations & Automation"
+                icon="settings"
+                description="Measure your operational efficiency and automation"
+                progress="0">
+            </custom-assessment-card>
+            <custom-assessment-card
+                dimension="Technology"
+                icon="cpu"
+                description="Assess your technology infrastructure and capabilities"
+                progress="0">
+            </custom-assessment-card>
+            <custom-assessment-card
+                dimension="Data & Insights"
+                icon="database"
+                description="Evaluate your data management and analytics maturity"
+                progress="0">
+            </custom-assessment-card>
+            <custom-assessment-card
+                dimension="Partnership & Ecosystem"
+                icon="link"
+                description="Measure your ecosystem collaboration capabilities"
+                progress="0">
+            </custom-assessment-card>
+        </div>
+    </main>
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

results.html ADDED Viewed

	@@ -0,0 +1,138 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Results | Digital Maturity Maestro</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/result-card.js"></script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <div class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-gray-800 mb-4">Your Digital Maturity Results</h1>
+            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+                See how you compare across all dimensions
+            </p>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
+            <div class="bg-white rounded-xl shadow-md p-6">
+                <h2 class="text-2xl font-semibold text-gray-800 mb-4">Overall Maturity Score</h2>
+                <div class="flex items-center justify-center">
+                    <div class="relative w-64 h-64">
+                        <canvas id="maturityChart"></canvas>
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <span class="text-4xl font-bold text-yellow-600">3.8</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl shadow-md p-6">
+                <h2 class="text-2xl font-semibold text-gray-800 mb-4">Dimension Breakdown</h2>
+                <div class="space-y-4">
+                    <custom-result-card
+                        dimension="Strategy & Leadership"
+                        score="4.2"
+                        icon="target">
+                    </custom-result-card>
+                    <custom-result-card
+                        dimension="Customer Experience"
+                        score="3.8"
+                        icon="users">
+                    </custom-result-card>
+                    <custom-result-card
+                        dimension="Operations & Automation"
+                        score="3.5"
+                        icon="settings">
+                    </custom-result-card>
+                    <custom-result-card
+                        dimension="Technology"
+                        score="4.0"
+                        icon="cpu">
+                    </custom-result-card>
+                    <custom-result-card
+                        dimension="Data & Insights"
+                        score="3.2"
+                        icon="database">
+                    </custom-result-card>
+                    <custom-result-card
+                        dimension="Partnership & Ecosystem"
+                        score="3.9"
+                        icon="link">
+                    </custom-result-card>
+                </div>
+            </div>
+        </div>
+        <div class="bg-white rounded-xl shadow-md p-6 mb-12">
+            <h2 class="text-2xl font-semibold text-gray-800 mb-4">Recommendations</h2>
+            <div class="space-y-4">
+                <div class="p-4 bg-yellow-50 rounded-lg border-l-4 border-yellow-500">
+                    <h3 class="font-medium text-gray-800 mb-2">Improve Data & Insights</h3>
+                    <p class="text-gray-600">Consider implementing advanced analytics and data governance frameworks to enhance your data capabilities.</p>
+                </div>
+                <div class="p-4 bg-yellow-50 rounded-lg border-l-4 border-yellow-500">
+                    <h3 class="font-medium text-gray-800 mb-2">Optimize Operations</h3>
+                    <p class="text-gray-600">Evaluate opportunities for further automation and process optimization in your operational workflows.</p>
+                </div>
+            </div>
+        </div>
+        <div class="flex justify-center">
+            <a href="index.html" class="px-6 py-3 bg-yellow-500 text-white rounded-lg font-medium hover:bg-yellow-600 transition">
+                Start New Assessment
+            </a>
+        </div>
+    </main>
+    <script>
+        feather.replace();
+        // Initialize chart
+        const ctx = document.getElementById('maturityChart').getContext('2d');
+        new Chart(ctx, {
+            type: 'radar',
+            data: {
+                labels: ['Strategy', 'Customer', 'Operations', 'Technology', 'Data', 'Ecosystem'],
+                datasets: [{
+                    label: 'Your Score',
+                    data: [4.2, 3.8, 3.5, 4.0, 3.2, 3.9],
+                    backgroundColor: 'rgba(245, 158, 11, 0.2)',
+                    borderColor: 'rgba(245, 158, 11, 1)',
+                    borderWidth: 2,
+                    pointBackgroundColor: 'rgba(245, 158, 11, 1)',
+                    pointRadius: 4
+                }]
+            },
+            options: {
+                scales: {
+                    r: {
+                        angleLines: {
+                            display: true
+                        },
+                        suggestedMin: 0,
+                        suggestedMax: 5,
+                        ticks: {
+                            stepSize: 1
+                        }
+                    }
+                }
+            }
+        });
+    </script>
+    <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,91 @@

+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize assessment cards
+    const assessmentCards = document.querySelectorAll('custom-assessment-card');
+    assessmentCards.forEach(card => {
+        card.addEventListener('click', () => {
+            const dimension = card.getAttribute('dimension');
+            localStorage.setItem('currentDimension', dimension);
+            window.location.href = `assessment.html?dimension=${encodeURIComponent(dimension)}`;
+        });
+    });
+    // Add hover effects to cards
+    assessmentCards.forEach(card => {
+        card.addEventListener('mouseenter', () => {
+            card.shadowRoot.querySelector('.card-container').classList.add('shadow-lg');
+            card.shadowRoot.querySelector('.card-container').classList.remove('shadow-md');
+        });
+        card.addEventListener('mouseleave', () => {
+            card.shadowRoot.querySelector('.card-container').classList.remove('shadow-lg');
+            card.shadowRoot.querySelector('.card-container').classList.add('shadow-md');
+        });
+    });
+    // Assessment page logic
+    if (window.location.pathname.includes('assessment.html')) {
+        const params = new URLSearchParams(window.location.search);
+        const dimension = params.get('dimension') || localStorage.getItem('currentDimension');
+        // Update page title and description
+        document.getElementById('dimension-title').textContent = dimension;
+        document.getElementById('dimension-description').textContent =
+            `Evaluate your ${dimension.toLowerCase()} capabilities`;
+        // Load questions (mock data for now)
+        const questions = [
+            {
+                question: "How would you describe your organization's digital strategy?",
+                description: "Consider alignment with business goals and digital transformation initiatives",
+                options: [
+                    { value: 1, label: "No formal digital strategy" },
+                    { value: 2, label: "Emerging digital strategy" },
+                    { value: 3, label: "Defined digital strategy" },
+                    { value: 4, label: "Mature digital strategy" },
+                    { value: 5, label: "Optimized digital strategy" }
+                ]
+            },
+            {
+                question: "How effectively is digital leadership demonstrated?",
+                options: [
+                    { value: 1, label: "No digital leadership" },
+                    { value: 2, label: "Emerging digital leadership" },
+                    { value: 3, label: "Some digital leadership" },
+                    { value: 4, label: "Strong digital leadership" },
+                    { value: 5, label: "Exceptional digital leadership" }
+                ]
+            }
+        ];
+        const container = document.getElementById('questions-container');
+        questions.forEach((q, index) => {
+            const card = document.createElement('custom-question-card');
+            card.setAttribute('question', q.question);
+            if (q.description) card.setAttribute('description', q.description);
+            card.setAttribute('options', JSON.stringify(q.options));
+            card.setAttribute('data-index', index);
+            container.appendChild(card);
+        });
+        // Navigation buttons
+        document.getElementById('next-btn').addEventListener('click', () => {
+            // Validate all questions answered
+            const unanswered = [...document.querySelectorAll('custom-question-card')]
+                .filter(card => !card.getAttribute('selected'));
+            if (unanswered.length > 0) {
+                alert('Please answer all questions before proceeding');
+                return;
+            }
+            // TODO: Save answers and navigate
+            window.location.href = 'results.html';
+        });
+        document.getElementById('prev-btn').addEventListener('click', () => {
+            window.location.href = 'index.html';
+        });
+    }
+});

style.css CHANGED Viewed

@@ -1,28 +1,47 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
+    font-family: 'Inter', sans-serif;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+    background: #f59e0b;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #d97706;
+}
+/* Animation classes */
+.fade-in {
+    animation: fadeIn 0.3s ease-in-out;
 }
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
+/* Question card styles */
+custom-question-card {
+    display: block;
+    margin-bottom: 1.5rem;
 }
+custom-question-card .option {
+    transition: background-color 0.2s ease, border-color 0.2s ease;
 }
+custom-question-card .option.selected div:first-child {
+    background-color: #f59e0b;
+    border-color: #f59e0b;
 }