HTML
xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">6
<meta http-equiv="x-ua-compatible" content="ie=edge">7
<title>temp</title> 8
</head>9
<body class="hidden-sn white-skin">10
<!--Double navigation-->11
<header>12
<!-- Sidebar navigation -->13
<div id="slide-out" class="side-nav sn-bg-4">14
<ul class="custom-scrollbar">15
<!-- Logo -->16
<li>17
<div class="logo-wrapper waves-light">18
<a href="">19
<img src={{ url_for('static', filename='img/att_logo/att_hz_lg_lkp_rgb_pos.png') }}20
class="img-fluid flex-center">21
</a> 22
</div>23
</li>24
<!--/. Logo -->25
<!--Social-->26
<li>27
<ul class="social">28
<li><a href="" target="_blank" class=""><i class="fas"> eLink</i></a></li>29
<li><a href="" target="_blank" class=""><i class="fas"> tSpace</i></a></li> 30
<li><a href="" target="_blank" class=""><i class="fas"> PLE</i></a></li> 31
</ul>32
</li>33
<!--/Social-->34
<!--Search Form-->35
<li>36
<form class="search-form" role="search">37
<div class="form-group md-form mt-0 pt-1 waves-light">38
<input type="text" class="form-control" placeholder="Search">39
</div>40
</form>41
</li>42
<!--/.Search Form-->43
<!-- Side navigation links -->44
<li>45
<ul class="collapsible collapsible-accordion">46
<li><a class="collapsible-header waves-effect" href="#"><i class="fas fa-phone"></i>NTN</a></li>47
<li><a class="collapsible-header waves-effect" href="#"><i class="fas fa-mobile-alt"></i>SIP</a></li>48
<li><a class="collapsible-header waves-effect" href="#"><i class="fas fa-share-alt"></i>SS7 Link</a></li>49
<li><a class="collapsible-header waves-effect" href="#"><i class="fas fa-route"></i>SS7 Routing</a></li>50
<li><a class="collapsible-header waves-effect" href="#"><i class="fas fa-route"></i>Call Routing</a></li>51
<div class="dropdown-divider"></div>52
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-right"></i> Dropdown 53
Item<i class="fas fa-angle-down rotate-icon"></i></a>54
<div class="collapsible-body">55
<ul>56
<li><a href="#" class="waves-effect">Item 1</a>57
</li>58
</ul>59
</div>60
</li>61
<li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-hand-pointer"></i>62
Instruction<i class="fas fa-angle-down rotate-icon"></i></a>63
<div class="collapsible-body">64
<ul>65
<li><a href="#" class="waves-effect">GMOPs</a>66
</li>67
<li><a href="#" class="waves-effect">Work Flows</a>68
</li>69
</ul>70
</div>71
</li>72
<li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-eye"></i> About<i class="fas fa-angle-down rotate-icon"></i></a>73
<div class="collapsible-body">74
<ul>75
<li><a href="#" class="waves-effect">Introduction</a>76
</li>77
<li><a href="#" class="waves-effect">My Workspace</a>78
</li>79
</ul>80
</div>81
</li>82
<li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-envelope"></i> Contact Support<i83
class="fas fa-angle-down rotate-icon"></i></a>84
<div class="collapsible-body">85
<ul> 86
<li><a href="#" class="waves-effect">FAQ</a>87
</li>88
<li><a href="#" class="waves-effect">Write a message</a>89
</li>90
</ul>91
</div>92
</li>93
<li><a class="collapsible-header waves-effect" href="#"><i class="fas fa-pencil-alt"></i>Team Blog</a></li>94
<li><a class="collapsible-header waves-effect" href="#"><i class="fas fa-newspaper"></i>News</a></li>95
<li><a class="collapsible-header waves-effect" href="#"><i class="fas fa-desktop"></i>Announcements</a></li>96
</ul>97
</li>98
<!--/. Side navigation links -->99
</ul>100
<div class="sidenav-bg mask-strong"></div>101
</div>102
<!--/. Sidebar navigation -->103
<!-- Navbar -->104
<nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg double-nav scrolling-navbar">105
<!-- SideNav slide-out button -->106
<div class="float-left">107
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars text-dark"></i></a>108
</div> 109
<!-- Navbar brand -->110
<a class="navbar-brand ml-3" href="{{ url_for('home') }}"><span class="h6 text-primary">My Workspace</span></a>111
<ul class="nav navbar-nav nav-flex-icons ml-auto">112
<li class="nav-item dropdown">113
<a class="nav-link dropdown-toggle " 114
id="navbarDropdownMenuLink-1" 115
data-toggle="dropdown"116
aria-haspopup="true" 117
aria-expanded="false">118
<i class="fas fa-bell text-default"></i> 119
<span class="clearfix d-none d-sm-inline-block"> 120
Messages121
</span>122
</a>123
<div class="dropdown-menu dropdown-menu-right" 124
aria-labelledby="navbarDropdownMenuLink-1">125
<a class="dropdown-item" href="#"><i class="fas fa-envelope pr-3"></i>Messages</a>126
<a class="dropdown-item" href="#"><i class="fas fa-bullhorn pr-3"></i>Announcements</a>127
</div>128
</li>129
<li class="nav-item dropdown">130
<a class="nav-link dropdown-toggle " 131
id="navbarDropdownMenuLink-2" 132
data-toggle="dropdown"133
aria-haspopup="true" 134
aria-expanded="false">135
<i class="fas fa-wrench text-danger"></i> 136
<span class="clearfix d-none d-sm-inline-block"> 137
Support138
</span>139
</a>140
<div class="dropdown-menu dropdown-menu-right" 141
aria-labelledby="navbarDropdownMenuLink-2">142
<a class="dropdown-item" href="#"><i class="fas fa-question pr-3"></i>FAQ</a>143
<a class="dropdown-item" href="#"><i class="fas fa-envelope pr-3"></i>Contact us</a>144
</div>145
</li>146
<li class="nav-item dropdown">147
<a class="nav-link dropdown-toggle" 148
id="navbarDropdownMenuLink-3" 149
data-toggle="dropdown"150
aria-haspopup="true" 151
aria-expanded="false">152
<i class="fa fa-user text-primary pr-1"></i> 153
<span class="clearfix d-none d-sm-inline-block"> 154
User155
</span>156
</a>157
<div class="dropdown-menu dropdown-menu-right" 158
aria-labelledby="navbarDropdownMenuLink-3">159
<h6 class="dropdown-header text-dark">160
<i class="fas fa-user-check pr-2 text-success"></i>161
<strong>User</strong></h6>162
<div class="dropdown-divider"></div>163
<a class="dropdown-item" href="#"><i class="fas fa-user-cog pr-3"></i>My account</a>164
<a class="dropdown-item" href="#"><i class="fas fa-user-edit pr-3"></i>Profile</a>165
</div>166
</li>167
</ul>168
</nav>169
<!-- /.Navbar -->170
</header>171
<!--/.Double navigation-->172
<!--Main Layout-->173
<main>174
<div class="container-flex px-5 py-2" id="event">175
<h5 class="text-center"><strong>{{ EVENT.title }}</strong></h5> 176
<!--Accordion wrapper-->177
<div class="accordion md-accordion" id="accordion-event" role="tablist" aria-multiselectable="true">178
<!-- Accordion card - ADMINISTRATIVE START -->179
<div class="card"> 180
<!-- Card header -->181
<div class="card-header" role="tab" id="heading-administrative">182
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-event" href="#collapse-administrative"183
aria-expanded="false" aria-controls="collapse-administrative">184
<h5 class="mb-0"><i class="fas fa-users pr-5"></i>Administrative<i class="fas fa-angle-down rotate-icon"></i></h5>185
</a>186
</div>187
<!-- Card body -->188
<div id="collapse-administrative" class="collapse" role="tabpanel" aria-labelledby="heading-administrative"189
data-parent="#accordion-event">190
<!-- SCRIPT FORM INPUT FOR ADMINISTRATIVE -->191
</div>192
</div>193
<!-- Accordion card - ADMINISTRATIVE END -->194
<!-- Accordion card - DESIGN INPUT-START -->195
<div class="card"> 196
<!-- Card header -->197
<div class="card-header" role="tab" id="heading-desing-input">198
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-event" href="#collapse-design-input"199
aria-expanded="false" aria-controls="collapse-design-input">200
<h5 class="mb-0"><i class="far fa-handshake pr-5"></i>Design Input<i class="fas fa-angle-down rotate-icon"></i></h5>201
</a>202
</div>203
<!-- Card body -->204
<div id="collapse-design-input" class="collapse" role="tabpanel" aria-labelledby="heading-desing-input"205
data-parent="#accordion-event">206
<!-- SCRIPT FORM INPUT FOR DESIGN-INPUT --> 207
</div>208
</div>209
<!-- Accordion card - DESIGN INPUT-START END --> 210
<!-- Accordion card - PROCESS MAP START -->211
<div class="card">212
<!-- Card header -->213
<div class="card-header" role="tab" id="heading-process-map">214
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-event" href="#collapse-process-map"215
aria-expanded="false" aria-controls="collapse-process-map">216
<h5 class="mb-0"><i class="fas fa-road pr-5"></i>Process MAP<i class="fas fa-angle-down rotate-icon"></i></h5>217
</a>218
</div>219
<!-- Card body -->220
<div id="collapse-process-map" class="collapse" role="tabpanel" aria-labelledby="heading-process-map"221
data-parent="#accordion-event">222
<!-- SCRIPT FORM INPUT FOR PROCESS MAP -->223
</div>224
</div>225
<!-- Accordion card - PROCESS MAP END -->226
</div>227
<!-- Accordion wrapper -->228
<!-- Classic tabs -->229
<div class="classic-tabs pt-5">230
<ul class="nav tabs-primary" id="tab-event" role="tablist">231
<li class="nav-item">232
<a class="nav-link waves-light active show" id="" data-toggle="tab" href="#tab-content-mop"233
role="tab" aria-controls="" aria-selected="true"><i class="fas fa-info fa-2x pb-2"234
aria-hidden="true"></i><br>MOP</a>235
</li>236
<li class="nav-item">237
<a class="nav-link waves-light" id="" data-toggle="tab" href="#tab-content-prework"238
role="tab" aria-controls="" aria-selected="false"><i class="fas fa-check fa-2x pb-2"239
aria-hidden="true"></i><br>Prework</a>240
</li>241
<li class="nav-item">242
<a class="nav-link waves-light" id="" data-toggle="tab" href="#tab-content-implementation"243
role="tab" aria-controls="" aria-selected="false"><i class="fas fa-play fa-2x pb-2"244
aria-hidden="true"></i><br>Implementation</a>245
</li>246
<li class="nav-item">247
<a class="nav-link waves-light" id="" data-toggle="tab" href="#tab-content-backout"248
role="tab" aria-controls="" aria-selected="false"><i class="fas fa-undo-alt fa-2x pb-2"249
aria-hidden="true"></i><br>Backout</a>250
</li>251
<li class="nav-item">252
<a class="nav-link waves-light" id="" data-toggle="tab" href="#tab-content-postcheck"253
role="tab" aria-controls="" aria-selected="false"><i class="fas fa-check-double fa-2x pb-2"254
aria-hidden="true"></i><br>Postcheck</a>255
</li>256
<li class="nav-item">257
<a class="nav-link waves-light" id="" data-toggle="tab" href="#tab-content-logs"258
role="tab" aria-controls="" aria-selected="false"><i class="fas fa-paperclip fa-2x pb-2"259
aria-hidden="true"></i><br>Logs</a>260
</li>261
<li class="nav-item">262
<a class="nav-link waves-light" id="" data-toggle="tab" href="#tab-content-notes"263
role="tab" aria-controls="" aria-selected="false"><i class="fas fa-sticky-note fa-2x pb-2"264
aria-hidden="true"></i><br>Notes</a>265
</li>266
</ul>267
<div class="tab-content card" id="tab-content-event">268
<div class="tab-pane fade active show" id="tab-content-mop" role="tabpanel">269
270
271
272
273
<div class="fixed-sn mdb-skin-custom" aria-busy="true" data-offset="15" data-target="#scrollspy" data-spy="scroll">274
275
<div class="container-fluid mt-2">276
<div class="row">277
278
<div id="chart-content" class="col-lg-10 col-md-12" style="display: none;">279
<div id="curr-month-chart" class="box"></div>280
<div id="curr-month-comp" class="box"></div>281
<div id="curr-month-billed-chart" class="box"></div>282
<div id="curr-month-char-chart" class="box"></div>283
<div id="curr-month-billing-chart" class="box"></div>284
<div id="year-on-year-chart" class="box"></div>285
<div id="year-on-year-comp" class="box"></div>286
<div id="year-on-year-char-chart" class="box"></div>287
<div id="year-on-year-billing-chart" class="box"></div>288
289
</div>290
<!-- Grid Column: Scrollspy -->291
<div id="dash-nav" class="col-md-2" >292
<!-- Sticky Content -->293
<div class="sticky sticky-top">294
<!-- Scrollspy -->295
<div id="scrollspy" style="display: none;">296
<!-- Links -->297
<ul class="nav nav-pills default-pills smooth-scroll">298
<li class="nav-item">299
<a class="nav-link" href="#curr-month-chart">Current Month</a>300
</li>301
<ul class="nav pl-3">302
<li class="nav-item pl-1">303
<a class="nav-link" href="#curr-month-comp">Comparisons</a>304
</li>305
<li class="nav-item pl-1">306
<a class="nav-link" href="#curr-month-billed-chart">Total Billed Analysis</a>307
</li>308
<li class="nav-item pl-1">309
<a class="nav-link" href="#curr-month-char-chart">Char Hours Analysis</a>310
</li>311
<li class="nav-item pl-1">312
<a class="nav-link" href="#curr-month-billing-chart">Billings Analysis</a>313
</li>314
</ul>315
<li class="nav-item">316
<a class="nav-link" href="#year-on-year-chart">Year-On-Year</a>317
</li>318
<ul class="nav pl-3" data-allow-hashes>319
<li class="nav-item pl-1">320
<a class="nav-link" href="#year-on-year-comp">Comparisons</a>321
</li>322
323
<li class="nav-item pl-1">324
<a class="nav-link" href="#year-on-year-char-chart">Char Hours Analysis</a>325
</li>326
<li class="nav-item pl-1">327
<a class="nav-link" href="#year-on-year-billing-chart">Billings Analysis</a>328
</li>329
</ul>330
</ul>331
</div>332
</div>333
</div>334
</div>335
</div>336
337
<div id="preloader" class="container-fluid h-50vh" style="display:block;">338
<div class="row h-100">339
<div class="w-100 h-100 m-auto flex-center">340
<!-- Card -->341
<div class="spinner-border circle-radius-205 p-absolute" role="status">342
<span class="sr-only">Loading...</span>343
</div>344
<div class="card circle circle-radius-200">345
<!-- Card content -->346
<div class="card-body flex-center">347
<!-- Title -->348
349
</div>350
</div>351
<!-- Card -->352
</div>353
</div>354
</div>355
</div>356
357
358
359
360
361
</div>362
<div class="tab-pane fade" id="tab-content-prework" role="tabpanel"></div>363
<div class="tab-pane fade" id="tab-content-implementation" role="tabpanel"></div>364
<div class="tab-pane fade" id="tab-content-backout" role="tabpanel"></div>365
<div class="tab-pane fade" id="tab-content-postcheck" role="tabpanel"></div>366
<div class="tab-pane fade" id="tab-content-logs" role="tabpanel"></div>367
<div class="tab-pane fade" id="tab-content-notes" role="tabpanel"></div>368
</div>369
</div>370
<!-- Classic tabs -->371
<script type="text/javascript" src={{ url_for("static", filename="js/event/script_event.js") }}></script>372
<script type="text/javascript">373
</script>374
<!-- Central Modal Medium Danger -->375
<div class="modal fade" id="centralModalDanger" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"376
aria-hidden="true">377
<div class="modal-dialog modal-notify modal-danger" role="document">378
<!--Content-->379
<div class="modal-content">380
<!--Header-->381
<div class="modal-header">382
<p class="heading lead">Warning</p> 383
<button type="button" class="close" data-dismiss="modal" aria-label="Close">384
<span aria-hidden="true" class="white-text">×</span>385
</button>386
</div> 387
<!--Body-->388
<div class="modal-body">389
<div class="text-center">390
<i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>391
<p id="danger-modal-body"></p>392
</div>393
</div> 394
<!--Footer-->395
<div class="modal-footer justify-content-center">396
<a type="button" class="btn btn-outline-danger waves-effect" data-dismiss="modal">Close</a>397
</div>398
</div>399
<!--/.Content-->400
</div>401
</div>402
<!-- Central Modal Medium Danger-->403
</div> 404
</main> 405
</body>406
</html>CSS
xxxxxxxxxx1
#scrollspy {2
width:100%;3
}4
5
#scrollspy .nav-item {6
width:100%;7
}8
9
#scrollspy a {10
font-size: .8rem;11
font-weight: 400;12
line-height: 1.1rem;13
padding: 0 5px;14
margin-top: 3px;15
margin-bottom: 3px;16
color: #00017
}18
19
#scrollspy li .active {20
font-weight:600;21
}22
23
.box {24
height: 600px;25
background-color: gray;26
margin: 15px;27
}JS
xxxxxxxxxx1
$(document).ready(function() {2
3
// // MDB SideNav Button Initialization4
// $(".button-collapse").sideNav();5
// // SideNav Scrollbar Initialization6
// var sideNavScrollbar = document.querySelector('.custom-scrollbar');7
// var ps = new PerfectScrollbar(sideNavScrollbar);8
9
// // MDB Select Initialization10
// $('.mdb-select').materialSelect();11
12
// // MDB Date Picker13
// $('.datepicker').pickadate({14
// // Escape any “rule” characters with an exclamation mark (!).15
// format: 'dddd, mmm dd, yyyy',16
// formatSubmit: 'yyyy/mm/dd',17
// hiddenPrefix: 'prefix__',18
// hiddenSuffix: '__suffix'19
// })20
21
// // MDB Time Picker Initialization22
// $('#input_starttime').pickatime({23
// twelvehour: true,24
// }); 25
26
// // Drag and drop file upload27
// $('.file-upload').file_upload();28
29
// // Events Table30
// $('#dt-events').DataTable();31
// $('.dataTables_length').addClass('bs-select');32
33
// // Treeview Initialization34
// $('.treeview-animated').mdbTreeview();35
36
// // Stepper Initialization37
// $('.stepper').mdbStepper();38
39
40
41
$('#preloader').addClass('animated fadeOut slow delay-2s').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {42
$(this).remove();43
$('#chart-content, #dash-nav, #scrollspy').addClass('animated fadeIn').show(); 44
});45
46
})47
48
49
$(function() {50
$(".sticky").sticky({51
topSpacing: 90,52
zIndex: 2,53
stopper: "#footer"54
});55
}); Console errors: 0