├── .gitignore ├── .percy.yml ├── README.md ├── favicon.ico ├── screenshot.png ├── favicon-16x16.png ├── favicon-32x32.png ├── apple-touch-icon.png ├── package.json ├── LICENSE ├── snapshots.js ├── masleka.html ├── script.js ├── rough-notation.iife.js ├── index.html ├── mdb-file-upload.min.js └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | .DS_Store 3 | node_modules 4 | -------------------------------------------------------------------------------- /.percy.yml: -------------------------------------------------------------------------------- 1 | version: 1 2 | snapshot: 3 | widths: [375, 1280] 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # מחשבון הוזלת דמי ניהול בפנסיה 2 | ![](screenshot.png "") -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orenyomtov/pensia/HEAD/favicon.ico -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orenyomtov/pensia/HEAD/screenshot.png -------------------------------------------------------------------------------- /favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orenyomtov/pensia/HEAD/favicon-16x16.png -------------------------------------------------------------------------------- /favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orenyomtov/pensia/HEAD/favicon-32x32.png -------------------------------------------------------------------------------- /apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orenyomtov/pensia/HEAD/apple-touch-icon.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pensia", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "snapshots": "percy exec -- node snapshots.js" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/orenyomtov/pensia.git" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "bugs": { 15 | "url": "https://github.com/orenyomtov/pensia/issues" 16 | }, 17 | "homepage": "https://github.com/orenyomtov/pensia#readme", 18 | "devDependencies": { 19 | "@percy/script": "^1.1.0", 20 | "http-server": "^0.12.3" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Oren 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /snapshots.js: -------------------------------------------------------------------------------- 1 | const PercyScript = require('@percy/script'); 2 | const path = require('path'); 3 | const httpServer = require('http-server'); 4 | 5 | const PORT = process.env.PORT_NUMBER || 8000; 6 | const TEST_URL = `http://localhost:${PORT}`; 7 | 8 | PercyScript.run(async (page, percySnapshot) => { 9 | let server = httpServer.createServer(); 10 | server.listen(PORT); 11 | 12 | console.log(`Server started at ${TEST_URL}`); 13 | await page.goto(TEST_URL); 14 | await page.waitForTimeout(500); 15 | await percySnapshot('Home Page'); 16 | 17 | await page.type("[name='current_age']", '35'); 18 | await page.type("[name='start_of_work_age']", '27'); 19 | await page.type("[name='salary']", '15'); 20 | await page.click("#submit"); 21 | await page.waitForTimeout(500); 22 | await percySnapshot('Home Page - Input Validation'); 23 | 24 | await page.type("[name='salary']", '15000'); 25 | await page.click("#submit"); 26 | await page.waitForTimeout(3000); // Wait for the rough notation animation to finish 27 | await percySnapshot('Home Page - Form Submitted'); 28 | 29 | await page.click(".btn-outline-primary"); 30 | await page.waitForTimeout(1000); // Wait for the modal to open 31 | await percySnapshot('Home Page - Assumptions Modal Open'); 32 | 33 | server.close(); 34 | }); 35 | -------------------------------------------------------------------------------- /masleka.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | מחשבון פנסיה על בסיס המסלקה הפנסיונית 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |

מחשבון פנסיה

33 |
34 | 35 |
36 |
37 |
38 |
39 |
40 |

אני בן

41 | 42 |
43 |
44 |
45 |
46 |

התחלתי לעבוד בגיל

47 | 48 |
49 |
50 |
51 |
52 |

אני מרוויח

53 | 54 |
55 |
56 |
57 | 58 |
59 | 60 |
61 |
62 |
63 | 64 |
65 |

עד היום דפקו אותך על סך שקל

66 |

אם תעבור לקרן ברירת מחדל בפנסיה

67 |

תוכל לחסוך עוד שקל עד גיל פרישה 68 |

69 | 70 |

71 | איך חישבנו את זה? 72 |

