Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
start [2021/10/25 01:02] admin |
start [2021/10/27 11:06] (current) admin |
||
---|---|---|---|
Line 35: | Line 35: | ||
< | < | ||
</ | </ | ||
- | <button class=" | + | |
- | <i class=" | + | |
- | </ | + | <i class=" |
+ | </button> | ||
+ | </div> | ||
<div class=" | <div class=" | ||
<p> The opened file is only read into the browser.< | <p> The opened file is only read into the browser.< | ||
Line 47: | Line 49: | ||
<script id=" | <script id=" | ||
<div class = " | <div class = " | ||
- | <input type=" | + | |
- | <button class=" | + | |
- | <i class=" | + | |
- | </ | + | <div class=" |
+ | | ||
+ | <i class=" | ||
+ | </button> | ||
+ | </div> | ||
<div class=" | <div class=" | ||
<p> The loaded file is only read into the browser.< | <p> The loaded file is only read into the browser.< | ||
Line 57: | Line 63: | ||
</ | </ | ||
+ | <script id=" | ||
+ | <div class=" | ||
+ | < | ||
+ | <ul class= " | ||
+ | <!-- Add your images (or video) here --> | ||
+ | </ul> | ||
+ | <!-- Text at center of ground --> | ||
+ | <p class = " | ||
+ | <div id=" | ||
+ | </ | ||
+ | <a class=" | ||
+ | <a class=" | ||
+ | <a class=" | ||
+ | <ol class=" | ||
+ | </ol> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <script id=" | ||
+ | <li class=" | ||
+ | <div class=" | ||
+ | <label class=" | ||
+ | <input name=" | ||
+ | </ | ||
+ | <label class=" | ||
+ | <input name=" | ||
+ | </ | ||
+ | <label class=" | ||
+ | <input name=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <script id=" | ||
+ | <li class=" | ||
+ | <div class=" | ||
+ | </ | ||
+ | </ | ||
< | < | ||
function initPage(langx, | function initPage(langx, | ||
let $ = domx.query; | let $ = domx.query; | ||
+ | |||
+ | var medias = [ | ||
+ | { | ||
+ | type: ' | ||
+ | poster : "/ | ||
+ | media : "/ | ||
+ | title : " | ||
+ | }, | ||
+ | { | ||
+ | type: ' | ||
+ | poster : '/ | ||
+ | media : "/ | ||
+ | title : " | ||
+ | }, | ||
+ | { | ||
+ | type: ' | ||
+ | poster : '/ | ||
+ | media : "/ | ||
+ | title : " | ||
+ | }, | ||
+ | { | ||
+ | type: ' | ||
+ | poster : "/ | ||
+ | media : "/ | ||
+ | title : "grand view park" | ||
+ | |||
+ | }, | ||
+ | |||
+ | { | ||
+ | type: ' | ||
+ | poster : "/ | ||
+ | media : "/ | ||
+ | title : " | ||
+ | }, | ||
+ | | ||
+ | { | ||
+ | type: ' | ||
+ | poster : "/ | ||
+ | media : "/ | ||
+ | title : " | ||
+ | |||
+ | }, | ||
+ | { | ||
+ | type: ' | ||
+ | poster : "/ | ||
+ | media : "/ | ||
+ | title : "the earth around" | ||
+ | |||
+ | } | ||
+ | ]; | ||
const mediaEls = Array.prototype.slice.call(document.getElementsByTagName(' | const mediaEls = Array.prototype.slice.call(document.getElementsByTagName(' | ||
Line 71: | Line 166: | ||
tabs : [ | tabs : [ | ||
{label:" | {label:" | ||
- | {label:" | + | {label:" |
+ | {label:" | ||
], | ], | ||
Line 87: | Line 183: | ||
url : { | url : { | ||
template : $("# | template : $("# | ||
+ | }, | ||
+ | listing : { | ||
+ | template : $("# | ||
+ | |||
+ | item : { | ||
+ | template : $("# | ||
+ | }, | ||
+ | |||
+ | modes : { | ||
+ | template : $("# | ||
+ | } | ||
} | } | ||
} | } | ||
Line 136: | Line 243: | ||
| | ||
} | } | ||
- | + | | |
- | .uop-picker .dropzone { | + | |
- | | + | |
- | } | + | |
- | | + | |
.uop-picker .upload-btn, | .uop-picker .upload-btn, | ||
margin-bottom : 2em; | margin-bottom : 2em; | ||
Line 155: | Line 258: | ||
} | } | ||
| | ||
- | .uop-picker .urlloader { | + | |
- | flex-direction : column; | + | |
- | } | + | |
- | + | ||
.uop-picker .urlloader .archive-url { | .uop-picker .urlloader .archive-url { | ||
- | | + | width: |
- | height : 30px; | + | |
} | } | ||
| | ||
Line 167: | Line 267: | ||
cursor : pointer; | cursor : pointer; | ||
} | } | ||
- | | + | |
+ | .uop-picker .lark-carousel .desc, .lark-carousel .ground { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .uop-picker .lark-carousel.rotate .desc, .lark-carousel.rotate .ground { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .uop-picker .lark-carousel .items-container { | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .uop-picker .lark-carousel | ||
+ | max-width: 90%; | ||
+ | max-height: 90%; | ||
+ | display: block; | ||
+ | margin: auto; | ||
+ | cursor : pointer; | ||
+ | } | ||
+ | |||
+ | .uop-picker .lark-carousel.rotate .items-container { | ||
+ | width: 120px; | ||
+ | height: 170px; | ||
+ | } | ||
+ | |||
+ | .uop-picker .lark-carousel.rotate .item img { | ||
+ | display: block; | ||
+ | height : 220px; | ||
+ | width: 220px; | ||
+ | } | ||
+ | |||
+ | .uop-picker .lark-carousel.coverflow .item { | ||
+ | height : 360px; | ||
+ | width : 360px; | ||
+ | } | ||
+ | |||
+ | .uop-picker .lark-carousel.coverflow .item img { | ||
+ | display: block; | ||
+ | height : 360px; | ||
+ | width : 360px; | ||
+ | } | ||
+ | |||
+ | | ||
+ | display: block; | ||
+ | height : 420px; | ||
+ | width : 840px | ||
+ | } | ||
</ | </ | ||