patrick
5 年之前
共有 13 個文件被更改，包括 15775 次插入 和 0 次删除
+ 500
- 0
form/assets/js/holder.js
查看文件
| @@ -0,0 +1,500 @@ | |||
| /* | |||
| Holder - 2.2 - client side image placeholders | |||
| (c) 2012-2013 Ivan Malopinsky / http://imsky.co | |||
| Provided under the MIT License. | |||
| Commercial use requires attribution. | |||
| */ | |||
| var Holder = Holder || {}; | |||
| (function (app, win) { | |||
| var preempted = false, | |||
| fallback = false, | |||
| canvas = document.createElement('canvas'); | |||
| var dpr = 1, bsr = 1; | |||
| var resizable_images = []; | |||
| if (!canvas.getContext) { | |||
| fallback = true; | |||
| } else { | |||
| if (canvas.toDataURL("image/png") | |||
| .indexOf("data:image/png") < 0) { | |||
| //Android doesn't support data URI | |||
| fallback = true; | |||
| } else { | |||
| var ctx = canvas.getContext("2d"); | |||
| } | |||
| } | |||
| if(!fallback){ | |||
| dpr = window.devicePixelRatio || 1, | |||
| bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1; | |||
| } | |||
| var ratio = dpr / bsr; | |||
| var settings = { | |||
| domain: "holder.js", | |||
| images: "img", | |||
| bgnodes: ".holderjs", | |||
| themes: { | |||
| "gray": { | |||
| background: "#eee", | |||
| foreground: "#aaa", | |||
| size: 12 | |||
| }, | |||
| "social": { | |||
| background: "#3a5a97", | |||
| foreground: "#fff", | |||
| size: 12 | |||
| }, | |||
| "industrial": { | |||
| background: "#434A52", | |||
| foreground: "#C2F200", | |||
| size: 12 | |||
| }, | |||
| "sky": { | |||
| background: "#0D8FDB", | |||
| foreground: "#fff", | |||
| size: 12 | |||
| }, | |||
| "vine": { | |||
| background: "#39DBAC", | |||
| foreground: "#1E292C", | |||
| size: 12 | |||
| }, | |||
| "lava": { | |||
| background: "#F8591A", | |||
| foreground: "#1C2846", | |||
| size: 12 | |||
| } | |||
| }, | |||
| stylesheet: "" | |||
| }; | |||
| app.flags = { | |||
| dimensions: { | |||
| regex: /^(\d+)x(\d+)$/, | |||
| output: function (val) { | |||
| var exec = this.regex.exec(val); | |||
| return { | |||
| width: +exec[1], | |||
| height: +exec[2] | |||
| } | |||
| } | |||
| }, | |||
| fluid: { | |||
| regex: /^([0-9%]+)x([0-9%]+)$/, | |||
| output: function (val) { | |||
| var exec = this.regex.exec(val); | |||
| return { | |||
| width: exec[1], | |||
| height: exec[2] | |||
| } | |||
| } | |||
| }, | |||
| colors: { | |||
| regex: /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i, | |||
| output: function (val) { | |||
| var exec = this.regex.exec(val); | |||
| return { | |||
| size: settings.themes.gray.size, | |||
| foreground: "#" + exec[2], | |||
| background: "#" + exec[1] | |||
| } | |||
| } | |||
| }, | |||
| text: { | |||
| regex: /text\:(.*)/, | |||
| output: function (val) { | |||
| return this.regex.exec(val)[1]; | |||
| } | |||
| }, | |||
| font: { | |||
| regex: /font\:(.*)/, | |||
| output: function (val) { | |||
| return this.regex.exec(val)[1]; | |||
| } | |||
| }, | |||
| auto: { | |||
| regex: /^auto$/ | |||
| }, | |||
| textmode: { | |||
| regex: /textmode\:(.*)/, | |||
| output: function(val){ | |||
| return this.regex.exec(val)[1]; | |||
| } | |||
| } | |||
| } | |||
| //getElementsByClassName polyfill | |||
| document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s}) | |||
| //getComputedStyle polyfill | |||
| window.getComputedStyle||(window.getComputedStyle=function(e){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this}) | |||
| //http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications | |||
| function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}} | |||
| //https://gist.github.com/991057 by Jed Schmidt with modifications | |||
| function selector(a){ | |||
| a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]); | |||
| var ret=[]; b!==null&&(b.length?ret=b:b.length===0?ret=b:ret=[b]); return ret; | |||
| } | |||
| //shallow object property extend | |||
| function extend(a,b){ | |||
| var c={}; | |||
| for(var i in a){ | |||
| if(a.hasOwnProperty(i)){ | |||
| c[i]=a[i]; | |||
| } | |||
| } | |||
| for(var i in b){ | |||
| if(b.hasOwnProperty(i)){ | |||
| c[i]=b[i]; | |||
| } | |||
| } | |||
| return c | |||
| } | |||
| //hasOwnProperty polyfill | |||
| if (!Object.prototype.hasOwnProperty) | |||
| /*jshint -W001, -W103 */ | |||
| Object.prototype.hasOwnProperty = function(prop) { | |||
| var proto = this.__proto__ || this.constructor.prototype; | |||
| return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]); | |||
| } | |||
| /*jshint +W001, +W103 */ | |||
| function text_size(width, height, template) { | |||
| height = parseInt(height, 10); | |||
| width = parseInt(width, 10); | |||
| var bigSide = Math.max(height, width) | |||
| var smallSide = Math.min(height, width) | |||
| var scale = 1 / 12; | |||
| var newHeight = Math.min(smallSide * 0.75, 0.75 * bigSide * scale); | |||
| return { | |||
| height: Math.round(Math.max(template.size, newHeight)) | |||
| } | |||
| } | |||
| function draw(args) { | |||
| var ctx = args.ctx; | |||
| var dimensions = args.dimensions; | |||
| var template = args.template; | |||
| var ratio = args.ratio; | |||
| var holder = args.holder; | |||
| var literal = holder.textmode == "literal"; | |||
| var exact = holder.textmode == "exact"; | |||
| var ts = text_size(dimensions.width, dimensions.height, template); | |||
| var text_height = ts.height; | |||
| var width = dimensions.width * ratio, | |||
| height = dimensions.height * ratio; | |||
| var font = template.font ? template.font : "sans-serif"; | |||
| canvas.width = width; | |||
| canvas.height = height; | |||
| ctx.textAlign = "center"; | |||
| ctx.textBaseline = "middle"; | |||
| ctx.fillStyle = template.background; | |||
| ctx.fillRect(0, 0, width, height); | |||
| ctx.fillStyle = template.foreground; | |||
| ctx.font = "bold " + text_height + "px " + font; | |||
| var text = template.text ? template.text : (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height)); | |||
| if (literal) { | |||
| var dimensions = holder.dimensions; | |||
| text = dimensions.width + "x" + dimensions.height; | |||
| } | |||
| else if(exact && holder.exact_dimensions){ | |||
| var dimensions = holder.exact_dimensions; | |||
| text = (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height)); | |||
| } | |||
| var text_width = ctx.measureText(text).width; | |||
| if (text_width / width >= 0.75) { | |||
| text_height = Math.floor(text_height * 0.75 * (width / text_width)); | |||
| } | |||
| //Resetting font size if necessary | |||
| ctx.font = "bold " + (text_height * ratio) + "px " + font; | |||
| ctx.fillText(text, (width / 2), (height / 2), width); | |||
| return canvas.toDataURL("image/png"); | |||
| } | |||
| function render(mode, el, holder, src) { | |||
| var dimensions = holder.dimensions, | |||
| theme = holder.theme, | |||
| text = holder.text ? decodeURIComponent(holder.text) : holder.text; | |||
| var dimensions_caption = dimensions.width + "x" + dimensions.height; | |||
| theme = (text ? extend(theme, { | |||
| text: text | |||
| }) : theme); | |||
| theme = (holder.font ? extend(theme, { | |||
| font: holder.font | |||
| }) : theme); | |||
| el.setAttribute("data-src", src); | |||
| holder.theme = theme; | |||
| el.holder_data = holder; | |||
| if (mode == "image") { | |||
| el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption); | |||
| if (fallback || !holder.auto) { | |||
| el.style.width = dimensions.width + "px"; | |||
| el.style.height = dimensions.height + "px"; | |||
| } | |||
| if (fallback) { | |||
| el.style.backgroundColor = theme.background; | |||
| } else { | |||
| el.setAttribute("src", draw({ctx: ctx, dimensions: dimensions, template: theme, ratio:ratio, holder: holder})); | |||
| if(holder.textmode && holder.textmode == "exact"){ | |||
| resizable_images.push(el); | |||
| resizable_update(el); | |||
| } | |||
| } | |||
| } else if (mode == "background") { | |||
| if (!fallback) { | |||
| el.style.backgroundImage = "url(" + draw({ctx:ctx, dimensions: dimensions, template: theme, ratio: ratio, holder: holder}) + ")"; | |||
| el.style.backgroundSize = dimensions.width + "px " + dimensions.height + "px"; | |||
| } | |||
| } else if (mode == "fluid") { | |||
| el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption); | |||
| if (dimensions.height.slice(-1) == "%") { | |||
| el.style.height = dimensions.height | |||
| } else { | |||
| el.style.height = dimensions.height + "px" | |||
| } | |||
| if (dimensions.width.slice(-1) == "%") { | |||
| el.style.width = dimensions.width | |||
| } else { | |||
| el.style.width = dimensions.width + "px" | |||
| } | |||
| if (el.style.display == "inline" || el.style.display === "" || el.style.display == "none") { | |||
| el.style.display = "block"; | |||
| } | |||
| if (fallback) { | |||
| el.style.backgroundColor = theme.background; | |||
| } else { | |||
| resizable_images.push(el); | |||
| resizable_update(el); | |||
| } | |||
| } | |||
| } | |||
| function dimension_check(el, callback) { | |||
| var dimensions = { | |||
| height: el.clientHeight, | |||
| width: el.clientWidth | |||
| }; | |||
| if (!dimensions.height && !dimensions.width) { | |||
| if (el.hasAttribute("data-holder-invisible")) { | |||
| throw new Error("Holder: placeholder is not visible"); | |||
| } else { | |||
| el.setAttribute("data-holder-invisible", true) | |||
| setTimeout(function () { | |||
| callback.call(this, el) | |||
| }, 1) | |||
| return null; | |||
| } | |||
| } else { | |||
| el.removeAttribute("data-holder-invisible") | |||
| } | |||
| return dimensions; | |||
| } | |||
| function resizable_update(element) { | |||
| var images; | |||
| if (element.nodeType == null) { | |||
| images = resizable_images; | |||
| } else { | |||
| images = [element] | |||
| } | |||
| for (var i in images) { | |||
| if (!images.hasOwnProperty(i)) { | |||
| continue; | |||
| } | |||
| var el = images[i] | |||
| if (el.holder_data) { | |||
| var holder = el.holder_data; | |||
| var dimensions = dimension_check(el, resizable_update) | |||
| if(dimensions){ | |||
| if(holder.fluid){ | |||
| el.setAttribute("src", draw({ | |||
| ctx: ctx, | |||
| dimensions: dimensions, | |||
| template: holder.theme, | |||
| ratio: ratio, | |||
| holder: holder | |||
| })) | |||
| } | |||
| if(holder.textmode && holder.textmode == "exact"){ | |||
| holder.exact_dimensions = dimensions; | |||
| el.setAttribute("src", draw({ | |||
| ctx: ctx, | |||
| dimensions: holder.dimensions, | |||
| template: holder.theme, | |||
| ratio: ratio, | |||
| holder: holder | |||
| })) | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| function parse_flags(flags, options) { | |||
| var ret = { | |||
| theme: extend(settings.themes.gray, {}) | |||
| }; | |||
| var render = false; | |||
| for (sl = flags.length, j = 0; j < sl; j++) { | |||
| var flag = flags[j]; | |||
| if (app.flags.dimensions.match(flag)) { | |||
| render = true; | |||
| ret.dimensions = app.flags.dimensions.output(flag); | |||
| } else if (app.flags.fluid.match(flag)) { | |||
| render = true; | |||
| ret.dimensions = app.flags.fluid.output(flag); | |||
| ret.fluid = true; | |||
| } else if (app.flags.textmode.match(flag)) { | |||
| ret.textmode = app.flags.textmode.output(flag) | |||
| } else if (app.flags.colors.match(flag)) { | |||
| ret.theme = app.flags.colors.output(flag); | |||
| } else if (options.themes[flag]) { | |||
| //If a theme is specified, it will override custom colors | |||
| if(options.themes.hasOwnProperty(flag)){ | |||
| ret.theme = extend(options.themes[flag], {}); | |||
| } | |||
| } else if (app.flags.font.match(flag)) { | |||
| ret.font = app.flags.font.output(flag); | |||
| } else if (app.flags.auto.match(flag)) { | |||
| ret.auto = true; | |||
| } else if (app.flags.text.match(flag)) { | |||
| ret.text = app.flags.text.output(flag); | |||
| } | |||
| } | |||
| return render ? ret : false; | |||
| } | |||
| for (var flag in app.flags) { | |||
| if (!app.flags.hasOwnProperty(flag)) continue; | |||
| app.flags[flag].match = function (val) { | |||
| return val.match(this.regex) | |||
| } | |||
| } | |||
| app.add_theme = function (name, theme) { | |||
| name != null && theme != null && (settings.themes[name] = theme); | |||
| return app; | |||
| }; | |||
| app.add_image = function (src, el) { | |||
| var node = selector(el); | |||
| if (node.length) { | |||
| for (var i = 0, l = node.length; i < l; i++) { | |||
| var img = document.createElement("img") | |||
| img.setAttribute("data-src", src); | |||
| node[i].appendChild(img); | |||
| } | |||
| } | |||
| return app; | |||
| }; | |||
| app.run = function (o) { | |||
| preempted = true; | |||
| var options = extend(settings, o), | |||
| images = [], | |||
| imageNodes = [], | |||
| bgnodes = []; | |||
| if (typeof (options.images) == "string") { | |||
| imageNodes = selector(options.images); | |||
| } else if (window.NodeList && options.images instanceof window.NodeList) { | |||
| imageNodes = options.images; | |||
| } else if (window.Node && options.images instanceof window.Node) { | |||
| imageNodes = [options.images]; | |||
| } | |||
| if (typeof (options.bgnodes) == "string") { | |||
| bgnodes = selector(options.bgnodes); | |||
| } else if (window.NodeList && options.elements instanceof window.NodeList) { | |||
| bgnodes = options.bgnodes; | |||
| } else if (window.Node && options.bgnodes instanceof window.Node) { | |||
| bgnodes = [options.bgnodes]; | |||
| } | |||
| for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]); | |||
| var holdercss = document.getElementById("holderjs-style"); | |||
| if (!holdercss) { | |||
| holdercss = document.createElement("style"); | |||
| holdercss.setAttribute("id", "holderjs-style"); | |||
| holdercss.type = "text/css"; | |||
| document.getElementsByTagName("head")[0].appendChild(holdercss); | |||
| } | |||
| if (!options.nocss) { | |||
| if (holdercss.styleSheet) { | |||
| holdercss.styleSheet.cssText += options.stylesheet; | |||
| } else { | |||
| holdercss.appendChild(document.createTextNode(options.stylesheet)); | |||
| } | |||
| } | |||
| var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)"); | |||
| for (var l = bgnodes.length, i = 0; i < l; i++) { | |||
| var src = window.getComputedStyle(bgnodes[i], null) | |||
| .getPropertyValue("background-image"); | |||
| var flags = src.match(cssregex); | |||
| var bgsrc = bgnodes[i].getAttribute("data-background-src"); | |||
| if (flags) { | |||
| var holder = parse_flags(flags[1].split("/"), options); | |||
| if (holder) { | |||
| render("background", bgnodes[i], holder, src); | |||
| } | |||
| } else if (bgsrc != null) { | |||
| var holder = parse_flags(bgsrc.substr(bgsrc.lastIndexOf(options.domain) + options.domain.length + 1) | |||
| .split("/"), options); | |||
| if (holder) { | |||
| render("background", bgnodes[i], holder, src); | |||
| } | |||
| } | |||
| } | |||
| for (l = images.length, i = 0; i < l; i++) { | |||
| var attr_data_src, attr_src; | |||
| attr_src = attr_data_src = src = null; | |||
| try { | |||
| attr_src = images[i].getAttribute("src"); | |||
| attr_datasrc = images[i].getAttribute("data-src"); | |||
| } catch (e) {} | |||
| if (attr_datasrc == null && !! attr_src && attr_src.indexOf(options.domain) >= 0) { | |||
| src = attr_src; | |||
| } else if ( !! attr_datasrc && attr_datasrc.indexOf(options.domain) >= 0) { | |||
| src = attr_datasrc; | |||
| } | |||
| if (src) { | |||
| var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1) | |||
| .split("/"), options); | |||
| if (holder) { | |||
| if (holder.fluid) { | |||
| render("fluid", images[i], holder, src) | |||
| } else { | |||
| render("image", images[i], holder, src); | |||
| } | |||
| } | |||
| } | |||
| } | |||
| return app; | |||
| }; | |||
| contentLoaded(win, function () { | |||
| if (window.addEventListener) { | |||
| window.addEventListener("resize", resizable_update, false); | |||
| window.addEventListener("orientationchange", resizable_update, false); | |||
| } else { | |||
| window.attachEvent("onresize", resizable_update) | |||
| } | |||
| preempted || app.run(); | |||
| }); | |||
| if (typeof define === "function" && define.amd) { | |||
| define([], function () { | |||
| return app; | |||
| }); | |||
| } | |||
| })(Holder, window); | |||
+ 1
- 0
form/assets/js/holder.min.js
文件差異過大導致無法顯示
查看文件
+ 51
- 0
form/assets/js/ie-emulation-modes-warning.js
查看文件
| @@ -0,0 +1,51 @@ | |||
| // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT | |||
| // IT'S JUST JUNK FOR OUR DOCS! | |||
| // ++++++++++++++++++++++++++++++++++++++++++ | |||
| /*! | |||
| * Copyright 2014-2015 Twitter, Inc. | |||
| * | |||
| * Licensed under the Creative Commons Attribution 3.0 Unported License. For | |||
| * details, see https://creativecommons.org/licenses/by/3.0/. | |||
| */ | |||
| // Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes. | |||
| (function () { | |||
| 'use strict'; | |||
| function emulatedIEMajorVersion() { | |||
| var groups = /MSIE ([0-9.]+)/.exec(window.navigator.userAgent) | |||
| if (groups === null) { | |||
| return null | |||
| } | |||
| var ieVersionNum = parseInt(groups[1], 10) | |||
| var ieMajorVersion = Math.floor(ieVersionNum) | |||
| return ieMajorVersion | |||
| } | |||
| function actualNonEmulatedIEMajorVersion() { | |||
| // Detects the actual version of IE in use, even if it's in an older-IE emulation mode. | |||
| // IE JavaScript conditional compilation docs: https://msdn.microsoft.com/library/121hztk3%28v=vs.94%29.aspx | |||
| // @cc_on docs: https://msdn.microsoft.com/library/8ka90k2e%28v=vs.94%29.aspx | |||
| var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')() // jshint ignore:line | |||
| if (jscriptVersion === undefined) { | |||
| return 11 // IE11+ not in emulation mode | |||
| } | |||
| if (jscriptVersion < 9) { | |||
| return 8 // IE8 (or lower; haven't tested on IE<8) | |||
| } | |||
| return jscriptVersion // IE9 or IE10 in any mode, or IE11 in non-IE11 mode | |||
| } | |||
| var ua = window.navigator.userAgent | |||
| if (ua.indexOf('Opera') > -1 || ua.indexOf('Presto') > -1) { | |||
| return // Opera, which might pretend to be IE | |||
| } | |||
| var emulated = emulatedIEMajorVersion() | |||
| if (emulated === null) { | |||
| return // Not IE | |||
| } | |||
| var nonEmulated = actualNonEmulatedIEMajorVersion() | |||
| if (emulated !== nonEmulated) { | |||
| window.alert('WARNING: You appear to be using IE' + nonEmulated + ' in IE' + emulated + ' emulation mode.\nIE emulation modes can behave significantly differently from ACTUAL older versions of IE.\nPLEASE DON\'T FILE BOOTSTRAP BUGS based on testing in IE emulation modes!') | |||
| } | |||
| })(); | |||
+ 23
- 0
form/assets/js/ie10-viewport-bug-workaround.js
查看文件
| @@ -0,0 +1,23 @@ | |||
| /*! | |||
| * IE10 viewport hack for Surface/desktop Windows 8 bug | |||
| * Copyright 2014-2015 Twitter, Inc. | |||
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |||
| */ | |||
| // See the Getting Started docs for more information: | |||
| // http://getbootstrap.com/getting-started/#support-ie10-width | |||
| (function () { | |||
| 'use strict'; | |||
| if (navigator.userAgent.match(/IEMobile\/10\.0/)) { | |||
| var msViewportStyle = document.createElement('style') | |||
| msViewportStyle.appendChild( | |||
| document.createTextNode( | |||
| '@-ms-viewport{width:auto!important}' | |||
| ) | |||
| ) | |||
| document.querySelector('head').appendChild(msViewportStyle) | |||
| } | |||
| })(); | |||
+ 2
- 0
form/assets/js/jquery.min.js
文件差異過大導致無法顯示
查看文件
+ 5
- 0
form/assets/js/popper.js
文件差異過大導致無法顯示
查看文件
+ 10223
- 0
form/bootstrap/css/bootstrap.css
文件差異過大導致無法顯示
查看文件
+ 7
- 0
form/bootstrap/css/bootstrap.min.css
文件差異過大導致無法顯示
查看文件
+ 4521
- 0
form/bootstrap/js/bootstrap.js
文件差異過大導致無法顯示
查看文件
+ 7
- 0
form/bootstrap/js/bootstrap.min.js
文件差異過大導致無法顯示
查看文件
+ 107
- 0
form/dashboard.css
查看文件
| @@ -0,0 +1,107 @@ | |||
| body { | |||
| font-size: .875rem; | |||
| } | |||
| .feather { | |||
| width: 16px; | |||
| height: 16px; | |||
| vertical-align: text-bottom; | |||
| } | |||
| /* | |||
| * Sidebar | |||
| */ | |||
| .sidebar { | |||
| position: fixed; | |||
| top: 0; | |||
| bottom: 0; | |||
| left: 0; | |||
| z-index: 100; /* Behind the navbar */ | |||
| padding: 48px 0 0; /* Height of navbar */ | |||
| box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); | |||
| } | |||
| .sidebar-sticky { | |||
| position: relative; | |||
| top: 0; | |||
| height: calc(100vh - 48px); | |||
| padding-top: .5rem; | |||
| overflow-x: hidden; | |||
| overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ | |||
| } | |||
| @supports ((position: -webkit-sticky) or (position: sticky)) { | |||
| .sidebar-sticky { | |||
| position: -webkit-sticky; | |||
| position: sticky; | |||
| } | |||
| } | |||
| .sidebar .nav-link { | |||
| font-weight: 500; | |||
| color: #333; | |||
| } | |||
| .sidebar .nav-link .feather { | |||
| margin-right: 4px; | |||
| color: #999; | |||
| } | |||
| .sidebar .nav-link.active { | |||
| color: #007bff; | |||
| } | |||
| .sidebar .nav-link:hover .feather, | |||
| .sidebar .nav-link.active .feather { | |||
| color: inherit; | |||
| } | |||
| .sidebar-heading { | |||
| font-size: .75rem; | |||
| text-transform: uppercase; | |||
| } | |||
| /* | |||
| * Content | |||
| */ | |||
| [role="main"] { | |||
| padding-top: 48px; /* Space for fixed navbar */ | |||
| } | |||
| /* | |||
| * Navbar | |||
| */ | |||
| .navbar-brand { | |||
| padding-top: .75rem; | |||
| padding-bottom: .75rem; | |||
| font-size: 1rem; | |||
| background-color: rgba(0, 0, 0, .25); | |||
| box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); | |||
| } | |||
| .navbar .form-control { | |||
| padding: .75rem 1rem; | |||
| border-width: 0; | |||
| border-radius: 0; | |||
| } | |||
| .form-control-dark { | |||
| color: #fff; | |||
| background-color: rgba(255, 255, 255, .1); | |||
| border-color: rgba(255, 255, 255, .1); | |||
| } | |||
| .form-control-dark:focus { | |||
| border-color: transparent; | |||
| box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); | |||
| } | |||
| /* | |||
| * Utilities | |||
| */ | |||
| .border-top { border-top: 1px solid #e5e5e5; } | |||
| .border-bottom { border-bottom: 1px solid #e5e5e5; } | |||
+ 327
- 0
form/dashboard.html
查看文件
| @@ -0,0 +1,327 @@ | |||
| <!doctype html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |||
| <meta name="description" content=""> | |||
| <meta name="author" content=""> | |||
| <title>Dashboard Template for Bootstrap</title> | |||
| <!-- Bootstrap core CSS --> | |||
| <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> | |||
| <!-- Custom styles for this template --> | |||
| <link href="dashboard.css" rel="stylesheet"> | |||
| </head> | |||
| <body> | |||
| <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow"> | |||
| <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a> | |||
| <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"> | |||
| <ul class="navbar-nav px-3"> | |||
| <li class="nav-item text-nowrap"> | |||
| <a class="nav-link" href="#">Sign out</a> | |||
| </li> | |||
| </ul> | |||
| </nav> | |||
| <div class="container-fluid"> | |||
| <div class="row"> | |||
| <nav class="col-md-2 d-none d-md-block bg-light sidebar"> | |||
| <div class="sidebar-sticky"> | |||
| <ul class="nav flex-column"> | |||
| <li class="nav-item"> | |||
| <a class="nav-link active" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"> | |||
| <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> | |||
| <polyline points="9 22 9 12 15 12 15 22"></polyline> | |||
| </svg> | |||
| Dashboard <span class="sr-only">(current)</span> </a> | |||
| </li> | |||
| <li class="nav-item"> | |||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> | |||
| <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path> | |||
| <polyline points="13 2 13 9 20 9"></polyline> | |||
| </svg> | |||
| Orders </a> | |||
| </li> | |||
| <li class="nav-item"> | |||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"> | |||
| <circle cx="9" cy="21" r="1"></circle> | |||
| <circle cx="20" cy="21" r="1"></circle> | |||
| <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path> | |||
| </svg> | |||
| Products </a> | |||
| </li> | |||
| <li class="nav-item"> | |||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"> | |||
| <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> | |||
| <circle cx="9" cy="7" r="4"></circle> | |||
| <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path> | |||
| <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> | |||
| </svg> | |||
| Customers </a> | |||
| </li> | |||
| <li class="nav-item"> | |||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2"> | |||
| <line x1="18" y1="20" x2="18" y2="10"></line> | |||
| <line x1="12" y1="20" x2="12" y2="4"></line> | |||
| <line x1="6" y1="20" x2="6" y2="14"></line> | |||
| </svg> | |||
| Reports </a> | |||
| </li> | |||
| <li class="nav-item"> | |||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"> | |||
| <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon> | |||
| <polyline points="2 17 12 22 22 17"></polyline> | |||
| <polyline points="2 12 12 17 22 12"></polyline> | |||
| </svg> | |||
| Integrations </a> | |||
| </li> | |||
| </ul> | |||
| <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"> <span>Saved reports</span> <a class="d-flex align-items-center text-muted" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"> | |||
| <circle cx="12" cy="12" r="10"></circle> | |||
| <line x1="12" y1="8" x2="12" y2="16"></line> | |||
| <line x1="8" y1="12" x2="16" y2="12"></line> | |||
| </svg> </a> </h6> | |||
| <ul class="nav flex-column mb-2"> | |||
| <li class="nav-item"> | |||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> | |||
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> | |||
| <polyline points="14 2 14 8 20 8"></polyline> | |||
| <line x1="16" y1="13" x2="8" y2="13"></line> | |||
| <line x1="16" y1="17" x2="8" y2="17"></line> | |||
| <polyline points="10 9 9 9 8 9"></polyline> | |||
| </svg> | |||
| Current month </a> | |||
| </li> | |||
| <li class="nav-item"> | |||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> | |||
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> | |||
| <polyline points="14 2 14 8 20 8"></polyline> | |||
| <line x1="16" y1="13" x2="8" y2="13"></line> | |||
| <line x1="16" y1="17" x2="8" y2="17"></line> | |||
| <polyline points="10 9 9 9 8 9"></polyline> | |||
| </svg> | |||
| Last quarter </a> | |||
| </li> | |||
| <li class="nav-item"> | |||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> | |||
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> | |||
| <polyline points="14 2 14 8 20 8"></polyline> | |||
| <line x1="16" y1="13" x2="8" y2="13"></line> | |||
| <line x1="16" y1="17" x2="8" y2="17"></line> | |||
| <polyline points="10 9 9 9 8 9"></polyline> | |||
| </svg> | |||
| Social engagement </a> | |||
| </li> | |||
| <li class="nav-item"> | |||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> | |||
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> | |||
| <polyline points="14 2 14 8 20 8"></polyline> | |||
| <line x1="16" y1="13" x2="8" y2="13"></line> | |||
| <line x1="16" y1="17" x2="8" y2="17"></line> | |||
| <polyline points="10 9 9 9 8 9"></polyline> | |||
| </svg> | |||
| Year-end sale </a> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| </nav> | |||
| <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"> | |||
| <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"> | |||
| <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"> | |||
| <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div> | |||
| </div> | |||
| <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"> | |||
| <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div> | |||
| </div> | |||
| </div> | |||
| <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> | |||
| <h1 class="h2">Dashboard</h1> | |||
| <div class="btn-toolbar mb-2 mb-md-0"> | |||
| <div class="btn-group mr-2"> | |||
| <button class="btn btn-sm btn-outline-secondary">Share</button> | |||
| <button class="btn btn-sm btn-outline-secondary">Export</button> | |||
| </div> | |||
| <button class="btn btn-sm btn-outline-secondary dropdown-toggle"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"> | |||
| <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect> | |||
| <line x1="16" y1="2" x2="16" y2="6"></line> | |||
| <line x1="8" y1="2" x2="8" y2="6"></line> | |||
| <line x1="3" y1="10" x2="21" y2="10"></line> | |||
| </svg> | |||
| This week | |||
| </button> | |||
| </div> | |||
| </div> | |||
| <canvas class="my-4 w-100 chartjs-render-monitor" id="myChart" width="2304" height="972" style="display: block; height: 486px; width: 1152px;"></canvas> | |||
| <h2>Section title</h2> | |||
| <div class="table-responsive"> | |||
| <table class="table table-striped table-sm"> | |||
| <thead> | |||
| <tr> | |||
| <th>#</th> | |||
| <th>Header</th> | |||
| <th>Header</th> | |||
| <th>Header</th> | |||
| <th>Header</th> | |||
| </tr> | |||
| </thead> | |||
| <tbody> | |||
| <tr> | |||
| <td>1,001</td> | |||
| <td>Lorem</td> | |||
| <td>ipsum</td> | |||
| <td>dolor</td> | |||
| <td>sit</td> | |||
| </tr> | |||
| <tr> | |||
| <td>1,002</td> | |||
| <td>amet</td> | |||
| <td>consectetur</td> | |||
| <td>adipiscing</td> | |||
| <td>elit</td> | |||
| </tr> | |||
| <tr> | |||
| <td>1,003</td> | |||
| <td>Integer</td> | |||
| <td>nec</td> | |||
| <td>odio</td> | |||
| <td>Praesent</td> | |||
| </tr> | |||
| <tr> | |||
| <td>1,003</td> | |||
| <td>libero</td> | |||
| <td>Sed</td> | |||
| <td>cursus</td> | |||
| <td>ante</td> | |||
| </tr> | |||
| <tr> | |||
| <td>1,004</td> | |||
| <td>dapibus</td> | |||
| <td>diam</td> | |||
| <td>Sed</td> | |||
| <td>nisi</td> | |||
| </tr> | |||
| <tr> | |||
| <td>1,005</td> | |||
| <td>Nulla</td> | |||
| <td>quis</td> | |||
| <td>sem</td> | |||
| <td>at</td> | |||
| </tr> | |||
| <tr> | |||
| <td>1,006</td> | |||
| <td>nibh</td> | |||
| <td>elementum</td> | |||
| <td>imperdiet</td> | |||
| <td>Duis</td> | |||
| </tr> | |||
| <tr> | |||
| <td>1,007</td> | |||
| <td>sagittis</td> | |||
| <td>ipsum</td> | |||
| <td>Praesent</td> | |||
| <td>mauris</td> | |||
| </tr> | |||
| <tr> | |||
| <td>1,008</td> | |||
| <td>Fusce</td> | |||
| <td>nec</td> | |||
| <td>tellus</td> | |||
| <td>sed</td> | |||
| </tr> | |||
| <tr> | |||
| <td>1,009</td> | |||
| <td>augue</td> | |||
| <td>semper</td> | |||
| <td>porta</td> | |||
| <td>Mauris</td> | |||
| </tr> | |||
| <tr> | |||
| <td>1,010</td> | |||
| <td>massa</td> | |||
| <td>Vestibulum</td> | |||
| <td>lacinia</td> | |||
| <td>arcu</td> | |||
| </tr> | |||
| <tr> | |||
| <td>1,011</td> | |||
| <td>eget</td> | |||
| <td>nulla</td> | |||
| <td>Class</td> | |||
| <td>aptent</td> | |||
| </tr> | |||
| <tr> | |||
| <td>1,012</td> | |||
| <td>taciti</td> | |||
| <td>sociosqu</td> | |||
| <td>ad</td> | |||
| <td>litora</td> | |||
| </tr> | |||
| <tr> | |||
| <td>1,013</td> | |||
| <td>torquent</td> | |||
| <td>per</td> | |||
| <td>conubia</td> | |||
| <td>nostra</td> | |||
| </tr> | |||
| <tr> | |||
| <td>1,014</td> | |||
| <td>per</td> | |||
| <td>inceptos</td> | |||
| <td>himenaeos</td> | |||
| <td>Curabitur</td> | |||
| </tr> | |||
| <tr> | |||
| <td>1,015</td> | |||
| <td>sodales</td> | |||
| <td>ligula</td> | |||
| <td>in</td> | |||
| <td>libero</td> | |||
| </tr> | |||
| </tbody> | |||
| </table> | |||
| </div> | |||
| </main> | |||
| </div> | |||
| </div> | |||
| <!-- Bootstrap core JavaScript | |||
| ================================================== --> | |||
| <!-- Placed at the end of the document so the pages load faster --> | |||
| <script src="assets/js/jquery.min.js"></script> | |||
| <script src="assets/js/popper.js"></script> | |||
| <script src="bootstrap/js/bootstrap.min.js"></script> | |||
| <!-- Icons --> | |||
| <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script> | |||
| <script>feather.replace()</script> | |||
| <!-- Graphs --> | |||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> | |||
| <script> | |||
| var ctx = document.getElementById("myChart"); | |||
| var myChart = new Chart(ctx, { | |||
| type: 'line', | |||
| data: { | |||
| labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], | |||
| datasets: [{ | |||
| data: [15339, 21345, 18483, 24003, 23489, 24092, 12034], | |||
| lineTension: 0, | |||
| backgroundColor: 'transparent', | |||
| borderColor: '#007bff', | |||
| borderWidth: 4, | |||
| pointBackgroundColor: '#007bff' | |||
| }] | |||
| }, | |||
| options: { | |||
| scales: { | |||
| yAxes: [{ | |||
| ticks: { | |||
| beginAtZero: false | |||
| } | |||
| }] | |||
| }, | |||
| legend: { | |||
| display: false, | |||
| } | |||
| } | |||
| }); | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 1
- 0
form/pinegrow.json
查看文件
| @@ -0,0 +1 @@ | |||
| {"files":{"dashboard.html":{"frameworks":["pg.insight.events","pg.css.grid","pg.image.overlay","pg.code-validator","pg.project.items","pg.asset.manager","bs4","pg.html","pg.components"],"last_page_width":1024}},"breakpoints":["576px","768px","992px","1200px"],"frameworks":["pg.insight.events","pg.css.grid","pg.image.overlay","pg.code-validator","pg.project.items","pg.asset.manager","bs4","pg.html","pg.components"],"template_framework_id":"bootstrap"} | |||
Loading…