73 |
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var inputs = document.querySelectorAll('input[type=number]'); 2 | 3 | for (input of inputs) { 4 | input.value = getCookie(input.name); 5 | 6 | input.addEventListener('input', function (event) { 7 | setCookie(event.target.name, event.target.value); 8 | }, false); 9 | } 10 | 11 | function getCookie(name) { 12 | var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)'); 13 | return v ? v[2] : null; 14 | } 15 | 16 | function setCookie(name, value, days = 999) { 17 | var d = new Date; 18 | d.setTime(d.getTime() + 24 * 60 * 60 * 1000 * days); 19 | document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString(); 20 | } 21 | 22 | var inputs = document.getElementsByTagName("input"); 23 | for (input of inputs) 24 | input.addEventListener("keyup", function (event) { 25 | // Number 13 is the "Enter" key on the keyboard 26 | if (event.keyCode === 13) { 27 | event.preventDefault(); 28 | // Trigger the button element with a click 29 | document.getElementById("submit").click(); 30 | } 31 | }); 32 | 33 | const a1 = RoughNotation.annotate(document.querySelector('#pastLoss'), { type: 'circle', color: 'red', animationDuration: 1000 }); 34 | const a2 = RoughNotation.annotate(document.querySelector('#future'), { type: 'highlight', color: 'yellow', iterations: 1, multiline: true, rtl: true, animationDuration: 1500 }); 35 | 36 | const ag = RoughNotation.annotationGroup([a1, a2]); 37 | 38 | function onSubmit() { 39 | let form = document.getElementById('form'); 40 | let calc = document.getElementById('calculations'); 41 | 42 | if (form.checkValidity() === false) { 43 | event.preventDefault(); 44 | event.stopPropagation(); 45 | 46 | form.classList.add('was-validated'); 47 | 48 | return; 49 | } 50 | form.classList.remove('was-validated'); 51 | 52 | const age = parseInt(form.current_age.value); 53 | const salary = parseInt(form.salary.value); 54 | const startedWorkingAge = parseInt(form.start_of_work_age.value); 55 | 56 | let frayer = calculateFrayer(age, salary, startedWorkingAge) 57 | 58 | document.getElementById('pastLoss').innerText = numberWithCommas(frayer.pastLoss); 59 | document.getElementById('futureGains').innerText = numberWithCommas(frayer.futureGains); 60 | 61 | calc.style.display = 'block'; 62 | form.style.display = 'none'; 63 | 64 | if (window.innerWidth < 480) 65 | calc.scrollIntoView(true); 66 | ag.hide(); 67 | ag.show(); 68 | } 69 | 70 | function numberWithCommas(x) { 71 | return parseInt(x).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 72 | } 73 | 74 | function calculateFrayer(age, salary, startedWorkingAge) { 75 | const averageDepositFee = 2.12 / 100; 76 | const averageAccFee = 0.21 / 100; 77 | 78 | const goodDepositFee = 1.49 / 100; 79 | const goodAccFee = 0.1 / 100; 80 | 81 | const retirementAge = 65 82 | const normalYield = 6.85 / 100; 83 | 84 | const yearsWorked = age - startedWorkingAge; 85 | const yearsLeft = retirementAge - age 86 | 87 | const badPastPension = calculatePension(salary, yearsWorked, normalYield, averageDepositFee, averageAccFee, 0); 88 | const goodPastPension = calculatePension(salary, yearsWorked, normalYield, goodDepositFee, goodAccFee, 0); 89 | 90 | const currentPensionSize = badPastPension.pensionSize; 91 | const pastLoss = goodPastPension.pensionSize - currentPensionSize; 92 | 93 | const badFuturePension = calculatePension(salary, yearsLeft, normalYield, averageDepositFee, averageAccFee, currentPensionSize) 94 | const goodFuturePension = calculatePension(salary, yearsLeft, normalYield, goodDepositFee, goodAccFee, currentPensionSize) 95 | 96 | const futureGains = goodFuturePension.pensionSize - badFuturePension.pensionSize; 97 | 98 | return { 99 | pastLoss, 100 | futureGains 101 | } 102 | } 103 | 104 | function getYearlyPensionDeposit(salary) { 105 | const employerCompensationDep = 8.33 / 100; 106 | const employerPensionDep = 6.5 / 100; 107 | const employeePensionDep = 6 / 100; 108 | const pensionDepositPercent = employerCompensationDep + employerPensionDep + employeePensionDep 109 | const yearlyPensionDeposit = salary * pensionDepositPercent * 12; 110 | return yearlyPensionDeposit 111 | } 112 | 113 | function calculatePension(salary, yearsNum, yield, depositFee, accFee, initialAmount) { 114 | let pensionSize = initialAmount || 0; 115 | let depositFeePaid = 0; 116 | let accFeePaid = 0; 117 | 118 | const yearlyPensionDeposit = getYearlyPensionDeposit(salary) 119 | const depositAfterFee = yearlyPensionDeposit * (1 - depositFee) 120 | for (let i = 0; i < yearsNum; i++) { 121 | const withNewDeposit = pensionSize + depositAfterFee; 122 | const withYields = withNewDeposit * (1 + yield); 123 | const afterAccFee = withNewDeposit * (1 + yield - accFee); 124 | 125 | depositFeePaid += yearlyPensionDeposit - depositAfterFee; 126 | accFeePaid += withYields - afterAccFee; 127 | pensionSize = afterAccFee; 128 | } 129 | return { 130 | pensionSize, 131 | depositFeePaid, 132 | accFeePaid 133 | } 134 | } 135 | 136 | function handleDrop(input) { 137 | var files = input.files, f = files[0]; 138 | if (!f.name.endsWith('.xls')) { 139 | alert('בבקשה תעלו את הקובץ ״פרטי המוצרים שלי.xls״'); 140 | return; 141 | } 142 | var reader = new FileReader(); 143 | reader.onload = function (e) { 144 | document.getElementById('upload').style.display = 'none' 145 | let data = new Uint8Array(e.target.result); 146 | let form = document.getElementById('form'); 147 | let calc = document.getElementById('calculations'); 148 | 149 | pensionFunds = extractPensionFunds(data); 150 | 151 | const age = parseInt(form.current_age.value); 152 | const salary = parseInt(form.salary.value); 153 | const startedWorkingAge = parseInt(form.start_of_work_age.value); 154 | 155 | let frayer = calculateFrayerWithMasleka(age, salary, startedWorkingAge, pensionFunds) 156 | 157 | document.getElementById('pastLoss').innerText = numberWithCommas(frayer.pastLoss); 158 | document.getElementById('futureGains').innerText = numberWithCommas(frayer.futureGains); 159 | 160 | calc.style.display = 'block'; 161 | calc.scrollIntoView(true); 162 | ag.hide(); 163 | ag.show(); 164 | }; 165 | reader.readAsArrayBuffer(f); 166 | } 167 | 168 | function calculateFrayerWithMasleka(age, salary, startedWorkingAge, pensionFunds) { 169 | console.log(pensionFunds); 170 | 171 | return { 172 | pastLoss: 12345, 173 | futureGains: 123456 174 | } 175 | } 176 | 177 | function extractPensionFunds(data) { 178 | var data = new Uint8Array(data); 179 | var workbook = XLSX.read(data, { type: 'array' }); 180 | 181 | return sheetToJson(workbook.Sheets["קרנות פנסיה חדשות"]).map(x => ({ 182 | pensionSize: x["סה\"כ חיסכון"], 183 | depositFee: x["דמי ניהול – הפקדות"], 184 | accFee: x["דמי ניהול - חיסכון"], 185 | })); 186 | } 187 | 188 | if (document.querySelector('.file-upload')) 189 | $('.file-upload').file_upload({ 190 | messages: { 191 | default: "תגרור לכאן את קובץ האקסל שהורדתם מהמסלקה או תלחצו" 192 | }, 193 | allowedFileExtensions: ["xls"], 194 | onFileUpload: handleDrop 195 | }); 196 | 197 | function readColumnWiseData(range, ws) { 198 | var columnWiseData = []; 199 | for (var C = range.s.c; C <= range.e.c; ++C) { 200 | columnWiseData[C] = []; 201 | for (var R = range.s.r; R <= range.e.r; ++R) { 202 | 203 | var cellref = XLSX.utils.encode_cell({ c: C, r: R }); 204 | if (!ws[cellref]) continue; 205 | var cell = ws[cellref]; 206 | columnWiseData[C].push(cell.v); 207 | 208 | }; 209 | } 210 | return columnWiseData; 211 | } 212 | 213 | function convertCSVToJSON(rows) { 214 | const titles = rows[0]; 215 | 216 | return rows.slice(1).map(row => { 217 | const values = row; 218 | return titles.reduce((object, curr, i) => (object[curr] = values[i], object), {}) 219 | }); 220 | }; 221 | 222 | function sheetToJson(sheet, skipRows = 2) { 223 | return convertCSVToJSON(readColumnWiseData(XLSX.utils.decode_range(`A${skipRows + 1}:${sheet['!ref'].split(':')[1]}`), sheet)); 224 | } -------------------------------------------------------------------------------- /rough-notation.iife.js: -------------------------------------------------------------------------------- 1 | var RoughNotation=function(t){"use strict";const e="http://www.w3.org/2000/svg";class s{constructor(t){this.seed=t}next(){return this.seed?(2**31-1&(this.seed=Math.imul(48271,this.seed)))/2**31:Math.random()}}function i(t,e,s,i,n){return{type:"path",ops:u(t,e,s,i,n)}}function n(t,e,s){const n=(t||[]).length;if(n>2){const i=[];for(let e=0;e500?.4:-.0016668*u+1.233334;let l=n.maxRandomnessOffset||0;l*l*100>a&&(l=u/10);const g=l/2,d=.2+.2*h(n);let p=n.bowing*n.maxRandomnessOffset*(i-e)/200,_=n.bowing*n.maxRandomnessOffset*(t-s)/200;p=c(p,n,f),_=c(_,n,f);const m=[],w=()=>c(g,n,f),v=()=>c(l,n,f);return o&&(r?m.push({op:"move",data:[t+w(),e+w()]}):m.push({op:"move",data:[t+c(l,n,f),e+c(l,n,f)]})),r?m.push({op:"bcurveTo",data:[p+t+(s-t)*d+w(),_+e+(i-e)*d+w(),p+t+2*(s-t)*d+w(),_+e+2*(i-e)*d+w(),s+w(),i+w()]}):m.push({op:"bcurveTo",data:[p+t+(s-t)*d+v(),_+e+(i-e)*d+v(),p+t+2*(s-t)*d+v(),_+e+2*(i-e)*d+v(),s+v(),i+v()]}),m}function l(t,e,s){const i=t.length,n=[];if(i>3){const o=[],r=1-s.curveTightness;n.push({op:"move",data:[t[1][0],t[1][1]]});for(let e=1;e+2t.setAttribute(e,s);for(const a of s){const s=document.createElementNS(e,"path");if(r(s,"d",a),r(s,"fill","none"),r(s,"stroke",h.color||"currentColor"),r(s,"stroke-width",""+l),p){const t=s.getTotalLength();i.push(t),o+=t}t.appendChild(s),n.push(s)}if(p){let t=0;for(let e=0;e{this._resizing||(this._resizing=!0,setTimeout(()=>{this._resizing=!1,"showing"===this._state&&this.haveRectsChanged()&&this.show()},400))},this._e=t,this._config=JSON.parse(JSON.stringify(e)),this.attach()}get animate(){return this._config.animate}set animate(t){this._config.animate=t}get animationDuration(){return this._config.animationDuration}set animationDuration(t){this._config.animationDuration=t}get iterations(){return this._config.iterations}set iterations(t){this._config.iterations=t}get color(){return this._config.color}set color(t){this._config.color!==t&&(this._config.color=t,this.refresh())}get strokeWidth(){return this._config.strokeWidth}set strokeWidth(t){this._config.strokeWidth!==t&&(this._config.strokeWidth=t,this.refresh())}get padding(){return this._config.padding}set padding(t){this._config.padding!==t&&(this._config.padding=t,this.refresh())}attach(){if("unattached"===this._state&&this._e.parentElement){!function(){if(!window.__rno_kf_s){const t=window.__rno_kf_s=document.createElement("style");t.textContent="@keyframes rough-notation-dash { to { stroke-dashoffset: 0; } }",document.head.appendChild(t)}}();const t=this._svg=document.createElementNS(e,"svg");t.setAttribute("class","rough-annotation");const s=t.style;s.position="absolute",s.top="0",s.left="0",s.overflow="visible",s.pointerEvents="none",s.width="100px",s.height="100px";const i="highlight"===this._config.type;if(this._e.insertAdjacentElement(i?"beforebegin":"afterend",t),this._state="not-showing",i){const t=window.getComputedStyle(this._e).position;(!t||"static"===t)&&(this._e.style.position="relative")}this.attachListeners()}}detachListeners(){window.removeEventListener("resize",this._resizeListener),this._ro&&this._ro.unobserve(this._e)}attachListeners(){this.detachListeners(),window.addEventListener("resize",this._resizeListener,{passive:!0}),!this._ro&&"ResizeObserver"in window&&(this._ro=new window.ResizeObserver(t=>{for(const e of t)e.contentRect&&this._resizeListener()})),this._ro&&this._ro.observe(this._e)}haveRectsChanged(){if(this._lastSizes.length){const t=this.rects();if(t.length!==this._lastSizes.length)return!0;for(let e=0;eMath.round(t)===Math.round(e);return s(t.x,e.x)&&s(t.y,e.y)&&s(t.w,e.w)&&s(t.h,e.h)}isShowing(){return"not-showing"!==this._state}refresh(){this.isShowing()&&!this.pendingRefresh&&(this.pendingRefresh=Promise.resolve().then(()=>{this.isShowing()&&this.show(),delete this.pendingRefresh}))}show(){switch(this._state){case"unattached":break;case"showing":this.hide(),this._svg&&this.render(this._svg,!0);break;case"not-showing":this.attach(),this._svg&&this.render(this._svg,!1)}}hide(){if(this._svg)for(;this._svg.lastChild;)this._svg.removeChild(this._svg.lastChild);this._state="not-showing"}remove(){this._svg&&this._svg.parentElement&&this._svg.parentElement.removeChild(this._svg),this._svg=void 0,this._state="unattached",this.detachListeners()}render(t,e){let s=this._config;e&&(s=JSON.parse(JSON.stringify(this._config)),s.animate=!1);const i=this.rects();let n=0;i.forEach(t=>n+=t.w);const o=s.animationDuration||800;let r=0;for(let e=0;e 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | מחשבון הוזלת דמי ניהול בפנסיה 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
44 |

