Skip to Content

Wiki source code of Home

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