Changes for page DEMO server

Summary

• Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

...	...	@@ -1,17 +1,137 @@
1		-{{container layoutStyle="columns"}}
2		-(((
3		-This section documents the configuration and structure of the CENTO demo server environments.
	1	+{{html clean="false"}}
	2	+<style>
	3	+/* Hub page — CENTO design system */
	4	+.hub-wrap { font-family:inherit; max-width:860px; }
4	4
5		-It describes the available dashboards, system layouts, and configured scenarios used to demonstrate platform functionality.
	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; }
6	6
7		-Each page defines the configuration parameters, metering setup, reporting logic, events, and control elements implemented in the corresponding demo environment.
	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; }
8	8
9		-{{box style="background:#BADCFD;border-radius:16px;padding:20px;"}}
10		-=== DEMO server ===
11		-{{children reference="DEMO server" depth="1" withAttachments="false"/}}
12		-{{/box}}
13		-)))
14		- (((
15		- )))
16		-
17		-{{/container}}
	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	+}
	26	+
	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	+