JQuery Caroussel & QRcode scanner templates
This commit is contained in:
parent
199b08bba9
commit
b67a506f0c
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>_CHANNEL_ : CAROUSSEL [BunkerBOX]</title>
|
||||
<link rel="icon" type="image/png" href="styles/logo.png" />
|
||||
<link rel="stylesheet" href="styles/video-js.css" type="text/css" />
|
||||
<link rel="stylesheet" href="styles/forest.css" type="text/css" />
|
||||
<link rel="stylesheet" href="styles/decoration.css" type="text/css" />
|
||||
<link rel="stylesheet" href="styles/font-awesome.min.css" type="text/css" />
|
||||
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
|
||||
<link rel="stylesheet" href="styles/video-wall.css" type="text/css" />
|
||||
|
||||
<script src="js/video.min.js"></script>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/mustache.min.js"></script>
|
||||
<script src="js/video-wall.js"></script>
|
||||
<script src="js/videojs-contrib-hls.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h6>
|
||||
<a href="_IPNSL_/tw/_CHANNEL_" target="_CHANNEL_"> "<span>BunkerBOX@_CHANNEL_</span>"</a> /<a href="_IPNSL_">qo-op</a>/
|
||||
</h6>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<center>
|
||||
<div class="row justify-center">
|
||||
|
||||
|
||||
<video
|
||||
id="vbunk"
|
||||
class="video-js vjs-theme-forest"
|
||||
controls
|
||||
preload="auto"
|
||||
width="auto" height="360"
|
||||
poster="_VUID_.jpg"
|
||||
>
|
||||
<source src="_VUID_.mp4" type="video/mp4" />
|
||||
<p class="vjs-no-js">
|
||||
Activer JavaScript SVP
|
||||
</p>
|
||||
</video>
|
||||
</div>
|
||||
</center>
|
||||
|
||||
<article>
|
||||
<h1 class="video-title">
|
||||
_TITLE_
|
||||
</h1>
|
||||
</article>
|
||||
|
||||
<div id="videosChan"><div class="wrapper"></div></div>
|
||||
|
||||
<center>
|
||||
<h6>
|
||||
<a href="https://crowdbunker.com/v/_VUID_" target="bunker"> _\/_ </a> powered by <a href="https://astroport.com"><span>"</span>Astroport<span>"</span></a>
|
||||
</h6>
|
||||
</center>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
$ ( '#vbunk' ).idowsvideowall ( {
|
||||
_CAROUSSELJSON_
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$.getJSON('_IPNSL_/history._CHANNEL_.json', function (json) {
|
||||
// _IPNSL_ is showing the latest, could be relative to show the actual chain.
|
||||
$('#videosChan').pagination({
|
||||
dataSource: json.Videos,
|
||||
pageSize: 1,
|
||||
callback: function(data, pagination) {
|
||||
var wrapper = $('#videosChan .wrapper').empty();
|
||||
$.each(data, function (i, f) {
|
||||
$('#videosChan .wrapper').append('<ul><li><div class="snippet-block">' + f.link + '</div></li></ul>');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- Matomo Tag Manager -->
|
||||
<script>
|
||||
var _mtm = window._mtm = window._mtm || [];
|
||||
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src='https://piwik.p2p.legal/js/container_XDhfGZPj.js'; s.parentNode.insertBefore(g,s);
|
||||
</script>
|
||||
<!-- End Matomo Tag Manager -->
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>JQuery HTML5 QR Code Scanner using Instascan JS Example - ItSolutionStuff.com</title>
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
|
||||
<script src="js/instascan.min.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<h1>JQuery HTML5 QR Code Scanner using Instascan JS Example - ItSolutionStuff.com</h1>
|
||||
|
||||
<h2>Receiver : echo -e 'HTTP/1.1 200 OK\r\n' | nc -l -p 1234 -q 1 | grep '^GET' | cut -d' ' -f2</h2>
|
||||
|
||||
|
||||
<video id="preview"></video>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
|
||||
|
||||
scanner.addListener('scan', function (content) {
|
||||
|
||||
$.ajax({
|
||||
url: "http://127.0.0.1:1234",
|
||||
data: "qrcode="+content,
|
||||
type: 'GET'
|
||||
});
|
||||
|
||||
alert(content);
|
||||
|
||||
});
|
||||
|
||||
Instascan.Camera.getCameras().then(function (cameras) {
|
||||
|
||||
if (cameras.length > 0) {
|
||||
|
||||
scanner.start(cameras[0]);
|
||||
|
||||
} else {
|
||||
|
||||
console.error('No cameras found.');
|
||||
|
||||
}
|
||||
|
||||
}).catch(function (e) {
|
||||
|
||||
console.error(e);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,524 @@
|
|||
/*
|
||||
* Plugin class
|
||||
*/
|
||||
var jQCloud = function(element, word_array, options) {
|
||||
this.$element = $(element);
|
||||
|
||||
this.word_array = word_array || [];
|
||||
this.options = options;
|
||||
|
||||
this.sizeGenerator = null;
|
||||
this.colorGenerator = null;
|
||||
|
||||
// Data used internally
|
||||
this.data = {
|
||||
placed_words: [],
|
||||
timeouts: {},
|
||||
namespace: null,
|
||||
step: null,
|
||||
angle: null,
|
||||
aspect_ratio: null,
|
||||
max_weight: null,
|
||||
min_weight: null,
|
||||
sizes: [],
|
||||
colors: []
|
||||
};
|
||||
|
||||
this.initialize();
|
||||
};
|
||||
|
||||
jQCloud.DEFAULTS = {
|
||||
width: 100,
|
||||
height: 100,
|
||||
center: { x: 0.5, y: 0.5 },
|
||||
steps: 10,
|
||||
delay: null,
|
||||
shape: 'elliptic',
|
||||
classPattern: 'w{n}',
|
||||
encodeURI: true,
|
||||
removeOverflowing: true,
|
||||
afterCloudRender: null,
|
||||
autoResize: false,
|
||||
colors: null,
|
||||
fontSize: null,
|
||||
template: null
|
||||
};
|
||||
|
||||
jQCloud.prototype = {
|
||||
initialize: function() {
|
||||
// Set/Get dimensions
|
||||
if (this.options.width) {
|
||||
this.$element.width(this.options.width);
|
||||
}
|
||||
else {
|
||||
this.options.width = this.$element.width();
|
||||
}
|
||||
if (this.options.height) {
|
||||
this.$element.height(this.options.height);
|
||||
}
|
||||
else {
|
||||
this.options.height = this.$element.height();
|
||||
}
|
||||
|
||||
// Default options value
|
||||
this.options = $.extend(true, {}, jQCloud.DEFAULTS, this.options);
|
||||
|
||||
// Ensure delay
|
||||
if (this.options.delay === null) {
|
||||
this.options.delay = this.word_array.length > 50 ? 10 : 0;
|
||||
}
|
||||
|
||||
// Backward compatibility
|
||||
if (this.options.center.x > 1) {
|
||||
this.options.center.x = this.options.center.x / this.options.width;
|
||||
this.options.center.y = this.options.center.y / this.options.height;
|
||||
}
|
||||
|
||||
// Create colorGenerator function from options
|
||||
// Direct function
|
||||
if (typeof this.options.colors == 'function') {
|
||||
this.colorGenerator = this.options.colors;
|
||||
}
|
||||
// Array of sizes
|
||||
else if ($.isArray(this.options.colors)) {
|
||||
var cl = this.options.colors.length;
|
||||
if (cl > 0) {
|
||||
// Fill the sizes array to X items
|
||||
if (cl < this.options.steps) {
|
||||
for (var i = cl; i < this.options.steps; i++) {
|
||||
this.options.colors[i] = this.options.colors[cl - 1];
|
||||
}
|
||||
}
|
||||
|
||||
this.colorGenerator = function(weight) {
|
||||
return this.options.colors[this.options.steps - weight];
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Create sizeGenerator function from options
|
||||
// Direct function
|
||||
if (typeof this.options.fontSize == 'function') {
|
||||
this.sizeGenerator = this.options.fontSize;
|
||||
}
|
||||
// Object with 'from' and 'to'
|
||||
else if ($.isPlainObject(this.options.fontSize)) {
|
||||
this.sizeGenerator = function(width, height, weight) {
|
||||
var max = width * this.options.fontSize.from,
|
||||
min = width * this.options.fontSize.to;
|
||||
return Math.round(min + (max - min) * 1.0 / (this.options.steps - 1) * (weight - 1)) + 'px';
|
||||
};
|
||||
}
|
||||
// Array of sizes
|
||||
else if ($.isArray(this.options.fontSize)) {
|
||||
var sl = this.options.fontSize.length;
|
||||
if (sl > 0) {
|
||||
// Fill the sizes array to X items
|
||||
if (sl < this.options.steps) {
|
||||
for (var j = sl; j < this.options.steps; j++) {
|
||||
this.options.fontSize[j] = this.options.fontSize[sl - 1];
|
||||
}
|
||||
}
|
||||
|
||||
this.sizeGenerator = function(width, height, weight) {
|
||||
return this.options.fontSize[this.options.steps - weight];
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
this.data.angle = Math.random() * 6.28;
|
||||
this.data.step = (this.options.shape === 'rectangular') ? 18.0 : 2.0;
|
||||
this.data.aspect_ratio = this.options.width / this.options.height;
|
||||
this.clearTimeouts();
|
||||
|
||||
// Namespace word ids to avoid collisions between multiple clouds
|
||||
this.data.namespace = (this.$element.attr('id') || Math.floor((Math.random() * 1000000)).toString(36)) + '_word_';
|
||||
|
||||
this.$element.addClass('jqcloud');
|
||||
|
||||
// Container's CSS position cannot be 'static'
|
||||
if (this.$element.css('position') === 'static') {
|
||||
this.$element.css('position', 'relative');
|
||||
}
|
||||
|
||||
// Delay execution so that the browser can render the page before the computatively intensive word cloud drawing
|
||||
this.createTimeout($.proxy(this.drawWordCloud, this), 10);
|
||||
|
||||
// Attach window resize event
|
||||
if (this.options.autoResize) {
|
||||
$(window).on('resize.' + this.data.namespace, throttle(this.resize, 50, this));
|
||||
}
|
||||
},
|
||||
|
||||
// Helper function to keep track of timeouts so they can be destroyed
|
||||
createTimeout: function(callback, time) {
|
||||
var timeout = setTimeout($.proxy(function() {
|
||||
delete this.data.timeouts[timeout];
|
||||
callback();
|
||||
}, this), time);
|
||||
this.data.timeouts[timeout] = true;
|
||||
},
|
||||
|
||||
// Destroy all timeouts
|
||||
clearTimeouts: function() {
|
||||
$.each(this.data.timeouts, function(key) {
|
||||
clearTimeout(key);
|
||||
});
|
||||
this.data.timeouts = {};
|
||||
},
|
||||
|
||||
// Pairwise overlap detection
|
||||
overlapping: function(a, b) {
|
||||
if (Math.abs(2.0 * a.left + a.width - 2.0 * b.left - b.width) < a.width + b.width) {
|
||||
if (Math.abs(2.0 * a.top + a.height - 2.0 * b.top - b.height) < a.height + b.height) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// Helper function to test if an element overlaps others
|
||||
hitTest: function(elem) {
|
||||
// Check elements for overlap one by one, stop and return false as soon as an overlap is found
|
||||
for (var i = 0, l = this.data.placed_words.length; i < l; i++) {
|
||||
if (this.overlapping(elem, this.data.placed_words[i])) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// Initialize the drawing of the whole cloud
|
||||
drawWordCloud: function() {
|
||||
var i, l;
|
||||
|
||||
this.$element.children('[id^="' + this.data.namespace + '"]').remove();
|
||||
|
||||
if (this.word_array.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Make sure every weight is a number before sorting
|
||||
for (i = 0, l = this.word_array.length; i < l; i++) {
|
||||
this.word_array[i].weight = parseFloat(this.word_array[i].weight, 10);
|
||||
}
|
||||
|
||||
// Sort word_array from the word with the highest weight to the one with the lowest
|
||||
this.word_array.sort(function(a, b) {
|
||||
return b.weight - a.weight;
|
||||
});
|
||||
|
||||
// Kepp trace of bounds
|
||||
this.data.max_weight = this.word_array[0].weight;
|
||||
this.data.min_weight = this.word_array[this.word_array.length - 1].weight;
|
||||
|
||||
// Generate colors
|
||||
this.data.colors = [];
|
||||
if (this.colorGenerator) {
|
||||
for (i = 0; i < this.options.steps; i++) {
|
||||
this.data.colors.push(this.colorGenerator(i + 1));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate font sizes
|
||||
this.data.sizes = [];
|
||||
if (this.sizeGenerator) {
|
||||
for (i = 0; i < this.options.steps; i++) {
|
||||
this.data.sizes.push(this.sizeGenerator(this.options.width, this.options.height, i + 1));
|
||||
}
|
||||
}
|
||||
|
||||
// Iterate drawOneWord on every word, immediately or with delay
|
||||
if (this.options.delay > 0) {
|
||||
this.drawOneWordDelayed();
|
||||
}
|
||||
else {
|
||||
for (i = 0, l = this.word_array.length; i < l; i++) {
|
||||
this.drawOneWord(i, this.word_array[i]);
|
||||
}
|
||||
|
||||
if (typeof this.options.afterCloudRender === 'function') {
|
||||
this.options.afterCloudRender.call(this.$element);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Function to draw a word, by moving it in spiral until it finds a suitable empty place
|
||||
drawOneWord: function(index, word) {
|
||||
var word_id = this.data.namespace + index,
|
||||
word_selector = '#' + word_id,
|
||||
|
||||
// option.shape == 'elliptic'
|
||||
angle = this.data.angle,
|
||||
radius = 0.0,
|
||||
|
||||
// option.shape == 'rectangular'
|
||||
steps_in_direction = 0.0,
|
||||
quarter_turns = 0.0,
|
||||
|
||||
weight = Math.floor(this.options.steps / 2),
|
||||
word_span,
|
||||
word_size,
|
||||
word_style;
|
||||
|
||||
// Create word attr object
|
||||
word.attr = $.extend({}, word.html, { id: word_id });
|
||||
|
||||
// Linearly map the original weight to a discrete scale from 1 to 10
|
||||
// Only if weights are different
|
||||
if (this.data.max_weight != this.data.min_weight) {
|
||||
weight = Math.round((word.weight - this.data.min_weight) * 1.0 * (this.options.steps - 1) / (this.data.max_weight - this.data.min_weight)) + 1;
|
||||
}
|
||||
word_span = $('<span>').attr(word.attr);
|
||||
|
||||
word_span.addClass('jqcloud-word');
|
||||
|
||||
// Apply class
|
||||
if (this.options.classPattern) {
|
||||
word_span.addClass(this.options.classPattern.replace('{n}', weight));
|
||||
}
|
||||
|
||||
// Apply color
|
||||
if (this.data.colors.length) {
|
||||
word_span.css('color', this.data.colors[weight - 1]);
|
||||
}
|
||||
|
||||
// Apply color from word property
|
||||
if (word.color) {
|
||||
word_span.css('color', word.color);
|
||||
}
|
||||
|
||||
// Apply size
|
||||
if (this.data.sizes.length) {
|
||||
word_span.css('font-size', this.data.sizes[weight - 1]);
|
||||
}
|
||||
|
||||
//Render using template function if provided.
|
||||
if (this.options.template) {
|
||||
word_span.html(this.options.template(word));
|
||||
} else if (word.link) {
|
||||
// Append link if word.link attribute was set
|
||||
// If link is a string, then use it as the link href
|
||||
if (typeof word.link === 'string') {
|
||||
word.link = { href: word.link };
|
||||
}
|
||||
|
||||
if (this.options.encodeURI) {
|
||||
word.link.href = encodeURI(word.link.href).replace(/'/g, '%27');
|
||||
}
|
||||
|
||||
word_span.append($('<a>').attr(word.link).text(word.text));
|
||||
}
|
||||
else {
|
||||
word_span.text(word.text);
|
||||
}
|
||||
|
||||
// Bind handlers to words
|
||||
if (word.handlers) {
|
||||
word_span.on(word.handlers);
|
||||
}
|
||||
|
||||
this.$element.append(word_span);
|
||||
|
||||
word_size = {
|
||||
width: word_span.outerWidth(),
|
||||
height: word_span.outerHeight()
|
||||
};
|
||||
word_size.left = this.options.center.x * this.options.width - word_size.width / 2.0;
|
||||
word_size.top = this.options.center.y * this.options.height - word_size.height / 2.0;
|
||||
|
||||
// Save a reference to the style property, for better performance
|
||||
word_style = word_span[0].style;
|
||||
word_style.position = 'absolute';
|
||||
word_style.left = word_size.left + 'px';
|
||||
word_style.top = word_size.top + 'px';
|
||||
|
||||
while (this.hitTest(word_size)) {
|
||||
// option shape is 'rectangular' so move the word in a rectangular spiral
|
||||
if (this.options.shape === 'rectangular') {
|
||||
steps_in_direction++;
|
||||
|
||||
if (steps_in_direction * this.data.step > (1 + Math.floor(quarter_turns / 2.0)) * this.data.step * ((quarter_turns % 4 % 2) === 0 ? 1 : this.data.aspect_ratio)) {
|
||||
steps_in_direction = 0.0;
|
||||
quarter_turns++;
|
||||
}
|
||||
|
||||
switch (quarter_turns % 4) {
|
||||
case 1:
|
||||
word_size.left += this.data.step * this.data.aspect_ratio + Math.random() * 2.0;
|
||||
break;
|
||||
case 2:
|
||||
word_size.top -= this.data.step + Math.random() * 2.0;
|
||||
break;
|
||||
case 3:
|
||||
word_size.left -= this.data.step * this.data.aspect_ratio + Math.random() * 2.0;
|
||||
break;
|
||||
case 0:
|
||||
word_size.top += this.data.step + Math.random() * 2.0;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Default settings: elliptic spiral shape
|
||||
else {
|
||||
radius += this.data.step;
|
||||
angle += (index % 2 === 0 ? 1 : -1) * this.data.step;
|
||||
|
||||
word_size.left = this.options.center.x * this.options.width - (word_size.width / 2.0) + (radius * Math.cos(angle)) * this.data.aspect_ratio;
|
||||
word_size.top = this.options.center.y * this.options.height + radius * Math.sin(angle) - (word_size.height / 2.0);
|
||||
}
|
||||
word_style.left = word_size.left + 'px';
|
||||
word_style.top = word_size.top + 'px';
|
||||
}
|
||||
|
||||
// Don't render word if part of it would be outside the container
|
||||
if (this.options.removeOverflowing && (
|
||||
word_size.left < 0 || word_size.top < 0 ||
|
||||
(word_size.left + word_size.width) > this.options.width ||
|
||||
(word_size.top + word_size.height) > this.options.height
|
||||
)
|
||||
) {
|
||||
word_span.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
// Save position for further usage
|
||||
this.data.placed_words.push(word_size);
|
||||
|
||||
if (typeof word.afterWordRender === 'function') {
|
||||
word.afterWordRender.call(word_span);
|
||||
}
|
||||
},
|
||||
|
||||
// Draw one word then recall the function after a delay
|
||||
drawOneWordDelayed: function(index) {
|
||||
index = index || 0;
|
||||
|
||||
// if not visible then do not attempt to draw
|
||||
if (!this.$element.is(':visible')) {
|
||||
this.createTimeout($.proxy(function() {
|
||||
this.drawOneWordDelayed(index);
|
||||
}, this), 10);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (index < this.word_array.length) {
|
||||
this.drawOneWord(index, this.word_array[index]);
|
||||
|
||||
this.createTimeout($.proxy(function() {
|
||||
this.drawOneWordDelayed(index + 1);
|
||||
}, this), this.options.delay);
|
||||
}
|
||||
else {
|
||||
if (typeof this.options.afterCloudRender == 'function') {
|
||||
this.options.afterCloudRender.call(this.$element);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Destroy any data and objects added by the plugin
|
||||
destroy: function() {
|
||||
if (this.options.autoResize) {
|
||||
$(window).off('resize.' + this.data.namespace);
|
||||
}
|
||||
|
||||
this.clearTimeouts();
|
||||
this.$element.removeClass('jqcloud');
|
||||
this.$element.removeData('jqcloud');
|
||||
this.$element.children('[id^="' + this.data.namespace + '"]').remove();
|
||||
},
|
||||
|
||||
// Update the list of words
|
||||
update: function(word_array) {
|
||||
this.word_array = word_array;
|
||||
this.data.placed_words = [];
|
||||
|
||||
this.clearTimeouts();
|
||||
this.drawWordCloud();
|
||||
},
|
||||
|
||||
resize: function() {
|
||||
var new_size = {
|
||||
width: this.$element.width(),
|
||||
height: this.$element.height()
|
||||
};
|
||||
|
||||
if (new_size.width != this.options.width || new_size.height != this.options.height) {
|
||||
this.options.width = new_size.width;
|
||||
this.options.height = new_size.height;
|
||||
this.data.aspect_ratio = this.options.width / this.options.height;
|
||||
|
||||
this.update(this.word_array);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
/*
|
||||
* Apply throttling to a callback
|
||||
* @param callback {function}
|
||||
* @param delay {int} milliseconds
|
||||
* @param context {object|null}
|
||||
* @return {function}
|
||||
*/
|
||||
function throttle(callback, delay, context) {
|
||||
var state = {
|
||||
pid: null,
|
||||
last: 0
|
||||
};
|
||||
|
||||
return function() {
|
||||
var elapsed = new Date().getTime() - state.last,
|
||||
args = arguments,
|
||||
that = this;
|
||||
|
||||
function exec() {
|
||||
state.last = new Date().getTime();
|
||||
return callback.apply(context || that, Array.prototype.slice.call(args));
|
||||
}
|
||||
|
||||
if (elapsed > delay) {
|
||||
return exec();
|
||||
}
|
||||
else {
|
||||
clearTimeout(state.pid);
|
||||
state.pid = setTimeout(exec, delay - elapsed);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/*
|
||||
* jQuery plugin
|
||||
*/
|
||||
$.fn.jQCloud = function(word_array, option) {
|
||||
var args = arguments;
|
||||
|
||||
return this.each(function() {
|
||||
var $this = $(this),
|
||||
data = $this.data('jqcloud');
|
||||
|
||||
if (!data && word_array === 'destroy') {
|
||||
// Don't even try to initialize when called with 'destroy'
|
||||
return;
|
||||
}
|
||||
if (!data) {
|
||||
var options = typeof option === 'object' ? option : {};
|
||||
$this.data('jqcloud', (data = new jQCloud(this, word_array, options)));
|
||||
}
|
||||
else if (typeof word_array === 'string') {
|
||||
data[word_array].apply(data, Array.prototype.slice.call(args, 1));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.jQCloud.defaults = {
|
||||
set: function(options) {
|
||||
$.extend(true, jQCloud.DEFAULTS, options);
|
||||
},
|
||||
get: function(key) {
|
||||
var options = jQCloud.DEFAULTS;
|
||||
if (key) {
|
||||
options = options[key];
|
||||
}
|
||||
return $.extend(true, {}, options);
|
||||
}
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,264 @@
|
|||
/**
|
||||
* Tag cloud plugin for jQuery, showing bigger tags in the center
|
||||
* @version 1.2.0
|
||||
* @release 2021-04-07
|
||||
* @repository https://github.com/peterthoeny/jquery.tagcloud
|
||||
* @author Peter Thoeny, https://twiki.org/ & https://github.com/peterthoeny
|
||||
* @copyright 2021 Peter Thoeny, https://github.com/peterthoeny
|
||||
* @license MIT, https://opensource.org/licenses/mit-license
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
let debug = false;
|
||||
|
||||
function debugLog(msg) {
|
||||
if(debug) {
|
||||
console.log('- tagCloud: ' + msg);
|
||||
}
|
||||
}
|
||||
|
||||
function entityEncode(val) {
|
||||
val = val.toString()
|
||||
.replace(/&/g, '&')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
return val;
|
||||
}
|
||||
|
||||
$.fn.tagCloud = function(options) {
|
||||
let self = $(this);
|
||||
let addLink = options && options.tag && options.tag.format ? false : true;
|
||||
options = $.extend({}, $.fn.tagCloud.defaults, options);
|
||||
if(options.debug != undefined) {
|
||||
debug = options.debug;
|
||||
}
|
||||
debugLog('options: ' + JSON.stringify(options, null, ''));
|
||||
let tagName = self.prop('tagName');
|
||||
if(tagName === 'UL') {
|
||||
if(!options.data) {
|
||||
options.data = [];
|
||||
}
|
||||
self.find('li').each(function(idx, elem) {
|
||||
let weight = $(elem).data('weight');
|
||||
if(weight == undefined) {
|
||||
weight = $(elem).find(':first-child').data('weight');
|
||||
}
|
||||
let href = $(elem).find('a').attr('href') || '';
|
||||
let tag = $(elem).text() || '?';
|
||||
debugLog(weight +', '+href+', '+tag+', '+$(elem).html());
|
||||
if(options.data[idx]) {
|
||||
if(weight != undefined) {
|
||||
options.data[idx].weight = Number(weight);
|
||||
}
|
||||
if(href) {
|
||||
options.data[idx].link = href;
|
||||
}
|
||||
options.data[idx].name = tag;
|
||||
} else {
|
||||
options.data.push({ name: tag, link: href, weight: Number(weight) })
|
||||
}
|
||||
});
|
||||
self.hide();
|
||||
if(self.next().hasClass('jqTcContainer')) {
|
||||
self.next().remove();
|
||||
}
|
||||
self.after('<div></div>');
|
||||
self = self.next();
|
||||
}
|
||||
let css = {};
|
||||
Object.keys(options.container).forEach(function(key) {
|
||||
css[key] = (options[key] != undefined) ? options[key] : options.container[key];
|
||||
});
|
||||
self.addClass('jqTcContainer').css(css);
|
||||
let containerWidth = options.container.width;
|
||||
let minWeight = 1000000000000;
|
||||
let maxWeight = -1000000000000;
|
||||
let minFontSize = options.tag.minFontSize || $.fn.tagCloud.defaults.tag.minFontSize;
|
||||
let maxFontSize = options.tag.maxFontSize || $.fn.tagCloud.defaults.tag.maxFontSize;
|
||||
let format = options.tag.format || $.fn.tagCloud.defaults.tag.format;
|
||||
let sum = 0;
|
||||
debugLog('minFontSize: '+minFontSize+', maxFontSize: '+maxFontSize);
|
||||
options.data.forEach(function(item) {
|
||||
if(item.weight < minWeight) {
|
||||
minWeight = item.weight;
|
||||
}
|
||||
if(item.weight > maxWeight) {
|
||||
maxWeight = item.weight;
|
||||
}
|
||||
sum += item.weight;
|
||||
});
|
||||
let a = (maxFontSize - minFontSize) / (maxWeight - minWeight);
|
||||
let b = minFontSize - (minWeight * a);
|
||||
debugLog('minWeight: '+minWeight+', maxWeight: '+maxWeight+', a: '+a+', b: '+b);
|
||||
let tags = options.data.sort(function(a, b) {
|
||||
if(a.weight > b.weight) {
|
||||
return -1;
|
||||
} else if(a.weight < b.weight) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}).map(function(item, idx) {
|
||||
let html = format
|
||||
.replace(/\{tag\.name\}/g, item.name)
|
||||
.replace(/\{tag\.link\}/g, item.link)
|
||||
.replace(/\{tag\.weight(?:\.(\d))?\}/g, function(m, c1) {
|
||||
let num = item.weight;
|
||||
if(c1) {
|
||||
let factor = 10 ** parseInt(c1);
|
||||
num = Math.round(num * factor) / factor;
|
||||
}
|
||||
return num.toString();
|
||||
})
|
||||
.replace(/\{tag\.percent(?:\.(\d))?\}/g, function(m, c1) {
|
||||
let num = 100 * item.weight / sum;
|
||||
let factor = 1;
|
||||
if(c1) {
|
||||
factor = 10 ** parseInt(c1);
|
||||
}
|
||||
num = Math.round(num * factor) / factor;
|
||||
return num.toString() + '%';
|
||||
});
|
||||
if(addLink && item.link) {
|
||||
html = '<a href="' + item.link + '" target="_blank">' + html + '</a>';
|
||||
}
|
||||
let size = parseInt((a * item.weight + b) * 10, 10) / 10;
|
||||
let attrs = [
|
||||
'class="jqTcTag"',
|
||||
'data-name="' + entityEncode(item.name) + '"',
|
||||
'data-link="' + entityEncode(item.link || '') + '"',
|
||||
'data-weight="' + item.weight + '"',
|
||||
'data-size="' + size + '"'
|
||||
];
|
||||
let style = 'style="font-size: ' + size + 'px;';
|
||||
let bgColor = item.bgColor || item.backgroundColor || options.tag.backgroundColor ||
|
||||
$.fn.tagCloud.defaults.backgroundColors[idx] || $.fn.tagCloud.defaults.defaultTagBackgroundColor;
|
||||
if(bgColor) {
|
||||
style += ' background-color: ' + bgColor + ';';
|
||||
}
|
||||
let color = item.color || options.tag.color || $.fn.tagCloud.defaults.defaultTagColor;
|
||||
if(color != 'auto') {
|
||||
style += ' color: ' + color + ';';
|
||||
}
|
||||
bgColor
|
||||
.replace(/^#(.)(.)(.)$/, '#$1$1$2$2$3$3')
|
||||
.replace(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/i, function(m, c1, c2, c3) {
|
||||
let brightness = Math.round((
|
||||
(Number('0x' + c1) * 299) +
|
||||
(Number('0x' + c2) * 587) +
|
||||
(Number('0x' + c3) * 114)
|
||||
) / 1000);
|
||||
if(brightness > 125) {
|
||||
if(color === 'auto') {
|
||||
style += ' color: black;';
|
||||
}
|
||||
if(options.tag.textShadow) {
|
||||
style += ' text-shadow: 0px 0px 2px #dddddd;';
|
||||
}
|
||||
} else {
|
||||
if(color === 'auto') {
|
||||
style += ' color: white;';
|
||||
}
|
||||
if(options.tag.textShadow) {
|
||||
style += ' text-shadow: 0px 0px 2px #222222;';
|
||||
}
|
||||
}
|
||||
});
|
||||
style += '"';
|
||||
attrs.push(style);
|
||||
if(item.tooltip) {
|
||||
attrs.push('title="' + entityEncode(item.tooltip) + '"');
|
||||
}
|
||||
html = '<span ' + attrs.join(' ') + '>' + html + '</span>';
|
||||
self.html(html); // set temporarily to get width and height
|
||||
let tagElem = self.find('span');
|
||||
item.width = tagElem.outerWidth();
|
||||
item.height = tagElem.outerHeight();
|
||||
item.html = html;
|
||||
item.ttLength = tagElem.length;
|
||||
item.ttHtml = self.text();
|
||||
return item;
|
||||
});
|
||||
debugLog('tags: ' + JSON.stringify(tags, null, ' '))
|
||||
let rows = [];
|
||||
let cells = [];
|
||||
let width = 0;
|
||||
let addRight = true;
|
||||
let addBottom = true;
|
||||
let padding = 2 * 5 + 5;
|
||||
let containerPadding = padding;
|
||||
let tagMargin = 2 * 10 + 5;
|
||||
let verticalAlign = 'middle';
|
||||
tags.forEach(function(item) {
|
||||
if(width + item.width + tagMargin >= containerWidth - containerPadding) {
|
||||
let rowHtml = '<tr><td style="vertical-align: ' + verticalAlign + ';">' + cells.join('') + '</td></tr>';
|
||||
if(addBottom) {
|
||||
rows.push(rowHtml);
|
||||
verticalAlign = 'bottom';
|
||||
} else {
|
||||
rows.unshift(rowHtml);
|
||||
verticalAlign = 'top';
|
||||
}
|
||||
addBottom = !addBottom;
|
||||
containerPadding += 1.5 * padding;
|
||||
cells = [];
|
||||
width = 0;
|
||||
}
|
||||
if(addRight) {
|
||||
cells.push(item.html);
|
||||
} else {
|
||||
cells.unshift(item.html);
|
||||
}
|
||||
addRight = !addRight;
|
||||
width = width + item.width + tagMargin;
|
||||
});
|
||||
let rowHtml = '<tr><td style="vertical-align: ' + verticalAlign + ';">' + cells.join('') + '</td></tr>';
|
||||
if(addBottom) {
|
||||
rows.push(rowHtml);
|
||||
} else {
|
||||
rows.unshift(rowHtml);
|
||||
}
|
||||
let html = '<table class="jqTcTable">' + rows.join('') + '</table>';
|
||||
let tagStyle = {};
|
||||
Object.keys(options.tag).forEach(key => {
|
||||
if(!/^(minFontSize|maxFontSize|format|color|textShadow|backgroundColor)$/.test(key)) {
|
||||
tagStyle[key] = options.tag[key];
|
||||
}
|
||||
});
|
||||
self.html(html).find('.jqTcTag').css(tagStyle);
|
||||
};
|
||||
|
||||
$.fn.tagCloud.defaults = {
|
||||
container: {
|
||||
width: 500,
|
||||
height: 'auto',
|
||||
backgroundColor: '#f0f0f0',
|
||||
color: '#666666',
|
||||
padding: '10px 5px',
|
||||
fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif'
|
||||
},
|
||||
tag: {
|
||||
minFontSize: 10, // min font size in pixels
|
||||
maxFontSize: 40, // max font size in pixels
|
||||
format: '{tag.name}', // also '{tag.link}', '{tag.weight}', '{tag.percent}'
|
||||
color: 'auto', // auto text color, black for light background, white for dark background
|
||||
textShadow: false // text shadow, enable for better visibility
|
||||
},
|
||||
backgroundColors: [
|
||||
'#db843d', '#92a8cd', '#a47d7c', '#058dc7', '#50b432', '#ed561b', '#24cbe5', '#64e572',
|
||||
'#ff9655', '#d6cb54', '#6af9c4', '#b5ca92', '#2f7ed8', '#5c40de', '#8bbc21', '#910000',
|
||||
'#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a', '#db843d', '#92a8cd',
|
||||
'#a47d7c', '#058dc7', '#50b432', '#ed561b', '#24cbe5', '#64e572', '#ff9655', '#d6cb54',
|
||||
'#6af9c4', '#b5ca92', '#2f7ed8', '#5c40de', '#8bbc21', '#910000', '#1aadce', '#492970',
|
||||
'#f28f43', '#77a1e5', '#c42525', '#a6c96a', '#db843d', '#92a8cd', '#a47d7c', '#058dc7',
|
||||
'#50b432', '#ed561b', '#24cbe5', '#64e572', '#ff9655', '#d6cb54', '#6af9c4', '#b5ca92',
|
||||
'#2f7ed8', '#5c40de', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5'
|
||||
],
|
||||
defaultTagColor: 'auto', // black or white, based on background color
|
||||
defaultTagBackgroundColor: '#ff9655' // default background color
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,45 @@
|
|||
$jqcloud-font: 10px "Helvetica", "Arial", sans-serif;
|
||||
|
||||
$jqcloud-link-hover-color: #00ccff;
|
||||
|
||||
$jqcloud-words: (
|
||||
w1: (100%, #aab5f0),
|
||||
w2: (150%, #99ccee),
|
||||
w3: (200%, #a0ddff),
|
||||
w4: (250%, #90c5f0),
|
||||
w5: (300%, #90a0dd),
|
||||
w6: (350%, #90c5f0),
|
||||
w7: (400%, #3399dd),
|
||||
w8: (450%, #00ccff),
|
||||
w9: (500%, #00ccff),
|
||||
w10: (550%, #00ccff)
|
||||
) !default;
|
||||
|
||||
.jqcloud {
|
||||
font: $jqcloud-font;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.jqcloud-word {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@each $word, $config in $jqcloud-words {
|
||||
&.#{$word} {
|
||||
color: nth($config, 2);
|
||||
font-size: nth($config, 1);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $jqcloud-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
/**
|
||||
* Tag cloud plugin for jQuery, showing bigger tags in the center
|
||||
* @version 1.2.0
|
||||
* @release 2021-04-07
|
||||
* @repository https://github.com/peterthoeny/jquery.tagcloud
|
||||
* @author Peter Thoeny, https://twiki.org/ & https://github.com/peterthoeny
|
||||
* @copyright 2021 Peter Thoeny, https://github.com/peterthoeny
|
||||
* @license MIT, https://opensource.org/licenses/mit-license
|
||||
*/
|
||||
|
||||
.jqTcContainer {
|
||||
}
|
||||
.jqTcContainer table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
.jqTcContainer td {
|
||||
padding: 0;
|
||||
border: 0 none;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.jqTcTag {
|
||||
display: inline-block;
|
||||
margin: 3px 7px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.jqTcTag:hover {
|
||||
box-shadow: 0 0 5px 1px #aaa;
|
||||
}
|
||||
.jqTcTag a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.jqTcTag a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* EOF */
|
||||
|
|
@ -0,0 +1,593 @@
|
|||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.video-wall-container {
|
||||
background: #1C2331 none repeat scroll 0 0;
|
||||
color: #fff;
|
||||
/* font-size: 50px; */
|
||||
font-family: 'Roboto', sans-serif;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.slides-container {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wall-slide {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
background-position: center center !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.mode-thumb {
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mode-playlist,
|
||||
.mode-carousel {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#my-video,
|
||||
#my-video-2,
|
||||
#my-video-3 {
|
||||
margin: 10px auto 0;
|
||||
}
|
||||
|
||||
.play-wrapper,
|
||||
.play-wrapper-thumbnail,
|
||||
.play-wrapper-playlist {
|
||||
background-color: rgba(115, 133, 159, 0.5);
|
||||
text-align: center;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 10px;
|
||||
font-size: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.play-wrapper-playlist {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.play-wrapper {
|
||||
position: absolute;
|
||||
left: 39%;
|
||||
top: -100px;
|
||||
transition: 0.5s;
|
||||
right: 39%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.wall-slide:hover .play-wrapper {
|
||||
top: 43%;
|
||||
}
|
||||
|
||||
.play-wrapper-thumbnail {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: -1000px;
|
||||
transition: 0.5s;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.video-thumb:hover .play-wrapper-thumbnail {
|
||||
left: 37%;
|
||||
}
|
||||
|
||||
.play-wrapper:hover,
|
||||
.play-wrapper-thumbnail:hover,
|
||||
.play-wrapper-plylist:hover {
|
||||
background-color: #0000008f;
|
||||
}
|
||||
|
||||
i.play-control {
|
||||
color: #fff;
|
||||
/* vertical-align: middle;
|
||||
top: 20%;
|
||||
position: relative; */
|
||||
}
|
||||
|
||||
.wall-bar {
|
||||
background-color: #444b5a;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/* height: 32px; */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wall-bar i.fa {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
a.fa-chevron-circle-left {
|
||||
left: 0;
|
||||
top: 43%;
|
||||
border-top-right-radius: 5px !important;
|
||||
border-bottom-right-radius: 5px !important;
|
||||
}
|
||||
|
||||
a.fa-chevron-circle-right {
|
||||
right: 0px;
|
||||
top: 43%;
|
||||
border-top-left-radius: 5px !important;
|
||||
border-bottom-left-radius: 5px !important;
|
||||
}
|
||||
|
||||
a.fa-chevron-circle-right,
|
||||
a.fa-chevron-circle-left {
|
||||
color: #049cdb;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
width: 47px;
|
||||
background-color: rgba(255, 255, 255, .15);
|
||||
font-size: 4em !important;
|
||||
}
|
||||
|
||||
a.fa-chevron-circle-right:hover,
|
||||
a.fa-chevron-circle-left:hover {
|
||||
text-decoration: none !important;
|
||||
color: #428bca !important;
|
||||
background-color: #eee;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.video-title {
|
||||
font-size: 2em;
|
||||
display: inline-block;
|
||||
background: #1b2230;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
padding: 0 5px;
|
||||
line-height: 1.3em;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
text-shadow: 0 1px 0 rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
/*thumbview*/
|
||||
|
||||
.video-thumb {
|
||||
width: 33%;
|
||||
height: 18%;
|
||||
max-width: 33%;
|
||||
max-height: 23%;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
opacity: .5;
|
||||
transition: opacity .5s ease-out;
|
||||
-moz-transition: opacity .5s ease-out;
|
||||
-webkit-transition: opacity .5s ease-out;
|
||||
-o-transition: opacity .5s ease-out;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-thumb:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.thumb-title {
|
||||
font-size: 1.2rem;
|
||||
background: rgb(47, 46, 46);
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
position: relative;
|
||||
padding: 0 5px;
|
||||
line-height: 1.3em;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-shadow: 0 1px 0 rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.filter-videos {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
img.img-video-select {
|
||||
margin: 0!important;
|
||||
display: inherit!important;
|
||||
height: 100%;
|
||||
width: 11%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.video-list-thumb>p {
|
||||
font-size: 16px !important;
|
||||
font-weight: bold !important;
|
||||
display: inline-block !important;
|
||||
text-indent: 5px !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-list-thumb>p>small {
|
||||
font-size: 12px !important;
|
||||
display: block !important;
|
||||
text-indent: 5px !important;
|
||||
}
|
||||
|
||||
.video-list-thumb {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-select-thumb>p {
|
||||
font-size: 13px !important;
|
||||
font-weight: bold !important;
|
||||
display: inline-block !important;
|
||||
text-indent: 5px !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select2-container--bootstrap .select2-results>.select2-results__options {
|
||||
max-height: 510px !important;
|
||||
}
|
||||
|
||||
|
||||
/*PLAYLIST SECTION*****/
|
||||
|
||||
.card:not([class*=card-outline-]) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#toast-container>div,
|
||||
.author-box,
|
||||
.badge,
|
||||
.btn,
|
||||
.btn-primary.active:not([disabled]):not(.disabled),
|
||||
.btn-primary:not([disabled]):not(.disabled):active,
|
||||
.card-wrapper .back,
|
||||
.card-wrapper .front,
|
||||
.card.card-cascade.wider .card-body,
|
||||
.card:not([class*=card-outline-]),
|
||||
.chip,
|
||||
.counter,
|
||||
.dropdown-content,
|
||||
.md-pills .nav-link.active,
|
||||
.pagination .active .page-link,
|
||||
.pricing-card .price .version,
|
||||
.section-blog-fw .view,
|
||||
.show>.btn-primary.dropdown-toggle,
|
||||
.social-list,
|
||||
.z-depth-1 {
|
||||
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
|
||||
}
|
||||
|
||||
.card,
|
||||
.card .playlist-body h3,
|
||||
.card .playlist-body h4,
|
||||
.card .card-text {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: .3em;
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #dedede;
|
||||
background-clip: border-box;
|
||||
border: 1px solid rgba(0, 0, 0, .125);
|
||||
width: 48%;
|
||||
max-height: 17%;
|
||||
min-height: 102px;
|
||||
float: left;
|
||||
margin: 1% 1%;
|
||||
transition: 1s;
|
||||
-moz-transition: 1s;
|
||||
-webkit-transition: 1s;
|
||||
-o-transition: 1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
max-height: 54%;
|
||||
}
|
||||
|
||||
.card:hover span.playlist-title {
|
||||
text-shadow: 0px 1px 0px rgb(255, 255, 255);
|
||||
color: #000000;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.playlist-card .playlist-header {
|
||||
height: 31%;
|
||||
border-radius: .3em .3em 0 0;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
min-height: 102px;
|
||||
}
|
||||
|
||||
.playlist-card .avatar {
|
||||
border-radius: 50%;
|
||||
width: 14%;
|
||||
margin: -8% 2% 4%;
|
||||
overflow: hidden;
|
||||
border: 5px solid #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card .card-reveal,
|
||||
.card-wrapper .face,
|
||||
.carousel-thumbnails .carousel-indicators .active,
|
||||
.playlist-card .avatar,
|
||||
.white {
|
||||
background-color: #FFF!important;
|
||||
}
|
||||
|
||||
.playlist-card .playlist-body {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
margin: 6% 0 0 0;
|
||||
position: relative;
|
||||
-ms-flex: 1 1 auto;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.btn .fa {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.playlist-card .avatar img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card img {
|
||||
border-radius: 2px 2px 0 0;
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius: 50%!important;
|
||||
}
|
||||
|
||||
.playlist-header span.playlist-title {
|
||||
font-weight: 500 !important;
|
||||
font-size: 1.3em !important;
|
||||
margin: -6% 16%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-shadow: 0px 1px 0px rgb(0, 0, 0);
|
||||
color: #fff;
|
||||
transition: 1s;
|
||||
display: block;
|
||||
width: 84%;
|
||||
/* border: 1px solid red; */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.playlist-header .controls button {
|
||||
font-size: 1.5em !important;
|
||||
font-weight: 400 !important;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: #ca0000;
|
||||
margin-top: 5px;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
|
||||
padding: 5px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
|
||||
.control .fa {
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
font-size: 1em !important;
|
||||
}
|
||||
|
||||
.playlist-header .controls {
|
||||
font-size: 1em !important;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.divider-new,
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
.card .playlist-body p span {
|
||||
font-weight: normal !important;
|
||||
font-size: 1.2em !important;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.card .playlist-body p .control {
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card .playlist-body .song-list {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
line-height: 5em;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
padding: 0 0 0 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0);
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
opacity: 1;
|
||||
transition: opacity .5s ease-out, padding 2s ease-out;
|
||||
-moz-transition: opacity .5s ease-out, padding 2s ease-out;
|
||||
-webkit-transition: opacity .5s ease-out, padding 2s ease-out;
|
||||
-o-transition: opacity .5s ease-out, padding 2s ease-out;
|
||||
cursor: pointer;
|
||||
background-color: #428bca;
|
||||
transition: 2s;
|
||||
}
|
||||
|
||||
.song-list:hover .control {
|
||||
left: 40%;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.song-list:hover span.songTitle {
|
||||
width: 30%;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
span.songTitle {
|
||||
width: 100%;
|
||||
transition: 2s;
|
||||
text-shadow: 0 1px 0 rgb(0, 0, 0);
|
||||
font-size: 1.5em;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
span.control {
|
||||
display: block;
|
||||
position: absolute;
|
||||
transition: 1s;
|
||||
left: -41%;
|
||||
}
|
||||
|
||||
.badge-pill {
|
||||
padding-right: .6em;
|
||||
padding-left: .6em;
|
||||
border-radius: 10rem
|
||||
}
|
||||
|
||||
.card .playlist-body .song-list:hover {
|
||||
opacity: 1;
|
||||
transition: 1s;
|
||||
border: 1px solid rgb(0, 0, 0);
|
||||
padding: 30px 0px 30px 10px;
|
||||
}
|
||||
|
||||
.play-wrapper-playlist {
|
||||
position: relative;
|
||||
text-align: center !important;
|
||||
padding: 1% 38%;
|
||||
background-color: transparent;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
span.play-wrapper-playlist:hover {
|
||||
transition: 1s;
|
||||
background-color: #0000008f;
|
||||
}
|
||||
|
||||
.song-title {
|
||||
color: rgb(255, 255, 255);
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
|
||||
font-size: 1.5em !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.aqua-gradient {
|
||||
background: -webkit-linear-gradient(50deg, #2096ff, #05ffa3);
|
||||
background: linear-gradient(40deg, #2096ff, #05ffa3);
|
||||
}
|
||||
|
||||
.purple-gradient {
|
||||
background: -webkit-linear-gradient(50deg, #ff6ec4, #7873f5);
|
||||
background: linear-gradient(40deg, #ff6ec4, #7873f5)
|
||||
}
|
||||
|
||||
.peach-gradient {
|
||||
background: -webkit-linear-gradient(50deg, #FFD86F, #FC6262);
|
||||
background: linear-gradient(40deg, #FFD86F, #FC6262)
|
||||
}
|
||||
|
||||
.blue-gradient {
|
||||
background: -webkit-linear-gradient(50deg, #45cafc, #303f9f);
|
||||
background: linear-gradient(40deg, #45cafc, #303f9f)
|
||||
}
|
||||
|
||||
.indigo.lighten-1 {
|
||||
background-color: #5c6bc0!important;
|
||||
}
|
||||
|
||||
.indigo {
|
||||
background-color: #3f51b5!important;
|
||||
}
|
||||
|
||||
.playlist-count {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
text-shadow: 0px 1px 0px #000000;
|
||||
font-family: inherit;
|
||||
font-size: 1.7em !important;
|
||||
font-weight: 400 !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
:root {
|
||||
--blue: #007bff;
|
||||
--indigo: #6610f2;
|
||||
--purple: #6f42c1;
|
||||
--pink: #e83e8c;
|
||||
--red: #dc3545;
|
||||
--orange: #fd7e14;
|
||||
--yellow: #ffc107;
|
||||
--green: #28a745;
|
||||
--teal: #20c997;
|
||||
--cyan: #17a2b8;
|
||||
--white: #fff;
|
||||
--gray: #868e96;
|
||||
--gray-dark: #343a40;
|
||||
--primary: #007bff;
|
||||
--secondary: #868e96;
|
||||
--success: #28a745;
|
||||
--info: #17a2b8;
|
||||
--warning: #ffc107;
|
||||
--danger: #dc3545;
|
||||
--light: #f8f9fa;
|
||||
--dark: #343a40;
|
||||
--breakpoint-xs: 0;
|
||||
--breakpoint-sm: 576px;
|
||||
--breakpoint-md: 768px;
|
||||
--breakpoint-lg: 992px;
|
||||
--breakpoint-xl: 1200px;
|
||||
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
Loading…
Reference in New Issue