45 | רובנו משלמים ומשלמות הרבה יותר מדי על הפנסיה 46 |

47 |

48 | כמה שווה לך להוזיל את דמי הניהול בפנסיה? 49 |

50 |
51 | 52 |
53 |
54 |
55 |
56 |
57 |

הגיל שלי

58 | 59 |
60 |
61 |
62 |
63 |

התחלתי לעבוד בגיל

64 | 65 |
66 |
67 |
68 |
69 |

משכורת ברוטו

70 | 71 |
72 |
73 | 74 | 77 |
78 |
79 | 80 | 81 |
82 |

83 | עד היום שילמת 84 | 85 | ₪ מיותרים 86 |

87 |

88 | מעבר לאחת מקרנות הפנסיה המומלצות ע"י משרד האוצר 89 |

90 | 91 |

יחסכו לך עוד ₪ עד גיל 92 | הפרישה 93 |

94 | 95 |
96 | 97 |

98 | איך חישבנו את זה? 99 |

100 | 101 |
102 |

103 | המספרים שהצגנו כאן הם הערכה גסה - אבל הם לא מספרים באוויר. 104 |

105 |

106 | בשנת 2018 משרד האוצר בחר ארבע קרנות פנסיה זולות ומומלצות, והגדיר אותן 107 | כקרנות פנסיה 108 | נבחרות.
109 | הציבור הישראלי אינו מודע למסלולים המוזלים בפנסיה, ומשלם דמי ניהול גבוהים סתם.
110 | התבססנו על כמה 111 | הנחות יסוד 112 | כדי לחשב כמה ניתן יהיה לחסוך במעבר לקרן פנסיה נבחרת. 113 |

