File size: 9,693 Bytes
4bd35f1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
949f474
 
 
 
 
 
 
9e2b812
 
 
 
5b1b4f3
9e2b812
 
3c7fdc7
98feb93
be3690e
5b1b4f3
8df57b3
4bd35f1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3c7fdc7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4bd35f1
3c7fdc7
4bd35f1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
949f474
 
 
 
4bd35f1
949f474
4bd35f1
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Architecture | QuantumCode</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Space Grotesk', sans-serif;
            background-color: #0f172a;
            color: #e2e8f0;
        }
        
        .gradient-text {
            background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .glass-card {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1rem;
        }
        
        .entity-card {
            border-left: 4px solid #7c3aed;
        }
    </style>
</head>
<body class="min-h-screen">
    <nav class="px-6 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i data-feather="cpu" class="text-indigo-500"></i>
            <span class="text-xl font-bold gradient-text">QuantumCode</span>
        </div>
        <div class="flex items-center space-x-2">
            <a href="i18n-setup.html" class="flex items-center text-sm hover:text-indigo-400 transition-colors">
                <i data-feather="globe" class="w-4 h-4 mr-1"></i>
                <span id="currentLang">EN</span>
            </a>
        </div>
<div class="hidden md:flex space-x-8">
                <a href="index.html" class="hover:text-indigo-400 transition-colors">Home</a>
                <a href="index.html#features" class="hover:text-indigo-400 transition-colors">Features</a>
                <a href="index.html#roadmap" class="hover:text-indigo-400 transition-colors">Roadmap</a>
                <a href="data-architecture.html" class="text-indigo-400">Data Architecture</a>
                <a href="learning-engine.html" class="hover:text-indigo-400 transition-colors">Learning Engine</a>
                <a href="auth.html" class="hover:text-indigo-400 transition-colors">Login</a>
                <a href="select-role.html" class="hover:text-indigo-400 transition-colors">Roles</a>
                <a href="progress-report.html" class="hover:text-indigo-400 transition-colors">Progress</a>
                <a href="self-talk-journal.html" class="hover:text-indigo-400 transition-colors">Self-Talk</a>
                <a href="gamequest.html" class="hover:text-indigo-400 transition-colors">GameQuest</a>
</div>
</nav>
    
    <main class="container mx-auto px-4 py-16">
        <section class="max-w-6xl mx-auto mb-20">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">
                <span class="gradient-text">Data Architecture</span>
            </h1>
            <p class="text-xl text-slate-300 mb-10">
                Our structured data model ensures efficient learning tracking and personalization.
            </p>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="glass-card entity-card p-6">
                    <h3 class="text-2xl font-bold mb-4 flex items-center">
                        <i data-feather="user" class="mr-2 text-indigo-400"></i>
                        User Profile
                    </h3>
                    <ul class="space-y-2 text-slate-300">
                        <li class="flex items-start">
                            <i data-feather="chevron-right" class="text-indigo-400 mr-2 mt-0.5"></i>
                            <span>Roles (student, teacher, admin)</span>
                        </li>
                        <li class="flex items-start">
                            <i data-feather="chevron-right" class="text-indigo-400 mr-2 mt-0.5"></i>
                            <span>Language preferences</span>
                        </li>
                        <li class="flex items-start">
                            <i data-feather="chevron-right" class="text-indigo-400 mr-2 mt-0.5"></i>
                            <span>Subscription status</span>
                        </li>
                        <li class="flex items-start">
                            <i data-feather="chevron-right" class="text-indigo-400 mr-2 mt-0.5"></i>
                            <span>Skill level tracking</span>
                        </li>
                    </ul>
                </div>
                
                <div class="glass-card entity-card p-6">
                    <h3 class="text-2xl font-bold mb-4 flex items-center">
                        <i data-feather="book" class="mr-2 text-indigo-400"></i>
                        Course Structure
                    </h3>
                    <ul class="space-y-2 text-slate-300">
                        <li class="flex items-start">
                            <i data-feather="chevron-right" class="text-indigo-400 mr-2 mt-0.5"></i>
                            <span>Courses → Modules → Lessons hierarchy</span>
                        </li>
                        <li class="flex items-start">
                            <i data-feather="chevron-right" class="text-indigo-400 mr-2 mt-0.5"></i>
                            <span>Multimedia content support</span>
                        </li>
                        <li class="flex items-start">
                            <i data-feather="chevron-right" class="text-indigo-400 mr-2 mt-0.5"></i>
                            <span>Prerequisite relationships</span>
                        </li>
                        <li class="flex items-start">
                            <i data-feather="chevron-right" class="text-indigo-400 mr-2 mt-0.5"></i>
                            <span>Difficulty levels</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="glass-card p-8 mb-12">
                <h2 class="text-3xl font-bold mb-8">Progress Tracking</h2>
                <div class="grid md:grid-cols-3 gap-6">
                    <div class="p-6 border border-slate-700 rounded-lg">
                        <h3 class="text-xl font-bold mb-3 flex items-center">
                            <i data-feather="activity" class="text-indigo-400 mr-2"></i>
                            Progress Records
                        </h3>
                        <p class="text-slate-300 mb-2">Tracks completion status, time spent, and attempts for each lesson.</p>
                        <ul class="text-sm text-slate-400 space-y-1">
                            <li class="flex items-start">
                                <i data-feather="chevron-right" class="w-3 h-3 mr-1 mt-0.5 text-indigo-400"></i>
                                <span>Atomic task completion tracking</span>
                            </li>
                            <li class="flex items-start">
                                <i data-feather="chevron-right" class="w-3 h-3 mr-1 mt-0.5 text-indigo-400"></i>
                                <span>Mastery percentage calculations</span>
                            </li>
                            <li class="flex items-start">
                                <i data-feather="chevron-right" class="w-3 h-3 mr-1 mt-0.5 text-indigo-400"></i>
                                <span>Personalized progress reports</span>
                            </li>
                        </ul>
                    </div>
<div class="p-6 border border-slate-700 rounded-lg">
                        <h3 class="text-xl font-bold mb-3 flex items-center">
                            <i data-feather="bar-chart-2" class="text-indigo-400 mr-2"></i>
                            Confidence Metrics
                        </h3>
                        <p class="text-slate-300">Self-assessed confidence levels linked to learning materials.</p>
                    </div>
                    <div class="p-6 border border-slate-700 rounded-lg">
                        <h3 class="text-xl font-bold mb-3 flex items-center">
                            <i data-feather="credit-card" class="text-indigo-400 mr-2"></i>
                            Payment System
                        </h3>
                        <p class="text-slate-300">Subscription management and transaction history.</p>
                    </div>
                </div>
            </div>
            
            <div class="text-center">
                <a href="index.html" class="inline-flex items-center px-6 py-3 border border-indigo-500 text-indigo-400 hover:bg-indigo-900/50 rounded-full font-medium transition-colors">
                    <i data-feather="arrow-left" class="mr-2"></i>
                    Back to Home
                </a>
            </div>
        </section>
    </main>
    
    <footer class="py-12 border-t border-slate-800">
        <div class="container mx-auto px-4 text-center">
            <p class="text-slate-500 text-sm">
                © 2023 QuantumCode AI Architect. All rights reserved.
            </p>
        </div>
    </footer>
    <script>
        // Set initial language
        document.getElementById('currentLang').textContent = 
            document.cookie.match('(^|;)\\s*NEXT_LOCALE\\s*=\\s*([^;]+)')?.pop() || 'EN';

        feather.replace();
</script>
</body>
</html>