source: main/adopters/nm/trunk/src/main/webapps/nmibis-content/xml/html_content/about/AdminVideo.xml @ 19947

Last change on this file since 19947 was 19947, checked in by LoisHaggard_NM, 2 years ago

NM nmibis-content Admin PPT slides

File size: 8.8 KB
Line 
1<?xml version="1.0" encoding="ISO-8859-1"?>
2
3<!--FOLDER: C:\IBIS\Tomcat-5.5.25\webapps\ibisph-NM-rev475\xml\home\html_content -->
4
5<HTML_CONTENT xmlns:ibis="http://www.ibisph.org">
6
7        <TITLE>Videos and PPT Slides for IBIS Admin Application</TITLE>
8        <KEYWORDS>IBIS Admin Application</KEYWORDS>
9        <DESCRIPTION>Training videos for IBIS Admin application users</DESCRIPTION>
10
11<!--    <OTHER_HEAD_CONTENT>
12                <link rel="stylesheet" ibis:href="css/slick.css"/>
13                <link rel="stylesheet" ibis:href="css/slick-theme.css"/>
14
15                <script type="text/javascript" ibis:src="js/slick.js"></script>
16                <script type="text/javascript">
17                        // <![CDATA[
18                        window.videoDialog = null;
19                        window.videoPlayer = null;
20                        $(document).ready(function()
21                        {
22                                $("#slideShow").slick
23                                (
24                                        {
25                                                accessibility: true
26                                                ,adaptiveHeight: false
27                                                ,arrows: true
28                                                ,autoplay:true
29                                                ,autoplaySpeed: 6000
30                                                ,dots: true
31                                                ,draggable: true
32                                                ,pauseOnHover: true
33                                                ,pauseOnDotsHover: false
34                                                ,slide: "li"
35                                                ,slidesToShow: 1
36                                                ,speed: 700
37                                                ,swipe: true
38                                                ,useCSS: true
39                                        }
40                                );
41
42                                window.videoDialog = $("#videoDialog").kendoWindow(
43                                        {
44                                                "title": "Learn More Video"
45                                                ,"visible": false
46                                                ,"width": "90%"
47                                                ,"resizable": true
48                                                ,"modal": true
49                                        }
50                                ).data("kendoWindow");
51                        });
52
53
54                        // https://demos.telerik.com/kendo-ui/mediaplayer/playlist
55                        // https://docs.telerik.com/kendo-ui/api/javascript/ui/mediaplayer?_ga=2.5892464.272183754.1572845261-1689576755.1572632213
56                        function showVideo(videoURL, videoTitle)
57                        {
58                                if(null == window.videoPlayer)
59                                {
60                                        window.videoPlayer = $("#mediaPlayer").kendoMediaPlayer(
61                                                {
62                                                        "autoPlay": false
63                                                        ,"navigatable": true
64                                                }
65                                        ).data("kendoMediaPlayer");
66                                }
67
68                                window.videoDialog.center().open();
69
70// GARTH TODO:                          if(!videoURL.startsWith(http)) videoURL =
71                                var mediaOptions =
72                                        {
73                                                "title": videoTitle
74                                                ,"source": videoURL
75                                        };
76                window.videoPlayer.media(mediaOptions);
77                                window.videoPlayer.play();
78                        }
79
80                        function closeVideo()
81                        {
82                                window.videoPlayer.stop();
83                                window.videoDialog.close();
84                        }
85
86                        // ]]>
87                </script>
88                <style>
89                        .slick-slider
90                        {
91                                border: 2px solid #ccc;
92                                border-radius:                  4px;
93                                background-color: #f0f0f0;
94                                padding: 0;
95                                margin-bottom: 3em;
96                        }
97                         
98
99                        .slick-slider button
100                        {
101                                color: #003366;
102                                background-color: white;
103                                width: 20px;
104                                min-width: 0;
105                                border-radius: 10px;
106                        }
107                        .slick-slider button.slick-prev,
108                        .slick-slider button.slick-next
109                        {
110                                width: 28px;
111                                height: 70px;
112                                margin-top: -35px;
113                                background: transparent url("../image/icon/left.png") 0 0 no-repeat;
114                        }
115                        .slick-slider button.slick-prev
116                        {
117                                left: -13px;
118                        }
119                        .slick-slider button.slick-next
120                        {
121                                right: -23px;
122                                background-image: url("../image/icon/right.png");
123                        }
124                        .slick-slider button.slick-prev:before,
125                        .slick-slider button.slick-next:before
126                        {
127                                content: "";
128                        }
129
130                        .slick-slider .slick-slide
131                        {
132                                background: transparent none right 10px bottom no-repeat;
133                                background-size: auto 100%;
134                        }
135
136                        .slick-slider .slick-slide img
137                        {
138                                padding: 1em 0em 1em 1em;
139                                float: left;
140                                clear: right;
141                                height: 150px;
142                                max-height: 200px;
143                                margin-right: 2em;
144                        }
145
146                        .slick-slider .slick-slide > div
147                        {
148                                margin: 0;
149                                padding: 0;
150                        }
151
152                        .slick-slider .slick-slide > div > h3
153                        {
154                                margin: 0 0 0 -2em;
155                                font-weight: bold;
156                                font-style: normal;
157                                font-size: 1.5rem;
158                                letter-spacing: 2px;
159                                padding: 0.5em 0 0em 0em;
160                                color: #003366;
161                               
162                        }
163                        .slick-slider .slick-slide > div > ul
164                        {
165                                list-style-position: inside;
166                                max-height: 150px;
167                        }
168                        .slick-slider .slick-slide ul > li
169                        {
170                                padding: 0.25em 0 0.25em 0;
171                        }
172                        .slick-slider .slick-slide ul > li:last-child
173                        {
174                                padding-bottom: 1em;
175                        }
176                        .slick-slider .slick-slide ul li a,
177                        .slick-slider .slick-slide ul li a:visited
178                        {
179                                vertical-align: middle;
180                                color: #003366;
181                                text-decoration: underline;
182                                font-size: 1.2rem;
183                                letter-spacing: 1px;
184                        }
185                        .slick-slider .slick-slide ul li a:hover,
186                        .slick-slider .slick-slide ul li a:focus
187                        {
188                                text-decoration:        none;
189                                background-color:       #114477;
190                                color:                          #ffcc66;
191                        }
192
193                        .slick-slider .slick-dots
194                        {
195                                bottom: -25px;
196                        }
197                        .slick-slider .slick-dots li
198                        {
199                                margin-left: 0.75em;
200                        }
201                        .slick-slider .slick-dots button:before
202                        {
203                                font-size: 20px;
204                                line-height: 20px;
205                                padding-top: 3px;
206                                content: "*";
207                        }
208                        .slick-slider .slick-dots button
209                        {
210                                -webkit-box-shadow:              1px 1px 2px #333;
211                                -moz-box-shadow:                 1px 1px 2px #333;
212                                box-shadow:                              1px 1px 2px #333;
213                                background-color:               #f8f8f8;
214                        }
215                        .slick-slider .slick-dots .slick-active button
216                        {
217                                -webkit-box-shadow:             inset 0px 0px 2px 1px #000;
218                                -moz-box-shadow:                inset 0px 0px 2px 1px #000;
219                                box-shadow:                             inset 0px 0px 2px 1px #000;
220                        }
221
222
223
224                        .Users li
225                        {
226position: relative;
227box-sizing: border-box;
228/**/
229                            list-style-type:none;
230                                border: 1px solid #777;
231                                margin: 0 .5em 1em 0;
232                                padding: 0 1em .5em 1em;
233max-width: 300px;
234                        }
235                        .Users li .Container img
236                        {
237                                width: 100%;
238                                height: 120px;
239                        }
240
241
242/* The overlay effect - lays on top of the container and over the image
243
244video:not(:hover) - can work but need to use display: none/block..
245*/
246.Users li .Container .Overlay
247{
248        position: absolute;
249        bottom: 0;
250        left: 0px;
251        background:#444;
252        background: rgba(0, 0, 0, 0.5); /* Black see-through */
253        color: #f1f1f1;
254        width: calc(100% - 2rem);
255        transition: .5s ease;
256        opacity:0;
257        color: white;
258        font-size: 1rem;
259        line-height: 1rem;
260        padding: 1rem;
261        text-align: center;
262        margin: 1rem;
263}
264
265.Users li .Container:hover
266{
267        cursor: pointer;
268}
269.Users li .Container:hover .Overlay
270{
271        opacity:0.8;
272}
273
274
275
276
277
278
279#content section
280{
281        display: inline-block;
282        width:  67%;
283        vertical-align: top;
284}
285
286section .Overview
287{
288        display: inline-block;
289        width: 40%;
290        max-width: 50rem;
291
292        font-size: 1.1rem;
293        font-weight: normal;
294/*
295        border: 1px solid #336699;
296        table-cell
297        padding: 1rem;
298*/
299        margin: 0 2rem 2rem 0;
300}
301section .Overview h2
302{
303        margin-top: 0;
304}
305
306section .TwitterContainer
307{
308        display: inline-block;
309        max-width: 25rem;
310        margin:                         0 1em 1.5em 1.5em;
311        border:                         2px solid #999;
312        border-radius:          4px;
313        text-align:             center;
314        vertical-align: top;
315
316        -webkit-box-shadow: 8px 9px 26px -2px rgba(0,0,0,0.77);
317        -moz-box-shadow:        8px 9px 26px -2px rgba(0,0,0,0.77);
318        box-shadow:             8px 9px 26px -2px rgba(0,0,0,0.77);
319}
320
321
322#content x
323{
324        display: inline-block;
325        max-width: 30rem;
326        font-size: 1.1rem;
327        font-weight: normal;
328        border: 1px solid #336699;
329        padding: 1rem;
330        margin: 0 2rem 2rem 0;
331}
332#content .garth
333{
334        float: left;
335        max-width: calc(100% - 32rem);
336        font-size: 1.1rem;
337        font-weight: normal;
338        border: 1px solid #336699;
339        padding: 1rem;
340        margin: 0 2rem 2rem 0;
341}
342
343#content aside
344{
345        display: inline-block;
346        width: 30%;
347        max-width: 25rem;
348        font-size: 1.1rem;
349        font-weight: normal;
350        border: 1px solid #336699;
351        background-color: #ddd;
352        padding: 1rem;
353        margin: 0 0 2rem 2rem;
354}
355                         
356                </style>
357               
358        </OTHER_HEAD_CONTENT>
359-->
360        <CONTENT>
361                <br/><br/><br/>
362                <h2>Powerpoint Slides with Notes:</h2>
363                <h3><a ibis:href="view/docs/Admin/IBISAdmin30_2hr.pptx">NM-IBIS Admin Application</a></h3>
364                <br/><br/><br/>
365                <h2>Videos:</h2>
366                <section>
367                        <div>
368                        <iframe width="480" height="360" src="https://www.youtube.com/embed/AVipvkDh_eg?rel=0" allowfullscreen="true"></iframe>
369                        <br/>Watch a 40-minute video that covers what's new to know about IBIS Admin 3.0.<br/>
370        <!--ORIG                <iframe width="480" height="360" src="https://www.youtube.com/embed/g0J15iNmRkw?rel=0" allowfullscreen="true"></iframe> -->
371                        </div>
372                </section>
373                <div id="videoDialog" class="DialogContent">
374                        <div class="InnerCanvas"><div id="mediaPlayer"></div></div>
375                        <button type="button" title="Closes map selection without updating selections."
376                                onclick="closeVideo()" 
377                        >Close</button>
378                </div>
379                <br/><br/><br/><br/>
380                <section>
381                        <div>
382                        <iframe width="480" height="360" src="https://www.youtube.com/embed/kUoY3Zkd938" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true"></iframe>
383                        <br/>Watch a 1-hour and 40-minute video that covers IBIS Admin 3.0 from A to Z.<br/>
384                        </div>
385                </section>
386                <div id="videoDialog" class="DialogContent">
387                        <div class="InnerCanvas"><div id="mediaPlayer"></div></div>
388                        <button type="button" title="Closes map selection without updating selections."
389                                onclick="closeVideo()" 
390                        >Close</button>
391                </div>
392
393        </CONTENT>
394</HTML_CONTENT>
395
Note: See TracBrowser for help on using the repository browser.