114 |

115 | מסתבר שלמרות שההפרש בדמי הניהול נשמע קטן, לאורך השנים ההפרש מצטבר לסכום משמעותי בזכות 116 | אפקט 117 | הריבית דריבית. 118 |

119 |

120 | רוצה לשחק עם המספרים בעצמך? הכנו לך 121 | 122 | אקסל עם כל החישובים. 123 |

124 |
125 | 126 | 127 | 128 | 129 | 130 | 131 |
132 |
133 | 134 |

135 | רגע, מי אנחנו בעצם? 136 |

137 |
138 |

139 | נעים מאד! אנחנו 140 | אורן 141 | ועידן, 142 | מומחי סייבר. לפני חצי שנה התיישבנו לסדר לעצמנו את הפנסיה, קראנו את 143 | מדריך הפנסיה של נינג'ה פיננסית, 144 | והבנו שזה קל ושווה המון כסף. 145 |

146 |

147 | החלטנו לנסות להנגיש את מה שלמדנו לעוד אנשים אז פנינו לנתי, הנינג'ה הפיננסית בכבודו ובעצמו, 148 | ולשירה, 149 | מומחית UX בעלת שם. 150 |

151 |

152 | נפגשנו, אכלנו המון המבורגרים, והתוצאה לפניכם, חינם לכולם. בעתיד אנחנו שואפים לייצר מחשבונים נוספים כדי להפוך את נושא הפנסיה לקל עוד יותר. 153 |

154 |

155 | הפרויקט שלנו מפורסם 156 | כקוד פתוח 157 | ללא מטרת רווח, במטרה להנגיש מידע לציבור. 158 |

159 |
160 | 161 |

162 | מה הלאה? 163 |

164 | 165 |
166 |

167 | מה שרואים כאן הוא הערכה בלבד - עכשיו הגיע הזמן להשיג את הנתונים האמיתיים. 168 |

169 |

170 | הצעד הבא הוא לבדוק: 171 |

    172 |
  1. 173 | איפה הפנסיה שלך מנוהלת? 174 |
    2. 175 |
  2. 176 | מה גובה דמי הניהול שלך? 177 |
    3. 178 |
179 |

180 |

181 | אם אין לך תשובות לשאלות האלה - את/ה לא לבד! בשביל זה המציאו את המסלקה 182 | הפנסיונית, 183 | שירות של משרד האוצר שיראה לך כמה כסף יש לך ואיפה. 184 |

185 |

186 | למידע וליווי נוסף, אנחנו ממליצים לקרוא את מדריך הפנסיה, שיקח אותך צעד צעד עד להוזלת דמי הניהול בפנסיה שלך. משם אנחנו התחלנו. 187 |

188 |
189 | 190 | 191 | 192 | 193 | 194 | 195 |
196 |
197 | 198 |
199 |

200 | אין לראות במידע הכלול באתר זה משום ייעוץ/שיווק השקעות ו/או פנסיוני ו/או מס או תחליף לייעוץ/שיווק כאמור אישי וספציפי לכל אדם בהתאם לנתוניו לשם רכישה ו/או ביצוע השקעות, פעולות ו/או עסקאות כלשהן או המלצה או חוות דעת באשר לכדאיות השקעה במוצרים פיננסים מכל מין וסוג שהם. המידע הכלול באתר אינו מהווה תחליף לייעוץ/שיווק השקעות ו/או פנסיוני ואין לפעול על פיו אלא לאחר קבלת ייעוץ אישי המתחשב בצרכיו ובנתוניו האישיים של כל אדם. 201 |

