Skip to Content

Wiki source code of DEMO server

Version 19.1 by Iaroslav Platonov on 2026/06/09 11:28
Hide last authors
Iaroslav Platonov 19.1 1 {{html clean="false"}}
2 <style>
3 /* Hub page — CENTO design system */
4 .hub-wrap { font-family:inherit; max-width:860px; }
Lana 2.1 5
Iaroslav Platonov 19.1 6 /* Header */
7 .hub-head { padding:32px 0 24px 0; border-bottom:1px solid #E8E8E8; margin-bottom:32px; }
8 .hub-head p { font-size:.95em; color:#555; margin:0; line-height:1.65; max-width:680px; }
Lana 2.1 9
Iaroslav Platonov 19.1 10 /* About block */
11 .hub-about {
12 background:#f5f5f5; border:1px solid #E8E8E8; border-radius:8px;
13 padding:18px 22px; margin-bottom:32px;
14 font-size:.9em; line-height:1.7; color:#333;
15 }
16 .hub-about ul { margin:8px 0 0 0; padding-left:20px; }
17 .hub-about li { margin-bottom:4px; }
Lana 6.1 18
Iaroslav Platonov 19.1 19 /* Section label */
20 .hub-section-label {
21 font-size:.72em; font-weight:700; text-transform:uppercase;
22 letter-spacing:.08em; color:#888;
23 margin:0 0 14px 0; padding-bottom:8px;
24 border-bottom:2px solid #E8E8E8;
25 }
Iaroslav Platonov 18.1 26
Iaroslav Platonov 19.1 27 /* Demo card */
28 .demo-card {
29 border:1px solid #E8E8E8; border-radius:8px;
30 overflow:hidden; margin-bottom:12px;
31 transition:border-color .15s, box-shadow .15s;
32 }
33 .demo-card:hover {
34 border-color:#b3d4ee;
35 box-shadow:0 2px 10px rgba(0,90,180,.10);
36 }
37 .demo-card-head {
38 display:flex; align-items:center; gap:16px;
39 padding:16px 20px; background:#fff;
40 }
41 .demo-icon {
42 width:42px; height:42px; border-radius:8px;
43 background:#deeaf7; display:flex; align-items:center; justify-content:center;
44 flex-shrink:0;
45 }
46 .demo-icon svg { color:#005AB4; }
47 .demo-card-title { font-size:1em; font-weight:700; color:#005AB4; margin:0 0 3px 0; }
48 .demo-card-desc { font-size:.83em; color:#555; margin:0; line-height:1.5; }
49 .demo-card-body {
50 border-top:1px solid #E8E8E8;
51 padding:14px 20px;
52 background:#fafbff;
53 }
54 .demo-tag-row { display:flex; flex-wrap:wrap; gap:6px; }
55 .demo-tag {
56 font-size:.7em; font-weight:600; padding:2px 9px;
57 border-radius:10px; white-space:nowrap;
58 background:#e1f1f9; color:#003d80; border:1px solid #b3d4ee;
59 }
60 .demo-tag.green { background:#dcfce7; color:#15803d; border-color:#86efac; }
61 .demo-tag.orange { background:#ffedd5; color:#c2410c; border-color:#fdba74; }
62 .demo-tag.gray { background:#f1f5f9; color:#475569; border-color:#cbd5e1; }
63
64 /* Child pages link */
65 .demo-card-link {
66 display:flex; align-items:center; gap:8px;
67 padding:12px 20px; border-top:1px solid #E8E8E8;
68 background:#f5f5f5; font-size:.82em; color:#555;
69 }
70 .demo-card-link a { color:#005AB4; font-weight:600; }
71
72 /* Info callout */
73 .note-info {
74 background:#e1f1f9 !important; border:1px solid #b3d4ee !important;
75 border-left:4px solid #005AB4 !important; border-radius:6px;
76 padding:12px 16px; margin:24px 0 0 0;
77 }
78 .note-hd { font-weight:700; font-size:.85em; display:flex; align-items:center; gap:5px; margin-bottom:5px; color:#003d80 !important; }
79 .note-body { font-size:.875em; color:#222 !important; line-height:1.65; }
80 </style>
81
82 <div class="hub-wrap">
83
84 <!-- NOTE: No <h1> — XWiki renders the page title natively -->
85
86 <div class="hub-head">
87 <p>This section documents the configuration and structure of the CENTO demo server environments. It describes the available dashboards, system layouts, and configured scenarios used to demonstrate platform functionality.</p>
88 </div>
89
90 <div class="hub-about">
91 Each page in this section defines the following for the corresponding demo environment:
92 <ul>
93 <li>Configuration parameters and system layout</li>
94 <li>Metering setup and data collection</li>
95 <li>Reporting logic and flexible report templates</li>
96 <li>Events, thresholds, and notification rules</li>
97 <li>Control and remote control elements</li>
98 </ul>
99 </div>
100
101 <div class="hub-section-label">Demo environments</div>
102
103 <div class="demo-card">
104 <div class="demo-card-head">
105 <div class="demo-icon">
106 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
107 <rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>
108 </svg>
109 </div>
110 <div>
111 <p class="demo-card-title">DEMO server</p>
112 <p class="demo-card-desc">Live demonstration environment showcasing CENTO platform functionality — mimics, monitoring, reports, events, and control.</p>
113 </div>
114 </div>
115 <div class="demo-card-body">
116 <div class="demo-tag-row">
117 <span class="demo-tag">Mimic diagrams</span>
118 <span class="demo-tag">Metering &amp; analysis</span>
119 <span class="demo-tag">Flexible reports</span>
120 <span class="demo-tag green">Events &amp; notifications</span>
121 <span class="demo-tag orange">Remote control</span>
122 <span class="demo-tag gray">Digital twin</span>
123 </div>
124 </div>
125 <div class="demo-card-link">
126 &#128196; See child pages for configuration details of each demo scenario.
127 </div>
128 </div>
129
130 <div class="note-info">
131 <div class="note-hd"><span>&#8505;</span> Note</div>
132 <div class="note-body">The demo server is a shared read-only environment intended for evaluation and demonstration purposes. Data is periodically reset. For configuration details of a specific demo scenario, refer to the child pages in this section.</div>
133 </div>
134
135 </div>
136 {{/html}}
137