-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontent.html
More file actions
150 lines (141 loc) · 8.9 KB
/
content.html
File metadata and controls
150 lines (141 loc) · 8.9 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Content - Platform Engineering Toolkit</title>
<meta name="description" content="Explore detailed platform engineering content organized by topics and expertise areas.">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="container">
<nav class="nav">
<a href="index.html" class="nav-brand">Platform Engineering Toolkit</a>
<div class="nav-links">
<a href="get-involved.html" class="nav-link">Get Involved</a>
<a href="content.html" class="nav-link active">Content</a>
</div>
</nav>
</div>
</header>
<!-- Main Content -->
<main>
<div class="container">
<div class="page-header">
<a href="index.html" class="back-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M19 12H5m7-7l-7 7 7 7"/>
</svg>
Back to Home
</a>
<h1 class="page-title" id="content-title">Platform Engineering Content</h1>
<p class="page-description" id="content-description">
Explore comprehensive platform engineering resources organized by topic and expertise level.
</p>
</div>
<!-- Content will be dynamically loaded here -->
<div id="content-area">
<div class="article-content">
<div class="prose">
<h2>Select a Topic</h2>
<p>Choose from one of the following topics to explore detailed platform engineering content:</p>
<div class="cards-grid">
<a href="?section=introduction" class="card">
<div class="card-content">
<div class="card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
</svg>
</div>
<div class="card-text">
<h3 class="card-title">Introduction</h3>
<p class="card-description">Learn the fundamentals of platform engineering</p>
</div>
</div>
</a>
<a href="?section=architecture" class="card">
<div class="card-content">
<div class="card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<ellipse cx="12" cy="5" rx="9" ry="3"/>
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
</svg>
</div>
<div class="card-text">
<h3 class="card-title">Architecture</h3>
<p class="card-description">Platform architecture patterns and design principles</p>
</div>
</div>
</a>
<a href="?section=adoption" class="card">
<div class="card-content">
<div class="card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
<div class="card-text">
<h3 class="card-title">Adoption</h3>
<p class="card-description">Strategies for platform adoption and engagement</p>
</div>
</div>
</a>
<a href="?section=tools" class="card">
<div class="card-content">
<div class="card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="13,2 3,14 12,14 11,22 21,10 12,10"/>
</svg>
</div>
<div class="card-text">
<h3 class="card-title">Tools & Automation</h3>
<p class="card-description">Platform engineering tools and frameworks</p>
</div>
</div>
</a>
<a href="?section=security" class="card">
<div class="card-content">
<div class="card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
</div>
<div class="card-text">
<h3 class="card-title">Security & Compliance</h3>
<p class="card-description">Platform security best practices</p>
</div>
</div>
</a>
<a href="?section=configuration" class="card">
<div class="card-content">
<div class="card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"/>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
</svg>
</div>
<div class="card-text">
<h3 class="card-title">Configuration</h3>
<p class="card-description">Platform configuration and operational procedures</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="content.js"></script>
</body>
</html>