202 |
203 |
204 | 205 | 246 | 247 | 248 | 249 | 252 | 255 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | -------------------------------------------------------------------------------- /mdb-file-upload.min.js: -------------------------------------------------------------------------------- 1 | var _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) { 2 | return typeof e 3 | } : function(e) { 4 | return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e 5 | }; 6 | (function(e, i) { 7 | "function" == typeof define && define.amd ? define(["jquery"], i) : "object" == typeof exports ? module.exports = i(require("jquery")) : e.file_upload = i(e.jQuery) 8 | })(this, function(e) { 9 | function i(i, t) { 10 | if (window.File && window.FileReader && window.FileList && window.Blob) { 11 | var s = { 12 | defaultFile: "", 13 | maxFileSize: 0, 14 | minWidth: 0, 15 | maxWidth: 0, 16 | minHeight: 0, 17 | maxHeight: 0, 18 | showRemove: !0, 19 | showLoader: !0, 20 | showErrors: !0, 21 | errorTimeout: 3e3, 22 | errorsPosition: "overlay", 23 | imgFileExtensions: ["png", "jpg", "jpeg", "gif", "bmp"], 24 | maxFileSizePreview: "5M", 25 | allowedFormats: ["portrait", "square", "landscape"], 26 | allowedFileExtensions: ["*"], 27 | messages: { 28 | default: "Drag and drop a file here or click", 29 | replace: "Drag and drop or click to replace", 30 | remove: "Remove", 31 | error: "Ooops, something wrong happended." 32 | }, 33 | error: { 34 | fileSize: "The file size is too big ({{ value }} max).", 35 | minWidth: "The image width is too small ({{ value }}}px min).", 36 | maxWidth: "The image width is too big ({{ value }}}px max).", 37 | minHeight: "The image height is too small ({{ value }}}px min).", 38 | maxHeight: "The image height is too big ({{ value }}px max).", 39 | imageFormat: "The image format is not allowed ({{ value }} only).", 40 | fileExtension: "The file is not allowed ({{ value }} only)." 41 | }, 42 | tpl: { 43 | wrap: '
', 44 | loader: '
', 45 | message: '

{{ default }}

', 46 | preview: '

{{ replace }}

', 47 | filename: '

', 48 | clearButton: '', 49 | errorLine: '

{{ error }}

', 50 | errorsContainer: '
    ' 51 | }, 52 | onFileUpload: console.log 53 | }; 54 | 55 | this.element = i, this.input = e(this.element), this.wrapper = null, this.preview = null, this.filenameWrapper = null, this.settings = e.extend(!0, s, t, this.input.data()), this.errorsEvent = e.Event("file_upload.errors"), this.isDisabled = !1, this.isInit = !1, this.file = { 56 | object: null, 57 | name: null, 58 | size: null, 59 | width: null, 60 | height: null, 61 | type: null 62 | }, Array.isArray(this.settings.allowedFormats) || (this.settings.allowedFormats = this.settings.allowedFormats.split(" ")), Array.isArray(this.settings.allowedFileExtensions) || (this.settings.allowedFileExtensions = this.settings.allowedFileExtensions.split(" ")), this.onChange = this.onChange.bind(this), this.clearElement = this.clearElement.bind(this), this.onFileReady = this.onFileReady.bind(this), this.translateMessages(), this.createElements(), this.setContainerSize(), this.errorsEvent.errors = [], this.input.on("change", this.onChange), 63 | this.readFile = this.settings.onFileUpload; 64 | } 65 | } 66 | var t = "file_upload"; 67 | return i.prototype.onChange = function() { 68 | this.resetPreview(), this.readFile(this.element) 69 | }, i.prototype.createElements = function() { 70 | this.isInit = !0, this.input.wrap(e(this.settings.tpl.wrap)), this.wrapper = this.input.parent(); 71 | var i = e(this.settings.tpl.message).insertBefore(this.input); 72 | e(this.settings.tpl.errorLine).appendTo(i), this.isTouchDevice() === !0 && this.wrapper.addClass("touch-fallback"), this.input.attr("disabled") && (this.isDisabled = !0, this.wrapper.addClass("disabled")), this.settings.showLoader === !0 && (this.loader = e(this.settings.tpl.loader), this.loader.insertBefore(this.input)), this.preview = e(this.settings.tpl.preview), this.preview.insertAfter(this.input), this.isDisabled === !1 && this.settings.showRemove === !0 && (this.clearButton = e(this.settings.tpl.clearButton), this.clearButton.insertAfter(this.input), this.clearButton.on("click", this.clearElement)), this.filenameWrapper = e(this.settings.tpl.filename), this.filenameWrapper.prependTo(this.preview.find(".file-upload-infos-inner")), this.settings.showErrors === !0 && (this.errorsContainer = e(this.settings.tpl.errorsContainer), "outside" === this.settings.errorsPosition ? this.errorsContainer.insertAfter(this.wrapper) : this.errorsContainer.insertBefore(this.input)); 73 | var t = this.settings.defaultFile || ""; 74 | "" !== t.trim() && (this.file.name = this.cleanFilename(t), this.setPreview(this.isImage(), t)) 75 | }, i.prototype.readFile = function(i) { 76 | if (i.files && i.files[0]) { 77 | var t = new FileReader, 78 | s = new Image, 79 | r = i.files[0], 80 | n = null, 81 | o = this, 82 | l = e.Event("file_upload.fileReady"); 83 | this.clearErrors(), this.showLoader(), this.setFileInformations(r), this.errorsEvent.errors = [], this.checkFileSize(), this.isFileExtensionAllowed(), this.isImage() && this.file.size < this.sizeToByte(this.settings.maxFileSizePreview) ? (this.input.on("file_upload.fileReady", this.onFileReady), t.readAsDataURL(r), t.onload = function(e) { 84 | n = e.target.result, s.src = e.target.result, s.onload = function() { 85 | o.setFileDimensions(this.width, this.height), o.validateImage(), o.input.trigger(l, [!0, n]) 86 | } 87 | }) : this.onFileReady(!1) 88 | } 89 | }, i.prototype.onFileReady = function(e, i, t) { 90 | if (this.input.off("file_upload.fileReady", this.onFileReady), 0 === this.errorsEvent.errors.length) this.setPreview(i, t); 91 | else { 92 | this.input.trigger(this.errorsEvent, [this]); 93 | for (var s = this.errorsEvent.errors.length - 1; s >= 0; s--) { 94 | var r = this.errorsEvent.errors[s].namespace, 95 | n = r.split(".").pop(); 96 | this.showError(n) 97 | } 98 | if ("undefined" != typeof this.errorsContainer) { 99 | this.errorsContainer.addClass("visible"); 100 | var o = this.errorsContainer; 101 | setTimeout(function() { 102 | o.removeClass("visible") 103 | }, this.settings.errorTimeout) 104 | } 105 | this.wrapper.addClass("has-error"), this.resetPreview(), this.clearElement() 106 | } 107 | }, i.prototype.setFileInformations = function(e) { 108 | this.file.object = e, this.file.name = e.name, this.file.size = e.size, this.file.type = e.type, this.file.width = null, this.file.height = null 109 | }, i.prototype.setFileDimensions = function(e, i) { 110 | this.file.width = e, this.file.height = i 111 | }, i.prototype.setPreview = function(i, t) { 112 | this.wrapper.removeClass("has-error").addClass("has-preview"), this.filenameWrapper.children(".file-upload-filename-inner").html(this.file.name); 113 | var s = this.preview.children(".file-upload-render"); 114 | if (this.hideLoader(), i === !0) { 115 | var r = e('').attr("src", t); 116 | this.settings.height && r.css("max-height", this.settings.height), r.appendTo(s) 117 | } else e("").attr("class", "fas fa-file").appendTo(s), e('').html(this.getFileType()).appendTo(s); 118 | this.preview.fadeIn() 119 | }, i.prototype.resetPreview = function() { 120 | this.wrapper.removeClass("has-preview"); 121 | var e = this.preview.children(".file-upload-render"); 122 | e.find(".file-upload-extension").remove(), e.find("i").remove(), e.find(".file-upload-preview-img").remove(), this.preview.hide(), this.showLoader() 123 | }, i.prototype.cleanFilename = function(e) { 124 | var i = e.split("\\").pop(); 125 | return i == e && (i = e.split("/").pop()), "" !== e ? i : "" 126 | }, i.prototype.clearElement = function() { 127 | if (0 === this.errorsEvent.errors.length) { 128 | var i = e.Event("file_upload.beforeClear"); 129 | this.input.trigger(i, [this]), i.result !== !1 && (this.resetFile(), this.input.val(""), this.resetPreview(), this.input.trigger(e.Event("file_upload.afterClear"), [this])) 130 | } else this.resetFile(), this.input.val(""), this.resetPreview() 131 | }, i.prototype.resetFile = function() { 132 | this.file.object = null, this.file.name = null, this.file.size = null, this.file.type = null, this.file.width = null, this.file.height = null 133 | }, i.prototype.setContainerSize = function() { 134 | this.settings.height && this.wrapper.height(this.settings.height) 135 | }, i.prototype.isTouchDevice = function() { 136 | return "ontouchstart" in window || navigator.MaxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 137 | }, i.prototype.getFileType = function() { 138 | return this.file.name.split(".").pop().toLowerCase() 139 | }, i.prototype.isImage = function() { 140 | return "-1" != this.settings.imgFileExtensions.indexOf(this.getFileType()) 141 | }, i.prototype.isFileExtensionAllowed = function() { 142 | return "-1" != this.settings.allowedFileExtensions.indexOf("*") || "-1" != this.settings.allowedFileExtensions.indexOf(this.getFileType()) || (this.pushError("fileExtension"), !1) 143 | }, i.prototype.translateMessages = function() { 144 | for (var e in this.settings.tpl) 145 | for (var i in this.settings.messages) this.settings.tpl[e] = this.settings.tpl[e].replace("{{ " + i + " }}", this.settings.messages[i]) 146 | }, i.prototype.checkFileSize = function() { 147 | 0 !== this.sizeToByte(this.settings.maxFileSize) && this.file.size > this.sizeToByte(this.settings.maxFileSize) && this.pushError("fileSize") 148 | }, i.prototype.sizeToByte = function(e) { 149 | var i = 0; 150 | if (0 !== e) { 151 | var t = e.slice(-1).toUpperCase(), 152 | s = 1024, 153 | r = 1024 * s, 154 | n = 1024 * r; 155 | "K" === t ? i = parseFloat(e) * s : "M" === t ? i = parseFloat(e) * r : "G" === t && (i = parseFloat(e) * n) 156 | } 157 | return i 158 | }, i.prototype.validateImage = function() { 159 | 0 !== this.settings.minWidth && this.settings.minWidth >= this.file.width && this.pushError("minWidth"), 0 !== this.settings.maxWidth && this.settings.maxWidth <= this.file.width && this.pushError("maxWidth"), 0 !== this.settings.minHeight && this.settings.minHeight >= this.file.height && this.pushError("minHeight"), 0 !== this.settings.maxHeight && this.settings.maxHeight <= this.file.height && this.pushError("maxHeight"), "-1" == this.settings.allowedFormats.indexOf(this.getImageFormat()) && this.pushError("imageFormat") 160 | }, i.prototype.getImageFormat = function() { 161 | return this.file.width == this.file.height ? "square" : this.file.width < this.file.height ? "portrait" : this.file.width > this.file.height ? "landscape" : void 0 162 | }, i.prototype.pushError = function(i) { 163 | var t = e.Event("file_upload.error." + i); 164 | this.errorsEvent.errors.push(t), this.input.trigger(t, [this]) 165 | }, i.prototype.clearErrors = function() { 166 | "undefined" != typeof this.errorsContainer && this.errorsContainer.children("ul").html("") 167 | }, i.prototype.showError = function(e) { 168 | "undefined" != typeof this.errorsContainer && this.errorsContainer.children("ul").append("
  • " + this.getError(e) + "
    • ") 169 | }, i.prototype.getError = function(e) { 170 | var i = this.settings.error[e], 171 | t = ""; 172 | return "fileSize" === e ? t = this.settings.maxFileSize : "minWidth" === e ? t = this.settings.minWidth : "maxWidth" === e ? t = this.settings.maxWidth : "minHeight" === e ? t = this.settings.minHeight : "maxHeight" === e ? t = this.settings.maxHeight : "imageFormat" === e ? t = this.settings.allowedFormats.join(", ") : "fileExtension" === e && (t = this.settings.allowedFileExtensions.join(", ")), "" !== t ? i.replace("{{ value }}", t) : i 173 | }, i.prototype.showLoader = function() { 174 | "undefined" != typeof this.loader && this.loader.show() 175 | }, i.prototype.hideLoader = function() { 176 | "undefined" != typeof this.loader && this.loader.hide() 177 | }, i.prototype.destroy = function() { 178 | this.input.siblings().remove(), this.input.unwrap(), this.isInit = !1 179 | }, i.prototype.init = function() { 180 | this.createElements() 181 | }, i.prototype.isDropified = function() { 182 | return this.isInit 183 | }, e.fn[t] = function(s) { 184 | return this.each(function() { 185 | e.data(this, t) || e.data(this, t, new i(this, s)) 186 | }), this 187 | }, i 188 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 14px; 3 | } 4 | 5 | body, 6 | .card { 7 | background-color: #fff9f4; 8 | } 9 | 10 | body { 11 | font-family: Rubik, sans-serif !important 12 | } 13 | 14 | @media (min-width: 768px) { 15 | html { 16 | font-size: 16px; 17 | } 18 | } 19 | 20 | .container { 21 | max-width: 960px; 22 | } 23 | 24 | .pricing-header { 25 | max-width: 700px; 26 | } 27 | 28 | .card-deck .card { 29 | min-width: 220px; 30 | } 31 | 32 | .border-top { 33 | border-top: 1px solid #e5e5e5; 34 | } 35 | 36 | .border-bottom { 37 | border-bottom: 1px solid #e5e5e5; 38 | } 39 | 40 | .btn { 41 | margin-top: 10px; 42 | } 43 | 44 | .btn-xl { 45 | padding: 10px 20px; 46 | font-size: 20px; 47 | border-radius: 7px; 48 | } 49 | 50 | #calculations { 51 | display: none; 52 | } 53 | 54 | .display-4-5 { 55 | font-size: 3rem; 56 | font-weight: 300; 57 | line-height: 1.2; 58 | } 59 | 60 | #calculations div { 61 | line-height: 1.5; 62 | } 63 | 64 | .file-upload { 65 | color: #4285f4 !important; 66 | } 67 | 68 | input[type=number] { 69 | text-align: center; 70 | } 71 | 72 | 73 | 74 | 75 | 76 | 77 | /* File Upload Style */ 78 | .file-upload { 79 | display: -webkit-box; 80 | display: -webkit-flex; 81 | display: -ms-flexbox; 82 | display: flex; 83 | -webkit-box-pack: center; 84 | -webkit-justify-content: center; 85 | -ms-flex-pack: center; 86 | justify-content: center; 87 | -webkit-box-align: center; 88 | -webkit-align-items: center; 89 | -ms-flex-align: center; 90 | align-items: center; 91 | position: relative; 92 | cursor: pointer; 93 | overflow: hidden; 94 | width: 100%; 95 | max-width: 100%; 96 | height: 200px; 97 | padding: 5px 10px; 98 | font-size: 1rem; 99 | text-align: center; 100 | color: #ccc 101 | } 102 | 103 | .file-upload-wrapper .card.card-body.has-error .file-upload-message .file-upload-error, 104 | .file-upload-wrapper .card.card-body.has-preview .btn.btn-sm.btn-danger { 105 | display: block 106 | } 107 | 108 | .file-upload i { 109 | font-size: 3rem 110 | } 111 | 112 | .file-upload .mask.rgba-stylish-slight { 113 | opacity: 0; 114 | -webkit-transition: all .15s linear; 115 | -o-transition: all .15s linear; 116 | transition: all .15s linear 117 | } 118 | 119 | .file-upload:hover .mask.rgba-stylish-slight { 120 | opacity: .8 121 | } 122 | 123 | .file-upload-wrapper .card.card-body.has-error { 124 | border-color: #f34141 125 | } 126 | 127 | .file-upload-wrapper .card.card-body.has-error:hover .file-upload-errors-container { 128 | visibility: visible; 129 | opacity: 1; 130 | -webkit-transition-delay: 0s; 131 | -o-transition-delay: 0s; 132 | transition-delay: 0s 133 | } 134 | 135 | .file-upload-wrapper .card.card-body.disabled input { 136 | cursor: not-allowed 137 | } 138 | 139 | .file-upload-wrapper .card.card-body.disabled:hover { 140 | background-image: none; 141 | -webkit-animation: none; 142 | animation: none 143 | } 144 | 145 | .file-upload-wrapper .card.card-body.disabled .file-upload-message { 146 | opacity: .5; 147 | text-decoration: line-through 148 | } 149 | 150 | .file-upload-wrapper .card.card-body.disabled .file-upload-infos-message { 151 | display: none 152 | } 153 | 154 | .file-upload-wrapper .card.card-body input { 155 | position: absolute; 156 | top: 0; 157 | right: 0; 158 | bottom: 0; 159 | left: 0; 160 | height: 100%; 161 | width: 100%; 162 | opacity: 0; 163 | cursor: pointer; 164 | z-index: 5 165 | } 166 | 167 | .file-upload-wrapper .card.card-body .file-upload-message { 168 | position: relative; 169 | top: 50px; 170 | -webkit-transform: translateY(-50%); 171 | -ms-transform: translateY(-50%); 172 | transform: translateY(-50%) 173 | } 174 | 175 | .file-upload-wrapper .card.card-body .file-upload-message span.file-icon { 176 | font-size: 50px; 177 | color: #ccc 178 | } 179 | 180 | .file-upload-wrapper .card.card-body .file-upload-message p { 181 | margin: 5px 0 0 182 | } 183 | 184 | .file-upload-wrapper .card.card-body .file-upload-message p.file-upload-error { 185 | color: #f34141; 186 | font-weight: 700; 187 | display: none 188 | } 189 | 190 | .file-upload-wrapper .card.card-body .btn.btn-sm.btn-danger { 191 | display: none; 192 | position: absolute; 193 | opacity: 0; 194 | z-index: 7; 195 | top: 10px; 196 | right: 10px; 197 | -webkit-transition: all .15s linear; 198 | -o-transition: all .15s linear; 199 | transition: all .15s linear 200 | } 201 | 202 | .file-upload-wrapper .card.card-body .file-upload-preview { 203 | display: none; 204 | position: absolute; 205 | z-index: 1; 206 | background-color: #fff; 207 | padding: 5px; 208 | width: 100%; 209 | height: 100%; 210 | top: 0; 211 | right: 0; 212 | bottom: 0; 213 | left: 0; 214 | overflow: hidden; 215 | text-align: center 216 | } 217 | 218 | .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-render .file-upload-preview-img { 219 | width: 100%; 220 | height: 100%; 221 | background-color: #fff; 222 | -webkit-transition: border-color .15s linear; 223 | -o-transition: border-color .15s linear; 224 | transition: border-color .15s linear; 225 | -o-object-fit: cover; 226 | object-fit: cover 227 | } 228 | 229 | .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-render i { 230 | font-size: 80px; 231 | top: 50%; 232 | left: 50%; 233 | -webkit-transform: translate(-50%, -50%); 234 | -ms-transform: translate(-50%, -50%); 235 | transform: translate(-50%, -50%); 236 | position: absolute; 237 | color: #777 238 | } 239 | 240 | .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-render .file-upload-extension { 241 | position: absolute; 242 | top: 50%; 243 | left: 50%; 244 | -webkit-transform: translate(-50%, -50%); 245 | -ms-transform: translate(-50%, -50%); 246 | transform: translate(-50%, -50%); 247 | margin-top: 10px; 248 | text-transform: uppercase; 249 | font-weight: 900; 250 | letter-spacing: -.03em; 251 | font-size: 1rem; 252 | color: #fff; 253 | width: 42px; 254 | white-space: nowrap; 255 | overflow: hidden; 256 | -o-text-overflow: ellipsis; 257 | text-overflow: ellipsis 258 | } 259 | 260 | .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-infos { 261 | position: absolute; 262 | left: 0; 263 | top: 0; 264 | right: 0; 265 | bottom: 0; 266 | z-index: 3; 267 | background: rgba(0, 0, 0, .7); 268 | opacity: 0; 269 | -webkit-transition: opacity .15s linear; 270 | -o-transition: opacity .15s linear; 271 | transition: opacity .15s linear 272 | } 273 | 274 | .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-infos .file-upload-infos-inner { 275 | position: absolute; 276 | top: 50%; 277 | -webkit-transform: translate(0, -40%); 278 | -ms-transform: translate(0, -40%); 279 | transform: translate(0, -40%); 280 | -webkit-backface-visibility: hidden; 281 | backface-visibility: hidden; 282 | width: 100%; 283 | padding: 0 20px; 284 | -webkit-transition: all .2s ease; 285 | -o-transition: all .2s ease; 286 | transition: all .2s ease 287 | } 288 | 289 | .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-infos .file-upload-infos-inner p { 290 | padding: 0; 291 | margin: 0; 292 | position: relative; 293 | width: 100%; 294 | white-space: nowrap; 295 | overflow: hidden; 296 | -o-text-overflow: ellipsis; 297 | text-overflow: ellipsis; 298 | color: #fff; 299 | text-align: center; 300 | line-height: 25px; 301 | font-weight: 700 302 | } 303 | 304 | .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-infos .file-upload-infos-inner p.file-upload-infos-message { 305 | margin-top: 15px; 306 | padding-top: 15px; 307 | font-size: 12px; 308 | position: relative; 309 | opacity: .5 310 | } 311 | 312 | .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-infos .file-upload-infos-inner p.file-upload-infos-message::before { 313 | content: ""; 314 | position: absolute; 315 | top: 0; 316 | left: 50%; 317 | -webkit-transform: translate(-50%, 0); 318 | -ms-transform: translate(-50%, 0); 319 | transform: translate(-50%, 0); 320 | background: #fff; 321 | width: 30px; 322 | height: 2px 323 | } 324 | 325 | .file-upload-wrapper .card.card-body:hover .btn.btn-sm.btn-danger, 326 | .file-upload-wrapper .card.card-body:hover .file-upload-preview .file-upload-infos { 327 | opacity: 1 328 | } 329 | 330 | .file-upload-wrapper .card.card-body:hover .file-upload-preview .file-upload-infos .file-upload-infos-inner { 331 | margin-top: -5px 332 | } 333 | 334 | .file-upload-wrapper .card.card-body.touch-fallback { 335 | height: auto !important 336 | } 337 | 338 | .file-upload-wrapper .card.card-body.touch-fallback:hover { 339 | background-image: none; 340 | -webkit-animation: none; 341 | animation: none 342 | } 343 | 344 | .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview { 345 | position: relative; 346 | padding: 0 347 | } 348 | 349 | .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-render { 350 | display: block; 351 | position: relative 352 | } 353 | 354 | .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-infos .file-upload-infos-inner p.file-upload-infos-message::before, 355 | .file-upload-wrapper .card.card-body.touch-fallback.has-preview .file-upload-message { 356 | display: none 357 | } 358 | 359 | .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-render .file-upload-font-file { 360 | position: relative; 361 | -webkit-transform: translate(0, 0); 362 | -ms-transform: translate(0, 0); 363 | transform: translate(0, 0); 364 | top: 0; 365 | left: 0 366 | } 367 | 368 | .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-render .file-upload-font-file::before { 369 | margin-top: 30px; 370 | margin-bottom: 30px 371 | } 372 | 373 | .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-render img { 374 | position: relative; 375 | -webkit-transform: translate(0, 0); 376 | -ms-transform: translate(0, 0); 377 | transform: translate(0, 0) 378 | } 379 | 380 | .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-infos { 381 | position: relative; 382 | opacity: 1; 383 | background: 0 0 384 | } 385 | 386 | .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-infos .file-upload-infos-inner { 387 | position: relative; 388 | top: 0; 389 | -webkit-transform: translate(0, 0); 390 | -ms-transform: translate(0, 0); 391 | transform: translate(0, 0); 392 | padding: 5px 90px 5px 0 393 | } 394 | 395 | .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-infos .file-upload-infos-inner p { 396 | padding: 0; 397 | margin: 0; 398 | position: relative; 399 | width: 100%; 400 | white-space: nowrap; 401 | overflow: hidden; 402 | -o-text-overflow: ellipsis; 403 | text-overflow: ellipsis; 404 | color: #777; 405 | text-align: left; 406 | line-height: 25px 407 | } 408 | 409 | .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-infos .file-upload-infos-inner p.file-upload-infos-message { 410 | margin-top: 0; 411 | padding-top: 0; 412 | font-size: 18px; 413 | position: relative; 414 | opacity: 1 415 | } 416 | 417 | .file-upload-wrapper .card.card-body.touch-fallback .file-upload-message { 418 | -webkit-transform: translate(0, 0); 419 | -ms-transform: translate(0, 0); 420 | transform: translate(0, 0); 421 | padding: 40px 0 422 | } 423 | 424 | .file-upload-wrapper .card.card-body.touch-fallback .btn.btn-sm.btn-danger { 425 | top: auto; 426 | bottom: 23px; 427 | opacity: 1 428 | } 429 | 430 | .file-upload-wrapper .card.card-body.touch-fallback:hover .file-upload-preview .file-upload-infos .file-upload-infos-inner { 431 | margin-top: 5rem 432 | } 433 | 434 | .file-upload-wrapper .card.card-body .file-upload-loader { 435 | position: absolute; 436 | top: 15px; 437 | right: 15px; 438 | display: none; 439 | z-index: 9 440 | } 441 | 442 | .file-upload-wrapper .card.card-body .file-upload-loader::after { 443 | display: block; 444 | position: relative; 445 | width: 20px; 446 | height: 20px; 447 | -webkit-animation: rotate .6s linear infinite; 448 | animation: rotate .6s linear infinite; 449 | -webkit-border-radius: 100%; 450 | border-radius: 100%; 451 | border-top: 1px solid #ccc; 452 | border-bottom: 1px solid #777; 453 | border-left: 1px solid #ccc; 454 | border-right: 1px solid #777; 455 | content: "" 456 | } 457 | 458 | .file-upload-wrapper .card.card-body .file-upload-errors-container { 459 | position: absolute; 460 | left: 0; 461 | top: 0; 462 | right: 0; 463 | bottom: 0; 464 | z-index: 3; 465 | background: rgba(243, 65, 65, .8); 466 | text-align: left; 467 | visibility: hidden; 468 | opacity: 0; 469 | -webkit-transition: visibility 0s linear .15s, opacity .15s linear; 470 | -o-transition: visibility 0s linear .15s, opacity .15s linear; 471 | transition: visibility 0s linear .15s, opacity .15s linear 472 | } 473 | 474 | .file-upload-wrapper .card.card-body .file-upload-errors-container ul { 475 | padding: 10px 20px; 476 | margin: 0; 477 | position: absolute; 478 | left: 0; 479 | top: 50%; 480 | -webkit-transform: translateY(-50%); 481 | -ms-transform: translateY(-50%); 482 | transform: translateY(-50%) 483 | } 484 | 485 | .file-upload-wrapper .card.card-body .file-upload-errors-container ul li { 486 | margin-left: 20px; 487 | color: #fff; 488 | font-weight: 700 489 | } 490 | 491 | .file-upload-wrapper .card.card-body .file-upload-errors-container.visible { 492 | visibility: visible; 493 | opacity: 1; 494 | -webkit-transition-delay: 0s; 495 | -o-transition-delay: 0s; 496 | transition-delay: 0s 497 | } 498 | 499 | .file-upload-wrapper .card.card-body~.file-upload-errors-container ul { 500 | padding: 0; 501 | margin: 15px 0 502 | } 503 | 504 | .file-upload-wrapper .card.card-body~.file-upload-errors-container ul li { 505 | margin-left: 20px; 506 | color: #f34141; 507 | font-weight: 700 508 | } 509 | 510 | @-webkit-keyframes rotate { 511 | 0% { 512 | -webkit-transform: rotateZ(-360deg); 513 | transform: rotateZ(-360deg) 514 | } 515 | 516 | 100% { 517 | -webkit-transform: rotateZ(0); 518 | transform: rotateZ(0) 519 | } 520 | } 521 | 522 | @keyframes rotate { 523 | 0% { 524 | -webkit-transform: rotateZ(-360deg); 525 | transform: rotateZ(-360deg) 526 | } 527 | 528 | 100% { 529 | -webkit-transform: rotateZ(0); 530 | transform: rotateZ(0) 531 | } 532 | } --------------------------------------------------------------------------------