Skip to Content

Wiki source code of Home

Version 27.1 by Aaron Blackburn on 2026/07/22 20:27
Show last authors
1 <div class="modern-menu-container">
2 <div class="row">
3 <!-- Card 1: Webex -->
4 <a href="TARGET_URL_FOR_WEBEX" class="col-xs-12 col-sm-6 menu-card-link">
5 <div class="menu-card">
6 <div class="menu-icon-container">
7 <img src="$xwiki.getURL('Main.WebHome','download','filepath=webexbycisco-3d-vertical-color-black-text.png')" alt="Webex" class="menu-icon webex-icon" />
8 </div>
9 <div class="menu-text">
10 <div class="menu-title">Cloud Connected PSTN (CCP)</div>
11 <div class="menu-subtitle">Webex Integration</div>
12 </div>
13 </div>
14 </a>
15
16 <!-- Card 2: MS Teams -->
17 <a href="TARGET_URL_FOR_TEAMS" class="col-xs-12 col-sm-6 menu-card-link">
18 <div class="menu-card">
19 <div class="menu-icon-container">
20 <img src="$xwiki.getURL('Main.WebHome','download','filepath=MS teams.webp')" alt="MS Teams" class="menu-icon teams-icon" />
21 </div>
22 <div class="menu-text">
23 <div class="menu-title"><strong>MS Teams</strong></div>
24 <div class="menu-subtitle">Direct Routing</div>
25 </div>
26 </div>
27 </a>
28 </div>
29
30 <div class="row">
31 <!-- Card 3: FirstDigital -->
32 <a href="TARGET_URL_FOR_SIP" class="col-xs-12 col-sm-6 menu-card-link">
33 <div class="menu-card">
34 <div class="menu-icon-container">
35 <img src="$xwiki.getURL('Main.WebHome','download','filepath=1784751540742-511.png')" alt="SIP Trunk" class="menu-icon sip-icon" />
36 </div>
37 <div class="menu-text">
38 <div class="menu-title"><strong>FirstDigital SIP trunk</strong></div>
39 <div class="menu-subtitle">Voice Connectivity</div>
40 </div>
41 </div>
42 </a>
43
44 <!-- Card 4: Support -->
45 <a href="TARGET_URL_FOR_SUPPORT" class="col-xs-12 col-sm-6 menu-card-link">
46 <div class="menu-card">
47 <div class="menu-icon-container">
48 <img src="$xwiki.getURL('Main.WebHome','download','filepath=1784751495894-847.png')" alt="Support" class="menu-icon support-icon" />
49 </div>
50 <div class="menu-text">
51 <div class="menu-title"><strong>Support</strong></div>
52 <div class="menu-subtitle">Knowledge Base & Tickets</div>
53 </div>
54 </div>
55 </a>
56 </div>
57
58 <!-- Partner Footer Links -->
59 <div class="row partner-footer">
60 <div class="col-xs-6 text-center">
61 <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=true">
62 <img src="$xwiki.getURL('Main.WebHome','download','filepath=FirstDigital-Logo.png')" alt="FirstDigital" style="max-height:34px;" />
63 </a>
64 </div>
65 <div class="col-xs-6 text-center">
66 <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=false">
67 <img src="$xwiki.getURL('Main.WebHome','download','filepath=Microsoft_Azure-Logo.wine.png')" alt="Azure" style="max-height:50px;" />
68 </a>
69 </div>
70 </div>
71 </div>
72
73 <!-- CSS Styles for the Modern Look -->
74 <style>
75 /* Container setup */
76 .modern-menu-container {
77 max-width: 960px;
78 margin: 0 auto;
79 padding: 20px;
80 }
81
82 /* General row spacing */
83 .modern-menu-container .row {
84 margin-bottom: 20px;
85 }
86
87 /* Card styling */
88 .menu-card {
89 background: #ffffff;
90 border-radius: 12px;
91 padding: 15px;
92 display: flex;
93 align-items: center;
94 box-shadow: 0 4px 6px rgba(0,0,0,0.1);
95 transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
96 border: 1px solid #e0e0e0;
97 text-decoration: none; /* Remove underline from link */
98 color: #333; /* Ensure text color is consistent */
99 height: 100%; /* Ensure cards in same row match height */
100 }
101
102 /* Hover effect for cards */
103 .menu-card-link:hover .menu-card {
104 transform: translateY(-5px);
105 box-shadow: 0 6px 12px rgba(0,0,0,0.15);
106 }
107
108 /* Icon container: creates the white circle */
109 .menu-icon-container {
110 flex: 0 0 60px; /* Fixed size for icon area */
111 height: 60px;
112 background-color: #f8f9fa;
113 border-radius: 50%;
114 display: flex;
115 align-items: center;
116 justify-content: center;
117 margin-right: 15px;
118 border: 1px solid #eaeaea;
119 }
120
121 /* Generic icon scaling within the container */
122 .menu-icon {
123 max-width: 80%;
124 max-height: 80%;
125 object-fit: contain;
126 }
127
128 /* Specific icon tweaks if needed */
129 .webex-icon { max-width: 90%; } /* Webex logo is wide */
130
131 /* Text area */
132 .menu-text {
133 flex: 1;
134 display: flex;
135 flex-direction: column;
136 }
137
138 .menu-title {
139 font-size: 16px;
140 line-height: 1.4;
141 font-weight: 600;
142 }
143
144 .menu-subtitle {
145 font-size: 13px;
146 color: #666;
147 margin-top: 4px;
148 }
149
150 /* Partner footer adjustments */
151 .partner-footer {
152 margin-top: 40px;
153 padding-top: 20px;
154 border-top: 1px solid #eee;
155 opacity: 0.8;
156 }
157 .partner-footer:hover { opacity: 1; }
158
159 .partner-footer .text-center {
160 display: flex;
161 justify-content: center;
162 align-items: center;
163 }
164
165 /* Responsive breakpoints (adjust as needed) */
166 @media (max-width: 767px) {
167 .menu-card { margin-bottom: 15px; } /* Spacing on mobile */
168 }
169 </style>