external/ShinobiCE
1
0
Fork 0
mirror of https://gitlab.com/Shinobi-Systems/ShinobiCE.git synced 2025-03-09 15:40:15 +00:00
Code Issues Releases Wiki Activity

Tickly Tiger

Browse source
This commit is contained in:
Moe 2018-08-04 12:48:05 -07:00
parent 301337c140
commit a80c1e4e97
78 changed files with 28107 additions and 1402 deletions
Download patch file Download diff file Expand all files Collapse all files

2477
camera.js
View file

File diff suppressed because it is too large Load diff

79
cron.js
View file

@ -64,6 +64,7 @@ s.sqlDate = function(value){
return dateQueryFunction
}
s.sqlQuery = function(query,values,onMoveOn,hideLog){
s.debugLog(query,values)
if(!values){values=[]}
var valuesNotFunction = true;
if(typeof values === 'function'){
@ -176,9 +177,9 @@ s.checkFilterRules=function(v,callback){
}
//delete old videos with filter
if(config.cron.deleteOld===true){
v.d.filters.deleteOldByCron={
"id":"deleteOldByCron",
"name":"deleteOldByCron",
v.d.filters.deleteOldVideosByCron={
"id":"deleteOldVideosByCron",
"name":"deleteOldVideosByCron",
"sort_by":"time",
"sort_by_direction":"ASC",
"limit":"",
@ -195,10 +196,13 @@ s.checkFilterRules=function(v,callback){
}]
};
}
s.debugLog('Filters')
var keys = Object.keys(v.d.filters)
if(keys.length>0){
keys.forEach(function(m,current){
var b=v.d.filters[m];
// b = filter
var b = v.d.filters[m];
s.debugLog(b)
if(b.enabled==="1"){
b.ar=[v.ke];
b.sql=[];
@ -223,6 +227,9 @@ s.checkFilterRules=function(v,callback){
}
s.sqlQuery('SELECT * FROM Videos '+b.sql,b.ar,function(err,r){
if(r&&r[0]){
if(r.length > 0 || config.debugLog === true){
s.cx({f:'filterMatch',msg:r.length+' SQL rows match "'+m+'"',ke:v.ke,time:moment()})
}
b.cx={
f:'filters',
name:b.name,
@ -233,10 +240,8 @@ s.checkFilterRules=function(v,callback){
};
if(b.archive==="1"){
s.cx({f:'filters',ff:'archive',videos:r,time:moment(),ke:v.ke,id:b.id});
}else{
if(b.delete==="1"){
s.cx({f:'filters',ff:'delete',videos:r,time:moment(),ke:v.ke,id:b.id});
}
}else if(b.delete==="1"){
s.cx({f:'filters',ff:'delete',videos:r,time:moment(),ke:v.ke,id:b.id});
}
if(b.email==="1"){
b.cx.ff='email';
@ -277,21 +282,30 @@ s.deleteRowsWithNoVideo=function(v,callback){
if(evs&&evs[0]){
es.del=[];es.ar=[v.ke];
evs.forEach(function(ev){
var details = JSON.parse(ev.details)
var filename = ev.time
var dir = s.getVideoDirectory(ev)+s.moment(filename)+'.'+ev.ext;
var fileExists = fs.existsSync(dir)
if(details.isUTC === true){
filename = s.localToUtc(filename).format('YYYY-MM-DDTHH-mm-ss')
dir = s.getVideoDirectory(ev)+filename+'.'+ev.ext;
fileExists = fs.existsSync(dir)
var filename
var details
try{
details = JSON.parse(ev.details)
}catch(err){
if(details instanceof Object){
details = ev.details
}else{
details = {}
}
}
var dir = s.getVideoDirectory(ev)
if(details.isUTC === true){
filename = s.localToUtc(ev.time).format('YYYY-MM-DDTHH-mm-ss')+'.'+ev.ext
}else{
filename = s.moment(ev.time)+'.'+ev.ext
}
fileExists = fs.existsSync(dir+filename)
if(fileExists !== true){
s.video('delete',ev)
s.tx({f:'video_delete',filename:filename+'.'+ev.ext,mid:ev.mid,ke:ev.ke,time:ev.time,end:s.moment(new Date,'YYYY-MM-DD HH:mm:ss')},'GRP_'+ev.ke);
}
});
if(es.del.length>0){
if(es.del.length>0 || config.debugLog === true){
s.cx({f:'deleteNoVideo',msg:es.del.length+' SQL rows with no file deleted',ke:v.ke,time:moment()})
}
}
@ -310,8 +324,8 @@ s.deleteOldLogs=function(v,callback){
s.sqlQuery("DELETE FROM Logs WHERE ke=? AND `time` < "+s.sqlDate('? DAYS'),[v.ke,v.d.log_days],function(err,rrr){
callback()
if(err)return console.error(err);
if(rrr.affectedRows && rrr.affectedRows.length>0){
s.cx({f:'deleteLogs',msg:rrr.affectedRows+' SQL rows older than '+v.d.log_days+' days deleted',ke:v.ke,time:moment()})
if(rrr.affectedRows && rrr.affectedRows.length>0 || config.debugLog === true){
s.cx({f:'deleteLogs',msg:(rrr.affectedRows || 0)+' SQL rows older than '+v.d.log_days+' days deleted',ke:v.ke,time:moment()})
}
})
}else{
@ -325,8 +339,8 @@ s.deleteOldEvents=function(v,callback){
s.sqlQuery("DELETE FROM Events WHERE ke=? AND `time` < "+s.sqlDate('? DAYS'),[v.ke,v.d.event_days],function(err,rrr){
callback()
if(err)return console.error(err);
if(rrr.affectedRows && rrr.affectedRows.length>0){
s.cx({f:'deleteEvents',msg:rrr.affectedRows+' SQL rows older than '+v.d.event_days+' days deleted',ke:v.ke,time:moment()})
if(rrr.affectedRows && rrr.affectedRows.length>0 || config.debugLog === true){
s.cx({f:'deleteEvents',msg:(rrr.affectedRows || 0)+' SQL rows older than '+v.d.event_days+' days deleted',ke:v.ke,time:moment()})
}
})
}else{
@ -350,8 +364,8 @@ s.deleteOldFileBins=function(v,callback){
s.sqlQuery("DELETE"+fileBinQuery,[v.ke,v.d.fileBin_days],function(err,rrr){
callback()
if(err)return console.error(err);
if(rrr.affectedRows && rrr.affectedRows.length>0){
s.cx({f:'deleteFileBins',msg:rrr.affectedRows+' files older than '+v.d.fileBin_days+' days deleted',ke:v.ke,time:moment()})
if(rrr.affectedRows && rrr.affectedRows.length>0 || config.debugLog === true){
s.cx({f:'deleteFileBins',msg:(rrr.affectedRows || 0)+' files older than '+v.d.fileBin_days+' days deleted',ke:v.ke,time:moment()})
}
})
}else{
@ -366,7 +380,7 @@ s.deleteOldFileBins=function(v,callback){
s.checkForOrphanedFiles=function(v,callback){
if(config.cron.deleteOrphans===true){
var finish=function(count){
if(count>0){
if(count>0 || config.debugLog === true){
s.cx({f:'deleteOrphanedFiles',msg:count+' SQL rows with no database row deleted',ke:v.ke,time:moment()})
}
callback()
@ -445,9 +459,9 @@ s.processUser = function(number,rows){
rr.forEach(function(b,m){
b.details=JSON.parse(b.details);
if(b.details.max_keep_days&&b.details.max_keep_days!==''){
v.d.filters['deleteOldByCron'+b.mid]={
"id":'deleteOldByCron'+b.mid,
"name":'deleteOldByCron'+b.mid,
v.d.filters['deleteOldVideosByCron'+b.mid]={
"id":'deleteOldVideosByCron'+b.mid,
"name":'deleteOldVideosByCron'+b.mid,
"sort_by":"time",
"sort_by_direction":"ASC",
"limit":"",
@ -470,16 +484,17 @@ s.processUser = function(number,rows){
}
})
s.deleteOldLogs(v,function(){
s.debugLog('deleteOldLogs')
s.debugLog('--- deleteOldLogs Complete')
s.deleteOldFileBins(v,function(){
s.debugLog('deleteOldFileBins')
s.debugLog('--- deleteOldFileBins Complete')
s.deleteOldEvents(v,function(){
s.debugLog('deleteOldEvents')
s.debugLog('--- deleteOldEvents Complete')
s.checkFilterRules(v,function(){
s.debugLog('checkFilterRules')
s.debugLog('--- checkFilterRules Complete')
s.deleteRowsWithNoVideo(v,function(){
s.debugLog('deleteRowsWithNoVideo')
s.debugLog('--- deleteRowsWithNoVideo Complete')
s.checkForOrphanedFiles(v,function(){
s.debugLog('--- checkForOrphanedFiles Complete')
//done user, unlock current, and do next
s.overlapLock[v.ke]=false;
s.processUser(number+1,rows)

2
definitions/en_CA.json
View file

@ -872,7 +872,7 @@
{
"name": "detail=detector_sensitivity",
"field": "Indifference",
"description": "How much Shinobi doesn't care about motion before doing something. The opposite of sensitivity; a lower number means it will trigger sooner. The value ranges up to 15(+) decimal places. 10 is default, 0.005 is pretty sensitive to motion changes. Note: If using Region Editor, leave this blank, and set indifference in the Region Editor (below).",
"description": "How much Shinobi doesn't care about motion before doing something. The opposite of sensitivity; a lower number means it will trigger sooner. The value ranges up to 15(+) decimal places. 10 is default, 0.005 is pretty sensitive to motion changes. Note: If using Region Editor, leave this blank, and set indifference in the Region Editor (above).",
"default": "10",
"example": "10",
"possible": ""

57
languages/en_CA.json
View file

@ -104,6 +104,8 @@
"Can View Streams": "Can View Streams",
"Can View Videos": "Can View Videos",
"Can View Monitor": "Can View Monitor",
"Can Change User Settings": "Can Change User Settings",
"Can Create and Delete Monitors": "Can Create and Delete Monitors",
"Can Edit Monitor": "Can Edit Monitor",
"Can Delete Videos": "Can Delete Videos",
"Delete Video": "Delete Video",
@ -154,6 +156,8 @@
"FFmpegTip": "FFprobe is a simple multimedia streams analyzer. You can use it to output all kinds of information about an input including duration, frame rate, frame size, etc.",
"Complete Stream URL": "Complete Stream URL",
"ONVIF Scanner": "ONVIF Scanner",
"ONVIFEventsNotAvailable": "ONVIF Events not Available",
"ONVIFnotCompliantProfileT": "Camera is not ONVIF Profile T Compliant",
"Scan Settings": "Scan Settings",
"ONVIFnote": "Discover ONVIF devices on networks outside your own or leave it blank to scan your current network. <br>Username and Password can be left blank.",
"Range or Single": "Range or Single",
@ -178,6 +182,14 @@
"Monitor Groups": "Monitor Groups",
"Group Name": "Group Name",
"WebDAV": "WebDAV",
"Amazon S3": "Amazon S3",
"Save Links to Database": "Save Links to Database",
"Bucket": "Bucket",
"Region": "Region",
"Amazon S3 Upload Error": "Amazon S3 Upload Error",
"aws_accessKeyId": "Access Key Id",
"aws_secretAccessKey": "Secret Access Key",
"Discord Bot": "Discord Bot",
"URL": "URL",
"Autosave": "Autosave",
"Save Directory": "Save Directory",
@ -185,6 +197,8 @@
"Force Monitors Per Row": "Force Monitors Per Row",
"Monitors per row": "Monitors per row <small>for Montage</small>",
"Browser Console Log": "Browser Console Log",
"Log Stream": "Log Stream",
"Privileges": "Privileges",
"All Monitors and Privileges": "All Monitors and Privileges",
"Permissions": "Permissions",
"Time-lapse Tool": "Time-lapse Tool",
@ -210,9 +224,13 @@
"Set to Watch Only": "Set to Watch Only",
"Save as": "Save as",
"Add New": "Add New",
"Zip and Download": "Zip and Download",
"Export Selected Videos": "Export Selected Videos",
"Delete Selected Videos": "Delete Selected Videos",
"DeleteSelectedVideosMsg": "Do you want to delete these videos? You cannot recover them.",
"ExportSelectedVideosMsg": "Do you want to export these videos? It may take some time to zip and download.",
"clientStreamFailedattemptingReconnect": "Client side ctream check failed, attempting reconnect.",
"Export Video": "Export Video",
"Delete Filter": "Delete Filter",
"confirmDeleteFilter": "Do you want to delete this filter? You cannot recover it.",
"Fix Video": "Fix Video",
@ -236,8 +254,8 @@
"ImportMonitorConfigurationText": "Doing this will overrwrite any changes currently not saved. Imported changes will only be applied when you press <b>Save</b>.",
"Paste JSON here.": "Paste JSON here.",
"Delete Monitor": "Delete Monitor",
"DeleteMonitorText": "Do you want to delete this monitor? You cannot recover it. The files for this ID will remain in the filesystem. If you choose to recreate a monitor with the same ID the videos and events will become visible in the dashboard.",
"DeleteMonitorsText": "Do you want to delete these monitors? You cannot recover them. The files for these IDs will remain in the filesystem. If you choose to recreate a monitor with one of the IDs the videos and events will become visible in the dashboard.",
"DeleteMonitorText": "Do you want to delete this monitor? You cannot recover it. You can choose for the files to remain in the filesystem. If you choose to recreate a monitor with the same ID the videos and events will become visible in the dashboard.",
"DeleteMonitorsText": "Do you want to delete these monitors? You cannot recover them. You can choose to keep the files for these IDs in the filesystem. If you choose to recreate a monitor with one of the IDs the videos and events will become visible in the dashboard.",
"Invalid JSON": "Invalid JSON",
"InvalidJSONText": "Please ensure this is a valid JSON string for Shinobi monitor configuration.",
"Passwords don't match": "Passwords don't match",
@ -248,6 +266,7 @@
"Unable to Launch": "Unable to Launch",
"UnabletoLaunchText": "Please save new monitor first. Then attempt to launch the region editor.",
"NoVideosFoundForDateRange": "No Videos found in this date range. Try setting the start date further back.",
"NoLogsFoundForDateRange": "No Logs found in this date range. Try widening the date range.",
"monitorEditFailedMaxReached": "Your account has reached the maximum number of cameras that can be created. Speak to an administrator if you would like this changed.",
"in": "in",
"ago": "ago",
@ -292,7 +311,7 @@
"noSpecialCharacters": "No spaces or special characters.",
"NotesPlacholder": "Comments you want to leave for this cameras settings.",
"InputText1": "This section tells Shinobi how to consume a stream. For optimal performance try tuning your camera's internal settings. Find the following options and set them as shown. To find your camera you can use the <b>built in ONVIF Scanner</b> of Shinobi. Some ONVIF cameras require the use of a management tool to modify their internal settings. If you can't find your cameras you can try <a href=\"https://s3.amazonaws.com/cloudcamio/odm-v2.2.250.msi\">ONVIF Device Manager for Windows</a>.",
"InputText2": "<ul><li><b>Framerate (FPS) :</b> High : 10 - 15 FPS, Low : 2-5 FPS</li><li><b>I-frame interval :</b> 80</li><li><b>Bit Rate Type :</b> CBR (Constant Bit Rate)</li><li><b>Bit Rate :</b> between 256kbps - 500kbps</li></ul>",
"InputText2": "<ul><li><b>Framerate (FPS) :</b> High : 10 - 15 FPS, Low : 2-5 FPS</li><li><b>I-frame interval :</b> 1</li><li><b>Bit Rate Type :</b> VBR (Variable Bit Rate)</li><li><b>Bit Rate :</b> between 256kbps - 1000kbps</li></ul>",
"InputText3": "If you need help figuring out what input type your camera is you can take a look in the <a href=\"http://shinobi.video/docs/cameras\" target=\"_blank\">Camera URLs List</a> on the Shinobi website.",
"StreamText": "<p>This section will designate the primary method of streaming out and its settings. This stream will be displayed in the dashboard. If you choose to use HLS, JPEG, or MJPEG then you can consume the stream through other programs.</p><p class=\"h_st_input h_st_jpeg\">Using JPEG stream essentially turns off the primary stream and uses the snapshot bin to get frames.</p>",
"DetectorText": "<p>When the Width and Height boxes are shown you should set them to 640x480 or below. This will optimize the read speed of frames.</p>",
@ -368,7 +387,13 @@
"Allow Next Trigger": "Allow Next Trigger <small>in Milliseconds</small>",
"Save Events to SQL": "Save Events to SQL",
"Email on Trigger": "Email on Trigger <small>Emails go to the main account holder's login address.</small>",
"Attach Video Clip": "Attach Video Clip",
"Discord Alert on Trigger": "Discord Alert on Trigger",
"Allow Next Email": "Allow Next Email <small>in Minutes</small>",
"Allow Next Discord Alert": "Allow Next Discord Alert <small>in Minutes</small>",
"DiscordFailedText": "Sending to Discord Failed",
"DiscordErrorText": "Sending to Discord caused an Error",
"DiscordNotEnabledText": "Discord Bot Not Enabled, Enable it in your Account Settings.",
"How to Record": "How to Record",
"Trigger Record": "Trigger Record",
"Recording Timeout": "Recording Timeout <small>in Minutes</small>",
@ -431,6 +456,8 @@
"libx264": "libx264",
"libx265": "libx265",
"copy": "copy",
"Audio": "Audio",
"Mute Audio": "Mute Audio",
"No Audio": "No Audio",
"aac": "aac",
"ac3": "ac3",
@ -493,6 +520,12 @@
"Camera is not recording": "Camera is not recording",
"Camera is not streaming": "Camera is not streaming",
"Restarting Process": "Restarting Process",
"Restarting": "Restarting",
"Starting": "Starting",
"Watching": "Watching",
"Recording": "Recording",
"Stopped": "Stopped",
"Died": "Died",
"Restart": "Restart",
"Monitor Stopped": "Monitor Stopped",
"MonitorStoppedText": "Monitor session has been ordered to stop.",
@ -501,8 +534,21 @@
"NoMotionEmailText1": "No Motion for",
"NoMotionEmailText2": "There hasn't been any motion detected on camera for",
"Monitor Name": "Monitor Name",
"Mp4Frag": "Mp4Frag",
"Status Changed": "Status Changed",
"Monitor is now Idle": "Monitor is now Idle",
"Monitor is now Disabled": "Monitor is now Disabled",
"Monitor is now Watching": "Monitor is now Watching",
"Monitor is now Recording": "Monitor is now Recording",
"coProcessor": "coProcessor",
"coProcessor Stopped": "coProcessor Stopped",
"coProcessor Started": "coProcessor Started",
"coProcessorTextStarted": "coProcessor has started for CPU only outputs.",
"coProcessorTextStopped": "coProcessor has ended.",
"Process Unexpected Exit": "Process Unexpected Exit",
"coProcess Unexpected Exit": "coProcess Unexpected Exit",
"Process Crashed for Monitor": "Process Crashed for Monitor",
"coProcess Crashed for Monitor": "coProcess Crashed for Monitor",
"FFmpegCantStart": "FFmpeg Couldn't Start",
"FFmpegCantStartText": "The recording engine for this camera could not start. There may be something wrong with your camera configuration. If there are any logs other than this one please post them in the <b>Issues</b> on Github.",
"JPEG Error": "JPEG Error",
@ -569,6 +615,8 @@
"Preview":"Preview",
"Websocket Connected":"Websocket Connected",
"Websocket Disconnected":"Websocket Disconnected",
"Token":"Token",
"Channel ID":"Channel ID",
"New Authentication Token":"New Authentication Token",
"All Logs":"All Logs",
"For Group":"For Group",
@ -581,8 +629,11 @@
"in Days":"in Days",
"Can edit how long to keep Logs":"Can edit how long to keep Logs",
"Can use Admin Panel":"Can use Admin Panel",
"Can use Discord Bot":"Can use Discord Bot",
"Can use WebDAV":"Can use WebDAV",
"Can use Amazon S3":"Can use Amazon S3",
"Can use LDAP":"Can use LDAP",
"Can View Logs":"Can View Logs",
"Can edit how long to keep Events":"Can edit how long to keep Events",
"Leave blank for unlimited":"Leave blank for unlimited",
"Limited":"Limited",

21
package.json
View file

@ -1,43 +1,48 @@
{
"name": "shinobi",
"version": "1.0.37",
"description": "CCTV and NVR in Node.js, Version : daf882caf6053a7c2c8f4e69427620356f8a440c",
"productName": "Shinobi",
"version": "1.0.38",
"description": "CCTV and NVR in Node.js",
"main": "camera.js",
"bin": "camera.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "chmod +x INSTALL/start.sh && INSTALL/start.sh"
},
"repository": {
"type": "git",
"url": "git+https://github.com/moeiscool/Shinobi.git"
"url": "git+https://gitlab.com/Shinobi-Systems/Shinobi.git"
},
"author": "Moe Alam",
"author": "Moe Alam, Shinobi Systems",
"bugs": {
"url": "https://github.com/ShinobiCCTV/Shinobi/issues"
"url": "https://gitlab.com/Shinobi-Systems/Shinobi/issues"
},
"homepage": "https://github.com/moeiscool/Shinobi#readme",
"homepage": "https://gitlab.com/Shinobi-Systems/Shinobi#readme",
"dependencies": {
"body-parser": "^1.15.2",
"circular-json": "0.3.1",
"connection-tester": "^0.1.1",
"chokidar": "^2.0.3",
"mp4frag": "^0.0.15",
"mp4frag": "^0.0.22",
"ejs": "^2.5.5",
"express": "^4.14.0",
"jsonfile": "^3.0.1",
"moment": "^2.17.0",
"mysql": "^2.12.0",
"sqlite3": "^3.1.8",
"knex": "^0.14.2",
"aws-sdk": "^2.279.1",
"pam-diff": "^0.10.2",
"pipe2pam": "^0.6.2",
"nodemailer": "^4.0.1",
"node-onvif": "^0.1.4",
"onvif-nvt": "0.2.8",
"path": "^0.12.7",
"request": "^2.79.0",
"socket.io": "^1.7.1",
"socket.io-client": "^1.7.2",
"http-proxy": "^1.17.0",
"webdav": "^0.3.1",
"discord.js": "^11.3.2",
"ldapauth-fork": "^4.0.2"
},
"devDependencies": {}

8468
web/libs/css/bootstrap4.min.css vendored Normal file
View file

File diff suppressed because it is too large Load diff

26
web/libs/css/main.dash2.css
View file

@ -65,11 +65,13 @@ nav h4{cursor:default;font-size:95%;padding:16px 40px;font-weight:100;text-trans
.m-b{margin-bottom:10px}
.m-t{margin-top:10px}
.m-l{margin-left:10px}
.overflow-hidden{overflow: hidden!important}
.list-inline{list-style:none}
.list-inline li{display:inline-block;vertical-align: top;margin:0;}
.truncate{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
img{max-width:100%}
.display-table{display:table;width:100%}
.display-inline{display:inline-block}
.display-table-cell{display:table-cell}
.small{font-size:80%}
.super-center{position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;width: 4em;height: 1em;}
@ -80,6 +82,13 @@ img{max-width:100%}
.nodata .divider{margin:5px 0}
.loading .divider{margin:5px 0}
#accbtn{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding: 0;
}
.monitor_item .stream-hud{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}
.monitor_item .stream-hud .controls{position:absolute;top:10px;left:10px;}
.monitor_item .stream-hud:hover{opacity:1}
@ -90,12 +99,13 @@ img{max-width:100%}
.monitor_item[mode="Watch Only"] .stream-hud .lamp{color:#5da8e8}
.monitor_item[mode="Idle"] .stream-hud .lamp{color:#fff}
.monitor_item[mode="Record"] .stream-hud .lamp{color:#d9534f}
/*.monitor_item .data-menu{max-height:700px}*/
.monitor_item .data-menu:not(:last-child){border-right:1px solid #fff;}
.monitor_item .data-menu.logs{list-style:none;}
/*.data-menu{max-height:700px}*/
.data-menu:not(:last-child){border-right:1px solid #fff;}
.data-menu.logs{list-style:none;}
.monitor_item .motionVision{display:none}
.monitor_item .grid-stack-item-content{width:100%!important;left:0;right:0}
.monitor_item .grid-stack-item-content{width:100%!important;left:0!important;right:0!important}
.monitor_item .ui-resizable-se {bottom: 10px!important;}
.monitor_item .stream-block{position: relative;text-align: center}
.monitor_item .mdl-data_window{overflow-x: auto;background:rgba(0,0,0,0.7);color:#fff;height:100%}
.monitor_item .mdl-data_window:not(.col-md-6){width:0;min-width:0;height:0px;min-height:0}
@ -107,7 +117,7 @@ img{max-width:100%}
.monitor_item{position:relative;padding:0;}
.monitor_item{transition:none;}
.monitor_item .mdl-card{min-height:auto;border:1px solid #272727;border-radius:0px;overflow:hidden}
.monitor_item .mdl-card__media{position:relative;padding:0!important;display:block!important;background:#000;min-height:250px;}
.monitor_item .mdl-card__media{position:relative;padding:0!important;display:block!important;background:#000;}
.monitor_item.selected .stream-element{height:600px}
.monitor_item.selected .fa-expand:before{content:"\f066"}
.monitor_item .mdl-card__supporting-text{background:#222;color:#fff!important;display:block;min-height:auto!important}
@ -713,4 +723,10 @@ ul.msg_list li .message {
.marc-toggle label:active:after {
width: 10px;
}
/*hexagon pattern*/
.bg-hexagon {
background-color: #054e9f;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23fdfdfd' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

7545
web/libs/css/now-ui-kit.css Normal file
View file

File diff suppressed because it is too large Load diff

BIN
web/libs/fonts/nucleo-outline.eot Normal file
View file

Binary file not shown.

BIN
web/libs/fonts/nucleo-outline.ttf Normal file
View file

Binary file not shown.

BIN
web/libs/fonts/nucleo-outline.woff Normal file
View file

Binary file not shown.

BIN
web/libs/fonts/nucleo-outline.woff2 Normal file
View file

Binary file not shown.

1586
web/libs/js/bootstrap4.min.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

1
web/libs/js/jquery-1.10.2.min.map Normal file
View file

File diff suppressed because one or more lines are too long

596
web/libs/js/main.dash2.js
View file

@ -12,15 +12,40 @@ $.ccio={
fr:$('#files_recent'),
mon:{}
};
<% if(config.useUTC){ %>
$.ccio.timeObject = function(date){
return moment.utc(date).local()
$.ccio.permissionCheck = function(toCheck,monitorId){
var details = $user.details
if(details.sub && details.allmonitors === '0'){
var chosenValue = details[toCheck]
if(details[toCheck] instanceof Array && chosenValue.indexOf(monitorId) > -1){
return true
}else if(chosenValue === '1'){
return true
}
}else{
return true
}
return false
}
<% }else{ %>
$.ccio.timeObject = function(date){
return moment(date)
$.ccio.downloadJSON = function(jsonToDownload,filename,errorResponse){
var arr = jsonToDownload;
if(arr.length===0 && errorResponse){
errorResponse.type = 'error'
$.ccio.init('note',errorResponse);
return
}
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(arr,null,3));
$('#temp').html('<a></a>')
.find('a')
.attr('href',dataStr)
.attr('download',filename)
[0].click()
}
$.ccio.timeObject = function(time,isUTC){
if(isUTC === true){
return moment(time).utc()
}
return moment(time)
}
<% } %>
if(!$user.details.lang||$user.details.lang==''){
$user.details.lang="<%-config.language%>"
}
@ -158,10 +183,40 @@ switch($user.details.lang){
url=url+'/'
}
}else{
url=''
url = '<%-originalURL%>'
}
return url
break;
case'videoUrlBuild':
var url
if(d.href){
url = d.href
}else if(!d.href && d.hrefNoAuth){
url = $.ccio.init('location',user)+user.auth_token+d.hrefNoAuth
}
if(user!==$user&&url.charAt(0)==='/'){
url = $.ccio.init('location',user)+d.href.substring(1)
}
return url
break;
case'videoHrefToDelete':
var urlSplit = d.split('?')
var url = urlSplit[0]+'/delete'
if(urlSplit[1])url += '?' + urlSplit[1]
return url
break;
case'videoHrefToUnread':
var urlSplit = d.split('?')
var url = urlSplit[0]+'/status/1'
if(urlSplit[1])url += '?' + urlSplit[1]
return url
break;
case'videoHrefToRead':
var urlSplit = d.split('?')
var url = urlSplit[0]+'/status/2'
if(urlSplit[1])url += '?' + urlSplit[1]
return url
break;
// case'streamWindow':
// return $('.monitor_item[mid="'+d.id+'"][ke="'+d.ke+'"][auth="'+user.auth_token+'"]')
// break;
@ -369,6 +424,7 @@ switch($user.details.lang){
d.e.find('.monitor_ext').text(d.mon.ext);
d.mode=$.ccio.init('humanReadMode',d.mon.mode,user)
d.e.find('.monitor_mode').text(d.mode)
d.e.find('.monitor_status').text(d.status)
d.e.attr('mode',d.mode)
d.e.find('.lamp').attr('title',d.mode)
break;
@ -463,6 +519,19 @@ switch($user.details.lang){
})
return $.ccio.mon_groups;
break;
case'closeVideo':
var el = $('#monitor_live_'+d.mid+user.auth_token)
var video = el.find('video')
if(video.length === 1){
if(!video[0].paused){
video[0].onerror = function(){}
video[0].pause()
}
video.prop('src','');
video.find('source').remove();
video.remove();
}
break;
case'jpegModeStop':
clearTimeout($.ccio.mon[d.ke+d.mid+user.auth_token].jpegInterval);
delete($.ccio.mon[d.ke+d.mid+user.auth_token].jpegInterval);
@ -492,15 +561,6 @@ switch($user.details.lang){
$.ccio.init('jpegMode',v,user)
});
break;
case'dragWindows':
console.log('Deprecated : dragWindows')
// k.e=$("#monitors_live");
// if(k.e.disableSelection){k.e.disableSelection()};
// k.e.sortable({
// handle: ".mdl-card__supporting-text",
// placeholder: "ui-state-highlight col-md-6"
// });
break;
case'getLocation':
var l = document.createElement("a");
l.href = d;
@ -834,25 +894,18 @@ switch($user.details.lang){
if(d.id&&!d.mid){d.mid=d.id;}
switch(x){
case 0://video
var href
if(d.href){
href = d.href
}else if(!d.href && d.hrefNoAuth){
href = $.ccio.init('location',user)+user.auth_token+d.hrefNoAuth
}
if(user!==$user&&href.charAt(0)==='/'){
href = $.ccio.init('location',user)+d.href.substring(1)
}
href = 'href="'+href+'"'
if(!d.filename){d.filename=$.ccio.init('tf',d.time)+'.'+d.ext;}
var url = $.ccio.init('videoUrlBuild',d)
href = 'href="'+url+'"'
// if(!d.filename){d.filename=$.ccio.init('tf',d.time)+'.'+d.ext;}
d.dlname=d.mid+'-'+d.filename;
d.mom=$.ccio.timeObject(d.time),
d.hr=parseInt(d.mom.format('HH')),
d.startMoment=$.ccio.timeObject(d.time),
d.endMoment=$.ccio.timeObject(d.end),
d.hr=parseInt(d.startMoment.format('HH')),
d.per=parseInt(d.hr/24*100);
d.circle='<div title="at '+d.hr+' hours of '+d.mom.format('MMMM DD')+'" '+href+' video="launch" class="progress-circle progress-'+d.per+'"><span>'+d.hr+'</span></div>'
tmp+='<li class="video-item glM'+d.mid+user.auth_token+'" auth="'+user.auth_token+'" mid="'+d.mid+'" ke="'+d.ke+'" status="'+d.status+'" status="'+d.status+'" file="'+d.filename+'">'+d.circle+'<div><span title="'+d.end+'" class="livestamp"></span></div><div><div class="small"><b><%-cleanLang(lang.Start)%></b> : '+$.ccio.timeObject(d.time).format('h:mm:ss , MMMM Do YYYY')+'</div><div class="small"><b><%-cleanLang(lang.End)%></b> : '+$.ccio.timeObject(d.end).format('h:mm:ss , MMMM Do YYYY')+'</div></div><div><span class="pull-right">'+(parseInt(d.size)/1000000).toFixed(2)+'mb</span><div class="controls btn-group"><a class="btn btn-sm btn-primary" video="launch" '+href+'><i class="fa fa-play-circle"></i></a> <a download="'+d.dlname+'" '+href+' class="btn btn-sm btn-default"><i class="fa fa-download"></i></a>'
d.circle='<div title="at '+d.hr+' hours of '+d.startMoment.format('MMMM DD')+'" '+href+' video="launch" class="progress-circle progress-'+d.per+'"><span>'+d.hr+'</span></div>'
tmp+='<li class="video-item glM'+d.mid+user.auth_token+'" auth="'+user.auth_token+'" mid="'+d.mid+'" ke="'+d.ke+'" status="'+d.status+'" status="'+d.status+'" file="'+d.filename+'">'+d.circle+'<div><span title="'+d.endMoment.format()+'" class="livestamp"></span></div><div><div class="small"><b><%-cleanLang(lang.Start)%></b> : '+d.startMoment.format('h:mm:ss , MMMM Do YYYY')+'</div><div class="small"><b><%-cleanLang(lang.End)%></b> : '+d.endMoment.format('h:mm:ss , MMMM Do YYYY')+'</div></div><div><span class="pull-right">'+(parseInt(d.size)/1000000).toFixed(2)+'mb</span><div class="controls btn-group"><a class="btn btn-sm btn-primary" video="launch" '+href+'><i class="fa fa-play-circle"></i></a> <a download="'+d.dlname+'" '+href+' class="btn btn-sm btn-default"><i class="fa fa-download"></i></a>'
<% if(config.DropboxAppKey){ %> tmp+='<a video="download" host="dropbox" download="'+d.dlname+'" '+href+' class="btn btn-sm btn-default"><i class="fa fa-dropbox"></i></a>' <% } %>
tmp+='<a title="<%-cleanLang(lang['Delete Video'])%>" video="delete" class="btn btn-sm btn-danger permission_video_delete"><i class="fa fa-trash"></i></a></div></div></li>';
tmp+='<a title="<%-cleanLang(lang['Delete Video'])%>" video="delete" href="'+$.ccio.init('videoHrefToDelete',url)+'" class="btn btn-sm btn-danger permission_video_delete"><i class="fa fa-trash"></i></a></div></div></li>';
$(z).each(function(n,v){
v=$(v);
if(v.find('.video-item').length>10){v.find('.video-item:last').remove()}
@ -860,7 +913,46 @@ switch($user.details.lang){
break;
case 1://monitor icon
d.src=placeholder.getData(placeholder.plcimg({bgcolor:'#b57d00',text:'...'}));
tmp+='<div auth="'+user.auth_token+'" mid="'+d.mid+'" ke="'+d.ke+'" title="'+d.mid+' : '+d.name+'" class="monitor_block glM'+d.mid+user.auth_token+' col-md-4"><img monitor="watch" class="snapshot" src="'+d.src+'"><div class="box"><div class="title monitor_name truncate">'+d.name+'</div><div class="list-data"><div class="monitor_mid">'+d.mid+'</div><div><b><%-cleanLang(lang['Save as'])%> :</b> <span class="monitor_ext">'+d.ext+'</span></div><div><b>Mode :</b> <span class="monitor_mode">'+d.mode+'</span></div></div><div class="icons text-center"><div class="btn-group"><a class="btn btn-xs btn-default permission_monitor_edit" monitor="edit"><i class="fa fa-wrench"></i></a> <a monitor="videos_table" class="btn btn-xs btn-default"><i class="fa fa-film"></i></a> <a monitor="pop" class="btn btn-xs btn-success"><i class="fa fa-external-link"></i></a></div></div></div></div>';
tmp+='<div auth="'+user.auth_token+'" mid="'+d.mid+'" ke="'+d.ke+'" title="'+d.mid+' : '+d.name+'" class="monitor_block glM'+d.mid+user.auth_token+' col-md-4"><img monitor="watch" class="snapshot" src="'+d.src+'"><div class="box"><div class="title monitor_name truncate">'+d.name+'</div><div class="list-data"><div class="monitor_mid">'+d.mid+'</div><div><b><%-cleanLang(lang['Save as'])%> :</b> <span class="monitor_ext">'+d.ext+'</span></div><div><b>Status :</b> <span class="monitor_status">'+d.status+'</span></div></div><div class="icons text-center">'
tmp+='<div class="btn-group btn-group-xs">'
var buttons = {
"Pop": {
"label": "Pop",
"attr": "monitor=\"pop\"",
"class": "default",
"icon": "external-link"
},
"Power Viewer": {
"label": "Power Viewer",
"attr": "monitor=\"powerview\"",
"class": "default",
"icon": "map-marker"
},
"Videos List": {
"label": "Videos List",
"attr": "monitor=\"videos_table\"",
"class": "default",
"icon": "film"
},
"Monitor Settings": {
"label": "Monitor Settings",
"attr": "monitor=\"edit\"",
"class": "default",
"icon": "wrench"
}
}
if(!$.ccio.permissionCheck('video_view',d.mid)){
delete(buttons["Videos List"])
delete(buttons["Power Viewer"])
}
if(!$.ccio.permissionCheck('monitor_edit',d.mid)){
delete(buttons["Monitor Settings"])
}
$.each(buttons,function(n,v){
tmp+='<a class="btn btn-'+v.class+'" '+v.attr+' title="'+v.label+'"><i class="fa fa-'+v.icon+'"></i></a>'
})
tmp+='</div>\
</div></div></div>';
delete(d.src);
break;
case 2://monitor stream
@ -876,30 +968,97 @@ switch($user.details.lang){
],function(n,v){
tmp+='<div>'+v.label+' : <span class="'+v.tag+'"></span></div>'
})
tmp+='</div></div></div></div>';
tmp+='</div></div></div></div>'
tmp+='<div class="mdl-card__supporting-text text-center">';
tmp+='<div class="indifference detector-fade"><div class="progress"><div class="progress-bar progress-bar-danger" role="progressbar"><span></span></div></div></div>';
tmp+='<div class="monitor_details">';
tmp+='<div><span class="monitor_name">'+d.name+'</span><span class="monitor_not_record_copy">, <%-cleanLang(lang['Recording FPS'])%> : <span class="monitor_fps">'+d.fps+'</span></span></div>';
tmp+='</div>';
tmp+='<div class="btn-group btn-group-sm">'//start of btn list
$.each([
{label:"<%-cleanLang(lang.Snapshot)%>",attr:'monitor="snapshot"',class:'primary',icon:'camera'},
{label:"<%-cleanLang(lang['Show Logs'])%>",attr:'monitor="show_data"',class:'warning',icon:'exclamation-triangle'},
// {label:"<%-cleanLang(lang['Show Logs'])%>",attr:'class_toggle="show_data" data-target="'+dataTarget+'"',class:'warning',icon:'exclamation-triangle'},
{label:"<%-cleanLang(lang.Control)%>",attr:'monitor="control_toggle"',class:'default arrows',icon:'arrows'},
{label:"<%-cleanLang(lang['Status Indicator'])%>",attr:'monitor="watch_on"',class:'success signal',icon:'plug'},
{label:"<%-cleanLang(lang['Detector'])%>",attr:'monitor="motion"',class:'warning',icon:'grav'},
{label:"<%-cleanLang(lang.Pop)%>",attr:'monitor="pop"',class:'default',icon:'external-link'},
// {label:"<%-cleanLang(lang.Magnify)%>",attr:'monitor="magnify"',class:'default',icon:'search-plus'},
{label:"<%-cleanLang(lang.Calendar)%>",attr:'monitor="calendar"',class:'default',icon:'calendar'},
{label:"<%-cleanLang(lang['Power Viewer'])%>",attr:'monitor="powerview"',class:'default',icon:'map-marker'},
{label:"<%-cleanLang(lang['Time-lapse'])%>",attr:'monitor="timelapse"',class:'default',icon:'angle-double-right'},
{label:"<%-cleanLang(lang['Videos List'])%>",attr:'monitor="videos_table"',class:'default',icon:'film'},
{label:"<%-cleanLang(lang['Monitor Settings'])%>",attr:'monitor="edit"',class:'default permission_monitor_edit',icon:'wrench'},
{label:"<%-cleanLang(lang.Fullscreen)%>",attr:'monitor="fullscreen"',class:'default',icon:'arrows-alt'},
{label:"<%-cleanLang(lang.Close)%>",attr:'monitor="watch_off"',class:'danger',icon:'times'},
],function(n,v){
var buttons = {
"Snapshot": {
"label": "Snapshot",
"attr": "monitor=\"snapshot\"",
"class": "primary",
"icon": "camera"
},
"Show Logs": {
"label": "Show Logs",
"attr": "monitor=\"show_data\"",
"class": "warning",
"icon": "exclamation-triangle"
},
"Control": {
"label": "Control",
"attr": "monitor=\"control_toggle\"",
"class": "default arrows",
"icon": "arrows"
},
"Status Indicator": {
"label": "Status Indicator",
"attr": "monitor=\"watch_on\"",
"class": "success signal",
"icon": "plug"
},
"Pop": {
"label": "Pop",
"attr": "monitor=\"pop\"",
"class": "default",
"icon": "external-link"
},
"Calendar": {
"label": "Calendar",
"attr": "monitor=\"calendar\"",
"class": "default ",
"icon": "calendar"
},
"Power Viewer": {
"label": "Power Viewer",
"attr": "monitor=\"powerview\"",
"class": "default",
"icon": "map-marker"
},
"Time-lapse": {
"label": "Time-lapse",
"attr": "monitor=\"timelapse\"",
"class": "default",
"icon": "angle-double-right"
},
"Videos List": {
"label": "Videos List",
"attr": "monitor=\"videos_table\"",
"class": "default",
"icon": "film"
},
"Monitor Settings": {
"label": "Monitor Settings",
"attr": "monitor=\"edit\"",
"class": "default",
"icon": "wrench"
},
"Fullscreen": {
"label": "Fullscreen",
"attr": "monitor=\"fullscreen\"",
"class": "default",
"icon": "arrows-alt"
},
"Close": {
"label": "Close",
"attr": "monitor=\"watch_off\"",
"class": "danger",
"icon": "times"
}
}
if(!$.ccio.permissionCheck('video_view',d.mid)){
delete(buttons["Videos List"])
delete(buttons["Time-lapse"])
delete(buttons["Power Viewer"])
delete(buttons["Calendar"])
}
if(!$.ccio.permissionCheck('monitor_edit',d.mid)){
delete(buttons["Monitor Settings"])
}
$.each(buttons,function(n,v){
tmp+='<a class="btn btn-'+v.class+'" '+v.attr+' title="'+v.label+'"><i class="fa fa-'+v.icon+'"></i></a>'
})
tmp+='</div>';//end of btn list
@ -976,6 +1135,11 @@ switch($user.details.lang){
}
}
k.e.append(tmp).find('.stream-element').resize();
if($.ccio.op().switches.monitorMuteAudio === 1){
k.e.find('video').each(function(n,el){
el.muted = "muted"
})
}
break;
case'user-row':
d.e=$('.user-row[uid="'+d.uid+'"][ke="'+d.ke+'"]')
@ -1287,7 +1451,7 @@ switch($user.details.lang){
tmp+='</div>'
tmp+=' <div class="form-group">'
tmp+=' <label><div><span><%-lang["Stream Type"]%></span></div>'
tmp+=' <div><select class="form-control" channel-detail="stream_type" selector="h_st_channel_'+tempID+'" triggerChange="#monSectionChannel'+tempID+' [channel-detail=stream_vcodec]">'
tmp+=' <div><select class="form-control" channel-detail="stream_type" selector="h_st_channel_'+tempID+'" triggerChange="#monSectionChannel'+tempID+' [channel-detail=stream_vcodec]" triggerChangeIgnore="b64,mjpeg">'
tmp+=' <option value="mp4"><%-lang["Poseidon"]%></option>'
tmp+=' <option value="rtmp"><%-lang["RTMP Stream"]%></option>'
tmp+=' <option value="flv"><%-lang["FLV"]%></option>'
@ -1597,7 +1761,11 @@ $.ccio.globalWebsocket=function(d,user){
}
switch(d.f){
case'note':
$.ccio.init('note',d.note);
$.ccio.init('note',d.note,user);
break;
case'monitor_status':
console.log(d)
$('[ke="'+d.ke+'"][mid="'+d.id+'"][auth="'+user.auth_token+'"] .monitor_status').html(d.status);
break;
case'detector_trigger':
d.e=$('.monitor_item[ke="'+d.ke+'"][mid="'+d.id+'"][auth="'+user.auth_token+'"]')
@ -1632,8 +1800,8 @@ $.ccio.globalWebsocket=function(d,user){
}
if(d.details.confidence){
d.tt=d.details.confidence;
if (d.tt > 100) { d.tt = 100; }
d.e.find('.indifference .progress-bar').css('width',d.tt + "%").find('span').text(d.details.confidence)
if (d.tt > 100) { d.tt = 100 }
d.e.find('.indifference .progress-bar').css('width',d.tt + '%').find('span').html(d.details.confidence+'% change in <b>'+d.details.name+'</b>')
}
d.e.addClass('detector_triggered')
clearTimeout($.ccio.mon[d.ke+d.id+user.auth_token].detector_trigger_timeout);
@ -1705,7 +1873,8 @@ $.ccio.globalWebsocket=function(d,user){
$.ccio.pm(0,d,null,user)
break;
case'log':
$.ccio.tm(4,d,'#logs,.monitor_item[mid="'+d.mid+'"][ke="'+d.ke+'"][auth="'+user.auth_token+'"] .logs',user)
var attr = '[mid="'+d.mid+'"][ke="'+d.ke+'"][auth="'+user.auth_token+'"]'
$.ccio.tm(4,d,'#logs,'+attr+'.monitor_item .logs:visible,'+attr+'#add_monitor:visible .logs',user)
break;
case'os'://indicator
//cpu
@ -1741,8 +1910,10 @@ $.ccio.globalWebsocket=function(d,user){
break;
case'video_edit':case'video_archive':
$.ccio.init('data-video',d)
d.e=$('[file="'+d.filename+'"][mid="'+d.mid+'"][ke="'+d.ke+'"][auth="'+user.auth_token+'"]');
d.e=$('[file="'+d.filename+'"][mid="'+d.mid+'"][ke="'+d.ke+'"][auth="'+user.auth_token+'"],[data-file="'+d.filename+'"][data-mid="'+d.mid+'"][data-ke="'+d.ke+'"][data-auth="'+user.auth_token+'"]');
d.e.attr('status',d.status),d.e.attr('data-status',d.status);
console.log(d)
break;
case'video_delete':
// if($('.modal[mid="'+d.mid+'"][auth="'+user.auth_token+'"]').length>0){$('#video_viewer[mid="'+d.mid+'"]').attr('file',null).attr('ke',null).attr('mid',null).attr('auth',null).modal('hide')}
@ -1756,6 +1927,7 @@ $.ccio.globalWebsocket=function(d,user){
delete($.timelapse.currentVideosArray.videos[$.timelapse.currentVideos[d.filename].position])
$.timelapse.drawTimeline(false)
}
if($.vidview.loadedVideos && $.vidview.loadedVideos[d.filename])delete($.vidview.loadedVideos[d.filename])
break;
case'video_build_success':
if(!d.mid){d.mid=d.id;};d.status=1;
@ -1794,8 +1966,9 @@ $.ccio.globalWebsocket=function(d,user){
d.o=$.ccio.op()[d.chosen_set];
if(!d.o[d.ke]){d.o[d.ke]={}};d.o[d.ke][d.id]=0;$.ccio.op(d.chosen_set,d.o);
if($.ccio.mon[d.ke+d.id+user.auth_token]){
$.ccio.init('jpegModeStop',{mid:d.id,ke:d.ke});
$.ccio.init('clearTimers',d)
$.ccio.init('closeVideo',{mid:d.id,ke:d.ke},user);
$.ccio.init('jpegModeStop',{mid:d.id,ke:d.ke},user);
$.ccio.init('clearTimers',d,user)
clearInterval($.ccio.mon[d.ke+d.id+user.auth_token].signal);delete($.ccio.mon[d.ke+d.id+user.auth_token].signal);
$.ccio.mon[d.ke+d.id+user.auth_token].watch=0;
if($.ccio.mon[d.ke+d.id+user.auth_token].hls){$.ccio.mon[d.ke+d.id+user.auth_token].hls.destroy()}
@ -1817,9 +1990,11 @@ $.ccio.globalWebsocket=function(d,user){
d.e=$('#monitor_live_'+d.id+user.auth_token);
d.e.find('.stream-detected-object').remove()
$.ccio.init('clearTimers',d)
if(d.e.length==0){
if(d.e.length === 1){
$.ccio.init('closeVideo',{mid:d.id,ke:d.ke},user);
}
if(d.e.length === 0){
$.ccio.tm(2,$.ccio.mon[d.ke+d.id+user.auth_token],'#monitors_live',user);
$.ccio.init('dragWindows')
}
d.d=JSON.parse($.ccio.mon[d.ke+d.id+user.auth_token].details);
$.ccio.tm('stream-element',$.ccio.mon[d.ke+d.id+user.auth_token],null,user);
@ -1903,30 +2078,35 @@ $.ccio.globalWebsocket=function(d,user){
})
break;
case'mp4':
var stream = d.e.find('.stream-element');
if(d.d.stream_flv_type==='ws'){
if($.ccio.mon[d.ke+d.id+user.auth_token].Poseidon){
$.ccio.mon[d.ke+d.id+user.auth_token].Poseidon.destroy()
setTimeout(function(){
var stream = d.e.find('.stream-element');
if(d.d.stream_flv_type==='ws'){
if($.ccio.mon[d.ke+d.id+user.auth_token].Poseidon){
$.ccio.mon[d.ke+d.id+user.auth_token].Poseidon.destroy()
}
try{
$.ccio.mon[d.ke+d.id+user.auth_token].Poseidon = new Poseidon({
video: stream[0],
auth_token:user.auth_token,
ke:d.ke,
uid:user.uid,
id:d.id,
url: url
});
$.ccio.mon[d.ke+d.id+user.auth_token].Poseidon.start();
}catch(err){
setTimeout(function(){
$.ccio.cx({f:'monitor',ff:'watch_on',id:d.id},user)
},5000)
console.log(err)
}
}else{
stream.attr('src',$.ccio.init('location',user)+user.auth_token+'/mp4/'+d.ke+'/'+d.id+'/s.mp4')
stream[0].onerror = function(err){
console.error(err)
}
}
try{
$.ccio.mon[d.ke+d.id+user.auth_token].Poseidon = new Poseidon({
video: stream[0],
auth_token:user.auth_token,
ke:d.ke,
uid:user.uid,
id:d.id,
url: url
});
$.ccio.mon[d.ke+d.id+user.auth_token].Poseidon.start();
}catch(err){
setTimeout(function(){
$.ccio.cx({f:'monitor',ff:'watch_on',id:d.id},user)
},3000)
console.log(err)
}
}else{
stream.attr('src',$.ccio.init('location',user)+user.auth_token+'/mp4/'+d.ke+'/'+d.id+'/s.mp4')
}
},2000)
break;
case'flv':
if (flvjs.isSupported()) {
@ -2153,7 +2333,7 @@ $.ccio.globalWebsocket=function(d,user){
$.each(videos.videos,function(n,v){
if(!v||!v.mid){return}
v.mon=$.ccio.mon[v.ke+v.mid+$user.auth_token];
v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
// v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
if(v.status>0){
// data.push({src:v,x:v.time,y:$.ccio.timeObject(v.time).diff($.ccio.timeObject(v.end),'minutes')/-1})
data[v.filename]={
@ -2465,6 +2645,14 @@ $.ccio.cx=function(x,user){
$(document).ready(function(e){
console.log("%cWarning!", "font: 2em monospace; color: red;");
console.log('%cLeaving the developer console open is fine if you turn off "Network Recording". This is because it will keep a log of all files, including frames and videos segments.', "font: 1.2em monospace; ");
if(!$.ccio.permissionCheck('monitor_create')){
$('#add_monitor_button_main').remove()
}
$.each(['user_change','monitor_create','view_logs'],function(n,permission){
if(!$.ccio.permissionCheck(permission)){
$('.permission_'+permission).remove()
}
})
//global form functions
$.ccio.form={};
$.ccio.form.details=function(e){
@ -2801,27 +2989,67 @@ $.pB.e.find('.stop').click(function(e){
// $.ccio.cx({f:'ffprobe',ff:'stop'})
});
//log viewer
$.log={e:$('#logs_modal'),lm:$('#log_monitors')};$.log.o=$.log.e.find('table tbody');
$.log = {
e : $('#logs_modal'),
lm : $('#log_monitors'),
dateRange : $('#logs_daterange'),
loaded : {}
}
$.log.dateRange.daterangepicker({
startDate:$.ccio.timeObject().subtract(moment.duration("5:00:00")),
endDate:$.ccio.timeObject().add(moment.duration("24:00:00")),
timePicker: true,
timePickerIncrement: 30,
locale: {
format: 'MM/DD/YYYY h:mm A'
}
},function(start, end, label){
//change daterange
$.log.lm.change()
});
$.log.table = $.log.e.find('table')
$.log.e.on('shown.bs.modal', function () {
$.log.lm.find('option:not(.hard)').remove()
$.each($.ccio.mon,function(n,v){
v.id=v.mid;
v.id = v.mid
$.ccio.tm('option',v,'#log_monitors')
})
$.log.lm.change()
});
$.log.lm.change(function(e){
e.v=$(this).val();
if(e.v==='all'){e.v=''}
$.get($.ccio.init('location',$user)+$user.auth_token+'/logs/'+$user.ke+'/'+e.v,function(d){
})
$.log.lm.change(function(){
e = {}
e.v = $(this).val();
e.urlSelector = e.v+'';
if(e.v === 'all'){
e.urlSelector = ''
}
e.dateRange = $.log.dateRange.data('daterangepicker');
$.log.loaded.startDate = e.dateRange.startDate
$.log.loaded.endDate = e.dateRange.endDate
var url = $.ccio.init('location',$user)+$user.auth_token+'/logs/'+$user.ke+'/'+e.urlSelector+'?start='+$.ccio.init('th',$.log.loaded.startDate)+'&end='+$.ccio.init('th',$.log.loaded.endDate)
$.get(url,function(d){
$.log.loaded.url = url
$.log.loaded.query = e.v
$.log.loaded.rows = d
e.tmp='';
$.each(d,function(n,v){
e.tmp+='<tr class="search-row"><td title="'+v.time+'" class="livestamp"></td><td>'+v.time+'</td><td>'+v.name+'</td><td>'+v.mid+'</td><td>'+$.ccio.init('jsontoblock',v.info)+'</td></tr>'
})
$.log.o.html(e.tmp)
if(d.length === 0){
e.tmp = '<tr class="text-center"><td><%-cleanLang(lang.NoLogsFoundForDateRange)%></td></tr>'
}else{
$.each(d,function(n,v){
e.tmp+='<tr class="search-row"><td title="'+v.time+'" class="livestamp"></td><td>'+v.time+'</td><td>'+v.mid+'</td><td>'+$.ccio.init('jsontoblock',v.info)+'</td></tr>'
})
}
$.log.table.find('tbody').html(e.tmp)
// $.log.table.bootstrapTable()
$.ccio.init('ls')
})
});
})
$.log.e.find('[download]').click(function(){
$.ccio.downloadJSON($.log.loaded,'Shinobi_Logs_'+(new Date())+'.json',{
title : 'No Logs Found',
text : 'No file will be downloaded.',
})
})
//multi monitor manager
$.multimon={e:$('#multi_mon')};
$.multimon.table=$.multimon.e.find('.tableData tbody');
@ -2946,13 +3174,30 @@ $.multimon.e.find('.delete').click(function(){
$.confirm.title.text('<%-cleanLang(lang['Delete'])%> <%-cleanLang(lang['Monitors'])%>')
e.html='<p><%-cleanLang(lang.DeleteMonitorsText)%></p>';
$.confirm.body.html(e.html)
$.confirm.click({title:'Delete',class:'btn-danger'},function(){
$.each(arr,function(n,v){
$.get($.ccio.init('location',$user)+v.user.auth_token+'/configureMonitor/'+v.ke+'/'+v.mid+'/delete',function(data){
console.log(data)
})
})
});
$.confirm.click([
{
title:'Delete Monitors',
class:'btn-danger',
callback:function(){
$.each(arr,function(n,v){
$.get($.ccio.init('location',$user)+v.user.auth_token+'/configureMonitor/'+v.ke+'/'+v.mid+'/delete',function(data){
console.log(data)
})
})
}
},
{
title:'Delete Monitors and Files',
class:'btn-danger',
callback:function(){
$.each(arr,function(n,v){
$.get($.ccio.init('location',$user)+v.user.auth_token+'/configureMonitor/'+v.ke+'/'+v.mid+'/delete?deleteFiles=true',function(data){
console.log(data)
})
})
}
}
]);
})
//$.multimon.e.find('.edit_all').click(function(){
// var arr=$.multimon.getSelectedMonitors();
@ -2988,9 +3233,9 @@ $.multimon.e.on('shown.bs.modal',function() {
var img = $('#left_menu [mid="'+v.mid+'"][auth="'+v.user.auth_token+'"] [monitor="watch"]').attr('src')
tmp+='<tr mid="'+v.mid+'" ke="'+v.ke+'" auth="'+v.user.auth_token+'">'
tmp+='<td><div class="checkbox"><input id="multimonCheck_'+v.ke+v.mid+v.user.auth_token+'" type="checkbox" name="'+v.ke+v.mid+v.user.auth_token+'" value="1"><label for="multimonCheck_'+v.ke+v.mid+v.user.auth_token+'"></label></div></td>'
tmp+='<td><a monitor="watch"><img class="small-square-img" src="'+img+'"></a></td><td>'+v.name+'<br><small>'+v.mid+'</small></td><td class="monitor_mode">'+$.ccio.init('humanReadMode',v.mode)+'</td><td>'+streamURL+'</td>'
tmp+='<td><a monitor="watch"><img class="small-square-img" src="'+img+'"></a></td><td>'+v.name+'<br><small>'+v.mid+'</small></td><td class="monitor_status">'+v.status+'</td><td>'+streamURL+'</td>'
//buttons
tmp+='<td class="text-right"><a title="<%-cleanLang(lang.Pop)%>" monitor="pop" class="btn btn-primary"><i class="fa fa-external-link"></i></a> <a title="<%-cleanLang(lang.Calendar)%>" monitor="calendar" class="btn btn-default"><i class="fa fa-calendar"></i></a> <a title="<%-cleanLang(lang['Power Viewer'])%>" class="btn btn-default" monitor="powerview"><i class="fa fa-map-marker"></i></a> <a title="<%-cleanLang(lang['Time-lapse'])%>" class="btn btn-default" monitor="timelapse"><i class="fa fa-angle-double-right"></i></a> <a title="<%-cleanLang(lang['Videos List'])%>" monitor="videos_table" class="btn btn-default"><i class="fa fa-film"></i></a> <a title="<%-cleanLang(lang['Monitor Settings'])%>" class="btn btn-default permission_monitor_edit" monitor="edit"><i class="fa fa-wrench"></i></a></td>'
tmp+='<td class="text-right"><a title="<%-cleanLang(lang.Pop)%>" monitor="pop" class="btn btn-primary"><i class="fa fa-external-link"></i></a> <a title="<%-cleanLang(lang.Calendar)%>" monitor="calendar" class="btn btn-default"><i class="fa fa-calendar"></i></a> <a title="<%-cleanLang(lang['Power Viewer'])%>" class="btn btn-default" monitor="powerview"><i class="fa fa-map-marker"></i></a> <a title="<%-cleanLang(lang['Time-lapse'])%>" class="btn btn-default" monitor="timelapse"><i class="fa fa-angle-double-right"></i></a> <a title="<%-cleanLang(lang['Videos List'])%>" monitor="videos_table" class="btn btn-default"><i class="fa fa-film"></i></a> <a title="<%-cleanLang(lang['Monitor Settings'])%>" class="btn btn-default" monitor="edit"><i class="fa fa-wrench"></i></a></td>'
tmp+='</tr>'
})
$.multimon.table.html(tmp)
@ -3974,27 +4219,78 @@ $.vidview.f.submit(function(e){
$('#videos_viewer_limit,#videos_viewer_daterange').change(function(){
$.vidview.f.submit()
})
$.vidview.e.find('.delete_selected').click(function(e){
e.s={}
$.vidview.getSelected = function(getArray){
var arr = {}
if(getArray){
arr = []
}
$.vidview.f.find('[data-ke] input:checked').each(function(n,v){
v=$(v).parents('tr')
e.s[v.attr('data-file')]={mid:v.attr('data-mid'),auth:v.attr('data-auth')}
if(getArray){
arr.push({filename:v.attr('data-file'),mid:v.attr('data-mid'),auth:v.attr('data-auth')})
}else{
arr[v.attr('data-file')]={mid:v.attr('data-mid'),auth:v.attr('data-auth')}
}
})
return arr
}
$.vidview.e.find('.delete_selected').click(function(){
e = {}
e.s = $.vidview.getSelected()
if(Object.keys(e.s).length === 0){
$.ccio.init('note',{
title:'No Videos Selected',
text:'You must choose at least one video.',
type:'error'
},$user);
return
}
$.confirm.e.modal('show');
$.confirm.title.text('<%-cleanLang(lang['Delete Selected Videos'])%>')
e.html='<%-cleanLang(lang.DeleteSelectedVideosMsg)%><div style="margin-bottom:15px"></div>'
var deleteLinks = []
$.each(e.s,function(n,v){
e.html+=n+'<br>';
if($.vidview.loadedVideos[n])deleteLinks.push($.vidview.loadedVideos[n].links.deleteVideo)
})
$.confirm.body.html(e.html)
$.confirm.click({title:'Delete Video',class:'btn-danger'},function(){
$.each(e.s,function(n,v){
$.getJSON($.ccio.init('location',$.users[v.auth])+v.auth+'/videos/'+$user.ke+'/'+v.mid+'/'+n+'/delete',function(d){
$.each(deleteLinks,function(n,link){
$.getJSON(link,function(d){
$.ccio.log(d)
})
})
});
})
$.vidview.e.find('.export_selected').click(function(){
e = {}
var videos = $.vidview.getSelected(true)
if(videos.length === 0){
$.ccio.init('note',{
title:'No Videos Selected',
text:'You must choose at least one video.',
type:'error'
},$user);
return
}
$.confirm.e.modal('show');
$.confirm.title.text('<%-cleanLang(lang['Export Selected Videos'])%>')
var html = '<%-cleanLang(lang.ExportSelectedVideosMsg)%><div style="margin-bottom:15px"></div>'
$.each(videos,function(n,v){
html+=v.filename+'<br>';
})
$.confirm.body.html(html)
$.confirm.click({title:'Export Video',class:'btn-danger'},function(){
var queryVariables = []
queryVariables.push('videos='+JSON.stringify(videos))
if(<%-config.useUTC%> === true){
queryVariables.push('isUTC=true')
}
console.log(queryVariables)
var downloadZip = $.ccio.init('location',$user)+$user.auth_token+'/zipVideos/'+$user.ke+'?'+queryVariables.join('&')
$('#temp').html('<iframe>a</iframe>').find('iframe').attr('src',downloadZip);
});
})
$.vidview.pages.on('click','[page]',function(e){
e.limit=$.vidview.limit.val();
e.page=$(this).attr('page');
@ -4062,7 +4358,7 @@ $.timelapse.drawTimeline=function(getData){
e.tmp=''
$.each(videos.videos,function(n,v){
if(!v||!v.time){return}
v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
// v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
v.videoBefore=videos.videos[n-1];
v.videoAfter=videos.videos[n+1];
// if(v.href.charAt(0)==='/'){
@ -4075,7 +4371,7 @@ $.timelapse.drawTimeline=function(getData){
e.tmp+='<div class="flex-block">'
e.tmp+='<div class="flex-unit-3"><div class="frame" style="background-image:url('+$.timelapse.placeholder+')"></div></div>'
e.tmp+='<div class="flex-unit-3"><div><span title="'+v.time+'" class="livestamp"></span></div><div>'+v.filename+'</div></div>'
e.tmp+='<div class="flex-unit-3 text-right"><a class="btn btn-default" download="'+v.mid+'-'+v.filename+'" href="'+v.href+'">&nbsp;<i class="fa fa-download"></i>&nbsp;</a> <a class="btn btn-danger" video="delete">&nbsp;<i class="fa fa-trash-o"></i>&nbsp;</a></div>'
e.tmp+='<div class="flex-unit-3 text-right"><a class="btn btn-default" download="'+v.mid+'-'+v.filename+'" href="'+v.href+'">&nbsp;<i class="fa fa-download"></i>&nbsp;</a> <a class="btn btn-danger" video="delete" href="'+$.ccio.init('videoHrefToDelete',v.href)+'">&nbsp;<i class="fa fa-trash-o"></i>&nbsp;</a></div>'
e.tmp+='</div>'
e.tmp+='<div class="flex-block">'
e.tmp+='<div class="flex-unit-3"><div class="progress"><div class="progress-bar progress-bar-primary" role="progressbar" style="width:0%"></div></div></div>'
@ -4449,7 +4745,8 @@ $.pwrvid.e.on('click','[preview]',function(e){
$.pwrvid.vp.find('.stream-objects .stream-detected-object').remove()
})
if(e.status==1){
$.get(e.href.split('?')[0]+'/status/2',function(d){
$.get($.ccio.init('videoHrefToRead',e.href),function(d){
})
}
var labels=[]
@ -4778,22 +5075,28 @@ $('body')
.attr('auth',e.auth)
.attr('file',e.file);
if(e.status==1){
$.get(e.href.split('?')[0]+'/status/2',function(d){
$.get($.ccio.init('videoHrefToRead',e.href),function(d){
if(d.ok !== true)console.log(d,new Error())
})
}
break;
case'delete':
e.href=e.p.find('[download]').attr('href')
if(!e.href||e.href===''){
e.href=e.p.attr('href')
e.preventDefault();
var videoLink = e.p.find('[download]').attr('href')
var href = $(this).attr('href')
console.log('videoLink',videoLink)
console.log(href)
if(!href){
href = $.ccio.init('location',$.users[e.auth])+e.auth+'/videos/'+e.ke+'/'+e.mid+'/'+e.file+'/delete<% if(config.useUTC === true){%>?isUTC=true<%}%>'
}
console.log(href)
$.confirm.e.modal('show');
$.confirm.title.text('<%-cleanLang(lang['Delete Video'])%> : '+e.file)
e.html='<%-cleanLang(lang.DeleteVideoMsg)%>'
e.html+='<video class="video_video" autoplay loop controls><source src="'+e.href+'" type="video/'+e.mon.ext+'"></video>';
e.html+='<video class="video_video" autoplay loop controls><source src="'+videoLink+'" type="video/'+e.mon.ext+'"></video>';
$.confirm.body.html(e.html)
$.confirm.click({title:'Delete Video',class:'btn-danger'},function(){
$.getJSON($.ccio.init('location',$.users[e.auth])+e.auth+'/videos/'+e.ke+'/'+e.mid+'/'+e.file+'/delete',function(d){
$.getJSON(href,function(d){
$.ccio.log(d)
})
});
@ -4847,6 +5150,15 @@ $('body')
$('.monitor_item').attr('data-gs-auto-position','no')
}
break;
case'monitorMuteAudio':
$('.monitor_item video').each(function(n,el){
if(e.o[e.switch] === 1){
el.muted = true
}else{
el.muted = false
}
})
break;
}
switch(e.e.attr('type')){
case'text':
@ -5060,6 +5372,7 @@ $('body')
d.fn()
$.vidview.pages.find('[page="'+$.vidview.current_page+'"]').addClass('active')
e.v=$.vidview.e;
$.vidview.loadedVideos = {}
e.b=e.v.modal('show').find('.modal-body .contents');
e.t=e.v.find('.modal-title i');
switch(e.a){
@ -5068,11 +5381,12 @@ $('body')
e.ar=[];
if(d.videos[0]){
$.each(d.videos,function(n,v){
if(v.status!==0){
if(v.status !== 0){
$.vidview.loadedVideos[v.filename] = Object.assign(v,{})
var n=$.ccio.mon[v.ke+v.mid+user.auth_token];
if(n){v.title=n.name+' - '+(parseInt(v.size)/1000000).toFixed(2)+'mb';}
v.start=v.time;
v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
// v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
e.ar.push(v);
}
})
@ -5089,7 +5403,7 @@ $('body')
eventLimit: true,
events:e.ar,
eventClick:function(f){
$('#temp').html('<div mid="'+f.mid+'" ke="'+f.ke+'" auth="'+user.auth_token+'" file="'+f.filename+'"><div video="launch" href="'+f.href+'"></div></div>').find('[video="launch"]').click();
$('#temp').html('<div mid="'+f.mid+'" ke="'+f.ke+'" auth="'+user.auth_token+'" file="'+f.filename+'"><div video="launch" href="'+$.ccio.init('videoUrlBuild',f)+'"></div></div>').find('[video="launch"]').click();
$(this).css('border-color', 'red');
}
});
@ -5120,13 +5434,14 @@ $('body')
e.tmp+='<tbody>';
$.each(d.videos,function(n,v){
if(v.status!==0){
var href = $.ccio.init('location',user)+v.href
$.vidview.loadedVideos[v.filename] = Object.assign(v,{})
var href = $.ccio.init('videoUrlBuild',v)
v.mon=$.ccio.mon[v.ke+v.mid+user.auth_token];
v.start=v.time;
v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
// v.filename=$.ccio.init('tf',v.time)+'.'+v.ext;
e.tmp+='<tr data-ke="'+v.ke+'" data-status="'+v.status+'" data-mid="'+v.mid+'" data-file="'+v.filename+'" data-auth="'+v.mon.user.auth_token+'">';
e.tmp+='<td><div class="checkbox"><input id="'+v.ke+'_'+v.filename+'" name="'+v.filename+'" value="'+v.mid+'" type="checkbox"><label for="'+v.ke+'_'+v.filename+'"></label></div></td>';
e.tmp+='<td><span class="livestamp" title="'+v.end+'"></span></td>';
e.tmp+='<td><span class="livestamp" title="'+$.ccio.timeObject(v.end).format('YYYY-MM-DD HH:mm:ss')+'"></span></td>';
e.tmp+='<td title="'+v.end+'">'+$.ccio.timeObject(v.end).format('h:mm:ss A, MMMM Do YYYY')+'</td>';
e.tmp+='<td title="'+v.time+'">'+$.ccio.timeObject(v.time).format('h:mm:ss A, MMMM Do YYYY')+'</td>';
e.tmp+='<td>'+v.mon.name+'</td>';
@ -5135,7 +5450,7 @@ $('body')
e.tmp+='<td><a class="btn btn-sm btn-default preview" href="'+href+'">&nbsp;<i class="fa fa-play-circle"></i>&nbsp;</a></td>';
e.tmp+='<td><a class="btn btn-sm btn-primary" video="launch" href="'+href+'">&nbsp;<i class="fa fa-play-circle"></i>&nbsp;</a></td>';
e.tmp+='<td><a class="btn btn-sm btn-success" download="'+v.mid+'-'+v.filename+'" href="'+href+'">&nbsp;<i class="fa fa-download"></i>&nbsp;</a></td>';
e.tmp+='<td class="permission_video_delete"><a class="btn btn-sm btn-danger" video="delete">&nbsp;<i class="fa fa-trash"></i>&nbsp;</a></td>';
e.tmp+='<td class="permission_video_delete"><a class="btn btn-sm btn-danger" video="delete" href="'+$.ccio.init('videoHrefToDelete',href)+'">&nbsp;<i class="fa fa-trash"></i>&nbsp;</a></td>';
// e.tmp+='<td class="permission_video_delete"><a class="btn btn-sm btn-warning" video="fix">&nbsp;<i class="fa fa-wrench"></i>&nbsp;</a></td>';
e.tmp+='</tr>';
}
@ -5189,11 +5504,26 @@ $('body')
})
e.html+='</tr></table>';
$.confirm.body.html(e.html)
$.confirm.click({title:'Delete Monitor',class:'btn-danger'},function(){
$.get($.ccio.init('location',user)+user.auth_token+'/configureMonitor/'+user.ke+'/'+e.mon.mid+'/delete',function(d){
$.ccio.log(d)
})
});
$.confirm.click([
{
title:'Delete Monitor',
class:'btn-danger',
callback:function(){
$.get($.ccio.init('location',user)+user.auth_token+'/configureMonitor/'+user.ke+'/'+e.mon.mid+'/delete',function(d){
$.ccio.log(d)
})
}
},
{
title:'Delete Monitor and Files',
class:'btn-danger',
callback:function(){
$.get($.ccio.init('location',user)+user.auth_token+'/configureMonitor/'+user.ke+'/'+e.mon.mid+'/delete?deleteFiles=true',function(d){
$.ccio.log(d)
})
}
}
])
break;
case'edit':
e.p=$('#add_monitor'),e.mt=e.p.find('.modal-title')

220
web/libs/js/now-ui-kit.js Normal file
View file

@ -0,0 +1,220 @@
/*!
=========================================================
* Now-ui-kit - v1.1.0
=========================================================
* Product Page: https://www.creative-tim.com/product/now-ui-kit
* Copyright 2017 Creative Tim (http://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/now-ui-kit/blob/master/LICENSE.md)
* Designed by www.invisionapp.com Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
var transparent = true;
var transparentDemo = true;
var fixedTop = false;
var navbar_initialized,
backgroundOrange = false,
toggle_initialized = false;
$(document).ready(function() {
try{
// Activate the Tooltips
$('[data-toggle="tooltip"], [rel="tooltip"]').tooltip();
// Activate Popovers and set color for popovers
$('[data-toggle="popover"]').each(function() {
color_class = $(this).data('color');
$(this).popover({
template: '<div class="popover popover-' + color_class + '" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});
});
}catch(err){
}
// Activate the image for the navbar-collapse
nowuiKit.initNavbarImage();
$navbar = $('.navbar[color-on-scroll]');
scroll_distance = $navbar.attr('color-on-scroll') || 500;
// Check if we have the class "navbar-color-on-scroll" then add the function to remove the class "navbar-transparent" so it will transform to a plain color.
// if ($('.navbar[color-on-scroll]').length != 0) {
// nowuiKit.checkScrollForTransparentNavbar();
// $(window).on('scroll', nowuiKit.checkScrollForTransparentNavbar)
// }
$('.form-control').on("focus", function() {
$(this).parent('.input-group').addClass("input-group-focus");
}).on("blur", function() {
$(this).parent(".input-group").removeClass("input-group-focus");
});
// Activate bootstrapSwitch
$('.bootstrap-switch').each(function() {
$this = $(this);
data_on_label = $this.data('on-label') || '';
data_off_label = $this.data('off-label') || '';
$this.bootstrapSwitch({
onText: data_on_label,
offText: data_off_label
});
});
if ($(window).width() >= 992) {
big_image = $('.page-header-image[data-parallax="true"]');
$(window).on('scroll', nowuiKitDemo.checkScrollForParallax);
}
// Activate Carousel
$('.carousel').carousel({
interval: 4000
});
$('.date-picker').each(function() {
$(this).datepicker({
templates: {
leftArrow: '<i class="now-ui-icons arrows-1_minimal-left"></i>',
rightArrow: '<i class="now-ui-icons arrows-1_minimal-right"></i>'
}
}).on('show', function() {
$('.datepicker').addClass('open');
datepicker_color = $(this).data('datepicker-color');
if (datepicker_color.length != 0) {
$('.datepicker').addClass('datepicker-' + datepicker_color + '');
}
}).on('hide', function() {
$('.datepicker').removeClass('open');
});
});
});
$(window).on('resize', function() {
nowuiKit.initNavbarImage();
});
$(document).on('click', '.navbar-toggler', function() {
$toggle = $(this);
if (nowuiKit.misc.navbar_menu_visible == 1) {
$('html').removeClass('nav-open');
nowuiKit.misc.navbar_menu_visible = 0;
$('#bodyClick').remove();
setTimeout(function() {
$toggle.removeClass('toggled');
}, 550);
} else {
setTimeout(function() {
$toggle.addClass('toggled');
}, 580);
div = '<div id="bodyClick"></div>';
$(div).appendTo('body').click(function() {
$('html').removeClass('nav-open');
nowuiKit.misc.navbar_menu_visible = 0;
setTimeout(function() {
$toggle.removeClass('toggled');
$('#bodyClick').remove();
}, 550);
});
$('html').addClass('nav-open');
nowuiKit.misc.navbar_menu_visible = 1;
}
});
nowuiKit = {
misc: {
navbar_menu_visible: 0
},
checkScrollForTransparentNavbar: debounce(function() {
if ($(document).scrollTop() > scroll_distance) {
if (transparent) {
transparent = false;
$('.navbar[color-on-scroll]').removeClass('navbar-transparent');
}
} else {
if (!transparent) {
transparent = true;
$('.navbar[color-on-scroll]').addClass('navbar-transparent');
}
}
}, 17),
initNavbarImage: function() {
var $navbar = $('.navbar').find('.navbar-translate').siblings('.navbar-collapse');
var background_image = $navbar.data('nav-image');
if ($(window).width() < 991 || $('body').hasClass('burger-menu')) {
if (background_image != undefined) {
$navbar.css('background', "url('" + background_image + "')")
.removeAttr('data-nav-image')
.css('background-size', "cover")
.addClass('has-image');
}
} else if (background_image != undefined) {
$navbar.css('background', "")
.attr('data-nav-image', '' + background_image + '')
.css('background-size', "")
.removeClass('has-image');
}
},
initSliders: function() {
}
}
var big_image;
// Javascript just for Demo purpose, remove it from your project
nowuiKitDemo = {
checkScrollForParallax: debounce(function() {
var current_scroll = $(this).scrollTop();
oVal = ($(window).scrollTop() / 3);
big_image.css({
'transform': 'translate3d(0,' + oVal + 'px,0)',
'-webkit-transform': 'translate3d(0,' + oVal + 'px,0)',
'-ms-transform': 'translate3d(0,' + oVal + 'px,0)',
'-o-transform': 'translate3d(0,' + oVal + 'px,0)'
});
}, 6)
}
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
timeout = null;
if (!immediate) func.apply(context, args);
}, wait);
if (immediate && !timeout) func.apply(context, args);
};
};

834
web/libs/js/popper.min.js vendored Normal file
View file

@ -0,0 +1,834 @@
/*
Copyright (C) Federico Zivolo 2017
Distributed under the MIT License (license terms are at http://opensource.org/licenses/MIT).
*/
(function(e, t) {
'object' == typeof exports && 'undefined' != typeof module ? module.exports = t() : 'function' == typeof define && define.amd ? define(t) : e.Popper = t()
})(this, function() {
'use strict';
function e(e) {
return e && '[object Function]' === {}.toString.call(e)
}
function t(e, t) {
if (1 !== e.nodeType) return [];
var o = window.getComputedStyle(e, null);
return t ? o[t] : o
}
function o(e) {
return 'HTML' === e.nodeName ? e : e.parentNode || e.host
}
function n(e) {
if (!e || -1 !== ['HTML', 'BODY', '#document'].indexOf(e.nodeName)) return window.document.body;
var i = t(e),
r = i.overflow,
p = i.overflowX,
s = i.overflowY;
return /(auto|scroll)/.test(r + s + p) ? e : n(o(e))
}
function r(e) {
var o = e && e.offsetParent,
i = o && o.nodeName;
return i && 'BODY' !== i && 'HTML' !== i ? -1 !== ['TD', 'TABLE'].indexOf(o.nodeName) && 'static' === t(o, 'position') ? r(o) : o : window.document.documentElement
}
function p(e) {
var t = e.nodeName;
return 'BODY' !== t && ('HTML' === t || r(e.firstElementChild) === e)
}
function s(e) {
return null === e.parentNode ? e : s(e.parentNode)
}
function d(e, t) {
if (!e || !e.nodeType || !t || !t.nodeType) return window.document.documentElement;
var o = e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING,
i = o ? e : t,
n = o ? t : e,
a = document.createRange();
a.setStart(i, 0), a.setEnd(n, 0);
var f = a.commonAncestorContainer;
if (e !== f && t !== f || i.contains(n)) return p(f) ? f : r(f);
var l = s(e);
return l.host ? d(l.host, t) : d(e, s(t).host)
}
function a(e) {
var t = 1 < arguments.length && void 0 !== arguments[1] ? arguments[1] : 'top',
o = 'top' === t ? 'scrollTop' : 'scrollLeft',
i = e.nodeName;
if ('BODY' === i || 'HTML' === i) {
var n = window.document.documentElement,
r = window.document.scrollingElement || n;
return r[o]
}
return e[o]
}
function f(e, t) {
var o = 2 < arguments.length && void 0 !== arguments[2] && arguments[2],
i = a(t, 'top'),
n = a(t, 'left'),
r = o ? -1 : 1;
return e.top += i * r, e.bottom += i * r, e.left += n * r, e.right += n * r, e
}
function l(e, t) {
var o = 'x' === t ? 'Left' : 'Top',
i = 'Left' == o ? 'Right' : 'Bottom';
return +e['border' + o + 'Width'].split('px')[0] + +e['border' + i + 'Width'].split('px')[0]
}
function m(e, t, o, i) {
return _(t['offset' + e], o['client' + e], o['offset' + e], ie() ? o['offset' + e] + i['margin' + ('Height' === e ? 'Top' : 'Left')] + i['margin' + ('Height' === e ? 'Bottom' : 'Right')] : 0)
}
function h() {
var e = window.document.body,
t = window.document.documentElement,
o = ie() && window.getComputedStyle(t);
return {
height: m('Height', e, t, o),
width: m('Width', e, t, o)
}
}
function c(e) {
return se({}, e, {
right: e.left + e.width,
bottom: e.top + e.height
})
}
function g(e) {
var o = {};
if (ie()) try {
o = e.getBoundingClientRect();
var i = a(e, 'top'),
n = a(e, 'left');
o.top += i, o.left += n, o.bottom += i, o.right += n
} catch (e) {} else o = e.getBoundingClientRect();
var r = {
left: o.left,
top: o.top,
width: o.right - o.left,
height: o.bottom - o.top
},
p = 'HTML' === e.nodeName ? h() : {},
s = p.width || e.clientWidth || r.right - r.left,
d = p.height || e.clientHeight || r.bottom - r.top,
f = e.offsetWidth - s,
m = e.offsetHeight - d;
if (f || m) {
var g = t(e);
f -= l(g, 'x'), m -= l(g, 'y'), r.width -= f, r.height -= m
}
return c(r)
}
function u(e, o) {
var i = ie(),
r = 'HTML' === o.nodeName,
p = g(e),
s = g(o),
d = n(e),
a = t(o),
l = +a.borderTopWidth.split('px')[0],
m = +a.borderLeftWidth.split('px')[0],
h = c({
top: p.top - s.top - l,
left: p.left - s.left - m,
width: p.width,
height: p.height
});
if (h.marginTop = 0, h.marginLeft = 0, !i && r) {
var u = +a.marginTop.split('px')[0],
b = +a.marginLeft.split('px')[0];
h.top -= l - u, h.bottom -= l - u, h.left -= m - b, h.right -= m - b, h.marginTop = u, h.marginLeft = b
}
return (i ? o.contains(d) : o === d && 'BODY' !== d.nodeName) && (h = f(h, o)), h
}
function b(e) {
var t = window.document.documentElement,
o = u(e, t),
i = _(t.clientWidth, window.innerWidth || 0),
n = _(t.clientHeight, window.innerHeight || 0),
r = a(t),
p = a(t, 'left'),
s = {
top: r - o.top + o.marginTop,
left: p - o.left + o.marginLeft,
width: i,
height: n
};
return c(s)
}
function y(e) {
var i = e.nodeName;
return 'BODY' === i || 'HTML' === i ? !1 : 'fixed' === t(e, 'position') || y(o(e))
}
function w(e, t, i, r) {
var p = {
top: 0,
left: 0
},
s = d(e, t);
if ('viewport' === r) p = b(s);
else {
var a;
'scrollParent' === r ? (a = n(o(e)), 'BODY' === a.nodeName && (a = window.document.documentElement)) : 'window' === r ? a = window.document.documentElement : a = r;
var f = u(a, s);
if ('HTML' === a.nodeName && !y(s)) {
var l = h(),
m = l.height,
c = l.width;
p.top += f.top - f.marginTop, p.bottom = m + f.top, p.left += f.left - f.marginLeft, p.right = c + f.left
} else p = f
}
return p.left += i, p.top += i, p.right -= i, p.bottom -= i, p
}
function v(e) {
var t = e.width,
o = e.height;
return t * o
}
function E(e, t, o, i, n) {
var r = 5 < arguments.length && void 0 !== arguments[5] ? arguments[5] : 0;
if (-1 === e.indexOf('auto')) return e;
var p = w(o, i, r, n),
s = {
top: {
width: p.width,
height: t.top - p.top
},
right: {
width: p.right - t.right,
height: p.height
},
bottom: {
width: p.width,
height: p.bottom - t.bottom
},
left: {
width: t.left - p.left,
height: p.height
}
},
d = Object.keys(s).map(function(e) {
return se({
key: e
}, s[e], {
area: v(s[e])
})
}).sort(function(e, t) {
return t.area - e.area
}),
a = d.filter(function(e) {
var t = e.width,
i = e.height;
return t >= o.clientWidth && i >= o.clientHeight
}),
f = 0 < a.length ? a[0].key : d[0].key,
l = e.split('-')[1];
return f + (l ? '-' + l : '')
}
function x(e, t, o) {
var i = d(t, o);
return u(o, i)
}
function O(e) {
var t = window.getComputedStyle(e),
o = parseFloat(t.marginTop) + parseFloat(t.marginBottom),
i = parseFloat(t.marginLeft) + parseFloat(t.marginRight),
n = {
width: e.offsetWidth + i,
height: e.offsetHeight + o
};
return n
}
function L(e) {
var t = {
left: 'right',
right: 'left',
bottom: 'top',
top: 'bottom'
};
return e.replace(/left|right|bottom|top/g, function(e) {
return t[e]
})
}
function S(e, t, o) {
o = o.split('-')[0];
var i = O(e),
n = {
width: i.width,
height: i.height
},
r = -1 !== ['right', 'left'].indexOf(o),
p = r ? 'top' : 'left',
s = r ? 'left' : 'top',
d = r ? 'height' : 'width',
a = r ? 'width' : 'height';
return n[p] = t[p] + t[d] / 2 - i[d] / 2, n[s] = o === s ? t[s] - i[a] : t[L(s)], n
}
function T(e, t) {
return Array.prototype.find ? e.find(t) : e.filter(t)[0]
}
function C(e, t, o) {
if (Array.prototype.findIndex) return e.findIndex(function(e) {
return e[t] === o
});
var i = T(e, function(e) {
return e[t] === o
});
return e.indexOf(i)
}
function N(t, o, i) {
var n = void 0 === i ? t : t.slice(0, C(t, 'name', i));
return n.forEach(function(t) {
t.function && console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
var i = t.function || t.fn;
t.enabled && e(i) && (o.offsets.popper = c(o.offsets.popper), o.offsets.reference = c(o.offsets.reference), o = i(o, t))
}), o
}
function k() {
if (!this.state.isDestroyed) {
var e = {
instance: this,
styles: {},
attributes: {},
flipped: !1,
offsets: {}
};
e.offsets.reference = x(this.state, this.popper, this.reference), e.placement = E(this.options.placement, e.offsets.reference, this.popper, this.reference, this.options.modifiers.flip.boundariesElement, this.options.modifiers.flip.padding), e.originalPlacement = e.placement, e.offsets.popper = S(this.popper, e.offsets.reference, e.placement), e.offsets.popper.position = 'absolute', e = N(this.modifiers, e), this.state.isCreated ? this.options.onUpdate(e) : (this.state.isCreated = !0, this.options.onCreate(e))
}
}
function W(e, t) {
return e.some(function(e) {
var o = e.name,
i = e.enabled;
return i && o === t
})
}
function B(e) {
for (var t = [!1, 'ms', 'Webkit', 'Moz', 'O'], o = e.charAt(0).toUpperCase() + e.slice(1), n = 0; n < t.length - 1; n++) {
var i = t[n],
r = i ? '' + i + o : e;
if ('undefined' != typeof window.document.body.style[r]) return r
}
return null
}
function D() {
return this.state.isDestroyed = !0, W(this.modifiers, 'applyStyle') && (this.popper.removeAttribute('x-placement'), this.popper.style.left = '', this.popper.style.position = '', this.popper.style.top = '', this.popper.style[B('transform')] = ''), this.disableEventListeners(), this.options.removeOnDestroy && this.popper.parentNode.removeChild(this.popper), this
}
function H(e, t, o, i) {
var r = 'BODY' === e.nodeName,
p = r ? window : e;
p.addEventListener(t, o, {
passive: !0
}), r || H(n(p.parentNode), t, o, i), i.push(p)
}
function P(e, t, o, i) {
o.updateBound = i, window.addEventListener('resize', o.updateBound, {
passive: !0
});
var r = n(e);
return H(r, 'scroll', o.updateBound, o.scrollParents), o.scrollElement = r, o.eventsEnabled = !0, o
}
function A() {
this.state.eventsEnabled || (this.state = P(this.reference, this.options, this.state, this.scheduleUpdate))
}
function M(e, t) {
return window.removeEventListener('resize', t.updateBound), t.scrollParents.forEach(function(e) {
e.removeEventListener('scroll', t.updateBound)
}), t.updateBound = null, t.scrollParents = [], t.scrollElement = null, t.eventsEnabled = !1, t
}
function I() {
this.state.eventsEnabled && (window.cancelAnimationFrame(this.scheduleUpdate), this.state = M(this.reference, this.state))
}
function R(e) {
return '' !== e && !isNaN(parseFloat(e)) && isFinite(e)
}
function U(e, t) {
Object.keys(t).forEach(function(o) {
var i = ''; - 1 !== ['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(o) && R(t[o]) && (i = 'px'), e.style[o] = t[o] + i
})
}
function Y(e, t) {
Object.keys(t).forEach(function(o) {
var i = t[o];
!1 === i ? e.removeAttribute(o) : e.setAttribute(o, t[o])
})
}
function F(e, t, o) {
var i = T(e, function(e) {
var o = e.name;
return o === t
}),
n = !!i && e.some(function(e) {
return e.name === o && e.enabled && e.order < i.order
});
if (!n) {
var r = '`' + t + '`';
console.warn('`' + o + '`' + ' modifier is required by ' + r + ' modifier in order to work, be sure to include it before ' + r + '!')
}
return n
}
function j(e) {
return 'end' === e ? 'start' : 'start' === e ? 'end' : e
}
function K(e) {
var t = 1 < arguments.length && void 0 !== arguments[1] && arguments[1],
o = ae.indexOf(e),
i = ae.slice(o + 1).concat(ae.slice(0, o));
return t ? i.reverse() : i
}
function q(e, t, o, i) {
var n = e.match(/((?:\-|\+)?\d*\.?\d*)(.*)/),
r = +n[1],
p = n[2];
if (!r) return e;
if (0 === p.indexOf('%')) {
var s;
switch (p) {
case '%p':
s = o;
break;
case '%':
case '%r':
default:
s = i;
}
var d = c(s);
return d[t] / 100 * r
}
if ('vh' === p || 'vw' === p) {
var a;
return a = 'vh' === p ? _(document.documentElement.clientHeight, window.innerHeight || 0) : _(document.documentElement.clientWidth, window.innerWidth || 0), a / 100 * r
}
return r
}
function G(e, t, o, i) {
var n = [0, 0],
r = -1 !== ['right', 'left'].indexOf(i),
p = e.split(/(\+|\-)/).map(function(e) {
return e.trim()
}),
s = p.indexOf(T(p, function(e) {
return -1 !== e.search(/,|\s/)
}));
p[s] && -1 === p[s].indexOf(',') && console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');
var d = /\s*,\s*|\s+/,
a = -1 === s ? [p] : [p.slice(0, s).concat([p[s].split(d)[0]]), [p[s].split(d)[1]].concat(p.slice(s + 1))];
return a = a.map(function(e, i) {
var n = (1 === i ? !r : r) ? 'height' : 'width',
p = !1;
return e.reduce(function(e, t) {
return '' === e[e.length - 1] && -1 !== ['+', '-'].indexOf(t) ? (e[e.length - 1] = t, p = !0, e) : p ? (e[e.length - 1] += t, p = !1, e) : e.concat(t)
}, []).map(function(e) {
return q(e, n, t, o)
})
}), a.forEach(function(e, t) {
e.forEach(function(o, i) {
R(o) && (n[t] += o * ('-' === e[i - 1] ? -1 : 1))
})
}), n
}
for (var z = Math.min, V = Math.floor, _ = Math.max, X = ['native code', '[object MutationObserverConstructor]'], Q = function(e) {
return X.some(function(t) {
return -1 < (e || '').toString().indexOf(t)
})
}, J = 'undefined' != typeof window, Z = ['Edge', 'Trident', 'Firefox'], $ = 0, ee = 0; ee < Z.length; ee += 1)
if (J && 0 <= navigator.userAgent.indexOf(Z[ee])) {
$ = 1;
break
}
var i, te = J && Q(window.MutationObserver),
oe = te ? function(e) {
var t = !1,
o = 0,
i = document.createElement('span'),
n = new MutationObserver(function() {
e(), t = !1
});
return n.observe(i, {
attributes: !0
}),
function() {
t || (t = !0, i.setAttribute('x-index', o), ++o)
}
} : function(e) {
var t = !1;
return function() {
t || (t = !0, setTimeout(function() {
t = !1, e()
}, $))
}
},
ie = function() {
return void 0 == i && (i = -1 !== navigator.appVersion.indexOf('MSIE 10')), i
},
ne = function(e, t) {
if (!(e instanceof t)) throw new TypeError('Cannot call a class as a function')
},
re = function() {
function e(e, t) {
for (var o, n = 0; n < t.length; n++) o = t[n], o.enumerable = o.enumerable || !1, o.configurable = !0, 'value' in o && (o.writable = !0), Object.defineProperty(e, o.key, o)
}
return function(t, o, i) {
return o && e(t.prototype, o), i && e(t, i), t
}
}(),
pe = function(e, t, o) {
return t in e ? Object.defineProperty(e, t, {
value: o,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[t] = o, e
},
se = Object.assign || function(e) {
for (var t, o = 1; o < arguments.length; o++)
for (var i in t = arguments[o], t) Object.prototype.hasOwnProperty.call(t, i) && (e[i] = t[i]);
return e
},
de = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'],
ae = de.slice(3),
fe = {
FLIP: 'flip',
CLOCKWISE: 'clockwise',
COUNTERCLOCKWISE: 'counterclockwise'
},
le = function() {
function t(o, i) {
var n = this,
r = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : {};
ne(this, t), this.scheduleUpdate = function() {
return requestAnimationFrame(n.update)
}, this.update = oe(this.update.bind(this)), this.options = se({}, t.Defaults, r), this.state = {
isDestroyed: !1,
isCreated: !1,
scrollParents: []
}, this.reference = o.jquery ? o[0] : o, this.popper = i.jquery ? i[0] : i, this.options.modifiers = {}, Object.keys(se({}, t.Defaults.modifiers, r.modifiers)).forEach(function(e) {
n.options.modifiers[e] = se({}, t.Defaults.modifiers[e] || {}, r.modifiers ? r.modifiers[e] : {})
}), this.modifiers = Object.keys(this.options.modifiers).map(function(e) {
return se({
name: e
}, n.options.modifiers[e])
}).sort(function(e, t) {
return e.order - t.order
}), this.modifiers.forEach(function(t) {
t.enabled && e(t.onLoad) && t.onLoad(n.reference, n.popper, n.options, t, n.state)
}), this.update();
var p = this.options.eventsEnabled;
p && this.enableEventListeners(), this.state.eventsEnabled = p
}
return re(t, [{
key: 'update',
value: function() {
return k.call(this)
}
}, {
key: 'destroy',
value: function() {
return D.call(this)
}
}, {
key: 'enableEventListeners',
value: function() {
return A.call(this)
}
}, {
key: 'disableEventListeners',
value: function() {
return I.call(this)
}
}]), t
}();
return le.Utils = ('undefined' == typeof window ? global : window).PopperUtils, le.placements = de, le.Defaults = {
placement: 'bottom',
eventsEnabled: !0,
removeOnDestroy: !1,
onCreate: function() {},
onUpdate: function() {},
modifiers: {
shift: {
order: 100,
enabled: !0,
fn: function(e) {
var t = e.placement,
o = t.split('-')[0],
i = t.split('-')[1];
if (i) {
var n = e.offsets,
r = n.reference,
p = n.popper,
s = -1 !== ['bottom', 'top'].indexOf(o),
d = s ? 'left' : 'top',
a = s ? 'width' : 'height',
f = {
start: pe({}, d, r[d]),
end: pe({}, d, r[d] + r[a] - p[a])
};
e.offsets.popper = se({}, p, f[i])
}
return e
}
},
offset: {
order: 200,
enabled: !0,
fn: function(e, t) {
var o, i = t.offset,
n = e.placement,
r = e.offsets,
p = r.popper,
s = r.reference,
d = n.split('-')[0];
return o = R(+i) ? [+i, 0] : G(i, p, s, d), 'left' === d ? (p.top += o[0], p.left -= o[1]) : 'right' === d ? (p.top += o[0], p.left += o[1]) : 'top' === d ? (p.left += o[0], p.top -= o[1]) : 'bottom' === d && (p.left += o[0], p.top += o[1]), e.popper = p, e
},
offset: 0
},
preventOverflow: {
order: 300,
enabled: !0,
fn: function(e, t) {
var o = t.boundariesElement || r(e.instance.popper);
e.instance.reference === o && (o = r(o));
var i = w(e.instance.popper, e.instance.reference, t.padding, o);
t.boundaries = i;
var n = t.priority,
p = e.offsets.popper,
s = {
primary: function(e) {
var o = p[e];
return p[e] < i[e] && !t.escapeWithReference && (o = _(p[e], i[e])), pe({}, e, o)
},
secondary: function(e) {
var o = 'right' === e ? 'left' : 'top',
n = p[o];
return p[e] > i[e] && !t.escapeWithReference && (n = z(p[o], i[e] - ('right' === e ? p.width : p.height))), pe({}, o, n)
}
};
return n.forEach(function(e) {
var t = -1 === ['left', 'top'].indexOf(e) ? 'secondary' : 'primary';
p = se({}, p, s[t](e))
}), e.offsets.popper = p, e
},
priority: ['left', 'right', 'top', 'bottom'],
padding: 5,
boundariesElement: 'scrollParent'
},
keepTogether: {
order: 400,
enabled: !0,
fn: function(e) {
var t = e.offsets,
o = t.popper,
i = t.reference,
n = e.placement.split('-')[0],
r = V,
p = -1 !== ['top', 'bottom'].indexOf(n),
s = p ? 'right' : 'bottom',
d = p ? 'left' : 'top',
a = p ? 'width' : 'height';
return o[s] < r(i[d]) && (e.offsets.popper[d] = r(i[d]) - o[a]), o[d] > r(i[s]) && (e.offsets.popper[d] = r(i[s])), e
}
},
arrow: {
order: 500,
enabled: !0,
fn: function(e, t) {
if (!F(e.instance.modifiers, 'arrow', 'keepTogether')) return e;
var o = t.element;
if ('string' == typeof o) {
if (o = e.instance.popper.querySelector(o), !o) return e;
} else if (!e.instance.popper.contains(o)) return console.warn('WARNING: `arrow.element` must be child of its popper element!'), e;
var i = e.placement.split('-')[0],
n = e.offsets,
r = n.popper,
p = n.reference,
s = -1 !== ['left', 'right'].indexOf(i),
d = s ? 'height' : 'width',
a = s ? 'top' : 'left',
f = s ? 'left' : 'top',
l = s ? 'bottom' : 'right',
m = O(o)[d];
p[l] - m < r[a] && (e.offsets.popper[a] -= r[a] - (p[l] - m)), p[a] + m > r[l] && (e.offsets.popper[a] += p[a] + m - r[l]);
var h = p[a] + p[d] / 2 - m / 2,
g = h - c(e.offsets.popper)[a];
return g = _(z(r[d] - m, g), 0), e.arrowElement = o, e.offsets.arrow = {}, e.offsets.arrow[a] = Math.round(g), e.offsets.arrow[f] = '', e
},
element: '[x-arrow]'
},
flip: {
order: 600,
enabled: !0,
fn: function(e, t) {
if (W(e.instance.modifiers, 'inner')) return e;
if (e.flipped && e.placement === e.originalPlacement) return e;
var o = w(e.instance.popper, e.instance.reference, t.padding, t.boundariesElement),
i = e.placement.split('-')[0],
n = L(i),
r = e.placement.split('-')[1] || '',
p = [];
switch (t.behavior) {
case fe.FLIP:
p = [i, n];
break;
case fe.CLOCKWISE:
p = K(i);
break;
case fe.COUNTERCLOCKWISE:
p = K(i, !0);
break;
default:
p = t.behavior;
}
return p.forEach(function(s, d) {
if (i !== s || p.length === d + 1) return e;
i = e.placement.split('-')[0], n = L(i);
var a = e.offsets.popper,
f = e.offsets.reference,
l = V,
m = 'left' === i && l(a.right) > l(f.left) || 'right' === i && l(a.left) < l(f.right) || 'top' === i && l(a.bottom) > l(f.top) || 'bottom' === i && l(a.top) < l(f.bottom),
h = l(a.left) < l(o.left),
c = l(a.right) > l(o.right),
g = l(a.top) < l(o.top),
u = l(a.bottom) > l(o.bottom),
b = 'left' === i && h || 'right' === i && c || 'top' === i && g || 'bottom' === i && u,
y = -1 !== ['top', 'bottom'].indexOf(i),
w = !!t.flipVariations && (y && 'start' === r && h || y && 'end' === r && c || !y && 'start' === r && g || !y && 'end' === r && u);
(m || b || w) && (e.flipped = !0, (m || b) && (i = p[d + 1]), w && (r = j(r)), e.placement = i + (r ? '-' + r : ''), e.offsets.popper = se({}, e.offsets.popper, S(e.instance.popper, e.offsets.reference, e.placement)), e = N(e.instance.modifiers, e, 'flip'))
}), e
},
behavior: 'flip',
padding: 5,
boundariesElement: 'viewport'
},
inner: {
order: 700,
enabled: !1,
fn: function(e) {
var t = e.placement,
o = t.split('-')[0],
i = e.offsets,
n = i.popper,
r = i.reference,
p = -1 !== ['left', 'right'].indexOf(o),
s = -1 === ['top', 'left'].indexOf(o);
return n[p ? 'left' : 'top'] = r[t] - (s ? n[p ? 'width' : 'height'] : 0), e.placement = L(t), e.offsets.popper = c(n), e
}
},
hide: {
order: 800,
enabled: !0,
fn: function(e) {
if (!F(e.instance.modifiers, 'hide', 'preventOverflow')) return e;
var t = e.offsets.reference,
o = T(e.instance.modifiers, function(e) {
return 'preventOverflow' === e.name
}).boundaries;
if (t.bottom < o.top || t.left > o.right || t.top > o.bottom || t.right < o.left) {
if (!0 === e.hide) return e;
e.hide = !0, e.attributes['x-out-of-boundaries'] = ''
} else {
if (!1 === e.hide) return e;
e.hide = !1, e.attributes['x-out-of-boundaries'] = !1
}
return e
}
},
computeStyle: {
order: 850,
enabled: !0,
fn: function(e, t) {
var o = t.x,
i = t.y,
n = e.offsets.popper,
p = T(e.instance.modifiers, function(e) {
return 'applyStyle' === e.name
}).gpuAcceleration;
void 0 !== p && console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');
var s, d, a = void 0 === p ? t.gpuAcceleration : p,
f = r(e.instance.popper),
l = g(f),
m = {
position: n.position
},
h = {
left: V(n.left),
top: V(n.top),
bottom: V(n.bottom),
right: V(n.right)
},
c = 'bottom' === o ? 'top' : 'bottom',
u = 'right' === i ? 'left' : 'right',
b = B('transform');
if (d = 'bottom' == c ? -l.height + h.bottom : h.top, s = 'right' == u ? -l.width + h.right : h.left, a && b) m[b] = 'translate3d(' + s + 'px, ' + d + 'px, 0)', m[c] = 0, m[u] = 0, m.willChange = 'transform';
else {
var y = 'bottom' == c ? -1 : 1,
w = 'right' == u ? -1 : 1;
m[c] = d * y, m[u] = s * w, m.willChange = c + ', ' + u
}
var v = {
"x-placement": e.placement
};
return e.attributes = se({}, v, e.attributes), e.styles = se({}, m, e.styles), e
},
gpuAcceleration: !0,
x: 'bottom',
y: 'right'
},
applyStyle: {
order: 900,
enabled: !0,
fn: function(e) {
return U(e.instance.popper, e.styles), Y(e.instance.popper, e.attributes), e.offsets.arrow && U(e.arrowElement, e.offsets.arrow), e
},
onLoad: function(e, t, o, i, n) {
var r = x(n, t, e),
p = E(o.placement, r, t, e, o.modifiers.flip.boundariesElement, o.modifiers.flip.padding);
return t.setAttribute('x-placement', p), U(t, {
position: 'absolute'
}), o
},
gpuAcceleration: void 0
}
}
}, le
});

57
web/libs/sass/now-ui-kit.scss Normal file
View file

@ -0,0 +1,57 @@
/*!
=========================================================
* Now-ui-kit - v1.1.0
=========================================================
* Product Page: http://www.creative-tim.com/product/now-ui-kit
* Copyright 2017 Creative Tim (http://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/now-ui-kit/blob/master/LICENSE.md)
* Designed by www.invisionapp.com Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
@import 'now-ui-kit/variables';
@import 'now-ui-kit/mixins';
// Plugins CSS
@import "now-ui-kit/plugins/plugin-bootstrap-switch";
@import "now-ui-kit/plugins/plugin-nouislider";
@import "now-ui-kit/plugins/plugin-datepicker";
// Core CSS
@import "now-ui-kit/buttons";
@import "now-ui-kit/inputs";
@import "now-ui-kit/checkboxes-radio";
@import "now-ui-kit/progress";
@import "now-ui-kit/badges";
@import "now-ui-kit/pagination";
@import "now-ui-kit/typography";
@import "now-ui-kit/misc";
@import "now-ui-kit/pills";
// components
@import "now-ui-kit/social-buttons";
@import "now-ui-kit/tabs";
@import "now-ui-kit/navbar";
@import "now-ui-kit/dropdown";
@import "now-ui-kit/alerts";
@import "now-ui-kit/images";
@import "now-ui-kit/popups";
@import "now-ui-kit/nucleo-outline";
@import "now-ui-kit/modals";
@import "now-ui-kit/carousel";
@import "now-ui-kit/cards";
@import "now-ui-kit/footers";
// example pages and sections
@import "now-ui-kit/example-pages";
@import "now-ui-kit/sections";
@import "now-ui-kit/responsive";

54
web/libs/sass/now-ui-kit/_alerts.scss Normal file
View file

@ -0,0 +1,54 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.alert{
border: 0;
border-radius: 0;
color: $white-color;
padding-top: .9rem;
padding-bottom: .9rem;
position: relative;
&.alert-success{
background-color: $success-color-alert;
}
&.alert-danger{
background-color: $danger-color-alert;
}
&.alert-warning{
background-color: $warning-color-alert;
}
&.alert-info{
background-color: $info-color-alert;
}
&.alert-primary{
background-color: $primary-color-alert;
}
.alert-icon{
display: block;
float: left;
margin-right: 15px;
margin-top: -1px;
}
strong{
text-transform: uppercase;
font-size: 12px;
}
i.fa,
i.now-ui-icons{
font-size: 20px;
}
.close{
color: $white-color;
opacity: .9;
text-shadow: none;
line-height: 0;
outline: 0;
}
}

39
web/libs/sass/now-ui-kit/_badges.scss Normal file
View file

@ -0,0 +1,39 @@
/* badges */
.badge{
border-radius: 8px;
padding: 4px 8px;
text-transform: uppercase;
font-size: $font-size-mini;
line-height: 12px;
background-color: $transparent-bg;
border: $border;
margin-bottom: 5px;
border-radius: $border-radius-extreme;
}
.badge-icon{
padding: 0.4em 0.55em;
i{
font-size: 0.8em;
}
}
.badge-default{
@include badge-color($default-color);
}
.badge-primary{
@include badge-color($primary-color);
}
.badge-info{
@include badge-color($info-color);
}
.badge-success{
@include badge-color($success-color);
}
.badge-warning{
@include badge-color($warning-color);
}
.badge-danger{
@include badge-color($danger-color);
}
.badge-neutral{
@include badge-color($white-color);
}

158
web/libs/sass/now-ui-kit/_buttons.scss Normal file
View file

@ -0,0 +1,158 @@
.btn,
.navbar .navbar-nav > a.btn{
border-width: $border-thick;
font-weight: $font-weight-normal;
font-size: $font-size-small;
line-height: $line-height;
margin: 5px 1px;
border: none;
border-radius: $border-radius-small;
padding: $padding-btn-vertical $padding-btn-horizontal;
cursor: pointer;
@include btn-styles($default-color, $default-states-color);
&:hover,
&:focus{
@include opacity(1);
outline: 0 !important;
}
&:active,
&.active,
.open > &.dropdown-toggle {
@include box-shadow(none);
outline: 0 !important;
}
&.btn-icon {
// see above for color variations
height: $btn-icon-size-regular;
min-width: $btn-icon-size-regular;
width: $btn-icon-size-regular;
padding: 0;
font-size: $btn-icon-font-size-regular;
overflow: hidden;
position: relative;
line-height: normal;
&.btn-simple{
padding: 0;
}
&.btn-sm{
height: $btn-icon-size-small;
min-width: $btn-icon-size-small;
width: $btn-icon-size-small;
i.fa,
i.now-ui-icons{
font-size: $btn-icon-font-size-small;
}
}
&.btn-lg{
height: $btn-icon-size-lg;
min-width: $btn-icon-size-lg;
width: $btn-icon-size-lg;
i.now-ui-icons,
i.fa{
font-size: $btn-icon-font-size-lg;
}
}
&:not(.btn-footer) i.now-ui-icons,
&:not(.btn-footer) i.fa{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-12px, -12px);
line-height: 1.5626rem;
width: 25px;
}
}
&:not(.btn-icon) .now-ui-icons{
position: relative;
top: 1px;
}
}
// Apply the mixin to the buttons
// .btn-default { @include btn-styles($default-color, $default-states-color); }
.btn-primary { @include btn-styles($primary-color, $primary-states-color); }
.btn-success { @include btn-styles($success-color, $success-states-color); }
.btn-info { @include btn-styles($info-color, $info-states-color); }
.btn-warning { @include btn-styles($warning-color, $warning-states-color); }
.btn-danger { @include btn-styles($danger-color, $danger-states-color); }
.btn-neutral { @include btn-styles($white-color, $white-color); }
.btn{
&:disabled,
&[disabled],
&.disabled{
@include opacity(.5);
}
}
.btn-round{
border-width: $border-thin;
border-radius: $btn-round-radius !important;
padding: $padding-btn-vertical $padding-round-horizontal;
&.btn-simple{
padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
}
}
.btn-simple{
border: $border;
border-color: $default-color;
padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
background-color: $transparent-bg;
}
.btn-simple,
.btn-link{
&.disabled,
&:disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: $transparent-bg;
}
}
}
.btn-lg{
@include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large);
}
.btn-sm{
@include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-base, $border-radius-small);
}
.btn-link{
border: $none;
padding: $padding-base-vertical $padding-base-horizontal;
background-color: $transparent-bg;
}
.btn-wd {
min-width: 140px;
}
.btn-group.select{
width: 100%;
}
.btn-group.select .btn{
text-align: left;
}
.btn-group.select .caret{
position: absolute;
top: 50%;
margin-top: -1px;
right: 8px;
}

98
web/libs/sass/now-ui-kit/_cards.scss Normal file
View file

@ -0,0 +1,98 @@
.card{
border: 0;
border-radius: $border-radius-small;
display: inline-block;
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 20px;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
.card-body{
min-height: 190px;
}
&[data-background-color="orange"]{
background-color: $primary-color;
}
&[data-background-color="red"]{
background-color: $danger-color;
}
&[data-background-color="yellow"]{
background-color: $warning-color;
}
&[data-background-color="blue"]{
background-color: $info-color;
}
&[data-background-color="green"]{
background-color: $success-color;
}
}
.card-signup{
max-width: 350px;
margin: 0 auto;
.header{
margin-left: 20px;
margin-right: 20px;
padding: 30px 0;
}
.text-divider{
margin-top: 30px;
margin-bottom: 0px;
text-align: center;
}
.card-body{
padding-top: 0px;
padding-bottom: 0px;
min-height: auto;
}
.checkbox{
margin-top: 20px;
label{
margin-left: 17px;
}
.checkbox-material{
padding-right: 12px;
}
}
.social-line{
margin-top: 20px;
text-align: center;
.btn.btn-icon ,
.btn.btn-icon .btn-icon -mini{
margin-left: 5px;
margin-right: 5px;
box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.2);
}
}
.footer{
margin-bottom: 10px;
margin-top: 24px;
}
}
.card-plain{
background: transparent;
box-shadow: none;
.header{
margin-left: 0;
margin-right: 0;
}
.content{
padding-left: 0;
padding-right: 0;
}
}

15
web/libs/sass/now-ui-kit/_carousel.scss Normal file
View file

@ -0,0 +1,15 @@
// display flex was causing errors
.carousel-item-next,
.carousel-item-prev,
.carousel-item.active{
display: block;
}
.carousel{
.carousel-inner{
box-shadow: $box-shadow-raised;
}
.now-ui-icons{
font-size: 2em;
}
}

178
web/libs/sass/now-ui-kit/_checkboxes-radio.scss Normal file
View file

@ -0,0 +1,178 @@
.checkbox,
.radio {
margin-bottom: 12px;
}
.checkbox label,
.radio label {
display: inline-block;
position: relative;
cursor: pointer;
padding-left: 35px;
line-height: 26px;
margin-bottom: 0;
}
.radio label{
padding-left: 28px;
}
.checkbox label::before,
.checkbox label::after{
content: " ";
display: inline-block;
position: absolute;
width: 26px;
height: 26px;
left: 0;
cursor: pointer;
border-radius: 3px;
top: 0;
background-color: transparent;
border: 1px solid $light-gray;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.checkbox label::after{
font-family: 'Nucleo Outline';
content: "\ea22";
top: 0px;
text-align: center;
font-size: 14px;
opacity: 0;
color: $dark-background;
border: 0;
background-color: inherit;
}
.checkbox input[type="checkbox"],
.radio input[type="radio"]{
opacity: 0;
position: absolute;
visibility: hidden;
}
.checkbox input[type="checkbox"]:checked + label::after{
opacity: 1;
}
.checkbox input[type="checkbox"]:disabled + label,
.radio input[type="radio"]:disabled + label {
color: $dark-gray;
opacity: .5;
}
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="checkbox"]:disabled + label::after{
cursor: not-allowed;
}
.checkbox input[type="checkbox"]:disabled + label,
.radio input[type="radio"]:disabled + label{
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
}
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-primary input[type="checkbox"]:checked + label::before {
background-color: #428bca;
border-color: #428bca;
}
.checkbox-primary input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-danger input[type="checkbox"]:checked + label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-info input[type="checkbox"]:checked + label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-warning input[type="checkbox"]:checked + label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-success input[type="checkbox"]:checked + label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:checked + label::after {
color: #fff;
}
.radio label::before,
.radio label::after{
content: " ";
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid $light-gray;
display: inline-block;
position: absolute;
left: 3px;
top: 3px;
padding: 1px;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.radio input[type="radio"] + label:after,
.radio input[type="radio"] {
opacity: 0;
}
.radio input[type="radio"]:checked + label::after {
width: 4px;
height: 4px;
background-color: $dark-background;
border-color: $dark-background;
top: 11px;
left: 11px;
opacity: 1;
}
.radio input[type="radio"]:checked + label::after{
opacity: 1;
}
.radio input[type="radio"]:disabled + label {
color: $dark-gray;
}
.radio input[type="radio"]:disabled + label::before,
.radio input[type="radio"]:disabled + label::after {
color: $dark-gray;
}
.radio.radio-inline {
margin-top: 0;
}

106
web/libs/sass/now-ui-kit/_dropdown.scss Normal file
View file

@ -0,0 +1,106 @@
.dropdown-menu{
border: 0;
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
border-radius: $border-radius-extra-small;
@include transition($fast-transition-time, $transition-linear);
font-size: $font-size-base;
&.dropdown-menu-right{
&:before{
left:auto;
right: 10px;
}
}
&:before{
display: inline-block;
position: absolute;
width: 0;
height: 0;
vertical-align: middle;
content: "";
top: -5px;
left: 10px;
right: auto;
color: $white-color;
border-bottom: .4em solid;
border-right: .4em solid transparent;
border-left: .4em solid transparent;
}
.dropdown-item{
font-size: $font-size-small;
padding-top: $padding-base-vertical;
padding-bottom: $padding-base-vertical;
@include transition($fast-transition-time, $transition-linear);
&:hover,
&:focus{
background-color: $opacity-gray-3;
}
}
.dropdown-divider{
background-color: $opacity-gray-5;
}
.dropdown-header:not([href]):not([tabindex]){
color: $default-color-opacity;
font-size: $font-size-mini;
text-transform: uppercase;
font-weight: $font-weight-bold;
}
&.dropdown-primary{
@include dropdown-colors(darken($primary-color, 3%),$opacity-8,$white-color, $opacity-2);
}
&.dropdown-info{
@include dropdown-colors(darken($info-color, 3%),$opacity-8,$white-color, $opacity-2);
}
&.dropdown-danger{
@include dropdown-colors(darken($danger-color, 3%),$opacity-8,$white-color, $opacity-2);
}
&.dropdown-success{
@include dropdown-colors(darken($success-color, 3%),$opacity-8,$white-color, $opacity-2);
}
&.dropdown-warning{
@include dropdown-colors(darken($warning-color, 3%),$opacity-8,$white-color, $opacity-2);
}
.dropdown &{
@include transform-translate-y(-25px);
visibility: hidden;
display: block;
@include opacity(0);
}
.dropdown.show &,
&.open{
@include opacity(1);
visibility: visible;
@include transform-translate-y(0px);
}
.navbar .dropdown.show &{
@include transform-translate-y(7px);
}
}
.button-dropdown{
padding-right: $padding-base-horizontal;
cursor: pointer;
& .dropdown-toggle{
padding-top: $padding-base-vertical;
padding-bottom: $padding-base-vertical;
display: block;
&:after{
display: none;
}
}
}

256
web/libs/sass/now-ui-kit/_example-pages.scss Normal file
View file

@ -0,0 +1,256 @@
// style for the landing page
.index-page{
.page-header{
height: 125vh;
.container{
> .content-center{
top: 37%;
}
}
.category-absolute{
position: absolute;
top: 100vh;
margin-top: -60px;
padding: 0 15px;
width: 100%;
color: rgba(255,255,255,.5);
}
}
}
.landing-page{
.header{
height: 100vh;
position: relative;
.container{
padding-top: 26vh;
color: #FFFFFF;
z-index: 2;
position: relative;
}
.share{
margin-top: 150px;
}
h1{
font-weight: 600;
}
.title{
color: $white-color;
}
}
.section-team{
.team .team-player img{
max-width: 100px;
}
.team-player{
margin-bottom: 15px;
}
}
.section-contact-us{
.title{
margin-bottom: 15px;
}
.description{
margin-bottom: 30px;
}
.input-group,
.send-button,
.textarea-container{
padding: 0 40px;
}
.textarea-container{
margin: 40px 0;
}
a.btn{
margin-top: 35px;
}
}
}
// style for the profile page
.profile-page{
.page-header{
min-height: 550px;
}
.profile-container{
color: #FFFFFF;
}
.photo-container{
width: 123px;
height: 123px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
}
.title{
text-align: center;
margin-top: 30px;
}
.description,
.category{
text-align: center;
}
h5.description{
max-width: 700px;
margin: 20px auto 75px;
}
.nav-align-center{
margin-top: 30px;
}
.content{
max-width: 450px;
margin: 0 auto;
.social-description{
display: inline-block;
max-width: 150px;
width: 145px;
text-align: center;
margin: 15px 0 0px;
h2{
margin-bottom: 15px;
}
}
}
.button-container{
text-align: center;
margin-top: -106px;
}
.collections{
img{
margin-bottom: 30px;
}
}
.gallery{
margin-top: 45px;
padding-bottom: 50px;
}
}
.section-full-page{
&:after,
&:before{
display: block;
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
&:before{
background-color: rgba(0,0,0,.5);
}
&[filter-color="purple"],
&[filter-color="primary"]{
&:after{
@include linear-gradient(rgba($light-gray,.26), rgba($primary-color,.95));
}
}
&[data-image]:after{
opacity: .5;
}
> .content,
> .footer{
position: relative;
z-index: 4;
}
> .content{
min-height: calc(100vh - 80px);
}
.full-page-background{
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
display: block;
top: 0;
left: 0;
background-size: cover;
background-position: center center;
}
.footer nav > ul a:not(.btn),
.footer,
.footer .copyright a{
color: $white-color;
}
}
.login-page{
.card-login{
border-radius: $border-radius-large;
padding-bottom: $padding-base-horizontal;
max-width: 320px;
.btn-wd{
min-width: 180px;
}
.logo-container{
width: 65px;
margin: 0 auto;
margin-bottom: 55px;
img{
width: 100%;
}
}
.input-group:last-child{
margin-bottom: 40px;
}
&.card-plain{
@include input-coloured-bg($opacity-5, $white-color, $white-color, $transparent-bg, $opacity-1, $opacity-2);
.input-group-addon,
.form-group.form-group-no-border .input-group-addon,
.input-group.form-group-no-border .input-group-addon{
color: $opacity-8;
}
}
}
.link{
font-size: 10px;
color: $white-color;
text-decoration: none;
}
}

44
web/libs/sass/now-ui-kit/_footers.scss Normal file
View file

@ -0,0 +1,44 @@
.footer{
padding: 24px 0;
&.footer-default{
background-color: #f2f2f2;
}
nav{
display: inline-block;
float: left;
}
ul{
margin-bottom: 0;
padding: 0;
list-style: none;
li{
display: inline-block;
a{
color: inherit;
padding: $padding-base-vertical;
font-size: $font-size-small;
text-transform: uppercase;
text-decoration: none;
&:hover{
text-decoration: none;
}
}
}
}
.copyright{
font-size: $font-size-small;
}
&:after{
display: table;
clear: both;
content: " ";
}
}

7
web/libs/sass/now-ui-kit/_images.scss Normal file
View file

@ -0,0 +1,7 @@
img{
max-width: 100%;
border-radius: 1px;
}
.img-raised{
box-shadow: $box-shadow-raised;
}

264
web/libs/sass/now-ui-kit/_inputs.scss Normal file
View file

@ -0,0 +1,264 @@
@include form-control-placeholder($medium-gray, 1);
.form-control {
background-color: $transparent-bg;
border: 1px solid $light-gray;
border-radius: $btn-round-radius;
color: $black-color;
line-height: normal;
font-size: $font-size-small;
@include transition-input-focus-color();
@include box-shadow(none);
.has-success &{
border-color: $light-gray;
}
&:focus{
border: 1px solid $primary-color;
@include box-shadow(none);
outline: 0 !important;
color: $black-color;
& + .input-group-addon,
& ~ .input-group-addon{
border: 1px solid $primary-color;
border-left: none;
background-color: $transparent-bg;
}
}
.has-success &,
.has-error &,
.has-success &:focus,
.has-error &:focus{
@include box-shadow(none);
}
.has-success &:focus{
border-color: lighten($success-color, 5%);
}
.has-danger &,
.has-success &{
&.form-control-success,
&.form-control-danger{
background-image: none;
}
}
.has-danger &{
border-color: lighten($danger-color, 30%);
color: $danger-color;
background-color: rgba(222,222,222, .1);
&:focus{
background-color: $white-color;
}
}
& + .form-control-feedback{
border-radius: $border-radius-large;
font-size: $font-size-base;
margin-top: 0;
position: absolute;
left: 18px;
bottom: -20px;
vertical-align: middle;
}
.open &{
border-radius: $border-radius-large $border-radius-large 0 0;
border-bottom-color: transparent;
}
& + .input-group-addon{
background-color: $white-bg;
}
}
.has-success,
.has-danger{
&:after{
font-family: 'Nucleo Outline';
content: "\ea22";
display: inline-block;
position: absolute;
right: 15px;
bottom: 10px;
color: $success-color;
font-size: 11px;
}
&.input-lg{
&:after{
font-size: 13px;
top: 13px;
}
}
}
.has-danger{
&:after{
content: "\ea53";
color: $danger-color;
}
}
@include input-lg-padding($padding-large-vertical, $padding-input-horizontal);
@include input-base-padding($padding-input-vertical, $padding-input-horizontal);
.form-group.form-group-no-border,
.input-group.form-group-no-border{
.form-control,
.form-control + .input-group-addon{
background-color: $opacity-gray-3;
border: medium none;
&:focus,
&:active,
&:active{
border: medium none;
background-color: $opacity-gray-5;
}
}
.form-control{
&:focus{
& + .input-group-addon{
background-color: $opacity-gray-5;
}
}
}
.input-group-addon{
background-color: $opacity-gray-3;
border: none;
}
}
.has-error{
.form-control-feedback, .control-label{
color: $danger-color;
}
}
.has-success{
.form-control-feedback, .control-label{
color: $success-color;
}
}
.input-group-addon {
background-color: $white-bg;
border: 1px solid $light-gray;
border-radius: $btn-round-radius;
color: $dark-background;
padding: $padding-base-vertical - 1 0 $padding-base-vertical - 1 $padding-base-horizontal - 1;
@include transition-input-focus-color();
.has-success &,
.has-danger &{
background-color: $white-color;
}
.has-danger .form-control:focus + &{
color: $danger-color;
}
.has-success .form-control:focus + &{
color: $success-color;
}
& + .form-control,
& ~ .form-control{
@include input-size($padding-base-vertical - 1, $padding-base-horizontal);
padding-left: 18px;
}
i{
width: 17px;
}
}
.input-group-focus{
.input-group-addon{
background-color: $white-bg;
border-color: $primary-color;
}
&.form-group-no-border{
.input-group-addon{
background-color: $opacity-gray-5;
}
}
}
.input-group,
.form-group{
margin-bottom: 10px;
}
.input-group[disabled]{
.input-group-addon{
background-color: $light-gray;
}
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
border-right: 0 none;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
border-left: 0 none;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background-color: $light-gray;
color: $default-color;
cursor: not-allowed;
}
.input-group-btn .btn{
border-width: $border-thin;
padding: $padding-btn-vertical $padding-base-horizontal;
}
.input-group-btn .btn-default:not(.btn-fill){
border-color: $medium-gray;
}
.input-group-btn:last-child > .btn{
margin-left: 0;
}
textarea.form-control{
max-width: 100%;
padding: 10px 10px 0 0;
resize: none;
border: none;
border-bottom: 1px solid $light-gray;
border-radius: 0;
line-height: 2;
&:focus,
&:active{
border-left: none;
border-top: none;
border-right: none;
}
}
.has-success,
.has-danger{
&.form-group .form-control,
&.form-group.form-group-no-border .form-control{
padding-right: $padding-input-horizontal + 21;
}
}
.form-group{
position:relative;
}
.form-group.has-error, .form-group.has-danger{
margin-bottom: 20px;
}

63
web/libs/sass/now-ui-kit/_misc.scss Normal file
View file

@ -0,0 +1,63 @@
body{
color: $black-color;
font-size: $font-size-base;
font-family: $sans-serif-family;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.main{
position: relative;
background: $white-color;
}
/* Animations */
.nav-pills .nav-link,
.nav-item .nav-link,
.navbar,
.nav-tabs .nav-link{
@include transition($general-transition-time, $transition-ease);
}
//transition for dropdown caret
.dropdown-toggle:after,
.bootstrap-switch-label:before{
@include transition($fast-transition-time, $transition-ease);
}
.dropdown-toggle[aria-expanded="true"]:after{
@include rotate-180();
}
.button-bar{
display: block;
position: relative;
width: 22px;
height: 1px;
border-radius: 1px;
background: $white-bg;
& + .button-bar{
margin-top: 7px;
}
&:nth-child(2){
width: 17px;
}
}
.open{
@include transform-translate-y(0);
@include opacity(1);
visibility: visible;
}
.separator{
height: 2px;
width: 44px;
background-color: $default-color;
margin: 20px auto;
&.separator-primary{
background-color: $primary-color;
}
}

14
web/libs/sass/now-ui-kit/_mixins.scss Normal file
View file

@ -0,0 +1,14 @@
//Utilities
@import "mixins/transparency";
//Components
@import "mixins/buttons";
@import "mixins/vendor-prefixes";
@import "mixins/inputs";
@import "mixins/dropdown";
@import "mixins/badges";
@import "mixins/navbar";
@import "mixins/popovers";
@import "mixins/modals";
@import "mixins/pages";
@import "mixins/datepicker";

173
web/libs/sass/now-ui-kit/_modals.scss Normal file
View file

@ -0,0 +1,173 @@
//
// Modals
// Now Ui Kit Design element Dialogs
// --------------------------------------------------
.modal-content {
border-radius: $border-radius-small;
border: none;
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.5);
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
border-bottom: none;
padding-top: 24px;
padding-right: 24px;
padding-bottom: 0;
padding-left: 24px;
& button{
position: absolute;
right: 27px;
top: 30px;
outline: 0;
}
.title{
margin-top: 5px;
margin-bottom: 0;
}
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
padding-top: 24px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
line-height: 1.9;
}
// Footer (for actions)
.modal-footer {
border-top: none;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
-webkit-justify-content: space-between; /* Safari 6.1+ */
justify-content: space-between;
button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto;
&.pull-left {
padding-left: 5px;
padding-right: 5px;
position: relative;
left: -5px;
}
}
}
.modal-body + .modal-footer {
padding-top: 0;
}
}
.modal-backdrop {
background: rgba(0,0,0,0.3);
}
.modal{
&.modal-mini{
p{
text-align: center;
}
.modal-dialog{
max-width: 255px;
margin: 0 auto;
}
.modal-profile{
width: 70px;
height: 70px;
background-color: $white-color;
border-radius: 50%;
text-align: center;
line-height: 5.9;
box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
i{
color: $primary-color;
font-size: 21px;
}
&[class*="modal-profile-"]{
i{
color: $white-color;
}
}
&.modal-profile-primary{
background-color: $primary-color;
}
&.modal-profile-danger{
background-color: $danger-color;
}
&.modal-profile-warning{
background-color: $warning-color;
}
&.modal-profile-success{
background-color: $success-color;
}
&.modal-profile-info{
background-color: $info-color;
}
}
.modal-footer{
button{
text-transform: uppercase;
&:first-child{
opacity: .5;
}
}
}
}
&.modal-default{
@include modal-colors($white-color, $black-color);
}
&.modal-primary{
@include modal-colors($primary-color, $white-color);
}
&.modal-danger{
@include modal-colors($danger-color, $white-color);
}
&.modal-warning{
@include modal-colors($warning-color, $white-color);
}
&.modal-success{
@include modal-colors($success-color, $white-color);
}
&.modal-info{
@include modal-colors($info-color, $white-color);
}
&.show.modal-mini .modal-dialog{
-webkit-transform: translate(0,30%);
-o-transform: translate(0,30%);
transform: translate(0,30%);
}
.modal-header .close{
color: $danger-color;
text-shadow: none;
&:hover,
&:focus{
opacity: 1;
}
}
}

193
web/libs/sass/now-ui-kit/_navbar.scss Normal file
View file

@ -0,0 +1,193 @@
.navbar{
padding-top: $navbar-padding-base;
padding-bottom: $navbar-padding-base;
min-height: 53px;
margin-bottom: 20px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
a{
vertical-align: middle;
&:not(.btn):not(.dropdown-item){
color: $white-color;
}
}
p{
display: inline-block;
margin: 0;
line-height: 21px;
}
.navbar-nav{
&.navbar-logo{
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 49px;
top: -4px;
}
.nav-link.btn{
padding: $padding-btn-vertical $padding-btn-horizontal;
&.btn-lg{
padding: $padding-large-vertical $padding-large-horizontal;
}
&.btn-sm{
padding: $padding-small-vertical $padding-small-horizontal;
}
}
.nav-link:not(.btn){
text-transform: uppercase;
font-size: $font-size-mini;
padding: $padding-base-vertical $padding-base-horizontal;
line-height: $line-height-nav-link;
i.fa + p,
i.now-ui-icons + p{
margin-left: 5px;
}
i.fa,
i.now-ui-icons{
font-size: 18px;
position: relative;
top: 2px;
text-align: center;
width: 21px;
}
i.now-ui-icons{
top: 4px;
font-size: 16px;
}
&.profile-photo{
.profile-photo-small{
width: 27px;
height: 27px;
}
}
&.disabled{
opacity: .5;
color: $white-color;
}
}
.nav-item.active .nav-link:not(.btn),
.nav-item .nav-link:not(.btn):focus,
.nav-item .nav-link:not(.btn):hover,
.nav-item .nav-link:not(.btn):active{
background-color: $opacity-2;
border-radius: $border-radius-small;
}
}
.logo-container{
width: 27px;
height: 27px;
overflow: hidden;
margin: 0 auto;
border-radius: 50%;
border: 1px solid transparent;
}
.navbar-brand{
text-transform: uppercase;
font-size: $font-size-small;
padding-top: $padding-base-vertical;
padding-bottom: $padding-base-vertical;
line-height: $line-height-nav-link;
}
.navbar-toggler{
width: 37px;
height: 27px;
outline: 0;
cursor: pointer;
&.navbar-toggler-left{
position: relative;
left: 0;
padding-left: 0;
}
&:hover{
& .navbar-toggler-bar.bar2{
width: 22px;
}
}
}
.button-dropdown{
.navbar-toggler-bar:nth-child(2){
width: 17px;
}
}
&.navbar-transparent{
background-color: $transparent-bg !important;
box-shadow: none;
color: $white-color;
padding-top: 20px;
}
&.bg-white:not(.navbar-transparent){
a:not(.dropdown-item){
color: $default-color;
&.disabled{
opacity: .5;
color: $default-color;
}
}
.button-bar{
background: $default-color;
}
.nav-item.active .nav-link:not(.btn),
.nav-item .nav-link:not(.btn):focus,
.nav-item .nav-link:not(.btn):hover,
.nav-item .nav-link:not(.btn):active{
background-color: $opacity-gray-3;
}
.logo-container{
border: 1px solid $default-color;
}
}
}
.bg-default{
background-color: $default-color !important;
}
.bg-primary{
background-color: $primary-color !important;
}
.bg-info{
background-color: $info-color !important;
}
.bg-success{
background-color: $success-color !important;
}
.bg-danger{
background-color: $danger-color !important;
}
.bg-warning{
background-color: $warning-color !important;
}
.bg-white{
background-color: $white-color !important;
}

533
web/libs/sass/now-ui-kit/_nucleo-outline.scss Normal file
View file

@ -0,0 +1,533 @@
/* --------------------------------
Nucleo Outline Web Font - nucleoapp.com/
License - nucleoapp.com/license/
Created using IcoMoon - icomoon.io
-------------------------------- */
@font-face {
font-family: 'Nucleo Outline';
src: url('../fonts/nucleo-outline.eot');
src: url('../fonts/nucleo-outline.eot') format('embedded-opentype'),
url('../fonts/nucleo-outline.woff2') format('woff2'),
url('../fonts/nucleo-outline.woff') format('woff'),
url('../fonts/nucleo-outline.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*------------------------
base class definition
-------------------------*/
.now-ui-icons {
display: inline-block;
font: normal normal normal 14px/1 'Nucleo Outline';
font-size: inherit;
speak: none;
text-transform: none;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*------------------------
change icon size
-------------------------*/
/*----------------------------------
add a square/circle background
-----------------------------------*/
.now-ui-icons.circle {
padding: 0.33333333em;
vertical-align: -16%;
background-color: #eee;
}
.now-ui-icons.circle {
border-radius: 50%;
}
/*------------------------
list icons
-------------------------*/
.nc-icon-ul {
padding-left: 0;
margin-left: 2.14285714em;
list-style-type: none;
}
.nc-icon-ul > li {
position: relative;
}
.nc-icon-ul > li > .now-ui-icons {
position: absolute;
left: -1.57142857em;
top: 0.14285714em;
text-align: center;
}
.nc-icon-ul > li > .now-ui-icons.circle {
top: -0.19047619em;
left: -1.9047619em;
}
/*------------------------
spinning icons
-------------------------*/
.now-ui-icons.spin {
-webkit-animation: nc-icon-spin 2s infinite linear;
-moz-animation: nc-icon-spin 2s infinite linear;
animation: nc-icon-spin 2s infinite linear;
}
@-webkit-keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes nc-icon-spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*------------------------
rotated/flipped icons
-------------------------*/
/*------------------------
font icons
-------------------------*/
.now-ui-icons.ui-1_check:before{
content: "\ea22";
}
.now-ui-icons.ui-1_email-85:before {
content: "\ea2a";
}
.now-ui-icons.arrows-1_cloud-download-93:before {
content: "\ea21";
}
.now-ui-icons.arrows-1_cloud-upload-94:before {
content: "\ea24";
}
.now-ui-icons.arrows-1_minimal-down:before {
content: "\ea39";
}
.now-ui-icons.arrows-1_minimal-left:before {
content: "\ea3a";
}
.now-ui-icons.arrows-1_minimal-right:before {
content: "\ea3b";
}
.now-ui-icons.arrows-1_minimal-up:before {
content: "\ea3c";
}
.now-ui-icons.arrows-1_refresh-69:before {
content: "\ea44";
}
.now-ui-icons.arrows-1_share-66:before {
content: "\ea4c";
}
.now-ui-icons.business_badge:before {
content: "\ea09";
}
.now-ui-icons.business_bank:before {
content: "\ea0a";
}
.now-ui-icons.business_briefcase-24:before {
content: "\ea13";
}
.now-ui-icons.business_bulb-63:before {
content: "\ea15";
}
.now-ui-icons.business_chart-bar-32:before {
content: "\ea1e";
}
.now-ui-icons.business_chart-pie-36:before {
content: "\ea1f";
}
.now-ui-icons.business_globe:before {
content: "\ea2f";
}
.now-ui-icons.business_money-coins:before {
content: "\ea40";
}
.now-ui-icons.clothes_tie-bow:before {
content: "\ea5b";
}
.now-ui-icons.design_vector:before {
content: "\ea61";
}
.now-ui-icons.design_app:before {
content: "\ea08";
}
.now-ui-icons.design_bullet-list-67:before {
content: "\ea14";
}
.now-ui-icons.design_image:before {
content: "\ea33";
}
.now-ui-icons.design_palette:before {
content: "\ea41";
}
.now-ui-icons.design_scissors:before {
content: "\ea4a";
}
.now-ui-icons.design-2_html5:before {
content: "\ea32";
}
.now-ui-icons.design-2_ruler-pencil:before {
content: "\ea48";
}
.now-ui-icons.emoticons_satisfied:before {
content: "\ea49";
}
.now-ui-icons.files_box:before {
content: "\ea12";
}
.now-ui-icons.files_paper:before {
content: "\ea43";
}
.now-ui-icons.files_single-copy-04:before {
content: "\ea52";
}
.now-ui-icons.health_ambulance:before {
content: "\ea07";
}
.now-ui-icons.loader_gear:before {
content: "\ea4e";
}
.now-ui-icons.loader_refresh:before {
content: "\ea44";
}
.now-ui-icons.location_bookmark:before {
content: "\ea10";
}
.now-ui-icons.location_compass-05:before {
content: "\ea25";
}
.now-ui-icons.location_map-big:before {
content: "\ea3d";
}
.now-ui-icons.location_pin:before {
content: "\ea47";
}
.now-ui-icons.location_world:before {
content: "\ea63";
}
.now-ui-icons.media-1_album:before {
content: "\ea02";
}
.now-ui-icons.media-1_button-pause:before {
content: "\ea16";
}
.now-ui-icons.media-1_button-play:before {
content: "\ea18";
}
.now-ui-icons.media-1_button-power:before {
content: "\ea19";
}
.now-ui-icons.media-1_camera-compact:before {
content: "\ea1c";
}
.now-ui-icons.media-2_note-03:before {
content: "\ea3f";
}
.now-ui-icons.media-2_sound-wave:before {
content: "\ea57";
}
.now-ui-icons.objects_diamond:before {
content: "\ea29";
}
.now-ui-icons.objects_globe:before {
content: "\ea2f";
}
.now-ui-icons.objects_key-25:before {
content: "\ea38";
}
.now-ui-icons.objects_planet:before {
content: "\ea46";
}
.now-ui-icons.objects_spaceship:before {
content: "\ea55";
}
.now-ui-icons.objects_support-17:before {
content: "\ea56";
}
.now-ui-icons.objects_umbrella-13:before {
content: "\ea5f";
}
.now-ui-icons.education_agenda-bookmark:before {
content: "\ea01";
}
.now-ui-icons.education_atom:before {
content: "\ea0c";
}
.now-ui-icons.education_glasses:before {
content: "\ea2d";
}
.now-ui-icons.education_hat:before {
content: "\ea30";
}
.now-ui-icons.education_paper:before {
content: "\ea42";
}
.now-ui-icons.shopping_bag-16:before {
content: "\ea0d";
}
.now-ui-icons.shopping_basket:before {
content: "\ea0b";
}
.now-ui-icons.shopping_box:before {
content: "\ea11";
}
.now-ui-icons.shopping_cart-simple:before {
content: "\ea1d";
}
.now-ui-icons.shopping_credit-card:before {
content: "\ea28";
}
.now-ui-icons.shopping_delivery-fast:before {
content: "\ea27";
}
.now-ui-icons.shopping_shop:before {
content: "\ea50";
}
.now-ui-icons.shopping_tag-content:before {
content: "\ea59";
}
.now-ui-icons.sport_trophy:before {
content: "\ea5d";
}
.now-ui-icons.sport_user-run:before {
content: "\ea60";
}
.now-ui-icons.tech_controller-modern:before {
content: "\ea26";
}
.now-ui-icons.tech_headphones:before {
content: "\ea31";
}
.now-ui-icons.tech_laptop:before {
content: "\ea36";
}
.now-ui-icons.tech_mobile:before {
content: "\ea3e";
}
.now-ui-icons.tech_tablet:before {
content: "\ea58";
}
.now-ui-icons.tech_tv:before {
content: "\ea5e";
}
.now-ui-icons.tech_watch-time:before {
content: "\ea62";
}
.now-ui-icons.text_align-center:before {
content: "\ea05";
}
.now-ui-icons.text_align-left:before {
content: "\ea06";
}
.now-ui-icons.text_bold:before {
content: "\ea0e";
}
.now-ui-icons.text_caps-small:before {
content: "\ea1b";
}
.now-ui-icons.gestures_tap-01:before {
content: "\ea5a";
}
.now-ui-icons.transportation_air-baloon:before {
content: "\ea03";
}
.now-ui-icons.transportation_bus-front-12:before {
content: "\ea17";
}
.now-ui-icons.travel_info:before {
content: "\ea04";
}
.now-ui-icons.travel_istanbul:before {
content: "\ea34";
}
.now-ui-icons.ui-1_bell-53:before {
content: "\ea0f";
}
.now-ui-icons.ui-1_calendar-60:before {
content: "\ea1a";
}
.now-ui-icons.ui-1_lock-circle-open:before {
content: "\ea35";
}
.now-ui-icons.ui-1_send:before {
content: "\ea4d";
}
.now-ui-icons.ui-1_settings-gear-63:before {
content: "\ea4e";
}
.now-ui-icons.ui-1_simple-add:before {
content: "\ea4f";
}
.now-ui-icons.ui-1_simple-delete:before {
content: "\ea54";
}
.now-ui-icons.ui-1_simple-remove:before {
content: "\ea53";
}
.now-ui-icons.ui-1_zoom-bold:before {
content: "\ea64";
}
.now-ui-icons.ui-2_chat-round:before {
content: "\ea20";
}
.now-ui-icons.ui-2_favourite-28:before {
content: "\ea2b";
}
.now-ui-icons.ui-2_like:before {
content: "\ea37";
}
.now-ui-icons.ui-2_settings-90:before {
content: "\ea4b";
}
.now-ui-icons.ui-2_time-alarm:before {
content: "\ea5c";
}
.now-ui-icons.users_circle-08:before {
content: "\ea23";
}
.now-ui-icons.users_single-02:before {
content: "\ea51";
}

136
web/libs/sass/now-ui-kit/_pagination.scss Normal file
View file

@ -0,0 +1,136 @@
.pagination{
.page-item .page-link{
border: 0;
border-radius: 30px !important;
transition: all .3s;
padding: 0px 11px;
margin: 0 3px;
min-width: 30px;
text-align: center;
height: 30px;
line-height: 30px;
color: $black-color;
cursor: pointer;
font-size: $font-size-base;
text-transform: uppercase;
background: transparent;
&:hover,
&:focus{
color: $black-color;
background-color: $opacity-gray-3;
border: none;
}
}
.arrow-margin-left,
.arrow-margin-right{
position: absolute;
}
.arrow-margin-right{
right: 0;
}
.arrow-margin-left{
left: 0;
}
.page-item.active > .page-link{
color: $light-gray;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
&,
&:focus,
&:hover{
background-color: $default-color;
border-color: $default-color;
color: $white-color;
}
}
.page-item.disabled > .page-link{
opacity: .5;
background-color: rgba(255,255,255, .2);
color: $white-color;
}
// Colors
&.pagination-info{
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $brand-info;
border-color: $brand-info;
}
}
}
&.pagination-success{
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $brand-success;
border-color: $brand-success;
}
}
}
&.pagination-primary{
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $brand-primary;
border-color: $brand-primary;
}
}
}
&.pagination-warning{
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $brand-warning;
border-color: $brand-warning;
}
}
}
&.pagination-danger{
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $brand-danger;
border-color: $brand-danger;
}
}
}
&.pagination-neutral{
.page-item > .page-link{
color: $white-color;
&:focus,
&:hover{
background-color: $opacity-2;
color: $white-color;
}
}
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $white-bg;
border-color: $white-bg;
color: $brand-primary;
}
}
}
}

131
web/libs/sass/now-ui-kit/_pills.scss Normal file
View file

@ -0,0 +1,131 @@
.nav-pills{
.nav-item {
.nav-link{
padding: 0 15.5px;
text-align: center;
height: 60px;
width: 60px;
font-weight: $font-weight-normal;
color: $dark-gray;
margin-right: 19px;
background-color: $opacity-gray-3;
border-radius: $btn-round-radius;
&:hover{
background-color: $opacity-gray-3;
}
&.active{
&,
&:focus,
&:hover{
background-color: $dark-gray;
color: $white-color;
box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3);
}
}
&.disabled,
&:disabled,
&[disabled]{
opacity: .5;
}
}
i{
display: block;
font-size: 20px;
line-height: 60px;
}
}
&.nav-pills-neutral{
.nav-item {
.nav-link{
background-color: $opacity-2;
color: $white-color;
&.active{
&,
&:focus,
&:hover{
background-color: $white-color;
color: $primary-color;
}
}
}
}
}
&.nav-pills-primary{
.nav-item {
.nav-link.active{
&,
&:focus,
&:hover{
background-color: $brand-primary;
}
}
}
}
&.nav-pills-info{
.nav-item {
.nav-link.active{
&,
&:focus,
&:hover{
background-color: $brand-info;
}
}
}
}
&.nav-pills-success{
.nav-item {
.nav-link.active{
&,
&:focus,
&:hover{
background-color: $brand-success;
}
}
}
}
&.nav-pills-warning{
.nav-item {
.nav-link.active{
&,
&:focus,
&:hover{
background-color: $brand-warning;
}
}
}
}
&.nav-pills-danger{
.nav-item {
.nav-link.active{
&,
&:focus,
&:hover{
background-color: $brand-danger;
}
}
}
}
}
.tab-space{
padding: 20px 0 50px 0px;
}
.nav-align-center{
text-align: center;
.nav-pills{
display: inline-flex;
}
}

85
web/libs/sass/now-ui-kit/_popups.scss Normal file
View file

@ -0,0 +1,85 @@
.popover{
font-size: $font-size-base;
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
border: none;
line-height: 1.7;
max-width: 240px;
&.bs-popover-top .arrow:before,
&.bs-popover-left .arrow:before,
&.bs-popover-right .arrow:before,
&.bs-popover-bottom .arrow:before,{
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
.popover-header{
color: $default-color-opacity;
font-size: $font-size-base;
text-transform: capitalize;
font-weight: $font-weight-semi;
margin: 0;
margin-top: 5px;
border: none;
background-color: transparent;
}
&:before{
display: none;
}
&.bs-tether-element-attached-top:after{
border-bottom-color:$white-color;
top: -9px;
}
&.popover-primary{
@include popover-color($primary-color, $white-color);
}
&.popover-info{
@include popover-color($info-color, $white-color);
}
&.popover-warning{
@include popover-color($warning-color, $white-color);
}
&.popover-danger{
@include popover-color($danger-color, $white-color);
}
&.popover-success{
@include popover-color($success-color, $white-color);
}
}
.tooltip{
&.bs-tooltip-right .arrow:before{
border-right-color:$white-color;
}
&.bs-tooltip-top .arrow:before{
border-top-color:$white-color;
}
&.bs-tooltip-bottom .arrow:before{
border-bottom-color:$white-color;
}
&.bs-tooltip-left .arrow:before{
border-left-color:$white-color;
}
}
.tooltip-inner{
padding: $padding-base-vertical $padding-base-horizontal;
min-width: 130px;
background-color: $white-color;
font-size: $font-size-base;
color: inherit;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
}

126
web/libs/sass/now-ui-kit/_progress.scss Normal file
View file

@ -0,0 +1,126 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.progress-container{
position: relative;
& + .progress-container,
& ~ .progress-container{
margin-top: $margin-base-vertical;
}
.progress-badge{
color: $default-color;
font-size: $font-size-small;
text-transform: uppercase;
}
.progress {
height: 1px;
border-radius: 0;
box-shadow: none;
background: $opacity-gray-8;
margin-top: 14px;
.progress-bar {
box-shadow: none;
background-color: $default-color;
}
.progress-value{
position: absolute;
top: 2px;
right: 0;
color: $default-color;
font-size: $font-size-small;
}
}
&.progress-neutral{
.progress{
background: rgba(255, 255, 255, .3);
}
.progress-bar{
background: $white-bg;
}
.progress-value,
.progress-badge{
color: $white-color;
}
}
&.progress-primary{
.progress{
background: $primary-color-opacity;
}
.progress-bar{
background: $brand-primary;
}
.progress-value,
.progress-badge{
color: $brand-primary;
}
}
&.progress-info{
.progress{
background: $info-color-opacity;
}
.progress-bar{
background: $brand-info;
}
.progress-value,
.progress-badge{
color: $brand-info;
}
}
&.progress-success{
.progress{
background: $success-color-opacity;
}
.progress-bar{
background: $brand-success;
}
.progress-value,
.progress-badge{
color: $brand-success;
}
}
&.progress-warning{
.progress{
background: $warning-color-opacity;
}
.progress-bar{
background: $brand-warning;
}
.progress-value,
.progress-badge{
color: $brand-warning;
}
}
&.progress-danger{
.progress{
background: $danger-color-opacity;
}
.progress-bar{
background: $brand-danger;
}
.progress-value,
.progress-badge{
color: $brand-danger;
}
}
}

392
web/libs/sass/now-ui-kit/_responsive.scss Normal file
View file

@ -0,0 +1,392 @@
@media screen and (max-width: 991px){
.sidebar-collapse{
@include navbar-collapse();
&.menu-on-left{
.navbar-collapse{
right: auto;
left: 0;
@include transform-translate-x(-300px);
}
}
.nav-open &{
.navbar-collapse{
@include transform-translate-x(0px);
}
.wrapper{
@include transform-translate-x(-150px);
}
.navbar-translate{
@include transform-translate-x(-300px);
}
&.menu-on-left{
.navbar-collapse{
@include transform-translate-x(0px);
}
.navbar-translate{
@include transform-translate-x(300px);
}
.wrapper{
@include transform-translate-x(150px);
}
#bodyClick{
right: auto;
left: 300px;
}
}
}
}
.bootstrap-collapse{
.navbar .navbar-collapse{
background: none !important;
}
@include navbar-responsive();
}
.profile-photo .profile-photo-small{
margin-left: -2px;
}
.button-dropdown{
display: none;
}
.section-nucleo-icons .container .row > [class*="col-"]:first-child{
text-align: center;
}
.footer{
.copyright{
text-align: right;
}
}
.section-nucleo-icons .icons-container{
margin-top: 65px;
}
.navbar-nav{
.nav-link{
i.fa,
i.now-ui-icons{
opacity: .5;
}
}
}
.section-images{
height: 500px;
max-height: 500px;
.hero-images-container{
max-width: 500px;
}
.hero-images-container-1{
right: 10%;
top: 68%;
max-width: 269px;
}
.hero-images-container-2{
right: 5%;
max-width: 135px;
top: 93%;
}
}
}
@media screen and (min-width: 992px){
.burger-menu{
@include navbar-collapse();
.nav-open & .navbar-collapse{
@include transform-translate-x(0px);
}
.navbar-collapse {
display: block !important;
.navbar-nav {
margin-top: 53px;
height: 100%;
z-index: 2;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
.nav-item{
margin: 0;
}
}
}
&.menu-on-left .navbar-collapse{
right: auto;
left: 0;
@include transform-translate-x(-300px);
}
[class*="navbar-expand-"]{
.navbar-nav .dropdown-menu{
position: static;
float: none;
}
.navbar-toggler{
display: inline-block;
}
}
.section-navbars .navbar-collapse{
display: none !important;
}
.nav-open &{
&.menu-on-left .navbar .navbar-translate{
@include transform-translate-x(300px);
}
.navbar .navbar-translate{
@include transform-translate-x(-300px);
}
&.menu-on-left .navbar-collapse{
@include transform-translate-x(0px);
}
&.menu-on-left #bodyClick{
right: auto;
left: 300px;
}
}
&.menu-on-left .navbar-brand{
float: right;
margin-right: 0;
margin-left: 1rem;
}
}
.navbar-nav{
.nav-link{
&.profile-photo{
padding: 0;
margin: 7px $padding-base-horizontal;
}
&.btn:not(.btn-sm){
margin: 0;
}
}
.nav-item:not(:last-child){
margin-right: 5px;
}
}
.section-nucleo-icons .icons-container{
margin: 0 0 0 auto;
}
.dropdown-menu .dropdown-item{
color: inherit;
}
.footer{
.copyright{
float: right;
}
}
}
@media screen and (min-width: 768px){
.image-container{
&.image-right{
top: 80px;
margin-left: - 100px;
margin-bottom: 130px;
}
&.image-left{
margin-right: -100px;
}
}
}
@media screen and (max-width: 768px){
.image-container{
&.image-left{
margin-bottom: 220px;
p.blockquote{
margin: 0 auto;
position: relative;
right: 0;
}
}
}
.nav-tabs{
display: inline-block;
width: 100%;
padding-left: 100px;
padding-right: 100px;
text-align: center;
.nav-item > .nav-link{
margin-bottom: 5px;
}
}
.landing-page .section-story-overview .image-container:nth-child(2){
margin-left: 0;
margin-bottom: 30px;
}
}
@media screen and (max-width: 576px){
.navbar[class*='navbar-expand-'] .container{
margin-left: 0;
margin-right: 0;
}
.footer{
.copyright{
text-align: center;
}
}
.section-nucleo-icons{
.icons-container{
i{
font-size: 30px;
&:nth-child(6){
font-size: 48px;
}
}
}
}
.page-header{
.container h6.category-absolute{
width: 90%;
}
}
}
@media screen and (min-width: 991px) and (max-width: 1200px){
.section-images{
.hero-images-container-1{
right: 9%;
max-width: 370px;
}
.hero-images-container-2{
right: 2%;
max-width: 216px;
}
}
}
@media screen and (max-width: 768px){
.section-images{
height: 300px;
max-height: 300px;
.hero-images-container{
max-width: 380px;
}
.hero-images-container-1{
right: 7%;
top: 87%;
max-width: 210px;
}
.hero-images-container-2{
right: 1%;
max-width: 133px;
top: 99%;
}
}
}
@media screen and (max-width: 517px) {
.alert .alert-icon{
margin-top: 10px;
}
}
@media screen and (min-width: 1200px) {
.section-images{
.hero-images-container-1{
top: 51%;
right: 21%;
}
.hero-images-container-2{
top: 66%;
right: 14%;
}
}
}
// Ipad responsive portrait mode
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and ( orientation : portrait){
.section-images .hero-images-container,
.section-images .hero-images-container-1,
.section-images .hero-images-container-2{
margin-top: -15vh;
margin-left: 80px;
}
.section-images .hero-images-container{
max-width: 300px;
}
.section-images .hero-images-container-1{
right: 28%;
top: 40%;
}
.section-images .hero-images-container-2{
right: 21%;
top: 55%;
}
.index-page .category-absolute{
top: 90vh;
}
}
@media screen and (max-width: 580px) {
.alert{
button.close{
position: absolute;
right: 11px;
top: 50%;
transform: translateY(-50%);
}
}
}

396
web/libs/sass/now-ui-kit/_sections.scss Normal file
View file

@ -0,0 +1,396 @@
.section{
padding: 70px 0;
position: relative;
background: $white-color;
.row + .category{
margin-top: $margin-base-vertical;
}
}
.section-navbars{
padding-bottom: 0;
}
.section-full-screen{
height: 100vh;
}
.section-signup{
padding-top: 20vh;
}
.page-header{
height: 100vh;
max-height: 1050px;
padding: 0;
color: $white-color;
position: relative;
background-position: center center;
background-size: cover;
.page-header-image{
position: absolute;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
z-index: -1;
}
footer{
position: absolute;
bottom: 0;
width: 100%;
}
.container{
height: 100%;
z-index: 1;
text-align: center;
position: relative;
> .content-center{
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: center;
padding: 0 15px;
color: #FFFFFF;
width: 100%;
max-width: 880px;
}
}
.category,
.description{
color: $opacity-5;
}
&.page-header-small{
height: 60vh;
max-height: 440px;
}
&:after,
&:before{
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
display: block;
left: 0;
top: 0;
content: "";
}
&:before{
background-color: rgba(0,0,0,.5);
}
&[filter-color="orange"]{
@include linear-gradient(rgba($black-color,.20), rgba(224, 23, 3, 0.6));
}
.container{
z-index: 2;
}
}
.clear-filter{
&:after,
&:before{
display: none;
}
}
.section-story-overview{
padding: 50px 0;
.image-container{
height: 335px;
position: relative;
background-position: center center;
background-size: cover;
box-shadow: $box-shadow-raised;
border-radius: .25rem;
& + .category{
padding-top: 15px;
}
&.image-right{
z-index: 2;
+ h3.title{
margin-top: 120px;
}
}
&.image-left{
z-index: 1;
}
&:nth-child(2){
margin-top: 420px;
margin-left: -105px;
}
}
p.blockquote{
width: 220px;
min-height: 180px;
text-align: left;
position: absolute;
top: 376px;
right: 155px;
z-index: 0;
}
}
.section-nucleo-icons{
.nucleo-container img{
width: auto;
left: 0;
top: 0;
height: 100%;
position: absolute;
}
.nucleo-container{
height: 335px;
position: relative;
}
h5{
margin-bottom: 35px;
}
.icons-container{
position: relative;
max-width: 450px;
height: 300px;
max-height: 300px;
margin: 0 auto;
}
.icons-container i{
font-size: 34px;
position: absolute;
left: 0;
top: 0;
}
.icons-container i:nth-child(1){
top: 5%;
left: 7%;
}
.icons-container i:nth-child(2){
top: 28%;
left: 24%;
}
.icons-container i:nth-child(3){
top: 40%;
}
.icons-container i:nth-child(4){
top: 18%;
left: 62%;
}
.icons-container i:nth-child(5){
top: 74%;
left: 3%;
}
.icons-container i:nth-child(6){
top: 36%;
left: 44%;
font-size: 65px;
color: #f96332;
padding: 1px;
}
.icons-container i:nth-child(7){
top: 59%;
left: 26%;
}
.icons-container i:nth-child(8){
top: 60%;
left: 69%;
}
.icons-container i:nth-child(9){
top: 72%;
left: 47%;
}
.icons-container i:nth-child(10){
top: 88%;
left: 27%;
}
.icons-container i:nth-child(11){
top: 31%;
left: 80%;
}
.icons-container i:nth-child(12){
top: 88%;
left: 68%;
}
.icons-container i:nth-child(13){
top: 5%;
left: 81%;
}
.icons-container i:nth-child(14){
top: 58%;
left: 90%;
}
.icons-container i:nth-child(15){
top: 6%;
left: 40%;
}
}
.section-images{
max-height: 670px;
height: 670px;
.hero-images-container,
.hero-images-container-1,
.hero-images-container-2{
margin-top: -38vh;
}
.hero-images-container{
max-width: 670px;
}
.hero-images-container-1{
max-width: 390px;
position: absolute;
top: 55%;
right: 18%;
}
.hero-images-container-2{
max-width: 225px;
position: absolute;
top: 68%;
right: 12%;
}
}
[data-background-color="orange"]{
background-color: $orange-bg;
}
[data-background-color="black"]{
background-color: $black-color;
}
[data-background-color]{
color: $white-color;
.title,
.social-description h2,
p,
p.blockquote,
p.blockquote small,
h1,h2,h3,h4,h5,h6,a:not(.btn):not(.dropdown-item),
.icons-container i{
color: $white-color;
}
.separator{
background-color: $white-color;
}
.navbar.bg-white p{
color: $default-color;
}
.description,
.social-description p{
color: $opacity-8;
}
p.blockquote{
border-color: $opacity-2;
}
//radio and checkboxes
.checkbox label::before,
.checkbox label::after,
.radio label::before,
.radio label::after{
border-color: $opacity-2;
}
.checkbox label::after,
.checkbox label,
.radio label{
color: $white-color;
}
.checkbox input[type="checkbox"]:disabled + label,
.radio input[type="radio"]:disabled + label {
color: $white-color;
}
.radio input[type="radio"]:not(:disabled):hover + label::after,
.radio input[type="radio"]:checked + label::after {
background-color: $white-color;
border-color: $white-color;
}
//inputs
@include input-coloured-bg($opacity-5, $white-color, $white-color, $transparent-bg, $opacity-1, $opacity-2);
.input-group-addon,
.form-group.form-group-no-border .input-group-addon,
.input-group.form-group-no-border .input-group-addon{
color: $opacity-8;
}
//buttons
.btn.btn-simple{
background-color: $transparent-bg;
border-color: $opacity-5;
color: $white-color;
&:hover,
&:hover,
&:focus,
&:active{
background-color: $transparent-bg;
border-color: $white-color;
}
}
//tabs
.nav-tabs{
> .nav-item{
>.nav-link{
i.now-ui-icons{
color: $white-color;
}
}
}
}
&.section-nucleo-icons .icons-container i:nth-child(6){
color: $white-color;
}
}

39
web/libs/sass/now-ui-kit/_social-buttons.scss Normal file
View file

@ -0,0 +1,39 @@
.btn-twitter{
color: $social-twitter;
&:hover,
&:focus,
&:active{
color: $social-twitter-state-color;
}
}
.btn-facebook{
color: $social-facebook;
&:hover,
&:focus,
&:active{
color: $social-facebook-state-color;
}
}
.btn-google{
color: $social-google;
&:hover,
&:focus,
&:active{
color: $social-google-state-color;
}
}
.btn-linkedin{
color: $social-linkedin;
&:hover,
&:focus,
&:active{
color: $social-linkedin-state-color;
}
}

110
web/libs/sass/now-ui-kit/_tabs.scss Normal file
View file

@ -0,0 +1,110 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.nav-tabs {
border: 0;
padding: $padding-large-vertical $padding-base-horizontal;
> .nav-item{
> .nav-link{
color: $default-color;
margin: 0;
margin-right: 5px;
background-color: $transparent-bg;
border: 1px solid $transparent-bg;
border-radius: 30px;
font-size: $font-size-base;
padding: $padding-btn-vertical $padding-round-horizontal;
line-height: $line-height-general;
&:hover {
background-color: $transparent-bg;
}
&.active{
border: 1px solid $default-color;
border-radius: 30px;
}
i.now-ui-icons{
font-size: 14px;
position: relative;
top: 1px;
margin-right: 3px;
}
}
&.disabled > .nav-link,
&.disabled > .nav-link:hover {
color: rgba(255,255,255,0.5);
}
}
&.nav-tabs-neutral{
> .nav-item{
> .nav-link{
color: $white-color;
&.active{
border-color: $opacity-5;
color: $white-color;
}
}
}
}
&.nav-tabs-primary{
> .nav-item{
> .nav-link{
&.active{
border-color: $primary-color;
color: $primary-color;
}
}
}
}
&.nav-tabs-info{
> .nav-item{
> .nav-link{
&.active{
border-color: $info-color;
color: $info-color;
}
}
}
}
&.nav-tabs-danger{
> .nav-item{
> .nav-link{
&.active{
border-color: $danger-color;
color: $danger-color;
}
}
}
}
&.nav-tabs-warning{
> .nav-item{
> .nav-link{
&.active{
border-color: $warning-color;
color: $warning-color;
}
}
}
}
&.nav-tabs-success{
> .nav-item{
> .nav-link{
&.active{
border-color: $success-color;
color: $success-color;
}
}
}
}
}

158
web/libs/sass/now-ui-kit/_typography.scss Normal file
View file

@ -0,0 +1,158 @@
button,
input,
optgroup,
select,
textarea{
font-family: $sans-serif-family;
}
h1,h2,h3,h4,h5,h6{
font-weight: $font-weight-normal;
}
small{
font-size: 60%;
}
a{
color: $primary-color;
&:hover,
&:focus{
color: $primary-color;
}
}
h1, .h1 {
font-size: $font-size-h1;
line-height: 1.15;
margin-bottom: $margin-base-vertical * 2;
small{
font-weight: $font-weight-bold;
text-transform: uppercase;
opacity: .8;
}
}
h2, .h2{
font-size: $font-size-h2;
margin-bottom: $margin-base-vertical * 2;
}
h3, .h3{
font-size: $font-size-h3;
margin-bottom: $margin-base-vertical * 2;
line-height: 1.4em;
}
h4, .h4{
font-size: $font-size-h4;
line-height: 1.45em;
margin-top: $margin-base-vertical * 2;
margin-bottom: $margin-base-vertical;
& + .category,
&.title + .category{
margin-top: -10px;
}
}
h5, .h5 {
font-size: $font-size-h5;
line-height: 1.4em;
margin-bottom: 15px;
}
h6, .h6{
font-size: $font-size-h6;
font-weight: $font-weight-bold;
text-transform: uppercase;
}
p{
line-height: 1.61em;
.description &,
&.description{
font-size: 1.14em;
}
}
.title{
font-weight: $font-weight-bold;
&.title-up{
text-transform: uppercase;
a{
color: $black-color;
text-decoration: none;
}
}
& + .category{
margin-top: -25px;
}
}
.description,
.card-description,
.footer-big p{
color: $dark-gray;
font-weight: $font-weight-light;
}
.category{
text-transform: uppercase;
font-weight: $font-weight-bold;
color: $dark-gray;
}
.text-primary {
color: $brand-primary !important;
}
.text-info {
color: $brand-info !important;
}
.text-success {
color: $brand-success !important;
}
.text-warning {
color: $brand-warning !important;
}
.text-danger {
color: $brand-danger !important;
}
.text-black{
color: $light-black;
}
.blockquote{
border-left: none;
border: 1px solid $default-color;
padding: 20px;
font-size: $font-size-blockquote;
line-height: 1.8;
small{
color: $default-color;
font-size: $font-size-small;
text-transform: uppercase;
}
&.blockquote-primary{
border-color: $primary-color;
color: $primary-color;
small{
color: $primary-color;
}
}
&.blockquote-danger{
border-color: $danger-color;
color: $danger-color;
small{
color: $danger-color;
}
}
&.blockquote-white{
border-color: $opacity-8;
color: $white-color;
small{
color: $opacity-8;
}
}
}

254
web/libs/sass/now-ui-kit/_variables.scss Normal file
View file

@ -0,0 +1,254 @@
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
$sans-serif-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
$none: 0 !default;
$border-thin: 1px !default;
$border-thick: 2px !default;
$white-color: #FFFFFF !default;
$white-bg: #FFFFFF !default;
$orange-bg: #e95e38 !default;
$smoke-bg: #F5F5F5 !default;
$light-black: #444 !default;
$black-bg: rgba(30,30,30,.97) !default;
$black-color: #2c2c2c !default;
$black-hr: #444444 !default;
$light-gray: #E3E3E3 !default;
$medium-gray: #DDDDDD !default;
$dark-gray: #9A9A9A !default;
$opacity-gray-3: rgba(222,222,222, .3) !default;
$opacity-gray-5: rgba(222,222,222, .5) !default;
$opacity-gray-8: rgba(222,222,222, .8) !default;
$opacity-5: rgba(255,255,255, .5) !default;
$opacity-8: rgba(255,255,255, .8) !default;
$datepicker-color-days: rgba(255,255,255, .8) !default;
$datepicker-color-old-new-days: rgba(255,255,255, .4) !default;
$opacity-1: rgba(255,255,255, .1) !default;
$opacity-2: rgba(255,255,255, .2) !default;
$transparent-bg: transparent !default;
$dark-background: #555555 !default;
$default-color: #888 !default;
$default-states-color: lighten($default-color, 6%) !default;
$default-color-opacity: rgba(182, 182, 182, .6) !default;
$primary-color: #f96332 !default;
$primary-states-color: lighten($primary-color, 6%) !default;
$primary-color-opacity: rgba(249, 99, 50, .3) !default;
$primary-color-alert: rgba(249, 99, 50, .8) !default;
$success-color: #18ce0f !default;
$success-states-color: lighten($success-color, 6%) !default;
$success-color-opacity: rgba(24, 206, 15, .3) !default;
$success-color-alert: rgba(24, 206, 15, .8) !default;
$info-color: #2CA8FF !default;
$info-states-color: lighten($info-color, 6%) !default;
$info-color-opacity: rgba(44, 168, 255, .3) !default;
$info-color-alert: rgba(44, 168, 255, .8) !default;
$warning-color: #FFB236 !default;
$warning-states-color: lighten($warning-color, 6%) !default;
$warning-color-opacity: rgba(255, 178, 54, .3) !default;
$warning-color-alert: rgba(255, 178, 54, .8) !default;
$danger-color: #FF3636 !default;
$danger-states-color: lighten($danger-color, 6%) !default;
$danger-color-opacity: rgba(255, 54, 54, .3) !default;
$danger-color-alert: rgba(255, 54, 54, .8) !default;
/* brand Colors */
$brand-primary: $primary-color !default;
$brand-info: $info-color !default;
$brand-success: $success-color !default;
$brand-warning: $warning-color !default;
$brand-danger: $danger-color !default;
$brand-inverse: $black-color !default;
$link-disabled-color: #666666 !default;
/* light colors */
$light-blue: rgba($primary-color, .2);
$light-azure: rgba($info-color, .2);
$light-green: rgba($success-color, .2);
$light-orange: rgba($warning-color, .2);
$light-red: rgba($danger-color, .2);
//== Components
//
$padding-input-vertical: 11px !default;
$padding-input-horizontal: 19px !default;
$padding-btn-vertical: 11px !default;
$padding-btn-horizontal: 22px !default;
$padding-base-vertical: .5rem !default;
$padding-base-horizontal: .7rem !default;
$padding-round-horizontal: 23px !default;
$padding-simple-vertical: 10px !default;
$padding-simple-horizontal: 17px !default;
$padding-large-vertical: 15px !default;
$padding-large-horizontal: 48px !default;
$padding-small-vertical: 5px !default;
$padding-small-horizontal: 15px !default;
// $padding-xs-vertical: 1px !default;
// $padding-xs-horizontal: 5px !default;
$padding-label-vertical: 2px !default;
$padding-label-horizontal: 12px !default;
$margin-large-vertical: 30px !default;
$margin-base-vertical: 15px !default;
$margin-base-horizontal: 15px !default;
$margin-bottom: 10px !default;
$border: 1px solid !default;
$border-radius-extra-small: 0.125rem !default;
$border-radius-small: 0.1875rem !default;
$border-radius-large: 0.25rem !default;
$border-radius-extreme: 0.875rem !default;
$border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default;
$border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default;
$btn-round-radius: 30px !default;
$height-base: 55px !default;
$btn-icon-size: 3.5rem !default;
$btn-icon-size-regular: 2.375rem !default;
$btn-icon-font-size-regular: 0.9375rem !default;
$btn-icon-font-size-small: 0.6875rem !default;
$btn-icon-size-small: 1.875rem !default;
$btn-icon-font-size-lg: 1.325rem !default;
$btn-icon-size-lg: 3.6rem !default;
$font-size-h1: 3.5em !default; // ~ 49px
$font-size-h2: 2.5em !default; // ~ 35px
$font-size-h3: 2em !default; // ~ 28px
$font-size-h4: 1.714em !default; // ~ 24px
$font-size-h5: 1.57em !default; // ~ 22px
$font-size-h6: 1em !default; // ~ 14px
$font-paragraph: 1em !default;
$font-size-navbar: 1em !default;
$font-size-mini: 0.7142em !default;
$font-size-small: 0.8571em !default;
$font-size-base: 14px !default;
$font-size-large: 1em !default;
$font-size-large-navbar: 20px !default;
$font-size-blockquote: 1.1em !default; // ~ 15px
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-semi: 600 !default;
$font-weight-bold: 700 !default;
$line-height-general: 1.5 !default;
$line-height-nav-link: 1.625rem !default;
$btn-icon-line-height: 2.4em !default;
$line-height: 1.35em !default;
$line-height-lg: 54px !default;
$border-radius-top: 10px 10px 0 0 !default;
$border-radius-bottom: 0 0 10px 10px !default;
$dropdown-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
$general-transition-time: 300ms !default;
$slow-transition-time: 370ms !default;
$dropdown-coordinates: 29px -50px !default;
$fast-transition-time: 150ms !default;
$select-coordinates: 50% -40px !default;
$transition-linear: linear !default;
$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default;
$transition-ease: ease 0s;
//$navbar-padding-a: 9px 13px;
$navbar-margin-a: 15px 0px;
$padding-social-a: 10px 5px;
$navbar-margin-a-btn: 15px 0px;
$navbar-margin-a-btn-round: 16px 0px;
$navbar-padding-a-icons: 6px 15px;
$navbar-margin-a-icons: 6px 3px;
$navbar-padding-base: 0.625rem;
//$navbar-margin-brand: 5px 0px;
$navbar-margin-brand-icons: 12px auto;
$navbar-margin-btn: 15px 3px;
$height-icon-sm: 32px;
$width-icon-sm: 32px;
$padding-icon-sm: 4px;
$border-radius-icon-sm: 7px;
$height-icon-message: 40px;
$width-icon-message: 40px;
$height-icon-message-sm: 20px;
$width-icon-message-sm: 20px;
$white-navbar: rgba(#FFFFFF, .96);
$primary-navbar: rgba(#34ACDC, .98);
$info-navbar: rgba(#5BCAFF, .98);
$success-navbar: rgba(#4CD964, .98);
$warning-navbar: rgba(#FF9500, .98);
$danger-navbar: rgba(#FF4C40, .98);
$topbar-x: topbar-x !default;
$topbar-back: topbar-back !default;
$bottombar-x: bottombar-x !default;
$bottombar-back: bottombar-back !default;
//Nucleo Icons
$nc-font-path: '../fonts' !default;
$nc-font-size-base: 14px !default;
$nc-css-prefix: now-ui !default;
$nc-background-color: #eee !default;
$nc-li-width: (30em / 14) !default;
$nc-padding-width: (1em/3) !default;
// Social icons color
$social-twitter: #55acee !default;
$social-twitter-state-color: darken(#55acee, 5%) !default;
$social-facebook: #3b5998 !default;
$social-facebook-state-color: darken(#3b5998, 5%) !default;
$social-google: #dd4b39 !default;
$social-google-state-color: darken(#dd4b39, 5%) !default;
$social-linkedin: #0077B5 !default;
$social-linkedin-state-color: darken(#0077B5, 5%) !default;

4
web/libs/sass/now-ui-kit/mixins/_badges.scss Normal file
View file

@ -0,0 +1,4 @@
@mixin badge-color($color) {
border-color: $color;
color: $color;
}

160
web/libs/sass/now-ui-kit/mixins/_buttons.scss Normal file
View file

@ -0,0 +1,160 @@
// Mixin for generating new styles
@mixin btn-styles($btn-color, $btn-states-color) {
background-color: $btn-color;
&:hover,
&:focus,
&:active,
&.active,
&:active:focus,
&:active:hover,
&.active:focus,
&.active:hover,
.show > &.dropdown-toggle,
.show > &.dropdown-toggle:focus,
.show > &.dropdown-toggle:hover {
background-color: $btn-states-color;
color: $white-color;
box-shadow: none;
}
&:hover{
box-shadow: 0 3px 8px 0 rgba(0,0,0, 0.17);
}
&.disabled,
&:disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: $btn-color;
border-color: $btn-color;
}
}
// btn-neutral style
@if $btn-color == $white-color{
color: $primary-color;
&.btn-danger{
color: $danger-color;
&:hover,
&:focus,
&:active{
color: $danger-states-color;
}
}
&.btn-info{
color: $info-color;
&:hover,
&:focus,
&:active{
color: $info-states-color;
}
}
&.btn-warning{
color: $warning-color;
&:hover,
&:focus,
&:active{
color: $warning-states-color;
}
}
&.btn-success{
color: $success-color;
&:hover,
&:focus,
&:active{
color: $success-states-color;
}
}
&.btn-default{
color: $default-color;
&:hover,
&:focus,
&:active{
color: $default-states-color;
}
}
&.active,
&:active,
&:active:focus,
&:active:hover,
&.active:focus,
&.active:hover,
.show > &.dropdown-toggle,
.show > &.dropdown-toggle:focus,
.show > &.dropdown-toggle:hover {
background-color: $white-color;
color: $primary-states-color;
box-shadow: none;
}
&:hover,
&:focus{
color: $primary-states-color;
&:not(.nav-link){
box-shadow: none;
}
}
} @else {
color: $white-color;
}
&.btn-simple{
color: $btn-color;
border-color: $btn-color;
&:hover,
&:focus,
&:active{
background-color: $transparent-bg;
color: $btn-states-color;
border-color: $btn-states-color;
box-shadow: none;
}
}
&.btn-link{
color: $btn-color;
&:hover,
&:focus,
&:active{
background-color: $transparent-bg;
color: $btn-states-color;
text-decoration: none;
box-shadow: none;
}
}
}
@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){
font-size: $font-size;
border-radius: $border;
padding: $padding-vertical $padding-horizontal;
&.btn-simple{
padding: $padding-vertical - 1 $padding-horizontal - 1;
}
}

121
web/libs/sass/now-ui-kit/mixins/_datepicker.scss Normal file
View file

@ -0,0 +1,121 @@
@mixin datepicker-colors($color) {
background-color: $color;
th,
.day div,
table tr td span{
color: $white-color;
}
&:after{
border-bottom-color: $color;
}
&.datepicker-orient-top:after{
border-top-color: $color;
}
.dow{
color: $datepicker-color-days;
}
table tr td.old div,
table tr td.new div,
table tr td span.old,
table tr td span.new{
color: $datepicker-color-old-new-days;
}
table tr td span:hover,
table tr td span.focused{
background:$opacity-1;
}
.datepicker-switch:hover,
.prev:hover,
.next:hover,
tfoot tr th:hover {
background: $opacity-2;
}
table tr td.active div,
table tr td.active:hover div,
table tr td.active.disabled div,
table tr td.active.disabled:hover div {
background-color: $white-color;
color: $color;
}
table tr td.day:hover div,
table tr td.day.focused div {
background: $opacity-2;
}
table tr td.active:hover div,
table tr td.active:hover:hover div,
table tr td.active.disabled:hover div,
table tr td.active.disabled:hover:hover div,
table tr td.active:active div,
table tr td.active:hover:active div,
table tr td.active.disabled:active div,
table tr td.active.disabled:hover:active div,
table tr td.active.active div,
table tr td.active:hover.active div,
table tr td.active.disabled.active div,
table tr td.active.disabled:hover.active div,
table tr td.active.disabled div,
table tr td.active:hover.disabled div,
table tr td.active.disabled.disabled div,
table tr td.active.disabled:hover.disabled div,
table tr td.active[disabled] div,
table tr td.active:hover[disabled] div,
table tr td.active.disabled[disabled] div,
table tr td.active.disabled:hover[disabled] div,
table tr td span.active:hover,
table tr td span.active:hover:hover,
table tr td span.active.disabled:hover,
table tr td span.active.disabled:hover:hover,
table tr td span.active:active,
table tr td span.active:hover:active,
table tr td span.active.disabled:active,
table tr td span.active.disabled:hover:active,
table tr td span.active.active,
table tr td span.active:hover.active,
table tr td span.active.disabled.active,
table tr td span.active.disabled:hover.active,
table tr td span.active.disabled,
table tr td span.active:hover.disabled,
table tr td span.active.disabled.disabled,
table tr td span.active.disabled:hover.disabled,
table tr td span.active[disabled],
table tr td span.active:hover[disabled],
table tr td span.active.disabled[disabled],
table tr td span.active.disabled:hover[disabled]{
background-color: $white-color;
}
table tr td span.active:hover,
table tr td span.active:hover:hover,
table tr td span.active.disabled:hover,
table tr td span.active.disabled:hover:hover,
table tr td span.active:active,
table tr td span.active:hover:active,
table tr td span.active.disabled:active,
table tr td span.active.disabled:hover:active,
table tr td span.active.active,
table tr td span.active:hover.active,
table tr td span.active.disabled.active,
table tr td span.active.disabled:hover.active,
table tr td span.active.disabled,
table tr td span.active:hover.disabled,
table tr td span.active.disabled.disabled,
table tr td span.active.disabled:hover.disabled,
table tr td span.active[disabled],
table tr td span.active:hover[disabled],
table tr td span.active.disabled[disabled],
table tr td span.active.disabled:hover[disabled]{
color: $color;
}
}

24
web/libs/sass/now-ui-kit/mixins/_dropdown.scss Normal file
View file

@ -0,0 +1,24 @@
@mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) {
background-color: $brand-color;
&:before{
color: $brand-color;
}
.dropdown-header:not([href]):not([tabindex]){
color: $dropdown-header-color;
}
.dropdown-item{
color: $dropdown-color;
&:hover,
&:focus{
background-color: $background-color;
}
}
.dropdown-divider{
background-color: $background-color;
}
}

205
web/libs/sass/now-ui-kit/mixins/_inputs.scss Normal file
View file

@ -0,0 +1,205 @@
@mixin input-size($padding-vertical, $padding-horizontal){
padding: $padding-vertical $padding-horizontal;
}
@mixin form-control-placeholder($color, $opacity){
.form-control::-moz-placeholder{
color: $color;
@include opacity(1);
}
.form-control:-moz-placeholder{
color: $color;
@include opacity(1);
}
.form-control::-webkit-input-placeholder{
color: $color;
@include opacity(1);
}
.form-control:-ms-input-placeholder{
color: $color;
@include opacity(1);
}
}
@mixin light-form(){
border-radius: 0;
border:0;
padding: 0;
background-color: transparent;
}
@mixin input-lg-padding($padding-vertical, $padding-horizontal) {
.form-group.form-group-no-border.input-lg,
.input-group.form-group-no-border.input-lg{
.input-group-addon{
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
}
.form-control{
padding: $padding-vertical $padding-horizontal;
& + .input-group-addon{
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
}
}
}
.form-group.input-lg,
.input-group.input-lg{
.form-control{
padding: $padding-vertical - 1 $padding-horizontal - 1;
& + .input-group-addon{
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
}
}
.input-group-addon{
padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;
& + .form-control{
padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3;
}
}
}
}
@mixin input-base-padding($padding-vertical, $padding-horizontal) {
.form-group.form-group-no-border,
.input-group.form-group-no-border{
.form-control{
padding: $padding-vertical $padding-horizontal;
& + .input-group-addon{
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
}
}
.input-group-addon{
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
}
}
.form-group,
.input-group{
.form-control{
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1;
& + .input-group-addon{
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
}
}
.input-group-addon{
padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1;
& + .form-control,
& ~ .form-control{
padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3;
}
}
}
}
//color1 = $opacity-5
//color2 = $opacity-8
//color3 = $white-color
//color4 = $transparent-bg
//color5 = $opacity-1
//color6 = $opacity-2
@mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) {
@include form-control-placeholder(darken($color2, 8%), 1);
.form-control{
border-color: $color1;
color: $color2;
&:focus{
border-color: $color3;
background-color: $color4;
color: $color3;
}
}
.has-success,
.has-danger{
&:after{
color: $color3;
}
}
.has-danger{
.form-control{
background-color: $color4;
}
}
.input-group-addon{
background-color: $color4;
border-color: $color1;
color: $color2;
}
.input-group-focus{
.input-group-addon{
background-color: $color4;
border-color: $color3;
color: $color3;
}
}
.form-group.form-group-no-border,
.input-group.form-group-no-border{
.form-control{
background-color: $color5;
color: $color2;
&:focus,
&:active,
&:active{
background-color: $color6;
color: $color3;
}
}
.form-control + .input-group-addon{
background-color: $color5;
&:focus,
&:active,
&:active{
background-color: $color6;
color: $color3;
}
}
.form-control{
&:focus{
& + .input-group-addon{
background-color: $color6;
color: $color3;
}
}
}
.input-group-addon{
background-color: $color5;
border: none;
color: $color2;
}
&.input-group-focus{
.input-group-addon{
background-color: $color6;
color: $color3;
}
}
}
}

12
web/libs/sass/now-ui-kit/mixins/_modals.scss Normal file
View file

@ -0,0 +1,12 @@
@mixin modal-colors($bg-color, $color) {
.modal-content{
background-color: $bg-color;
color: $color;
}
.modal-header .close{
color: $color;
}
}

226
web/libs/sass/now-ui-kit/mixins/_navbar.scss Normal file
View file

@ -0,0 +1,226 @@
@mixin navbar-responsive() {
.navbar{
.navbar-nav{
margin-top: 53px;
.nav-link{
padding-top: 0.75rem;
padding-bottom: .75rem;
}
&.navbar-logo{
top: 0;
height: 53px;
}
}
.dropdown.show .dropdown-menu,
.dropdown .dropdown-menu{
background-color: transparent;
border: 0;
transition: none;
-webkit-box-shadow: none;
box-shadow: none;
width: auto;
margin: 0 1rem;
margin-bottom: 15px;
padding-top: 0;
height: 150px;
overflow-y: scroll;
&:before{
display: none;
}
}
.dropdown{
.dropdown-item{
padding-left: 2.5rem;
}
.dropdown-menu{
display: none;
}
&.show .dropdown-menu{
display: block;
}
}
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover{
color: $white-color;
}
.navbar-translate{
width: 100%;
position: relative;
display: flex;
-ms-flex-pack: justify!important;
justify-content: space-between!important;
-ms-flex-align: center;
align-items: center;
@include transform-translate-x(0px);
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
}
.navbar-toggler-bar{
display: block;
position: relative;
width: 22px;
height: 1px;
border-radius: 1px;
background: $white-bg;
& + .navbar-toggler-bar{
margin-top: 7px;
}
&.bar2{
width: 17px;
transition: width .2s linear;
}
}
&.bg-white:not(.navbar-transparent) .navbar-toggler-bar{
background: $default-color;
}
& .toggled .navbar-toggler-bar{
width: 24px;
& + .navbar-toggler-bar{
margin-top: 5px;
}
}
}
.bar1,
.bar2,
.bar3 {
outline: 1px solid transparent;
}
.bar1 {
top: 0px;
@include bar-animation($topbar-back);
}
.bar2 {
opacity: 1;
}
.bar3 {
bottom: 0px;
@include bar-animation($bottombar-back);
}
.toggled .bar1 {
top: 6px;
@include bar-animation($topbar-x);
}
.toggled .bar2 {
opacity: 0;
}
.toggled .bar3 {
bottom: 6px;
@include bar-animation($bottombar-x);
}
@include topbar-x-rotation();
@include topbar-back-rotation();
@include bottombar-x-rotation();
@include bottombar-back-rotation();
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
}
@mixin navbar-collapse() {
.navbar-collapse{
position: fixed;
display: block;
top: 0;
height: 100% !important;
width: 300px;
right: 0;
z-index: 1032;
visibility: visible;
background-color: #999;
overflow-y: visible;
border-top: none;
text-align: left;
max-height: none !important;
@include transform-translate-x(300px);
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
&:before{
background: $brand-primary; /* For browsers that do not support gradients */
background: -webkit-linear-gradient($brand-primary 0%, #000 80%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient($brand-primary 0%, #000 80%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient($brand-primary 0%, #000 80%); /* For Firefox 3.6 to 15 */
background: linear-gradient($brand-primary 0%, #000 80%); /* Standard syntax (must be last) */
@include opacity(.76);
display: block;
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.navbar-nav:not(.navbar-logo){
.nav-link {
margin: 0 1rem;
margin-top: 0.3125rem;
&:not(.btn){
color: $white-color;
}
}
}
.dropdown-menu .dropdown-item{
color: $white-color;
}
}
@include navbar-responsive();
[class*="navbar-expand-"] .navbar-collapse{
width: 300px;
}
.wrapper{
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
}
#bodyClick{
height: 100%;
width: 100%;
position: fixed;
opacity: 1;
top: 0;
left: auto;
right: 300px;
content: "";
z-index: 9999;
overflow-x: hidden;
background-color: transparent;
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
}
}

7
web/libs/sass/now-ui-kit/mixins/_pages.scss Normal file
View file

@ -0,0 +1,7 @@
@mixin linear-gradient($color1, $color2){
background: $color1; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */
}

29
web/libs/sass/now-ui-kit/mixins/_popovers.scss Normal file
View file

@ -0,0 +1,29 @@
@mixin popover-color($color, $text-color) {
background-color: $color;
.popover-body{
color: $text-color;
}
&.bs-popover-right .arrow:after{
border-right-color:$color;
}
&.bs-popover-top .arrow:after{
border-top-color:$color;
}
&.bs-popover-bottom .arrow:after{
border-bottom-color:$color;
}
&.bs-popover-left .arrow:after{
border-left-color:$color;
}
.popover-header{
color: $text-color;
opacity: .6;
}
}

8
web/libs/sass/now-ui-kit/mixins/_transparency.scss Normal file
View file

@ -0,0 +1,8 @@
// Opacity
@mixin opacity($opacity) {
opacity: $opacity;
// IE8 filter
$opacity-ie: ($opacity * 100);
filter: #{alpha(opacity=$opacity-ie)};
}

160
web/libs/sass/now-ui-kit/mixins/_vendor-prefixes.scss Normal file
View file

@ -0,0 +1,160 @@
@mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
box-shadow: $shadow;
}
@mixin transition-input-focus-color() {
-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
@mixin transition($time, $type){
-webkit-transition: all $time $type;
-moz-transition: all $time $type;
-o-transition: all $time $type;
-ms-transition: all $time $type;
transition: all $time $type;
}
@mixin rotate-180(){
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
@mixin transform-translate-x($value){
-webkit-transform: translate3d($value, 0, 0);
-moz-transform: translate3d($value, 0, 0);
-o-transform: translate3d($value, 0, 0);
-ms-transform: translate3d($value, 0, 0);
transform: translate3d($value, 0, 0);
}
@mixin transform-translate-y($value){
-webkit-transform: translate3d(0,$value,0);
-moz-transform: translate3d(0,$value,0);
-o-transform: translate3d(0,$value,0);
-ms-transform: translate3d(0,$value,0);
transform: translate3d(0,$value,0);
}
@mixin bar-animation($type){
-webkit-animation: $type 500ms linear 0s;
-moz-animation: $type 500ms linear 0s;
animation: $type 500ms 0s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@mixin topbar-x-rotation(){
@keyframes topbar-x {
0% {top: 0px; transform: rotate(0deg); }
45% {top: 6px; transform: rotate(145deg); }
75% {transform: rotate(130deg); }
100% {transform: rotate(135deg); }
}
@-webkit-keyframes topbar-x {
0% {top: 0px; -webkit-transform: rotate(0deg); }
45% {top: 6px; -webkit-transform: rotate(145deg); }
75% {-webkit-transform: rotate(130deg); }
100% { -webkit-transform: rotate(135deg); }
}
@-moz-keyframes topbar-x {
0% {top: 0px; -moz-transform: rotate(0deg); }
45% {top: 6px; -moz-transform: rotate(145deg); }
75% {-moz-transform: rotate(130deg); }
100% { -moz-transform: rotate(135deg); }
}
}
@mixin topbar-back-rotation(){
@keyframes topbar-back {
0% { top: 6px; transform: rotate(135deg); }
45% { transform: rotate(-10deg); }
75% { transform: rotate(5deg); }
100% { top: 0px; transform: rotate(0); }
}
@-webkit-keyframes topbar-back {
0% { top: 6px; -webkit-transform: rotate(135deg); }
45% { -webkit-transform: rotate(-10deg); }
75% { -webkit-transform: rotate(5deg); }
100% { top: 0px; -webkit-transform: rotate(0); }
}
@-moz-keyframes topbar-back {
0% { top: 6px; -moz-transform: rotate(135deg); }
45% { -moz-transform: rotate(-10deg); }
75% { -moz-transform: rotate(5deg); }
100% { top: 0px; -moz-transform: rotate(0); }
}
}
@mixin bottombar-x-rotation(){
@keyframes bottombar-x {
0% {bottom: 0px; transform: rotate(0deg);}
45% {bottom: 6px; transform: rotate(-145deg);}
75% {transform: rotate(-130deg);}
100% {transform: rotate(-135deg);}
}
@-webkit-keyframes bottombar-x {
0% {bottom: 0px; -webkit-transform: rotate(0deg);}
45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
75% {-webkit-transform: rotate(-130deg);}
100% {-webkit-transform: rotate(-135deg);}
}
@-moz-keyframes bottombar-x {
0% {bottom: 0px; -moz-transform: rotate(0deg);}
45% {bottom: 6px; -moz-transform: rotate(-145deg);}
75% {-moz-transform: rotate(-130deg);}
100% {-moz-transform: rotate(-135deg);}
}
}
@mixin bottombar-back-rotation{
@keyframes bottombar-back {
0% { bottom: 6px;transform: rotate(-135deg);}
45% { transform: rotate(10deg);}
75% { transform: rotate(-5deg);}
100% { bottom: 0px;transform: rotate(0);}
}
@-webkit-keyframes bottombar-back {
0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
45% {-webkit-transform: rotate(10deg);}
75% {-webkit-transform: rotate(-5deg);}
100% {bottom: 0px;-webkit-transform: rotate(0);}
}
@-moz-keyframes bottombar-back {
0% {bottom: 6px;-moz-transform: rotate(-135deg);}
45% {-moz-transform: rotate(10deg);}
75% {-moz-transform: rotate(-5deg);}
100% {bottom: 0px;-moz-transform: rotate(0);}
}
}
@mixin nc-rotate($degrees, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
-webkit-transform: rotate($degrees);
-moz-transform: rotate($degrees);
-ms-transform: rotate($degrees);
-o-transform: rotate($degrees);
transform: rotate($degrees);
}
@mixin nc-flip($horiz, $vert, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
-webkit-transform: scale($horiz, $vert);
-moz-transform: scale($horiz, $vert);
-ms-transform: scale($horiz, $vert);
-o-transform: scale($horiz, $vert);
transform: scale($horiz, $vert);
}

304
web/libs/sass/now-ui-kit/plugins/_plugin-bootstrap-switch.scss Normal file
View file

@ -0,0 +1,304 @@
/* ========================================================================
* bootstrap-switch - v3.3.2
* http://www.bootstrap-switch.org
* ========================================================================
* Copyright 2012-2013 Mattia Larentis
* http://www.apache.org/licenses/LICENSE-2.0
*/
//* IMPORTANT! Creative Tim Notice: this file has major changes to fit the NOW UI Kit's design. If you want to use the plugin as it was before our changes, please get the old files from http://www.bootstrap-switch.org
.bootstrap-switch {
display: inline-block;
direction: ltr;
cursor: pointer;
border-radius: 30px;
border: 0;
position: relative;
text-align: left;
margin-bottom: 10px;
line-height: 8px;
width: 59px !important;
height: 22px;
outline: none;
z-index: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
margin-right: 20px;
background: rgba($black-color, .2);
}
.bootstrap-switch .bootstrap-switch-container {
display: inline-flex;
top: 0;
height: 22px;
border-radius: 4px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 100px !important;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
display: inline-block !important;
height: 100%;
color: #fff;
padding: 6px 12px;
font-size: 11px;
text-indent: -5px;
line-height: 15px;
-webkit-transition: 0.25s ease-out;
transition: 0.25s ease-out;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
text-align: center;
z-index: 1;
float: left;
line-height: 11px;
width: 50% !important;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-brown,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-brown {
color: #fff;
background: $brand-primary;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-blue,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-blue {
color: #fff;
background: $brand-info;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-green,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-green {
color: #fff;
background: $brand-success;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-orange,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-orange {
background: $brand-warning;
color: #fff;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-red,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-red {
color: #fff;
background: $brand-danger;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
color: #fff;
}
.bootstrap-switch .bootstrap-switch-label {
text-align: center;
z-index: 100;
color: #333333;
background: #ffffff;
width: 22px !important;
height: 22px !important;
margin: 0px -11px;
border-radius: 20px;
position: absolute;
float: left;
top: 0;
left: 50%;
padding: 0;
box-shadow: 0 1px 11px rgba(0, 0, 0, 0.25);
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{
background-color: rgba(23, 23, 23, .4);
}
.bootstrap-switch.bootstrap-switch-on:hover .bootstrap-switch-label{
width: 27px !important;
margin-left: -16px;
}
.bootstrap-switch.bootstrap-switch-off:hover .bootstrap-switch-label{
width: 27px !important;
margin-left: -11px;
}
.bootstrap-switch .bootstrap-switch-handle-on {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.bootstrap-switch .bootstrap-switch-handle-off {
text-indent: 6px;
}
.bootstrap-switch input[type='radio'],
.bootstrap-switch input[type='checkbox'] {
position: absolute !important;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
z-index: -1;
}
.bootstrap-switch input[type='radio'].form-control,
.bootstrap-switch input[type='checkbox'].form-control {
height: auto;
}
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
}
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
padding: 6px 16px;
font-size: 18px;
line-height: 1.33;
}
.bootstrap-switch.bootstrap-switch-disabled,
.bootstrap-switch.bootstrap-switch-readonly,
.bootstrap-switch.bootstrap-switch-indeterminate {
cursor: default !important;
}
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default !important;
}
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
-webkit-transition: margin-left 0.5s;
transition: margin-left 0.5s;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.bootstrap-switch.bootstrap-switch-focused {
// border-color: #66afe9;
// outline: 0;
// -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
// box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
// .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
// .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
// border-bottom-right-radius: 3px;
// border-top-right-radius: 3px;
// }
// .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
// .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
// border-bottom-left-radius: 3px;
// border-top-left-radius: 3px;
// }
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container{
margin-left: -2px !important;
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container{
margin-left: -39px !important;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label{
&:before{
background-color: #FFFFFF;
}
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-red ~ .bootstrap-switch-default{
background-color: $brand-danger;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-orange ~ .bootstrap-switch-default{
background-color: $brand-warning;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-green ~ .bootstrap-switch-default{
background-color: $brand-success;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-brown ~ .bootstrap-switch-default{
background-color: $brand-primary;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-blue ~ .bootstrap-switch-default{
background-color: $brand-info;
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-red,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-brown,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-blue,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-orange,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-green{
background-color: $light-gray;
}
.bootstrap-switch-off .bootstrap-switch-handle-on{
opacity: 0;
}
.bootstrap-switch-on .bootstrap-switch-handle-off{
opacity: 0;
}

520
web/libs/sass/now-ui-kit/plugins/_plugin-datepicker.scss Normal file
View file

@ -0,0 +1,520 @@
/*!
* Datepicker for Bootstrap v1.7.0-dev (https://github.com/uxsolutions/bootstrap-datepicker)
*
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/
.datepicker {
padding: 8px 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
direction: ltr;
@include transform-translate-y(-40px);
transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
@include opacity(0);
visibility: hidden;
display: block;
width: 254px;
max-width: 254px;
&.dropdown-menu:before{
display: none;
}
&.datepicker-primary{
@include datepicker-colors($primary-color);
}
}
.datepicker-inline {
width: 220px;
}
.datepicker.datepicker-rtl {
direction: rtl;
}
.datepicker.datepicker-rtl.dropdown-menu {
left: auto;
}
.datepicker.datepicker-rtl table tr td span {
float: right;
}
.datepicker-dropdown {
top: 0;
left: 0;
}
.datepicker-dropdown:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid transparent;
border-top: 0;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
}
.datepicker-dropdown:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-top: 0;
position: absolute;
}
.datepicker-dropdown.datepicker-orient-left:before {
left: 6px;
}
.datepicker-dropdown.datepicker-orient-left:after {
left: 7px;
}
.datepicker-dropdown.datepicker-orient-right:before {
right: 6px;
}
.datepicker-dropdown.datepicker-orient-right:after {
right: 7px;
}
.datepicker-dropdown.datepicker-orient-bottom:before {
top: -7px;
}
.datepicker-dropdown.datepicker-orient-bottom:after {
top: -6px;
}
.datepicker-dropdown.datepicker-orient-top:before {
bottom: -7px;
border-bottom: 0;
border-top: 7px solid transparent;
}
.datepicker-dropdown.datepicker-orient-top:after {
bottom: -6px;
border-bottom: 0;
border-top: 6px solid #fff;
}
.datepicker table {
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 241px;
max-width: 241px;
}
.datepicker .day div,
.datepicker th {
@include transition($general-transition-time, $transition-ease);
text-align: center;
width: 30px;
height: 30px;
line-height: 2.2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 50%;
font-weight: $font-weight-light;
font-size: $font-size-base;
border: none;
position: relative;
cursor: pointer;
}
.datepicker th{
color: $primary-color;
}
.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > thead > tr > th{
padding: 2px;
text-align: center;
cursor: pointer;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
background-color: transparent;
}
.datepicker table tr td.day:hover div,
.datepicker table tr td.day.focused div {
background: #eee;
cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
color: $default-color;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
background: none;
color: $default-color ;
cursor: default;
}
.datepicker table tr td.highlighted {
background: #d9edf7;
border-radius: 0;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
background-color: #fde19a;
background-image: -moz-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: -ms-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
background-image: -webkit-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: -o-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: linear-gradient(to bottom, #fdd49a, #fdf59a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
border-color: #fdf59a #fdf59a #fbed50;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #000;
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
background-color: #fdf59a;
}
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active {
background-color: #fbf069 \9;
}
.datepicker table tr td.today:hover:hover {
color: #000;
}
.datepicker table tr td.today.active:hover {
color: #fff;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
background: #eee;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
background-color: #f3d17a;
background-image: -moz-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: -ms-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
background-image: -webkit-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: -o-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: linear-gradient(to bottom, #f3c17a, #f3e97a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
border-color: #f3e97a #f3e97a #edde34;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today[disabled],
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today.disabled:hover[disabled] {
background-color: #f3e97a;
}
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active {
background-color: #efe24b \9;
}
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
background-color: #9e9e9e;
background-image: -moz-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: -ms-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
background-image: -webkit-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: -o-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: linear-gradient(to bottom, #b3b3b3, #808080);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
border-color: #808080 #808080 #595959;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled] {
background-color: #808080;
}
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active {
background-color: #666666 \9;
}
.datepicker table tr td.active div,
.datepicker table tr td.active:hover div,
.datepicker table tr td.active.disabled div,
.datepicker table tr td.active.disabled:hover div {
background-color: $primary-color;
color: $white-color;
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
}
.datepicker table tr td.active:hover div,
.datepicker table tr td.active:hover:hover div,
.datepicker table tr td.active.disabled:hover div,
.datepicker table tr td.active.disabled:hover:hover div,
.datepicker table tr td.active:active div,
.datepicker table tr td.active:hover:active div,
.datepicker table tr td.active.disabled:active div,
.datepicker table tr td.active.disabled:hover:active div,
.datepicker table tr td.active.active div,
.datepicker table tr td.active:hover.active div,
.datepicker table tr td.active.disabled.active div,
.datepicker table tr td.active.disabled:hover.active div,
.datepicker table tr td.active.disabled div,
.datepicker table tr td.active:hover.disabled div,
.datepicker table tr td.active.disabled.disabled div,
.datepicker table tr td.active.disabled:hover.disabled div,
.datepicker table tr td.active[disabled] div,
.datepicker table tr td.active:hover[disabled] div,
.datepicker table tr td.active.disabled[disabled] div,
.datepicker table tr td.active.disabled:hover[disabled] div{
background-color: $primary-color;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span {
display: block;
width: 41px;
height: 41px;
line-height: 41px;
float: left;
margin: 1%;
font-size: $font-size-base;
cursor: pointer;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
background: #eee;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
background: none;
color: $default-color;
cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
color: #fff;
background-color: $primary-color;
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] {
background-color: $primary-color;
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
color: $default-color;
}
.datepicker .datepicker-switch {
width: auto;
border-radius: $border-radius-small;
}
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
cursor: pointer;
}
.datepicker{
.prev,
.next{
width: 35px;
height: 35px;
}
i{
position: relative;
top: 2px;
}
.prev i{
left: -1px;
}
.next i{
right: -1px;
}
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
background: #eee;
}
.datepicker .prev.disabled,
.datepicker .next.disabled {
visibility: hidden;
}
.datepicker .cw {
font-size: 10px;
width: 12px;
padding: 0 2px 0 5px;
vertical-align: middle;
}
.input-append.date .add-on,
.input-prepend.date .add-on {
cursor: pointer;
}
.input-append.date .add-on i,
.input-prepend.date .add-on i {
margin-top: 3px;
}
.input-daterange input {
text-align: center;
}
.input-daterange input:first-child {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-daterange input:last-child {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.input-daterange .add-on {
display: inline-block;
width: auto;
min-width: 16px;
height: 18px;
padding: 4px 5px;
font-weight: normal;
line-height: 18px;
text-align: center;
text-shadow: 0 1px 0 #fff;
vertical-align: middle;
background-color: #eee;
border: 1px solid #ccc;
margin-left: -5px;
margin-right: -5px;
}

351
web/libs/sass/now-ui-kit/plugins/_plugin-nouislider.scss Normal file
View file

@ -0,0 +1,351 @@
/*! nouislider - 9.1.0 - 2016-12-10 16:00:32 */
/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-target {
position: relative;
direction: ltr;
}
.noUi-base {
width: 100%;
height: 100%;
position: relative;
z-index: 1; /* Fix 401 */
}
.noUi-connect {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
}
.noUi-origin {
position: absolute;
height: 0;
width: 0;
}
.noUi-handle {
position: relative;
z-index: 1;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
-webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}
/* Painting and performance;
* Browsers can paint handles in their own layer.
*/
.noUi-base,
.noUi-handle {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 1px;
}
.noUi-horizontal .noUi-handle {
border-radius: 50%;
background-color: $white-color;
box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2);
height:15px;
width:15px;
cursor:pointer;
margin-left: -10px;
margin-top: -7px;
}
.noUi-vertical {
width: 18px;
}
.noUi-vertical .noUi-handle {
width: 28px;
height: 34px;
left: -6px;
top: -17px;
}
/* Styling;
*/
.noUi-target {
background-color: rgba(182, 182, 182, .3);
border-radius: 3px;
}
.noUi-connect {
background: $default-color;
border-radius: 3px;
-webkit-transition: background 450ms;
transition: background 450ms;
}
/* Handles and cursors;
*/
.noUi-draggable {
cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
cursor: ns-resize;
}
.noUi-handle {
// border: 1px solid #D9D9D9;
border-radius: 3px;
background: #FFF;
cursor: default;
box-shadow: inset 0 0 1px #FFF,
inset 0 1px 7px #EBEBEB,
0 3px 6px -3px #BBB;
-webkit-transition: $general-transition-time $transition-ease;
-moz-transition: $general-transition-time $transition-ease;
-ms-transition: $general-transition-time $transition-ease;
-o-transform: $general-transition-time $transition-ease;
transition: $general-transition-time $transition-ease;
}
.noUi-active {
-webkit-transform: scale3d(1.5,1.5,1);
-moz-transform: scale3d(1.5,1.5,1);
-ms-transform: scale3d(1.5,1.5,1);
-o-transform: scale3d(1.5,1.5,1);
transform: scale3d(1.5,1.5,1);
}
/* Disabled state;
*/
[disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
cursor: not-allowed;
}
/* Base;
*
*/
.noUi-pips,
.noUi-pips * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-pips {
position: absolute;
color: #999;
}
/* Values;
*
*/
.noUi-value {
position: absolute;
text-align: center;
}
.noUi-value-sub {
color: #ccc;
font-size: 10px;
}
/* Markings;
*
*/
.noUi-marker {
position: absolute;
background: #CCC;
}
.noUi-marker-sub {
background: #AAA;
}
.noUi-marker-large {
background: #AAA;
}
/* Horizontal layout;
*
*/
.noUi-pips-horizontal {
padding: 10px 0;
height: 80px;
top: 100%;
left: 0;
width: 100%;
}
.noUi-value-horizontal {
-webkit-transform: translate3d(-50%,50%,0);
transform: translate3d(-50%,50%,0);
}
.noUi-marker-horizontal.noUi-marker {
margin-left: -1px;
width: 2px;
height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
height: 15px;
}
/* Vertical layout;
*
*/
.noUi-pips-vertical {
padding: 0 10px;
height: 100%;
top: 0;
left: 100%;
}
.noUi-value-vertical {
-webkit-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
padding-left: 25px;
}
.noUi-marker-vertical.noUi-marker {
width: 5px;
height: 2px;
margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
width: 15px;
}
.noUi-tooltip {
display: block;
position: absolute;
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #fff;
color: #000;
padding: 5px;
text-align: center;
}
.noUi-horizontal .noUi-tooltip {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
left: 50%;
bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
right: 120%;
}
.slider {
&.slider-neutral{
& .noUi-connect,
&.noUi-connect{
background-color: $white-color;
}
&.noUi-target{
background-color: rgba(255,255,255, .3);
}
& .noUi-handle{
background-color: $white-color;
}
}
&.slider-primary{
& .noUi-connect,
&.noUi-connect{
background-color: $primary-color;
}
&.noUi-target{
background-color: $primary-color-opacity;
}
& .noUi-handle{
background-color: $brand-primary;
}
}
&.slider-info{
& .noUi-connect,
&.noUi-connect{
background-color: $brand-info;
}
&.noUi-target{
background-color: $info-color-opacity;
}
& .noUi-handle{
background-color: $brand-info;
}
}
&.slider-success{
& .noUi-connect,
&.noUi-connect{
background-color: $brand-success;
}
&.noUi-target{
background-color: $success-color-opacity;
}
& .noUi-handle{
background-color: $brand-success;
}
}
&.slider-warning{
& .noUi-connect,
&.noUi-connect{
background-color: $brand-warning;
}
&.noUi-target{
background-color: $warning-color-opacity;
}
& .noUi-handle{
background-color: $brand-warning;
}
}
&.slider-danger{
& .noUi-connect,
&.noUi-connect{
background-color: $brand-danger;
}
&.noUi-target{
background-color: $danger-color-opacity;
}
& .noUi-handle{
background-color: $brand-danger;
}
}
}

81
web/libs/themes/Blazing Blue/style.css Normal file
View file

@ -0,0 +1,81 @@
#main_header {
background: #122444;
color: #fff;
}
.demo-drawer {
background: #1b2d4c;
color: #fff;
}
#main_canvas {
color: #333;
}
.monitor_item .mdl-card__media {
background: #fbfbfb;
}
.monitor_item .stream-block {
background: #000;
}
.monitor_item .mdl-card {
border: 1px solid #b7b7b7;
}
.monitor_item .mdl-card__supporting-text {
background: #122444;
color: #fff!important;
}
.progress-bar-warning {
background-color: #1a2c4b;
}
.monitor_item .side-menu {
background: #1b2431;
color: #fff;
}
.monitor_item .mdl-card {
border: 1px solid #122444;
}
.dark.modal .modal-header,.dark.modal .modal-footer{background:#091222;border-color:#222;}
.dark.modal .modal-body{background:#151d28;}
.form-group-group.forestgreen {border-color: #091222;}
.form-group-group.forestgreen h4 {background: #091222;}
.dark .form-group-group {background: #18253e;}
.dark .list-group-item {background: #091222;border-color: #18253e;}
/*Cool BG*/
.dark.modal .modal-body{background: transparent}
#main_canvas, .dark.modal .modal-content {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23fdfdfd' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-color: #054e9f!important;
}
#main_canvas:before,.dark.modal .modal-content:before,#main_header:before {
content:'';
position: absolute;width:100%;height:100%;top:0;left:0;
background: rgba(227, 227, 227, 0.26);
background: -webkit-linear-gradient(90deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
background: -o-linear-gradient(90deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
background: -moz-linear-gradient(90deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
background: linear-gradient(0deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
}
.grid-stack{z-index: 1}
.dark.modal .modal-footer, .dark.modal .modal-header, .dark.modal .modal-body {
z-index: 1;
position: relative;
}
.dark .form-group-group,.monitor_item .mdl-card__supporting-text,.demo-drawer {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%231a2a4a' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
#main_header {
background-color: #630e0e;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%231a2a4a' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
#main_header:before {
max-height: 64px;
}
#main_header .nav>li>a:hover {
background: rgba(227, 227, 227, 0.26);
background: -webkit-linear-gradient(90deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
background: -o-linear-gradient(90deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
background: -moz-linear-gradient(90deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
background: linear-gradient(0deg, rgba(227, 227, 227, 0.26), rgba(249, 99, 50, 0.95));
}

62
web/pages/admin.ejs
View file

@ -14,14 +14,14 @@
}
nav{margin-top:20px}
</style>
<link rel="stylesheet" href="libs/css/pnotify.custom.min.css">
<link rel="stylesheet" href="libs/css/vbox.css">
<link rel="stylesheet" href="libs/css/circles.css">
<link rel="stylesheet" href="libs/css/bootstrap.min.css">
<link rel="stylesheet" href="libs/css/font-awesome.min.css">
<link rel="stylesheet" href="libs/css/fullcalendar.min.css">
<link rel="stylesheet" href="libs/css/bootstrap-table.min.css">
<link rel="stylesheet" href="libs/css/main.dash2.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/pnotify.custom.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/vbox.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/circles.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/bootstrap.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/font-awesome.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/fullcalendar.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/bootstrap-table.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/main.dash2.css">
<body class="shinobi-bg">
<div class="shinobi-bg-shade">
<div class="container-fluid">
@ -113,9 +113,11 @@ $.ccio.ws.on('f',function(d){
console.log(d);
switch(d.f){
case'edit_sub_account':
var account = $.ccio.subs[d.uid]
$.each(d.form,function(n,v){
$.ccio.subs[d.uid][n]=v;
account[n]=v;
});
account.detailsJSON=JSON.parse(account.details);
break;
case'add_sub_account':
$.ccio.tm(0,d,'#sub_accounts')
@ -179,7 +181,9 @@ $.sU.e.on('click','.permission',function(e){
$.each($.ccio.subs[$.pR.user],function(n,v){
$.pR.e.find('[name="'+n+'"]').val(v)
})
$.pR.e.find('[detail="allmonitors"]').val(e.d.allmonitors).change()
$.pR.e.find('[detail]').each(function(n,v){
$(v).val(e.d[$(v).attr('detail')])
}).first().change()
$.each(['monitors','monitor_edit','video_delete','video_view'],function(m,b){
if(e.d[b]){
$.each(e.d[b],function(n,v){
@ -191,37 +195,43 @@ $.sU.e.on('click','.permission',function(e){
//permission window
$.pR={e:$('#permissions'),l:$('#permissionsLabel small')};$.pR.f=$.pR.e.find('form')
$.pR.e.on('change','[detail]',function(e){
e.f=$(this).parents('form');
var details = $.pR.e.find('[name="details"]')
e.ar = JSON.parse(details.val())
e.f.find('[detail]').each(function(n,v){
v = $(v);e.ar[v.attr('detail')] = v.val()
})
details.val(JSON.stringify(e.ar))
})
$.pR.e.on('change','[detail="allmonitors"]',function(e){
e.e=$(this),
e.mon=$('#monitors_section,#monitors_edit_section,#video_delete_section')
e.details=$.pR.e.find('[name="details"]')
e.json=JSON.parse(e.details.val())
if(e.e.val()=='1'){
e.mon=$('.permission-view')
if(e.e.val() === '1'){
e.mon.hide();
e.json.allmonitors='1';
}else{
e.mon.show()
e.json.allmonitors='0';
$.pR.e.find('[monitor]').first().change()
}
e.details.val(JSON.stringify(e.json))
})
$.pR.e.on('click','[check]',function(e){
$(this).parents('.form-group-group').find('select').val($(this).attr('check')).first().change()
})
$.pR.e.on('change','[monitor]',function(e){
e.monitors=[];
e.key=$(this).attr('monitor');
e.details=$.pR.e.find('[name="details"]')
try{e.detail=JSON.parse(e.details.val())}catch(err){e.detail={}}
if(!e.detail){e.detail={}}
$.pR.e.find('[monitor="'+e.key+'"]').each(function(n,v){
v=$(v)
if(v.val()=='1'){
e.monitors.push(v.attr('mid'))
}
});
e.detail[e.key]=e.monitors;
$.pR.e.find('[monitor]').each(function(n,kel){
var monitors = [];
var key = $(kel).attr('monitor')
$.pR.e.find('[monitor="'+key+'"]').each(function(n,v){
var el = $(v)
if(el.val() === '1'){
monitors.push(el.attr('mid'))
}
});
e.detail[key] = monitors
})
e.details.val(JSON.stringify(e.detail))
});
$.pR.f.submit(function(e){

27
web/pages/blocks/confirm.ejs
View file

@ -11,7 +11,6 @@
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal"><i class="fa fa-times"></i> <%- lang['Close'] %></button>
<button type="button" class="btn btn-success confirmaction"><%- lang['Save'] %></button>
</div>
</div>
</div>
@ -21,17 +20,29 @@
$.confirm={e:$('#confirm_window')};
$.confirm.title=$.confirm.e.find('.modal-title span')
$.confirm.body=$.confirm.e.find('.modal-body')
$.confirm.footer=$.confirm.e.find('.modal-footer')
$.confirm.click=function(x,e){
if(!x.class){x.class='btn-success'}
if(!x.title){x.title='Save changes'}
x.e=$.confirm.e.find('.confirmaction').removeClass('btn-danger btn-warning btn-primary btn-success').addClass(x.class).text(x.title);
x.e.click(function(){
x.e.unbind('click');$.confirm.e.modal('hide');e();
})
$.confirm.footer.find('.confirmaction').remove()
var createButton = function(x,place,callback){
$.confirm.footer.prepend('<button type="button" class="btn '+x.class+' confirmaction confirmaction'+place+'">'+x.title+'</button>')
if(!x.class){x.class='btn-success'}
if(!x.title){x.title='Save changes'}
$.confirm.footer.find('.confirmaction'+place).click(function(){
$.confirm.e.modal('hide')
callback();
})
}
if(x instanceof Array){
$.each(x,function(place,x){
createButton(x,place,x.callback)
})
}else{
createButton(x,0,e)
}
}
$(document).ready(function(){
$.confirm.e.on('hidden.bs.modal', function () {
$.confirm.e.find('.confirmaction').unbind('click');
$.confirm.footer.find('.confirmaction').remove()
})
})
</script>

12
web/pages/blocks/header-favicon.ejs Normal file
View file

@ -0,0 +1,12 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Shinobi">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="<%-originalURL%>libs/img/icon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="<%-originalURL%>libs/img/icon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="<%-originalURL%>libs/img/icon/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="<%-originalURL%>libs/img/icon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="<%-originalURL%>libs/img/icon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="<%-originalURL%>libs/img/icon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="<%-originalURL%>libs/img/icon/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="<%-originalURL%>libs/img/icon/apple-touch-icon-180x180.png" />

5
web/pages/blocks/header-meta.ejs Normal file
View file

@ -0,0 +1,5 @@
<meta charset="utf-8">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<meta name="description" content="Shinobi, Open Source CCTV Technology">
<meta name="author" content="Moe Alam, moeiscool on GitHub">

41
web/pages/blocks/header.ejs
View file

@ -1,36 +1,21 @@
<head>
<title><%-lang.Shinobi%></title>
<meta charset="utf-8">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<meta name="description" content="Shinobi, Open Source CCTV Technology">
<meta name="author" content="Moe Alam, moeiscool on GitHub">
<% include header-meta.ejs %>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="libs/css/bootstrap.min.css">
<link rel="stylesheet" href="libs/css/login.css">
<link rel="stylesheet" href="libs/css/material.min.css">
<link rel="stylesheet" href="libs/css/material.style.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/bootstrap.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/login.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/material.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/material.style.css">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="libs/img/icon/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="libs/img/icon/favicon.ico" type="image/x-icon" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Shinobi">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="libs/img/icon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="libs/img/icon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="libs/img/icon/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="libs/img/icon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="libs/img/icon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="libs/img/icon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="libs/img/icon/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="libs/img/icon/apple-touch-icon-180x180.png" />
<script src="libs/js/jquery.min.js"></script>
<script src="libs/js/jquery-ui.min.js"></script>
<script src="libs/js/jquery.serialize.js"></script>
<link rel="icon" href="<%-originalURL%>libs/img/icon/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<%-originalURL%>libs/img/icon/favicon.ico" type="image/x-icon" />
<% include header-favicon.ejs %>
<script src="<%-originalURL%>libs/js/jquery.min.js"></script>
<script src="<%-originalURL%>libs/js/jquery-ui.min.js"></script>
<script src="<%-originalURL%>libs/js/jquery.serialize.js"></script>
</head>
<% cleanLang=function(string){
<% cleanLang = function(string){
if(!string){string=''}
return string.replace(/'/g,"\\'")
} %>
}%>

2
web/pages/blocks/help.ejs
View file

@ -10,7 +10,7 @@
<h4 class="modal-title" id="help_windowLabel"><i class="fa fa-question-circle"></i> &nbsp; <span><%-lang.Help%></span></h4>
</div>
<div class="modal-body">
<a href="http://shinobi.video/docs/donate"><img src="libs/img/icon/apple-touch-icon-152x152.png" class="pull-right" style="border-radius:50%;margin-left:20px;border: 1px solid #c3996b;"></a>
<a href="http://shinobi.video/docs/donate"><img src="<%-originalURL%>libs/img/icon/apple-touch-icon-152x152.png" class="pull-right" style="border-radius:50%;margin-left:20px;border: 1px solid #c3996b;"></a>
<p>For information about how to use Shinobi you can check out the <a target="_blank" href="http://shinobi.video/docs">Docs</a>.</p>
<p>If you would like to get professional support please consider ordering a <a href="http://shinobi.video/support">support package</a>. You can find <b>Moe Alam, The Author</b>, on the <a target="_blank" href="https://discord.gg/ehRd8Zz">Discord</a> Community Chat. For general questions and community support you can also try <a href="https://www.reddit.com/r/ShinobiCCTV">Reddit</a>.</p>
<p><strong>Support </strong> <a href="http://shinobi.video/support">from @moeiscool</a></p>

52
web/pages/blocks/logs.ejs
View file

@ -8,28 +8,42 @@
</button>
<h4 class="modal-title" id="logsLabel"><i class="fa fa-exclamation-triangle"></i> &nbsp; <%-lang.Logs%></h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>
<div>
<select class="form-control" id="log_monitors">
<option class="hard" value="all"><%-lang['All Logs']%></option>
<option class="hard" value="$USER"><%-lang['For Group']%></option>
</select>
</div>
</label>
</div>
<div class="form-group">
<label>
<input class="form-control search-controller" placeholder="<%-lang.Search%>">
</label>
</div>
<table class="table table-striped">
<tbody class="search-body"></tbody>
</table>
<div class="modal-body overflow-hidden">
<div class="col-md-3">
<div class="form-group">
<label>
<div>
<select class="form-control" id="log_monitors">
<option class="hard" value="all"><%-lang['All Logs']%></option>
<option class="hard" value="$USER"><%-lang['For Group']%></option>
</select>
</div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang.Search%></span></div>
<div><input type="text" class="form-control search-controller" placeholder="<%-lang.Search%>" /></div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang['Date Range']%></span></div>
<div><input type="text" id="logs_daterange" class="form-control" value="" /></div>
</label>
</div>
</div>
<div class="col-md-9">
<div class="fixed-table-container">
<div class="fixed-table-body">
<table class="table table-striped">
<tbody class="search-body"></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal"><i class="fa fa-times"></i> <%-lang.Close%></button>
<button download class="btn btn-info"><%-lang.Export%></button>
<button onclick="$.log.lm.change()" class="btn btn-success"><%-lang.Check%></button>
</div>
</div>

63
web/pages/blocks/mainpermissions.ejs
View file

@ -1,19 +1,12 @@
<!--Confirmation Window-->
<div class="modal fade" id="add_edit" tabindex="-1" role="dialog" aria-labelledby="permissionsLabel" aria-hidden="true">
<div class="modal fade full" id="add_edit" tabindex="-1" role="dialog" aria-labelledby="permissionsLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<form class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="permissionsLabel"><i class="fa fa-lock"></i> &nbsp; <span id="title"></span>
<div class="pull-right">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="edit">
<input type="checkbox" id="edit" value="1" class="mdl-switch__input">
<span class="monospace mdl-switch__label"></span>
</label>
</div>
</h4>
<h4 class="modal-title" id="permissionsLabel"><i class="fa fa-lock"></i> &nbsp; <span id="title"></span></h4>
</div>
<div class="modal-body" style="max-height:600px;overflow:auto">
<div class="form-group">
@ -118,6 +111,14 @@
</select></div>
</label>
</div>
<div class="form-group h_l_input h_l_limited">
<label><div><span><%-lang['Can use Amazon S3']%></span></div>
<div><select class="form-control" detail="use_aws_s3">
<option value="1" selected><%-lang.Yes%></option>
<option value="0"><%-lang.No%></option>
</select></div>
</label>
</div>
<div class="form-group h_l_input h_l_limited">
<label><div><span><%-lang['Can use WebDAV']%></span></div>
<div><select class="form-control" detail="use_webdav">
@ -126,6 +127,14 @@
</select></div>
</label>
</div>
<div class="form-group h_l_input h_l_limited">
<label><div><span><%-lang['Can use Discord Bot']%></span></div>
<div><select class="form-control" detail="use_discordbot">
<option value="1" selected><%-lang.Yes%></option>
<option value="0"><%-lang.No%></option>
</select></div>
</label>
</div>
<div class="form-group h_l_input h_l_limited">
<label><div><span><%-lang['Can use LDAP']%></span></div>
<div><select class="form-control" detail="use_ldap">
@ -137,6 +146,12 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal"><i class="fa fa-times"></i> <%-lang.Close%></button>
<div class="pull-left">
<div class="marc-toggle display-inline">
<input type="checkbox" id="edit"/><label for="edit">Add or Edit</label>
</div>
</div>
<button type="submit" class="btn btn-success"><i class="fa fa-check"></i> <%-lang.Save%></button>
</div>
<input type="hidden" name="details" value="{}">
@ -146,11 +161,12 @@
<script>
//add new
$.aN={e:$('#add_edit')};$.aN.f=$.aN.e.find('form')
$.aN.modeIsEdit = false
$.aN.f.submit(function(e){
e.preventDefault();
e.s=$.aN.f.serializeObject()
e.cx={f:'accounts',ff:'register',form:e.s};
if($('#edit').is(':checked')){
if($.aN.modeIsEdit){
e.cx.ff='edit';
e.cx.account=$.aN.selected;
}
@ -158,21 +174,33 @@ $.aN.f.submit(function(e){
$.aN.e.modal('hide')
return false;
});
$.aN.e.on('change','[detail]',function(e){
e.ar={},e.f=$(this).parents('form');
$.each(e.f.find('[detail]'),function(n,v){
v=$(v);e.ar[v.attr('detail')]=v.val();
$.aN.e.on('change','[detail]',function(){
e = {}
e.ar = {}
if($.aN.modeIsEdit){
try{
e.ar = Object.assign(JSON.parse($.aN.selected.details),{})
}catch(err){
}
}
$.each($.aN.e.find('[detail]'),function(n,v){
var el = $(v)
e.ar[el.attr('detail')] = el.val()
});
e.f.find('[name="details"]').val(JSON.stringify(e.ar));
$.aN.e.find('[name="details"]').val(JSON.stringify(e.ar))
})
$('#edit').change(function(e){
if($('#edit').is(':checked')){
$.aN.modeIsEdit = true
$('#title').text("<%-lang['Edit']%>")
$.aN.e.find('[name="mail"],[name="ke"]').prop('disabled',true)
}else{
$.aN.modeIsEdit = false
$('#title').text("<%-lang['Add New']%>")
$.aN.e.find('input,select').prop('disabled',false)
}
$.aN.e.find('[detail]').first().change()
}).change()
$.aN.e.on('change','[selector]',function(e){
e.v=$(this).val();e.a=$(this).attr('selector')
@ -182,6 +210,7 @@ $.aN.e.on('change','[selector]',function(e){
//simple lister
$.aC={e:$('#accounts')};$.aC.t=$.aC.e.find('table')
$.aC.e.on('click','.add',function(e){
$.aN.selected = null
$.aN.e.modal('show')
$('#edit').prop('checked',false).change().parent().removeClass('is-checked')
$.aN.f[0].reset()
@ -200,7 +229,6 @@ $.aC.e.on('click','.delete',function(e){
})
$.aC.e.on('click','.permission',function(e){
$.aN.e.modal('show')
$('#edit').prop('checked',true).change().parent().addClass('is-checked')
e.e=$(this).parents('tr');
e.u=e.e.attr('ke');
e.account=$.ccio.accounts[e.u];
@ -211,8 +239,9 @@ $.aC.e.on('click','.permission',function(e){
$.aN.e.find('[name="'+n+'"]').val(v).change()
})
$.each(JSON.parse(e.account.details),function(n,v){
$.aN.e.find('[detail="'+n+'"]').val(v).change()
$.aN.e.find('[detail="'+n+'"]').val(v)
})
$('#edit').prop('checked',true).change().parent().addClass('is-checked')
// $.pR.e.modal('show');
})

153
web/pages/blocks/monitoredit.ejs
View file

@ -46,11 +46,6 @@
<div><input class="form-control" name="name"></div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang['Retry Connection']%></span></div>
<div><input class="form-control" detail="fatal_max" placeholder="10"></div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang["Number of Days to keep"]%> <%-lang["Videos"]%></span></div>
<div><input class="form-control" detail="max_keep_days" placeholder="Default is global value"></div>
@ -95,20 +90,22 @@
</select></div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang['Automatic']%></span></div>
<div><select class="form-control" detail="auto_host_enable" selector="h_auto_host">
<option value="0"><%-lang.No%></option>
<option value="1" selected><%-lang.Yes%></option>
</select></div>
</label>
</div>
<div class="form-group h_auto_host_input h_auto_host_1">
<div class="form-group">
<label><div><span><%-lang['Full URL Path']%></span></div>
<div><input class="form-control" detail="auto_host" placeholder="Example : rtsp://123.123.123.123/stream/1"></div>
<div class="h_t_input h_t_h264 h_t_hls h_t_mp4 h_t_jpeg h_t_mjpeg h_t_local">
<div class="form-group h_t_input h_t_h264 h_t_hls h_t_mp4 h_t_jpeg h_t_mjpeg">
<label><div><span><%-lang['Automatic']%></span></div>
<div><select class="form-control" detail="auto_host_enable" selector="h_auto_host">
<option value="0"><%-lang.No%></option>
<option value="1" selected><%-lang.Yes%></option>
</select></div>
</label>
</div>
<div class="form-group h_auto_host_input h_auto_host_1">
<div class="form-group">
<label><div><span><%-lang['Full URL Path']%></span></div>
<div><input class="form-control" detail="auto_host" placeholder="Example : rtsp://123.123.123.123/stream/1"></div>
</label>
</div>
</div>
</div>
<div class="h_auto_host_input h_auto_host_0 auto_host_fill" style="display:none">
<div class="form-group h_t_input h_t_h264 h_t_hls h_t_mp4 h_t_jpeg h_t_mjpeg">
@ -183,6 +180,19 @@
</select></div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang['ONVIF']%></span></div>
<div><select class="form-control" detail="is_onvif" selector="h_onvif">
<option value="0" selected><%-lang.No%></option>
<option value="1"><%-lang.Yes%></option>
</select></div>
</label>
</div>
<div class="form-group h_onvif_input h_onvif_1">
<label><div><span><%-lang['ONVIF Port']%></span></div>
<div><input class="form-control" detail="onvif_port" placeholder="8000" type="number"></div>
</label>
</div>
</div>
<!-- END of Connection -->
<!-- START of Input -->
@ -279,7 +289,7 @@
</div>
<div class="form-group">
<label><div><span><%-lang['Stream Type']%></span></div>
<div><select class="form-control" detail="stream_type" selector="h_st" triggerChange="#add_monitor [detail=stream_vcodec]" triggerChangeIgnore="b64">
<div><select class="form-control" detail="stream_type" selector="h_st" triggerChange="#add_monitor [detail=stream_vcodec]" triggerChangeIgnore="b64,mjpeg">
<option value="mp4"><%-lang['Poseidon']%></option>
<!-- <option value="pam">PAM</option>-->
<option value="b64" selected><%-lang['Base64 over Websocket']%></option>
@ -431,7 +441,7 @@
</div>
</div>
</div>
<div class="h_us_input h_us_advanced" style="display:none">
<div class="h_us_input h_us_advanced h_hls_v_input h_hls_v_libx264 h_hls_v_libx265 h_hls_v_h264_nvenc h_hls_v_hevc_nvenc h_hls_v_no" style="display:none">
<div class="form-group-group navy" section id="monSectionStreamTimestamp">
<h4><%-lang['Stream Timestamp']%></h4>
<div class="form-group">
@ -958,20 +968,47 @@
<div><input class="form-control" detail="detector_command_timeout" placeholder="10"></div>
</label>
</div>
<div class="row">
<div class="form-group col-md-12">
<label><div><span><%-lang['Email on Trigger']%></span></div>
<div><select class="form-control" detail="detector_mail">
<option value="0" selected><%-lang.No%></option>
<option value="1"><%-lang.Yes%></option>
</select></div>
</label>
</div>
<div class="form-group col-md-12">
<label><div><span><%-lang['Allow Next Email']%></span></div>
<div><input class="form-control" detail="detector_mail_timeout" placeholder="10"></div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang['Email on Trigger']%></span></div>
<div><select class="form-control" detail="detector_mail" selector="h_det_email">
<option value="0" selected><%-lang.No%></option>
<option value="1"><%-lang.Yes%></option>
</select></div>
</label>
</div>
<div class="form-group h_det_email_input h_det_email_1">
<label><div><span><%-lang['Attach Video Clip']%></span></div>
<div><select class="form-control" detail="detector_mail_send_video">
<option value="0" selected><%-lang.No%></option>
<option value="1"><%-lang.Yes%></option>
</select></div>
</label>
</div>
<div class="form-group h_det_email_input h_det_email_1">
<label><div><span><%-lang['Allow Next Email']%></span></div>
<div><input class="form-control" detail="detector_mail_timeout" placeholder="10"></div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang['Discord Alert on Trigger']%></span></div>
<div><select class="form-control" detail="detector_discordbot" selector="h_det_discord">
<option value="0" selected><%-lang.No%></option>
<option value="1"><%-lang.Yes%></option>
</select></div>
</label>
</div>
<div class="form-group h_det_discord_input h_det_discord_1">
<label><div><span><%-lang['Attach Video Clip']%></span></div>
<div><select class="form-control" detail="detector_discordbot_send_video">
<option value="0" selected><%-lang.No%></option>
<option value="1"><%-lang.Yes%></option>
</select></div>
</label>
</div>
<div class="form-group h_det_discord_input h_det_discord_1">
<label><div><span><%-lang['Allow Next Discord Alert']%></span></div>
<div><input class="form-control" detail="detector_discordbot_timeout" placeholder="10"></div>
</label>
</div>
<div class="hidden">
<div><input detail="cords" placeholder=""></div>
@ -1313,30 +1350,6 @@
<input type="hidden" detail="groups">
</div>
</div>
<div class="form-group-group green" section id="monSectionLogging">
<h4><%-lang['Logging']%></h4>
<div class="row">
<div class="form-group col-md-12">
<label><div><span><%-lang['Log Level']%></span></div>
<div><select class="form-control" detail="loglevel">
<option value="quiet"><%-lang['Silent']%></option>
<option value="fatal"><%-lang['Fatal']%></option>
<option value="error" selected><%-lang['on Error']%></option>
<option value="warning"><%-lang['All Warnings']%></option>
<option value="debug"><%-lang['Debug']%></option>
</select></div>
</label>
</div>
<div class="form-group col-md-12">
<label><div><span><%-lang['Save Log in SQL']%></span></div>
<div><select class="form-control" detail="sqllog">
<option value="0" selected><%-lang.No%></option>
<option value="1"><%-lang.Yes%></option>
</select></div>
</label>
</div>
</div>
</div>
<div class="form-group-group orange" section id="monSectionCopying">
<h4><%-lang['Copy Settings']%></h4>
<div class="form-group">
@ -1440,6 +1453,32 @@
</div>
</div>
</div>
<div class="form-group-group green" section id="monSectionLogging">
<h4><%-lang['Logging']%></h4>
<div class="form-group">
<label><div><span><%-lang['Log Level']%></span></div>
<div><select class="form-control" detail="loglevel">
<option value="quiet"><%-lang['Silent']%></option>
<option value="fatal"><%-lang['Fatal']%></option>
<option value="error" selected><%-lang['on Error']%></option>
<option value="warning"><%-lang['All Warnings']%></option>
<option value="debug"><%-lang['Debug']%></option>
</select></div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang['Save Log in SQL']%></span></div>
<div><select class="form-control" detail="sqllog">
<option value="0" selected><%-lang.No%></option>
<option value="1"><%-lang.Yes%></option>
</select></div>
</label>
</div>
<div class="form-group-group green">
<h4><%-lang['Log Stream']%></h4>
<div class="data-menu logs"></div>
</div>
</div>
</div>
<div class="form-group" style="display:none">
<input type="hidden" detail="detector_cascades">

92
web/pages/blocks/settings.ejs
View file

@ -179,6 +179,98 @@
</div>
</div>
<% } %>
<% if(details.use_aws_s3!=='0'){ %>
<div class="form-group-group forestgreen">
<h4><%-lang['Amazon S3']%></h4>
<div class="form-group">
<label><div><span><%-lang.Bucket%></span></div>
<div><input class="form-control" detail="aws_s3_bucket" placeholder="Example : slippery-seal"></div>
</label>
</div>
<div class="row">
<div class="form-group col-md-12">
<label><div><span><%-lang.aws_accessKeyId%></span></div>
<div><input class="form-control" detail="aws_accessKeyId"></div>
</label>
</div>
<div class="form-group col-md-12">
<label><div><span><%-lang.aws_secretAccessKey%></span></div>
<div><input class="form-control" type="password" detail="aws_secretAccessKey"></div>
</label>
</div>
</div>
<div class="form-group">
<label><div><span><%-lang.Region%></span></div>
<div><select class="form-control" detail="aws_region">
<option value="us-west-1" selected>US West (N. California)</option>
<option value="us-west-2">US West (Oregon)</option>
<option value="us-east-2">US East (Ohio)</option>
<option value="us-east-1">US East (N. Virginia)</option>
<option value="ap-south-1">Asia Pacific (Mumbai)</option>
<option value="ap-northeast-2">Asia Pacific (Seoul)</option>
<option value="ap-northeast-3">Asia Pacific (Osaka-Local)**</option>
<option value="ap-southeast-1">Asia Pacific (Singapore)</option>
<option value="ap-southeast-2">Asia Pacific (Sydney)</option>
<option value="ap-northeast-1">Asia Pacific (Tokyo)</option>
<option value="ca-central-1">Canada (Central)</option>
<option value="cn-north-1">China (Beijing)</option>
<option value="cn-northwest-1">China (Ningxia)</option>
<option value="eu-central-1">EU (Frankfurt)</option>
<option value="eu-west-1">EU (Ireland)</option>
<option value="eu-west-2">EU (London)</option>
<option value="eu-west-3">EU (Paris)</option>
<option value="sa-east-1">South America (São Paulo)</option>
</select></div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang.Autosave%></span></div>
<div><select class="form-control" detail="aws_s3_save">
<option value="0" selected><%-lang.No%></option>
<option value="1"><%-lang.Yes%></option>
</select></div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang['Save Links to Database']%></span></div>
<div><select class="form-control" detail="aws_s3_log">
<option value="0"><%-lang.No%></option>
<option value="1" selected><%-lang.Yes%></option>
</select></div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang['Save Directory']%></span></div>
<div><input class="form-control" placeholder="" detail="aws_s3_dir"></div>
</label>
</div>
</div>
<% } %>
<% if(details.use_discordbot!=='0'){ %>
<div class="form-group-group forestgreen">
<h4><%-lang['Discord Bot']%></h4>
<div class="form-group">
<label><div><span><%-lang.Enabled%></span></div>
<div><select class="form-control" detail="discordbot" selector="u_discord_bot">
<option value="0" selected><%-lang.No%></option>
<option value="1"><%-lang.Yes%></option>
</select></div>
</label>
</div>
<div class="u_discord_bot_input u_discord_bot_1">
<div class="form-group">
<label><div><span><%-lang.Token%></span></div>
<div><input type="password" class="form-control" placeholder="XXXXXXXXXXXXXXXXXXXXXXXX.XXXXXXXXXXXXXXX_XXXXXXXXXXXXXXXXXX" detail="discordbot_token"></div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang['Channel ID']%></span></div>
<div><input class="form-control" placeholder="xxxxxxxxxxxxxxxxxx" detail="discordbot_channel"></div>
</label>
</div>
</div>
</div>
<% } %>
<% if(details.use_ldap!=='0'){ %>
<div class="form-group-group forestgreen">
<h4><%-lang.LDAP%></h4>

49
web/pages/blocks/subpermissions.ejs
View file

@ -10,15 +10,42 @@
</div>
<div class="modal-body" style="max-height:600px;overflow:auto">
<div class="text-center msg"></div>
<div class="form-group">
<label><div><span><%-lang['All Monitors and Privileges']%></span></div>
<div><select class="form-control" detail="allmonitors">
<option value="0" selected><%-lang.No%></option>
<option value="1"><%-lang.Yes%></option>
</select></div>
</label>
<div class="form-group-group">
<h4><%-lang['Privileges']%></h4>
<div class="form-group">
<label><div><span><%-lang['All Monitors and Privileges']%></span></div>
<div><select class="form-control" detail="allmonitors">
<option value="0" selected><%-lang.No%></option>
<option value="1"><%-lang.Yes%></option>
</select></div>
</label>
</div>
<div class="form-group permission-view">
<label><div><span><%-lang['Can Create and Delete Monitors']%></span></div>
<div><select class="form-control" detail="monitor_create">
<option value="0" selected><%-lang.No%></option>
<option value="1"><%-lang.Yes%></option>
</select></div>
</label>
</div>
<div class="form-group permission-view">
<label><div><span><%-lang['Can Change User Settings']%></span></div>
<div><select class="form-control" detail="user_change">
<option value="0" selected><%-lang.No%></option>
<option value="1"><%-lang.Yes%></option>
</select></div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang['Can View Logs']%></span></div>
<div><select class="form-control" detail="view_logs">
<option value="0" selected><%-lang.No%></option>
<option value="1"><%-lang.Yes%></option>
</select></div>
</label>
</div>
</div>
<div class="form-group-group blue" id="monitors_section">
<div class="form-group-group blue permission-view" id="monitors_section">
<h4>
<%-lang['Can View Monitor']%>
<div class="pull-right">
@ -37,7 +64,7 @@
</div>
<% }) %>
</div>
<div class="form-group-group forestgreen" id="monitors_edit_section">
<div class="form-group-group forestgreen permission-view" id="monitors_edit_section">
<h4>
<%-lang['Can Edit Monitor']%>
<div class="pull-right">
@ -56,7 +83,7 @@
</div>
<% }) %>
</div>
<div class="form-group-group navy" id="video_view_section">
<div class="form-group-group navy permission-view" id="video_view_section">
<h4>
<%-lang['Can View Videos and Events']%>
<div class="pull-right">
@ -75,7 +102,7 @@
</div>
<% }) %>
</div>
<div class="form-group-group red" id="video_delete_section">
<div class="form-group-group red permission-view" id="video_delete_section">
<h4>
<%-lang['Can Delete Videos and Events']%>
<div class="pull-right">

8
web/pages/blocks/videoview.ejs
View file

@ -8,10 +8,9 @@
</button>
<h4 class="modal-title" id="videos_viewerLabel"><i class="fa fa-film"></i> &nbsp; <%-lang.Videos%> <small> <span class="video_viewer_total"></span> <%-lang.total%></small></h4>
</div>
<div class="modal-body flex-container-modal-body">
<div style="padding:20px 0" class="flex-block flex-modal-block">
<div class="modal-body overflow-hidden">
<div style="padding:20px 0">
<div class="col-md-3">
<div class="form-group">
<label><div><span><%-lang['Date Range']%></span></div>
<div><input type="text" id="videos_viewer_daterange" class="form-control" value="" /></div>
@ -32,7 +31,8 @@
<div class="modal-footer">
<div class="row">
<div class="col-md-4 text-left">
<a class="btn btn-danger delete_selected"><i class="fa fa-trash-o"></i> &nbsp; <%-lang['Delete selected']%></a>
<a class="btn btn-danger delete_selected"><i class="fa fa-trash-o"></i> &nbsp; <%-lang['Delete']%></a>
<a class="btn btn-default export_selected"><i class="fa fa-folder-o"></i> &nbsp; <%-lang['Zip and Download']%></a>
</div>
<div class="col-md-4">
<div class="text-center" id="videos_viewer_pages"></div>

212
web/pages/dashcam.ejs
View file

@ -1,6 +1,6 @@
<% include blocks/header %>
<script>var $user=<%- JSON.stringify($user) %>;</script>
<link rel="stylesheet" href="libs/css/bootstrap.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/bootstrap.min.css">
<div id="main" class="container">
<a class="btn btn-danger btn-lg" record>Stream</a>
<div>
@ -19,15 +19,20 @@ requires https or firefox
</div>
<video id="video"><source></video>
<canvas id="canvas"></canvas>
<script src="libs/js/jquery.min.js"></script>
<script src="libs/js/socket.io.js"></script>
<script src="libs/js/menu.js"></script>
<script src="<%-originalURL%>libs/js/jquery.min.js"></script>
<script src="<%-originalURL%>libs/js/socket.io.js"></script>
<script src="<%-originalURL%>libs/js/menu.js"></script>
<script>
$.ccio={};$.ls=localStorage;
$.ccio.ws=io(location.origin);
$.ccio = {}
$.ls = localStorage
$.ccio.ws = io(location.origin)
$.ccio.ws.on('connect',function (d){
$(document).ready(function(e){
$.ccio.cx=function(x){if(!x.ke){x.ke=$user.ke;};if(!x.uid){x.uid=$user.uid;};return $.ccio.ws.emit('r',x)}
$.ccio.cx=function(x){
if(!x.ke){x.ke=$user.ke;}
if(!x.uid){x.uid=$user.uid;}
return $.ccio.ws.emit('r',x)
}
console.log($user)
$.ccio.cx({f:'init',ke:$user.ke,auth:$user.auth_token,uid:$user.uid})
})
@ -41,6 +46,16 @@ $.ccio.ws.on('f',function(d){
$.ccio.mon[d.mid][n]=v;
});
break;
case'disable_stream':
$.ccio.mon[d.mid].allowStream = false
if(d.mid === $.ccio.selected){
$.ccio.stopSending()
setTimeout($.ccio.startSending,2000)
}
break;
case'enable_stream':
$.ccio.mon[d.mid].allowStream = true
break;
}
})
function _base64ToArrayBuffer(base64) {
@ -52,81 +67,95 @@ function _base64ToArrayBuffer(base64) {
}
return bytes.buffer;
}
$.ccio.framerate=2;
$.ccio.stopSending=function(){
$.ls.setItem('Shinobi_Dashcam_Started','0')
$('#main').removeClass('recording');
clearInterval($.ccio.cutChunk);
clearTimeout($.ccio.sendCheckTimeout);
try{
mediaRecorder.stop()
}catch(err){
}
$('[record]').unbind('click').click($.ccio.startSending)
}
$.ccio.startSending=function(){
if($.ccio.selected===null){return false;}
$('#main').addClass('recording');
if (typeof MediaRecorder.isTypeSupported == 'function'){
/*
MediaRecorder.isTypeSupported is a function announced in https://developers.google.com/web/updates/2016/01/mediarecorder and later introduced in the MediaRecorder API spec http://www.w3.org/TR/mediastream-recording/
*/
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
var options = {mimeType: 'video/webm;codecs=vp9'};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=h264')) {
var options = {mimeType: 'video/webm;codecs=h264'};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
var options = {mimeType: 'video/webm;codecs=vp8'};
}
log('Using '+options.mimeType);
mediaRecorder = new MediaRecorder($.ccio.vid.stream, options);
}else{
log('Using default codecs for browser');
mediaRecorder = new MediaRecorder($.ccio.vid.stream);
}
mediaRecorder.start(10);
$.ccio.chunker = function(){
clearInterval($.ccio.cutChunk)
$.ccio.cutChunk=setInterval(function(){
mediaRecorder.stop()
mediaRecorder.start()
},5000)
$.ccio.firstFrame = null
$.ccio.startSending = function(){
if($.ccio.selected === null){
return false
}
mediaRecorder.ondataavailable = function(e) {
//log('Data available...');
//console.log(e.data);
//console.log(e.data.type);
//console.log(e);
chunks.push(e.data);
};
$.ls.setItem('Shinobi_Dashcam_Started',1)
$('#main').addClass('recording');
if($.ccio.mon[$.ccio.selected].allowStream === true){
if (typeof MediaRecorder.isTypeSupported == 'function'){
var options = {
audioBitsPerSecond : 128000,
videoBitsPerSecond : 2500000,
}
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
options.mimeType = 'video/webm;codecs=vp9'
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=h264')) {
options.mimeType = 'video/webm;codecs=h264'
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
options.mimeType = 'video/webm;codecs=vp8'
}
console.log('Using '+options.mimeType);
mediaRecorder = new MediaRecorder($.ccio.vid.stream, options);
}else{
console.log('Using default codecs for browser');
mediaRecorder = new MediaRecorder($.ccio.vid.stream);
}
mediaRecorder.onerror = function(e){
clearInterval($.ccio.cutChunk)
};
mediaRecorder.start(10)
$.ccio.chunker = function(){
clearInterval($.ccio.cutChunk)
$.ccio.cutChunk=setInterval(function(){
var blob = new Blob(chunks, {type: "video/webm"});
$.ccio.cx({f:'monitor_chunk',chunk:blob,mid:$.ccio.selected});
chunks = [];
},1000/$.ccio.framerate)
}
var noFirstFrame = function(e){
$.ccio.firstFrame = e.data
chunks.push(e.data);
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
}
}
mediaRecorder.ondataavailable = noFirstFrame
mediaRecorder.onerror = function(e){
clearInterval($.ccio.cutChunk)
}
mediaRecorder.onstart = function(){
$.ccio.chunker()
};
mediaRecorder.onstart = function(){
if($.ccio.firstFrame){
var blob = new Blob([$.ccio.firstFrame], {type: "video/webm"});
$.ccio.cx({f:'monitor_chunk',chunk:blob,mid:$.ccio.selected});
}
$.ccio.chunker()
}
mediaRecorder.onstop = function(){
var blob = new Blob(chunks, {type: "video/webm"});
$.ccio.cx({f:'monitor_chunk',chunk:blob,mid:$.ccio.selected});
// var reader = new FileReader();
// reader.addEventListener("loadend", function() {
// console.log(reader.result)
// });
// reader.readAsArrayBuffer(blob);
chunks = [];
};
mediaRecorder.onpause = function(){
clearInterval($.ccio.cutChunk)
}
mediaRecorder.onpause = function(){
clearInterval($.ccio.cutChunk)
}
mediaRecorder.onresume = function(){
$.ccio.chunker()
}
mediaRecorder.onresume = function(){
$.ccio.chunker()
}
mediaRecorder.onwarning = function(e){
clearInterval($.ccio.cutChunk)
};
mediaRecorder.onwarning = function(e){
clearInterval($.ccio.cutChunk)
}
}else{
clearTimeout($.ccio.sendCheckTimeout)
$.ccio.sendCheckTimeout = setTimeout($.ccio.startSending,2000)
}
$('[record]').unbind('click').click($.ccio.stopSending)
};
function log(message){
@ -138,9 +167,33 @@ function log(message){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
if(getBrowser() == "Chrome"){
var constraints = {"audio": true, "video": { "mandatory": { "minWidth": 640, "maxWidth": 640, "minHeight": 480,"maxHeight": 480 }, "optional": [] } };//Chrome
var constraints = {
"audio": true,
"video": {
"mandatory": {
"minWidth": 640,
"maxWidth": 5000,
"minHeight": 480,
"maxHeight": 2500
}, "optional": []
}
};
}else if(getBrowser() == "Firefox"){
var constraints = {audio: true,video: { width: { min: 640, ideal: 640, max: 640 }, height: { min: 480, ideal: 480, max: 480 }}}; //Firefox
var constraints = {
audio: true,
video: {
width: {
min: 640,
ideal: 640,
max: 5000
},
height: {
min: 480,
ideal: 480,
max: 2500
}
}
};
}
var mediaRecorder;
var chunks = [];
@ -149,8 +202,20 @@ var count = 0;
$.ccio.vid = {element:$('#video')[0],canvas:$('#canvas')[0],data:$('#data')};
$.ccio.vid.element.controls = false;
navigator.getUserMedia(constraints,function(stream,fn) {
$.ccio.vid.stream=stream;
$.ccio.vid.stream = stream;
$.ccio.vid.element.srcObject = stream;
$('[record]').click($.ccio.startSending)
////////
if($user.mons.length>0&&$.ls.getItem('Shinobi_Dashcam')){
$('[monitor="'+$.ls.getItem('Shinobi_Dashcam')+'"]').click()
if($.ls.getItem('Shinobi_Dashcam_Started') === 1){
setTimeout(function(){
$('[record]').click()
},3000)
}
}else{
$.ccio.selected = null;
}
}, function(err){console.error('getUserMedia',err)});
@ -187,8 +252,6 @@ navigator.getUserMedia(constraints,function(stream,fn) {
})
if($user.mons.length>0&&$.ls.getItem('Shinobi_Dashcam')){$('[monitor="'+$.ls.getItem('Shinobi_Dashcam')+'"]').click()}else{$.ccio.selected=null;}
$('body')
.on('click','.logout',function(e){
localStorage.removeItem('ShinobiLogin_'+location.host);location.href='/';
@ -264,5 +327,6 @@ $('body')
#main{text-align:center}
#msg h2{margin-top:0}
#img{border-radius:5px;overflow:hidden;max-width:100%;display:inline-block;margin-top: 30px}
#video,#canvas{position: absolute;display:none}
#canvas{position: absolute;display:none}
#video{display:inline-block}
</style>

9
web/pages/embed.ejs
View file

@ -8,7 +8,9 @@ if(config.ssl&&config.ssl.port&&data.protocol==='https'){
}
if(!data.port||data.port===''||data.port==80||data.port==443){data.url=baseUrl}else{data.url=baseUrl+':'+data.port}
if(data.addon || data.addon.indexOf('relative')>-1){
data.url=''
data.url = ''
}else if(config.baseURL){
data.url = config.baseURL
}
if(data.url.charAt(data.url.length - 1) !== '/'){
data.url += '/'
@ -107,9 +109,10 @@ if(data.addon.indexOf('gui')>-1){ %>
<% };
if(data.addon.indexOf('fullscreen')>-1){ %>
<style>
body,html{overflow: hidden;}
body,html{overflow: hidden;height:100%}
*{margin:0;padding:0;border:0}
.stream-element,.shinobi_stream{position:absolute;top:0;left:0;}
.stream-element,.shinobi_stream{position:absolute;top:0;left:0;height:100%}
.shinobi_stream video{object-fit: fill}
</style>
<script>
$(window).resize(function(){

4
web/pages/factor.ejs
View file

@ -10,7 +10,7 @@
<div class="row">
<div class="col-xs-12">
<a href="http://shinobi.video" target="_blank">
<img src="libs/img/icon/apple-touch-icon-76x76.png" style="border-radius:50%">
<img src="<%-originalURL%>libs/img/icon/apple-touch-icon-76x76.png" style="border-radius:50%">
</a>
</div>
</div>
@ -50,7 +50,7 @@
</div>
</div>
</div>
<script src="libs/js/material.min.js"></script>
<script src="<%-originalURL%>libs/js/material.min.js"></script>
<script>
$.ccio={f:$('#auth-form'),ls:localStorage.getItem('ShinobiAuth_'+location.host)}
$.ccio.gid=function(x){

92
web/pages/home.ejs
View file

@ -1,18 +1,17 @@
<% var details=JSON.parse($user.details) %>
<% include blocks/header %>
<script>var $user=<%- JSON.stringify($user) %>;</script>
<link rel="stylesheet" href="libs/css/pnotify.custom.min.css">
<link rel="stylesheet" href="libs/css/vbox.css">
<link rel="stylesheet" href="libs/css/daterangepicker.css">
<link rel="stylesheet" href="libs/css/circles.css">
<!--<link rel="stylesheet" href="libs/css/poseidon.css">-->
<link rel="stylesheet" href="libs/css/bootstrap.min.css">
<link rel="stylesheet" href="libs/css/font-awesome.min.css">
<link rel="stylesheet" href="libs/css/fullcalendar.min.css">
<link rel="stylesheet" href="libs/css/gridstack.min.css">
<link rel="stylesheet" href="libs/css/gridstack-extra.min.css">
<link rel="stylesheet" href="libs/css/bootstrap-table.min.css">
<link rel="stylesheet" href="libs/css/main.dash2.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/pnotify.custom.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/vbox.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/daterangepicker.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/circles.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/bootstrap.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/font-awesome.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/fullcalendar.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/gridstack.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/gridstack-extra.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/bootstrap-table.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/main.dash2.css">
<style id="theme">
<% if(details.theme&&details.theme!==''){ %><%- include(__dirname+'/web/libs/themes/'+details.theme+'/style.css'); %><% } %>
</style>
@ -20,21 +19,12 @@
<%= details.css %>
</style>
<style>
<% if(details.sub&&details.allmonitors==='0'){
if(details.monitor_edit&&details.monitor_edit!==''){
details.monitor_edit.forEach(function(v,n){ %>
[mid="<%= v %>"] .permission_monitor_edit{display:inline-block}
<%
})
}
if(details.video_delete&&details.video_delete!==''){
details.video_delete.forEach(function(v,n){ %>
[mid="<%= v %>"] .permission_video_delete{display:inline-block}
<%
})
}
<% if(details.video_delete&&details.video_delete!==''){
details.video_delete.forEach(function(v,n){ %>
[mid="<%= v %>"] .permission_video_delete{display:inline-block}
<%
})
}else{ %>
.permission_video_delete,.permission_monitor_edit{display:inline-block}
th.permission_video_delete,td.permission_video_delete{display:table-cell}
<% } %>
</style>
@ -51,7 +41,7 @@
<div class="mdl-layout__header-row">
<ul class="nav navbar-nav">
<li title="<%-lang['Toggle Sidebar']%>" class_toggle="hide-side" data-target=".mdl-js-layout"><a>&nbsp;<i class="fa fa-bars"></i>&nbsp;</a></li>
<li title="<%-lang['Add Monitor']%>" mid="" ke="" class="hidden-xs permission_monitor_edit"><a monitor="edit">&nbsp;<i class="fa fa-plus"></i>&nbsp;</a></li>
<li title="<%-lang['Add Monitor']%>" mid="" ke="" class="hidden-xs permission_monitor_create"><a monitor="edit">&nbsp;<i class="fa fa-plus"></i>&nbsp;</a></li>
<li title="<%-lang['Power Video Viewer']%>" class="hidden-xs" mid="" ke=""><a monitor="powerview">&nbsp;<i class="fa fa-map-marker"></i>&nbsp;</a></li>
<li>
<a title="<%-lang['Monitor Groups']%>" id="group_list_button" class="mdl-js-button">&nbsp;<i class="fa fa-video-camera"></i>&nbsp;</a>
@ -118,23 +108,24 @@
<div class="demo-drawer mdl-layout__drawer">
<header class="demo-drawer-header">
<div class="demo-avatar-dropdown">
<button id="accbtn" style="color:#fff" class="usermail mdl-button mdl-js-button mdl-js-ripple-effect"></button>
<button id="accbtn" style="color:#fff" class="mdl-button mdl-js-button mdl-js-ripple-effect"><i class="fa fa-caret-down"></i> &nbsp;<span class="usermail"></span></button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="accbtn">
<li class="mdl-menu__item" data-toggle="modal" data-target="#multi_mon"><div><i class="fa fa-clone"></i><div><%- lang['Monitors'] %></div></div></li>
<li class="mdl-menu__item" mid="" ke=""><div class="flex" monitor="powerview"><i class="fa fa-map-marker"></i><div><%- lang['Power Viewer'] %></div></div></li>
<li class="mdl-menu__item" mid="" ke=""><div class="flex" monitor="timelapse"><i class="fa fa-angle-double-right"></i><div><%- lang['Time-lapse'] %></div></div></li>
<li class="mdl-menu__item" data-toggle="modal" data-target="#settings"><div><i class="fa fa-gears"></i><div><%- lang.Settings %></div></div></li>
<li class="mdl-menu__item permission_user_change" data-toggle="modal" data-target="#settings"><div><i class="fa fa-gears"></i><div><%- lang.Settings %></div></div></li>
<li class="mdl-menu__item" data-toggle="modal" data-target="#apis"><div><i class="fa fa-code"></i><div><%- lang.API %></div></div></li>
<% if(!details.sub){ %>
<li class="mdl-menu__item" data-toggle="modal" data-target="#onvif_probe"><div><i class="fa fa-rss"></i><div><%- lang.ONVIF %></div></div></li>
<li class="mdl-menu__item" data-toggle="modal" data-target="#probe"><div><i class="fa fa-search"></i><div><%- lang.FFprobe %></div></div></li>
<li class="mdl-menu__item" data-toggle="modal" data-target="#filters"><div><i class="fa fa-filter"></i><div><%- lang.Filters %></div></div></li>
<% } %>
<li class="mdl-menu__item" data-toggle="modal" data-target="#logs_modal"><div><i class="fa fa-exclamation-triangle"></i><div><%- lang.Logs %></div></div></li>
<li class="mdl-menu__item permission_view_logs" data-toggle="modal" data-target="#logs_modal"><div><i class="fa fa-exclamation-triangle"></i><div><%- lang.Logs %></div></div></li>
<li class="mdl-menu__item" class_toggle="list-blocks" data-target="#left_menu"><div><i class="fa fa-camera"></i><div><%- lang['List Toggle'] %></div></div></li>
<li class="mdl-menu__item" class_toggle="hide-side" data-target=".mdl-js-layout"><div><i class="fa fa-bars"></i><div><%- lang['Hide List'] %></div></div></li>
<li class="mdl-menu__item shinobi-detector-motion shinobi-detector-opencv shinobi-detector_plug" class_toggle="hide_indifference" data-target="body" style="display:none"><div><i class="fa fa-bolt"></i><div><%- lang['Motion GUI'] %></div></div></li>
<li class="mdl-menu__item" system="jpegToggle"><div><i class="fa fa-file-image-o"></i><div><%- lang['JPEG Mode'] %></div></div></li>
<li class="mdl-menu__item" system="switch" switch="monitorMuteAudio" type="text"><div><i class="fa fa-volume-down"></i><div><%- lang['Mute Audio'] %></div></div></li>
<li class="mdl-menu__item" system="switch" switch="monitorOrder" type="text"><div><i class="fa fa-sort"></i><div><%- lang['Order Streams'] %></div></div></li>
<li class="mdl-menu__item" system="switch" switch="notifyHide" type="text"><div><i class="fa fa-exclamation-circle"></i><div><%- lang['Hide Notes'] %></div></div></li>
<li class="mdl-menu__item logout"><div><i class="fa fa-sign-out"></i><div><%- lang.Logout %></div></div></li>
@ -178,27 +169,28 @@
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="<%= config.DropboxAppKey %>"></script>
<!--Dropbox End-->
<% } %>
<script src="libs/js/material.min.js"></script>
<script src="libs/js/pnotify.custom.min.js"></script>
<script src="<%-originalURL%>libs/js/material.min.js"></script>
<script src="<%-originalURL%>libs/js/pnotify.custom.min.js"></script>
<script><% include ../libs/js/moment.js %></script>
<script><% include ../libs/js/livestamp.min.js %></script>
<script src="libs/js/placeholder.js"></script>
<script src="libs/js/bootstrap.min.js"></script>
<script src="libs/js/bootstrap-table.min.js"></script>
<script src="libs/js/socket.io.js"></script>
<script src="libs/js/fullcalendar.min.js"></script>
<script src="libs/js/hls.min.js"></script>
<script type="text/javascript" src="libs/js/flv.shinobi.js">;</script>
<script src="libs/js/menu.js"></script>
<script src="libs/js/clock.js"></script>
<script src="libs/js/poseidon.js"></script>
<script src="libs/js/Chart.js"></script>
<script src="libs/js/clusterPoints.js"></script>
<script src="libs/js/daterangepicker.js"></script>
<script src="libs/js/jquery.canvasAreaDraw.js"></script>
<script src="libs/js/jquery-ui.min.js"></script>
<script src="libs/js/lodash.min.js"></script>
<script src="libs/js/gridstack.min.js"></script>
<script src="libs/js/gridstack.jQueryUI.min.js"></script>
<script src="<%-originalURL%>libs/js/placeholder.js"></script>
<script src="<%-originalURL%>libs/js/bootstrap.min.js"></script>
<script src="<%-originalURL%>libs/js/bootstrap-table.min.js"></script>
<script src="<%-originalURL%>libs/js/socket.io.js"></script>
<script src="<%-originalURL%>libs/js/fullcalendar.min.js"></script>
<script src="<%-originalURL%>libs/js/hls.min.js"></script>
<script type="text/javascript" src="<%-originalURL%>libs/js/flv.shinobi.js">;</script>
<script src="<%-originalURL%>libs/js/menu.js"></script>
<script src="<%-originalURL%>libs/js/clock.js"></script>
<script src="<%-originalURL%>libs/js/poseidon.js"></script>
<script src="<%-originalURL%>libs/js/Chart.js"></script>
<script src="<%-originalURL%>libs/js/clusterPoints.js"></script>
<script src="<%-originalURL%>libs/js/daterangepicker.js"></script>
<script src="<%-originalURL%>libs/js/jquery.canvasAreaDraw.js"></script>
<script src="<%-originalURL%>libs/js/jquery-ui.min.js"></script>
<!--<script src="<%-originalURL%>libs/js/jquery.ui.touch.js"></script>-->
<script src="<%-originalURL%>libs/js/lodash.min.js"></script>
<script src="<%-originalURL%>libs/js/gridstack.min.js"></script>
<script src="<%-originalURL%>libs/js/gridstack.jQueryUI.min.js"></script>
<script><% include ../libs/js/main.dash2.js %></script>
<% include blocks/help.ejs %>

4
web/pages/index.ejs
View file

@ -11,7 +11,7 @@
<div class="row">
<div class="col-xs-12">
<a href="http://shinobi.video" target="_blank">
<img src="libs/img/icon/apple-touch-icon-76x76.png" style="border-radius:50%">
<img src="<%-originalURL%>libs/img/icon/apple-touch-icon-76x76.png" style="border-radius:50%">
</a>
</div>
</div>
@ -75,7 +75,7 @@
</div>
</div>
</div>
<script src="libs/js/material.min.js"></script>
<script src="<%-originalURL%>libs/js/material.min.js"></script>
<script>
<% var failedLogin;if(failedLogin===true){ %>
localStorage.removeItem('ShinobiLogin_'+location.host)

11
web/pages/streamer.ejs
View file

@ -1,6 +1,6 @@
<% include blocks/header %>
<script>var $user=<%- JSON.stringify($user) %>;</script>
<link rel="stylesheet" href="libs/css/bootstrap.min.css">
<link rel="stylesheet" href="<%-originalURL%>libs/css/bootstrap.min.css">
<div id="main" class="container">
<a class="btn btn-danger btn-lg" record>Stream</a>
<div>
@ -17,9 +17,8 @@ requires https or firefox
</div>
<video id="video"><source></video>
<canvas id="canvas"></canvas>
<script src="libs/js/jquery.min.js"></script>
<script src="libs/js/socket.io.js"></script>
<script src="libs/js/menu.js"></script>
<script src="<%-originalURL%>libs/js/socket.io.js"></script>
<script src="<%-originalURL%>libs/js/menu.js"></script>
<script>
$.ccio={};$.ls=localStorage;
$.ccio.ws=io(location.origin);
@ -63,7 +62,7 @@ $.ccio.start=function(){
$.ccio.cx({f:'monitor_frame',frame:ctx,mid:$.ccio.selected});
delete(ctx);
},1000/$.ccio.framerate);
$('[record]').unbind('click').click($.ccio.end)
$('[record]').unbind('click').click($.ccio.end)
};
@ -74,7 +73,7 @@ $('[record]').unbind('click').click($.ccio.end)
$.ccio.vid = {e:$('#video'),c:$('#canvas')};
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia||navigator.mediaDevices.getUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
navigator.getUserMedia({video: true},function(stream,fn) {
//set video element
if ($.ccio.vid.e[0].mozSrcObject !== undefined) {

408
web/pages/super.ejs
View file

@ -1,95 +1,195 @@
<% include blocks/header %>
<link rel="stylesheet" href="libs/css/pnotify.custom.min.css">
<link rel="stylesheet" href="libs/css/vbox.css">
<link rel="stylesheet" href="libs/css/circles.css">
<link rel="stylesheet" href="libs/css/material.min.css">
<link rel="stylesheet" href="libs/css/bootstrap.min.css">
<link rel="stylesheet" href="libs/css/font-awesome.min.css">
<link rel="stylesheet" href="libs/css/fullcalendar.min.css">
<link rel="stylesheet" href="libs/css/bootstrap-table.min.css">
<link rel="stylesheet" href="libs/css/main.dash2.css">
<style>
.form-group label>div:first-child{width:40%}
</style>
<body style="background:rgba(33,33,33,1);">
<div class="container-fluid">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="/"><%-lang.superAdminTitle%></a>
</div>
<ul class="nav navbar-nav navbar-right">
<!-- <li><a href="#">Link</a></li>-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">&nbsp;<i class="fa fa-bars"></i>&nbsp;</a>
<ul class="dropdown-menu">
<!--
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
-->
<li><a class="logout"><i class="fa fa-sign-out pull-right"></i> <%-lang.Logout%></a></li>
</ul>
</li>
</ul>
</div><!-- /.container-fluid -->
</nav>
<div class="row">
<div class="col-md-6">
<div class="form-group-group grey" id="accounts">
<h4><%-lang.Accounts%><a class="pull-right add btn btn-success btn-xs"><i class="fa fa-plus"></i></a></h4>
<table class="table table-striped"></table>
</div>
<div class="form-group-group primary no-padding" id="logs">
<h4 class="no-margin"><%-lang['Logs']%><a class="pull-right delete btn btn-danger btn-xs"><i class="fa fa-trash-o"></i></a></h4>
<div style="height:400px;overflow:auto">
<table class="table table-striped"></table>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title><%-lang.Superuser%> - <%-lang.Shinobi%></title>
<% include blocks/header-meta.ejs %>
<% include blocks/header-favicon.ejs %>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<!-- CSS Files -->
<link href="<%-originalURL%>libs/css/bootstrap4.min.css" rel="stylesheet" />
<link href="<%-originalURL%>libs/css/main.dash2.css" rel="stylesheet" />
<link rel="stylesheet" href="<%-originalURL%>libs/css/pnotify.custom.min.css">
<link href="<%-originalURL%>libs/css/now-ui-kit.css?v=1.1.0" rel="stylesheet" />
<script src="<%-originalURL%>libs/js/jquery.min.js"></script>
<script src="<%-originalURL%>libs/js/jquery.serialize.js"></script>
<script src="<%-originalURL%>libs/js/pnotify.custom.min.js"></script>
<script src="<%-originalURL%>libs/js/popper.min.js" type="text/javascript"></script>
<script src="<%-originalURL%>libs/js/bootstrap4.min.js" type="text/javascript"></script>
<style>
.form-group label>div:first-child{width:40%}
.list-group li .form-group {margin:0}
a {cursor:pointer}
</style>
</head>
<body class="index-page sidebar-collapse bg-hexagon">
<!-- Navbar -->
<nav id="main-nav" class="navbar navbar-expand-lg bg-primary fixed-top" color-on-scroll="400">
<div class="container">
<div class="navbar-translate">
<a tabindex="1" class="navbar-brand logout" href="/" data-placement="bottom" target="_blank">
<%-lang.superAdminTitle%>
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<div class="col-md-6">
<form class="form-group-group red" id="conf_json">
<h4><%-lang['Configuration']%> <small class="pull-right msg"></small></h4>
<div class="form-group">
<textarea name="json" style="height:300px;font-family: monospace;" class="form-control"></textarea>
</div>
<div>
<div class="pull-right">
<button type="submit" class="btn btn-success"><i class="fa fa-check"></i> <%-lang.Save%></button>
</div>
</div>
</form>
<div class="form-group-group blue" id="system">
<h4><%-lang['System']%> <small class="pull-right msg"></small></h4>
<div class="btn-group btn-group-justified">
<a restart="system" class="btn btn-danger"><i class="fa fa-retweet"></i> <%-lang['Restart Core']%></a>
<a restart="cron" class="btn btn-danger"><i class="fa fa-retweet"></i> <%-lang['Restart CRON']%></a>
<a restart="logs" class="btn btn-danger"><i class="fa fa-retweet"></i> <%-lang['Flush PM2 Logs']%></a>
<div class="collapse navbar-collapse justify-content-end" id="navigation" data-nav-image="<%-originalURL%>libs/img/blurred-image-1.jpg">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a href="javascript:location.href=location.pathname" class="nav-link" class="logout">
<i class="fa fa-sign-out"></i>
<p class="d-lg-none d-xl-none"><%-lang.Logout%></p>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="wrapper">
<div class="page-header clear-filter" filter-color="primary">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="main-card" class="card">
<ul class="nav nav-tabs nav-tabs-neutral justify-content-center bg-primary" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#accounts" role="tab">Accounts</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#config" role="tab">Configuration</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#system" role="tab">Controls and Logs</a>
</li>
</ul>
<div class="card-body">
<!-- Tab panes -->
<div class="tab-content text-center">
<div class="tab-pane active" id="accounts" role="tabpanel">
<nav class="navbar navbar-rounded navbar-expand-lg bg-primary">
<div class="container">
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link add">
<p><i class="fa fa-plus-square-o"></i> Add Account</p>
</a>
</li>
</ul>
</div>
</div>
</nav>
<table class="table table-striped"></table>
</div>
<div class="tab-pane" id="config" role="tabpanel">
<small class="pull-right msg"></small>
<nav class="navbar navbar-rounded navbar-expand-lg bg-success">
<div class="container">
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link add" href="javascript:$.conf.e.submit()">
<p><i class="fa fa-check"></i> <%-lang.Save%></p>
</a>
</li>
<li class="nav-item">
<a class="nav-link add" href="javascript:$.conf.e.submit()">
<p class="msg"></p>
</a>
</li>
</ul>
</div>
</div>
</nav>
<form class="form-group-group red" id="conf_json">
<small class="pull-right msg"></small>
<div id="configForHumans"></div>
<div class="form-group">
<textarea name="json" style="height:300px;font-family: monospace;" class="form-control"></textarea>
</div>
</form>
</div>
<div class="tab-pane" id="system" role="tabpanel">
<nav class="navbar navbar-rounded navbar-expand-lg bg-primary">
<div class="container">
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" system="deleteLogs">
<p><i class="fa fa-trash-o"></i> Clear Logs</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" restart="system">
<p><i class="fa fa-retweet"></i> <%-lang['Restart Core']%></p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" restart="cron">
<p><i class="fa fa-retweet"></i> <%-lang['Restart CRON']%></p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" restart="logs">
<p><i class="fa fa-retweet"></i> <%-lang['Flush PM2 Logs']%></p>
</a>
</li>
<!--
<li class="nav-item">
<a class="nav-link" system="update">
<p><i class="fa fa-arrow-up"></i> <%-lang['Update']%></p>
</a>
</li>
-->
</ul>
</div>
</div>
</nav>
<div id="logs" style="height:400px;overflow:auto">
<table class="table table-striped"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<% include blocks/confirm.ejs %>
<div id="toast" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
</body>
<script><% include ../libs/js/material.min.js %></script>
<script><% include ../libs/js/pnotify.custom.min.js %></script>
<% include blocks/confirm.ejs %>
<script src="<%-originalURL%>libs/js/pnotify.custom.min.js" type="text/javascript"></script>
<script><% include ../libs/js/moment.js %></script>
<script><% include ../libs/js/livestamp.min.js %></script>
<script><% include ../libs/js/placeholder.js %></script>
<script><% include ../libs/js/bootstrap.min.js %></script>
<script><% include ../libs/js/bootstrap-table.min.js %></script>
<script><% include ../libs/js/socket.io.js %></script>
<script src="<%-originalURL%>libs/js/livestamp.min.js" type="text/javascript"></script>
<script src="<%-originalURL%>libs/js/socket.io.js" type="text/javascript"></script>
<script src="<%-originalURL%>libs/js/placeholder.js" type="text/javascript"></script>
<script src="<%-originalURL%>libs/js/now-ui-kit.js?v=1.1.0" type="text/javascript"></script>
<script type="text/javascript">
PNotify.prototype.options.styling = "fontawesome";
$(document).ready(function() {
// the body of this function is in assets/js/now-ui-kit.js
$('#main-card').css('margin-top',$('#main-nav').height() * 2)
});
function scrollToDownload() {
if ($('.section-download').length != 0) {
$("html, body").animate({
scrollTop: $('.section-download').offset().top
}, 1000);
}
}
</script>
<script>$user=<%-JSON.stringify($user)%></script>
<script>
$.ccio={accounts:{}};$.ls=localStorage;
@ -117,7 +217,7 @@ $.ccio.ws.on('f',function(d){
$.ccio.tm(4,d.log,'#logs table')
break;
case'save_configuration':
$.conf.msg.html('Saved, Restart Shinobi to apply changes.')
d.msg = 'Saved, Restart Shinobi to apply changes.'
break;
case'edit_account':
d.msg='Account Edited';
@ -135,7 +235,7 @@ $.ccio.ws.on('f',function(d){
break;
}
if(d.msg&&typeof d.msg==='string'){
$('#toast')[0].MaterialSnackbar.showSnackbar({message:d.msg})
new PNotify({text:d.msg,type:'error'})
}
})
@ -146,12 +246,34 @@ $.ccio.tm=function(x,d,z,k){
case 0://account row
d.detailsJSON=JSON.parse(d.details);
$.ccio.accounts[d.ke]=d;
tmp+='<tr ke="'+d.ke+'"><td><b class="mail">'+d.mail+'</b></td><td>'+d.ke+'</td><td><a class="permission btn btn-xs btn-primary"><i class="fa fa-lock"></i></a></td><td><a class="delete btn btn-xs btn-danger"><i class="fa fa-trash-o"></i></a></td></tr>';
tmp+='<tr ke="'+d.ke+'"><td><b class="mail">'+d.mail+'</b></td><td>'+d.ke+'</td><td><a tabindex="1" class="permission btn btn-xs btn-primary"><i class="fa fa-lock"></i></a></td><td><a tabindex="1" class="delete btn btn-xs btn-danger"><i class="fa fa-trash-o"></i></a></td></tr>';
break;
case 4://log row, draw to global and monitor
if(!d.time){d.time=$.ccio.init('t')}
tmp+='<tr class="search-row"><td><span title="'+d.time+'" class="livestamp"></span><br><small>'+d.time+'</small><br><small>'+d.mid+'</small></td><td></td><td><pre class="pre-inline">'+$.ccio.init('jsontoblock',JSON.parse(d.info))+'</pre></td></tr>'
break;
case 5://config element
if(d.value instanceof Object){
tmp += '<div class="form-group config-row" layer="'+d.layer+'">\
<div><input class="form-control key" type="text" value="'+d.key+'"></div>\
<ul class="list-group valueObject" style="margin:0">'
++d.layer
$.each(d.value,function(key,value){
tmp += '<li class="list-group-item">'
tmp += $.ccio.tm(5,{key:key,value:value,layer:d.layer})
tmp += '</li>'
})
tmp += '</ul>'
tmp += '</div>'
}else{
tmp += '<div class="form-group config-row" layer="'+d.layer+'">\
<label>\
<div><input class="form-control key" type="text" value="'+d.key+'"></div>\
<div><input class="form-control value" type="text" value="'+d.value+'"></div>\
</label>\
</div>'
}
break;
}
if(z){
$(z).prepend(tmp)
@ -201,34 +323,40 @@ $.ccio.init=function(x,d,z,k){
}
//logs
$.logs={e:$('#logs')}
$.logs.e.find('.delete').click(function(e){
$.confirm.e.modal('show');
$.confirm.title.html('Delete Logs <small>'+e.u+'</small>')
e.html='Do you want to delete these logs? User logs will <b>not</b> be deleted.'
$.confirm.body.html(e.html)
$.confirm.click({title:'Delete',class:'btn-danger'},function(){
$.ccio.cx({f:'logs',ff:'delete',ke:'$'})
$.logs.e.find('table').empty()
});
})
//config editor
$.conf={e:$('#conf_json')};$.conf.draw=$.conf.e.find('[name="json"]'),$.conf.msg=$.conf.e.find('.msg')
<%
var stringedConfig = JSON.stringify(plainConfig)
%>
var config = <%- JSON.stringify(plainConfig) || [] %>
$.conf={e:$('#conf_json')};
$.conf.configForHumans=$('#configForHumans')
$.conf.draw=$.conf.e.find('[name="json"]')
$.conf.msg=$.conf.e.find('.msg')
$.conf.valid=1;
$.conf.draw.val(JSON.stringify(<%-JSON.stringify(plainConfig)%>,null,3))
$.conf.jsonToFields = function(){
// var tmp = ''
// $.each(config,function(key,value){
// var layer = 0
// tmp += $.ccio.tm(5,{key:key,value:value,layer:layer})
// })
// $.conf.configForHumans.html(tmp)
}
$.conf.draw.val(JSON.stringify(<%-stringedConfig%>,null,3))
$.conf.draw.keyup(function(){
var msg=''
var color=''
try{
$.parseJSON($.conf.draw.val())
msg='Valid JSON'
color='success'
$.conf.valid=1
config = $.parseJSON($.conf.draw.val())
msg = 'Valid JSON'
color = 'success'
$.conf.valid = 1
$.conf.jsonToFields()
}catch(er){
msg='Not a valid JSON'
color='danger'
$.conf.valid=0
msg = 'Not a valid JSON'
color = 'danger'
$.conf.valid = 0
}
$.conf.msg.text(msg).css('color',color)
new PNotify({text:msg,type:color})
})
$.conf.e.submit(function(e){
e.preventDefault()
@ -242,22 +370,77 @@ $.conf.e.submit(function(e){
$.ccio.cx({f:'system',ff:'configure',data:$.parseJSON($.conf.draw.val())})
});
}else{
$.conf.msg.text('Invalid JSON Syntax, Cannot Save.')
new PNotify({text:'Invalid JSON Syntax, Cannot Save.',type:'error'})
}
return false;
})
$.conf.e.on('keyup','.config-row input',function(){
var newConfig = {}
var checkRow = function(v,object){
var _this = $(v)
var key = _this.find('.key:first').val()
var layer = parseInt(_this.attr('layer'))
var list = _this.find('ul').first()
var isObject = list.length > 0
if(isObject){
if(!object[key]){
if(isNaN(key) === true){
object[key] = {}
}else{
object[key] = []
}
}
list.find('.config-row[layer="'+(layer+1)+'"]').each(function(n,v){
checkRow(v,object[key])
})
}else{
var value = _this.find('.value').val()
switch(value){
case'true':
value = true
break;
case'false':
value = false
break;
default:
if(isNaN(value) === false){
value = parseFloat(value)
}
break;
}
object[key] = value
}
}
$.conf.configForHumans.children('.config-row').each(function(n,v){
checkRow(v,newConfig)
})
$.conf.draw.val(JSON.stringify(newConfig,null,3))
console.log(newConfig)
})
$.conf.e.ready(function(){
$.conf.jsonToFields()
})
//sys controls
$.system={e:$('#system')}
$.system.e.find('[system]').click(function(e){
switch($(this).attr('system')){
case'deleteLogs':
$.confirm.e.modal('show');
$.confirm.title.html('Delete Logs <small>'+e.u+'</small>')
e.html='Do you want to delete these logs? User logs will <b>not</b> be deleted.'
$.confirm.body.html(e.html)
$.confirm.click({title:'Delete',class:'btn-danger'},function(){
$.ccio.cx({f:'logs',ff:'delete',ke:'$'})
$.logs.e.find('table').empty()
});
break;
case'update':
e.distro=$(this).attr('distro')
if(!e.distro){e.distro='master'}
$.confirm.e.modal('show')
$.confirm.title.html('Update Shinobi?')
$.confirm.body.html('Updating Shinobi means overwriting files. If you have modified any files yourself you should update Shinobi manually. The updater will download the latest '+e.distro+' from the <a href="https://github.com/ShinobiCCTV/Shinobi" target="_blank">Pro repository</a>.')
$.confirm.body.html('Updating Shinobi means overwriting files. If you have modified any files yourself you should update Shinobi manually.')
$.confirm.click({title:'Update',class:'btn-danger'},function(){
$.ccio.cx({f:'system',ff:'update',distro:e.distro})
$.ccio.cx({f:'system',ff:'update'})
});
break;
}
@ -298,3 +481,4 @@ $('body')
})
</script>
<% include blocks/mainpermissions.ejs %>
</html>