├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── dist ├── lx-devices.js └── lx-devices.min.js ├── index.html ├── package.json ├── src └── lx-devices.js ├── static ├── css │ └── style.css ├── favicon.png └── js │ └── script.js └── test.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | index.html 2 | static/ 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Balazs Saros 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # lx-devices.js 2 | Customizable and easy to use IOS, Android and OSX device frames in one line of HTML! 3 | 4 | ## How it looks 5 | ![Imgur](http://i.imgur.com/seSABLA.png) 6 | 7 | ## Features 8 | - Easy to use, easy to customize 9 | - No icon font dependency, every icon is included as SVG 10 | - Multiple builtin box shadow 11 | - Working clock in the topbar 12 | - Lightweight: ~3KB minified and gzipped 13 | 14 | ## How to use it 15 | - Download with npm or CDN: 16 | ``` 17 | npm install lx-devices 18 | ``` 19 | ``` 20 | 21 | ``` 22 | 23 | - Include it in your html: 24 | ``` html 25 |
26 | ``` 27 | - Where the classname should be `lx-android`, `lx-ios` or `lx-osx` based on your needs 28 | - **Every data attribute is optional** 29 | - The shadow attribute accepts numbers 1 to 5 and sets a material shadow [according to this](https://codepen.io/sdthornton/pen/wBZdXq) 30 | - If you only set the height or only the width the other value will be 16/9 or 3/2 proportion to that. (for Android/IOS 31 | and OSX relatively) 32 | - If you don't provide neither width nor height attribute itt will set to 225px width and 400px height for Android/IOS 33 | and 480px width 320px height for OSX 34 | - You can also use the `data-title` attribute for OSX to set the window's title 35 | - The font is set to Roboto and defaults to sans-serif, so if you include Roboto in your project it will set itself to it 36 | - If you want to target the topbar bottombar or the screen on the devices with your CSS you can do that with the 37 | `lx-topbar`, `lx-bottombar` and `lx-screen` respectively 38 | 39 | ## Other 40 | - If you have any question, suggestion or found a bug please open an issue 41 | - You can contact me at [balazs.saros@gmail.com](mailto:balazs.saros@gmail.com) 42 | -------------------------------------------------------------------------------- /dist/lx-devices.js: -------------------------------------------------------------------------------- 1 | function getWidth(width, height, ratio, defaultWidth){ 2 | if (width) return width; 3 | if (height) { 4 | var splitHeight = height.split(/(\d+)/); // if input is "100px" this return ['', '100', 'px'] 5 | return parseInt(splitHeight[1], 10) * ratio + splitHeight[2]; 6 | } 7 | return defaultWidth; 8 | } 9 | 10 | function getHeight(width, height, ratio, defaultHeight){ 11 | if (height) return height; 12 | if (width) { 13 | var splitWidth = width.split(/(\d+)/); // if input is "100px" this return ['', '100', 'px'] 14 | return parseInt(splitWidth[1], 10) * ratio + splitWidth[2]; 15 | } 16 | return defaultHeight; 17 | } 18 | 19 | function getTopbar(inner, bgColor, color, justifyContent){ 20 | return '
' + inner + '
'; 21 | } 22 | 23 | function getBottombar(){ 24 | var svgBack2 = ' '; 25 | var svgHome = ' '; 26 | var svgMenu = ' '; 27 | 28 | return '
' + svgBack2 + svgHome + svgMenu + '
'; 29 | } 30 | 31 | function getScreen(inner, isBottomRounded){ 32 | var rounded = isBottomRounded ? 'border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;' : ''; 33 | return '
' + inner + '
'; 34 | } 35 | 36 | function getAndroidIcons(){ 37 | var svgWifi = ' '; 38 | var svgCell = ' '; 39 | var svgBattery = ' '; 40 | return svgWifi + svgCell + svgBattery; 41 | } 42 | 43 | var TIME = ''; 44 | 45 | var osxIcons = '
'; 46 | 47 | var svgWifi = ' '; 48 | 49 | var svgBattery = ''; 50 | 51 | 52 | var iosTopleft = '
' + svgWifi + ''; 53 | var iosTopright = '100%' + svgBattery + ''; 54 | 55 | var shadowList = [ 56 | "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)", 57 | "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)", 58 | "0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)", 59 | "0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)", 60 | "0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)", 61 | "0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)" 62 | ]; 63 | 64 | function generalOperation(node){ 65 | if(node.dataset.shadow){ 66 | node.style.boxShadow = shadowList[parseInt(node.dataset.shadow, 10) + 1]; 67 | } 68 | node.style.display = "flex"; 69 | node.style.flexDirection = "column"; 70 | } 71 | 72 | var android = document.getElementsByClassName('lx-android'); 73 | var ios = document.getElementsByClassName('lx-ios'); 74 | var osx = document.getElementsByClassName('lx-osx'); 75 | 76 | for(var i = 0; i < android.length; i++){ 77 | generalOperation(android[i]); 78 | 79 | android[i].style.width = getWidth(android[i].dataset.width, android[i].dataset.height, 9/16, "225px"); 80 | android[i].style.height = getHeight(android[i].dataset.width, android[i].dataset.height, 16/9, "400px"); 81 | var topbar = getTopbar(getAndroidIcons() + TIME, '#13171a', 'white', 'flex-end'); 82 | android[i].innerHTML = topbar + getScreen(android[i].innerHTML, false) + getBottombar(); 83 | } 84 | 85 | for(var i = 0; i < ios.length; i++){ 86 | generalOperation(ios[i]); 87 | 88 | ios[i].style.width = getWidth(ios[i].dataset.width, ios[i].dataset.height, 9/16, "225px"); 89 | ios[i].style.height = getHeight(ios[i].dataset.width, ios[i].dataset.height, 16/9, "400px"); 90 | var topbar = getTopbar(iosTopleft + TIME + iosTopright, '#f7f7f7', 'black', 'space-between'); 91 | ios[i].innerHTML = topbar + getScreen(ios[i].innerHTML, true); 92 | } 93 | 94 | for(var i = 0; i < osx.length; i++){ 95 | generalOperation(osx[i]); 96 | 97 | osx[i].style.width = getWidth(osx[i].dataset.width, osx[i].dataset.height, 3/2, "480px"); 98 | osx[i].style.height = getHeight(osx[i].dataset.width, osx[i].dataset.height, 2/3, "320px"); 99 | var osxTitle = osx[i].dataset.title ? '' + osx[i].dataset.title + '' : ''; 100 | var topbar = getTopbar(osxIcons + osxTitle + '', '#f0f0f5', 'black', 'space-between'); 101 | osx[i].innerHTML = topbar + getScreen(osx[i].innerHTML, true); 102 | } 103 | 104 | function checkTime(i) { 105 | if (i < 10) { 106 | i = "0" + i; 107 | } 108 | return i; 109 | } 110 | function startTime() { 111 | var today = new Date(); 112 | var h = today.getHours(); 113 | var m = today.getMinutes(); 114 | m = checkTime(m); 115 | var clocks = document.getElementsByClassName('lx-time'); 116 | for (var i = 0; i < clocks.length; i++) { 117 | clocks[i].innerHTML = h + ":" + m; 118 | } 119 | setTimeout(function () { 120 | startTime(); 121 | }, 20 * 1000); 122 | } 123 | 124 | if(android.length + ios.length + osx.length > 0) { 125 | startTime(); 126 | } 127 | -------------------------------------------------------------------------------- /dist/lx-devices.min.js: -------------------------------------------------------------------------------- 1 | function getWidth(width,height,ratio,defaultWidth){if(width)return width;if(height){var splitHeight=height.split(/(\d+)/);return parseInt(splitHeight[1],10)*ratio+splitHeight[2]}return defaultWidth}function getHeight(width,height,ratio,defaultHeight){if(height)return height;if(width){var splitWidth=width.split(/(\d+)/);return parseInt(splitWidth[1],10)*ratio+splitWidth[2]}return defaultHeight}function getTopbar(inner,bgColor,color,justifyContent){return'
'+inner+"
"}function getBottombar(){var svgBack2=' ';var svgHome=' ';var svgMenu=' ';return'
'+svgBack2+svgHome+svgMenu+"
"}function getScreen(inner,isBottomRounded){var rounded=isBottomRounded?"border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;":"";return'
'+inner+"
"}function getAndroidIcons(){var svgWifi=' ';var svgCell=' ';var svgBattery=' ';return svgWifi+svgCell+svgBattery}var TIME='';var osxIcons='
';var svgWifi=' ';var svgBattery='';var iosTopleft='
'+svgWifi+"";var iosTopright='100%'+svgBattery+"";var shadowList=["0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)","0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)","0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)","0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)","0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)","0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)"];function generalOperation(node){if(node.dataset.shadow){node.style.boxShadow=shadowList[parseInt(node.dataset.shadow,10)+1]}node.style.display="flex";node.style.flexDirection="column"}var android=document.getElementsByClassName("lx-android");var ios=document.getElementsByClassName("lx-ios");var osx=document.getElementsByClassName("lx-osx");for(var i=0;i'+osx[i].dataset.title+"":"";var topbar=getTopbar(osxIcons+osxTitle+"","#f0f0f5","black","space-between");osx[i].innerHTML=topbar+getScreen(osx[i].innerHTML,true)}function checkTime(i){if(i<10){i="0"+i}return i}function startTime(){var today=new Date;var h=today.getHours();var m=today.getMinutes();m=checkTime(m);var clocks=document.getElementsByClassName("lx-time");for(var i=0;i0){startTime()} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | lx-devices.js 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

lx-devices.js  

16 |
Customizable and easy to use IOS, Android and OSX device frames in one line of HTML!
17 |
18 |
19 | 20 | 21 | 22 |
23 |
24 |
25 | 26 |
27 |
28 |

Get going in 20 seconds:

29 |
    30 |
  • Download with npm or CDN
    • 31 | npm install lx-devices 32 | <script src="https://cdn.rawgit.com/balzss/lx-devices/2e0606ed/dist/lx-devices.min.js"></script> 33 |
  • Include it in your html:
    • 34 | <div class="lx-android" data-width="225px" 35 | data-height="400px" data-shadow="3"></div> 36 |
  • Every data attribute is optional
    • 37 |
  • If you only set the height or only the width the other value will be 16/9 proportion to that
    • 38 |
  • The shadow option accepts numbers 1-5 and sets a material box shadow accordingly
    • 39 |
  • More info at GitHub
    • 40 |
41 | 42 |
43 |
44 |
45 | 46 |
47 |
48 |

Get going in 20 seconds:

49 |
    50 |
  • Download with npm or CDN
    • 51 | npm install lx-devices 52 | <script src="https://cdn.rawgit.com/balzss/lx-devices/2e0606ed/dist/lx-devices.min.js"></script> 53 |
  • Include it in your html:
    • 54 | <div class="lx-ios" data-width="225px" 55 | data-height="400px" data-shadow="3"></div> 56 |
  • Every data attribute is optional
    • 57 |
  • If you only set the height or only the width the other value will be 16/9 proportion to that
    • 58 |
  • The shadow option accepts numbers 1-5 and sets a material box shadow accordingly
    • 59 |
  • More info at GitHub
    • 60 |
61 | 62 |
63 |
64 |
65 | 66 |
67 |
68 |

Get going in 20 seconds:

69 |
    70 |
  • Download with npm or CDN
    • 71 | npm install lx-devices 72 | <script src="https://cdn.rawgit.com/balzss/lx-devices/2e0606ed/dist/lx-devices.min.js"></script> 73 |
  • Include it in your html:
    • 74 | <div class="lx-osx" data-title="instructions.html" data-shadow="3" 75 | data-height="400px" data-width="225px"></div> 76 |
  • Every data attribute is optional
    • 77 |
  • If you only set the height or only the width the other value will be 3/2 proportion to that
    • 78 |
  • The shadow option accepts numbers 1-5 and sets a material box shadow accordingly
    • 79 |
  • The data-title attribute sets the title of the window
    • 80 |
  • More info at GitHub
    • 81 |
82 |
83 | 84 | 85 |
86 | 102 |
103 |
104 | 105 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lx-devices", 3 | "version": "1.0.1", 4 | "description": "Customizable and easy to use IOS, Android and OSX device frames in one line of HTML!", 5 | "main": "lx-devices.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "uglifyjs src/lx-devices.js --output dist/lx-devices.min.js && cp src/lx-devices.js dist/lx-devices.js" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/balzss/lx-devices.git" 13 | }, 14 | "keywords": [ 15 | "device", 16 | "mobile", 17 | "android", 18 | "osx", 19 | "ios", 20 | "html" 21 | ], 22 | "author": "Balazs Saros", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/balzss/lx-devices/issues" 26 | }, 27 | "homepage": "https://github.com/balzss/lx-devices#readme" 28 | } 29 | -------------------------------------------------------------------------------- /src/lx-devices.js: -------------------------------------------------------------------------------- 1 | function getWidth(width, height, ratio, defaultWidth){ 2 | if (width) return width; 3 | if (height) { 4 | var splitHeight = height.split(/(\d+)/); // if input is "100px" this return ['', '100', 'px'] 5 | return parseInt(splitHeight[1], 10) * ratio + splitHeight[2]; 6 | } 7 | return defaultWidth; 8 | } 9 | 10 | function getHeight(width, height, ratio, defaultHeight){ 11 | if (height) return height; 12 | if (width) { 13 | var splitWidth = width.split(/(\d+)/); // if input is "100px" this return ['', '100', 'px'] 14 | return parseInt(splitWidth[1], 10) * ratio + splitWidth[2]; 15 | } 16 | return defaultHeight; 17 | } 18 | 19 | function getTopbar(inner, bgColor, color, justifyContent){ 20 | return '
' + inner + '
'; 21 | } 22 | 23 | function getBottombar(){ 24 | var svgBack2 = ' '; 25 | var svgHome = ' '; 26 | var svgMenu = ' '; 27 | 28 | return '
' + svgBack2 + svgHome + svgMenu + '
'; 29 | } 30 | 31 | function getScreen(inner, isBottomRounded){ 32 | var rounded = isBottomRounded ? 'border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;' : ''; 33 | return '
' + inner + '
'; 34 | } 35 | 36 | function getAndroidIcons(){ 37 | var svgWifi = ' '; 38 | var svgCell = ' '; 39 | var svgBattery = ' '; 40 | return svgWifi + svgCell + svgBattery; 41 | } 42 | 43 | var TIME = ''; 44 | 45 | var osxIcons = '
'; 46 | 47 | var svgWifi = ' '; 48 | 49 | var svgBattery = ''; 50 | 51 | 52 | var iosTopleft = '
' + svgWifi + ''; 53 | var iosTopright = '100%' + svgBattery + ''; 54 | 55 | var shadowList = [ 56 | "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)", 57 | "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)", 58 | "0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)", 59 | "0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)", 60 | "0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)", 61 | "0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)" 62 | ]; 63 | 64 | function generalOperation(node){ 65 | if(node.dataset.shadow){ 66 | node.style.boxShadow = shadowList[parseInt(node.dataset.shadow, 10) + 1]; 67 | } 68 | node.style.display = "flex"; 69 | node.style.flexDirection = "column"; 70 | } 71 | 72 | var android = document.getElementsByClassName('lx-android'); 73 | var ios = document.getElementsByClassName('lx-ios'); 74 | var osx = document.getElementsByClassName('lx-osx'); 75 | 76 | for(var i = 0; i < android.length; i++){ 77 | generalOperation(android[i]); 78 | 79 | android[i].style.width = getWidth(android[i].dataset.width, android[i].dataset.height, 9/16, "225px"); 80 | android[i].style.height = getHeight(android[i].dataset.width, android[i].dataset.height, 16/9, "400px"); 81 | var topbar = getTopbar(getAndroidIcons() + TIME, '#13171a', 'white', 'flex-end'); 82 | android[i].innerHTML = topbar + getScreen(android[i].innerHTML, false) + getBottombar(); 83 | } 84 | 85 | for(var i = 0; i < ios.length; i++){ 86 | generalOperation(ios[i]); 87 | 88 | ios[i].style.width = getWidth(ios[i].dataset.width, ios[i].dataset.height, 9/16, "225px"); 89 | ios[i].style.height = getHeight(ios[i].dataset.width, ios[i].dataset.height, 16/9, "400px"); 90 | var topbar = getTopbar(iosTopleft + TIME + iosTopright, '#f7f7f7', 'black', 'space-between'); 91 | ios[i].innerHTML = topbar + getScreen(ios[i].innerHTML, true); 92 | } 93 | 94 | for(var i = 0; i < osx.length; i++){ 95 | generalOperation(osx[i]); 96 | 97 | osx[i].style.width = getWidth(osx[i].dataset.width, osx[i].dataset.height, 3/2, "480px"); 98 | osx[i].style.height = getHeight(osx[i].dataset.width, osx[i].dataset.height, 2/3, "320px"); 99 | var osxTitle = osx[i].dataset.title ? '' + osx[i].dataset.title + '' : ''; 100 | var topbar = getTopbar(osxIcons + osxTitle + '', '#f0f0f5', 'black', 'space-between'); 101 | osx[i].innerHTML = topbar + getScreen(osx[i].innerHTML, true); 102 | } 103 | 104 | function checkTime(i) { 105 | if (i < 10) { 106 | i = "0" + i; 107 | } 108 | return i; 109 | } 110 | function startTime() { 111 | var today = new Date(); 112 | var h = today.getHours(); 113 | var m = today.getMinutes(); 114 | m = checkTime(m); 115 | var clocks = document.getElementsByClassName('lx-time'); 116 | for (var i = 0; i < clocks.length; i++) { 117 | clocks[i].innerHTML = h + ":" + m; 118 | } 119 | setTimeout(function () { 120 | startTime(); 121 | }, 20 * 1000); 122 | } 123 | 124 | if(android.length + ios.length + osx.length > 0) { 125 | startTime(); 126 | } 127 | -------------------------------------------------------------------------------- /static/css/style.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | height: 100%; 3 | overflow: hidden; 4 | } 5 | body { 6 | background-color: #e2e1e0; 7 | font-family: 'Open Sans', sans-serif; 8 | margin: 0; 9 | line-height: 1.6rem; 10 | } 11 | 12 | .title { 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | text-align: center; 17 | } 18 | h1 { 19 | font-size: 2rem; 20 | font-weight: 300; 21 | margin: 18px 0; 22 | } 23 | xmp { 24 | margin: 0; 25 | } 26 | xmp.code { 27 | margin: 0.4rem 0; 28 | background-color: #f5f5f5; 29 | padding: 2px 8px; 30 | border-left: 4px solid #777; 31 | overflow: auto; 32 | } 33 | 34 | #container { 35 | overflow: hidden; 36 | display: flex; 37 | width: 300%; 38 | height: 100%; 39 | transition: margin-left 0.45s ease; 40 | justify-content: space-around; 41 | } 42 | .innerContainer { 43 | max-width: 900px; 44 | height: 100%; 45 | margin: 12px 0; 46 | display: flex; 47 | justify-content: space-around; 48 | } 49 | 50 | .menu { 51 | max-width: 600px; 52 | margin: 24px auto 32px auto; 53 | display: flex; 54 | justify-content: space-around; 55 | } 56 | 57 | .menu button:hover, .menu button.active { 58 | opacity: 1; 59 | font-weight: 400; 60 | } 61 | .menu button { 62 | font-weight: 300; 63 | border: none; 64 | color: black; 65 | outline: none; 66 | cursor: pointer; 67 | font-size: inherit; 68 | text-decoration: underline; 69 | background-color: inherit; 70 | opacity: 0.4; 71 | } 72 | 73 | .lx-ios .lx-screen, .lx-android .lx-screen{ 74 | background-color: #aaa; 75 | } 76 | .lx-ios, .lx-android { 77 | border-radius: 3px; 78 | } 79 | 80 | .lx-osx > div { 81 | background-color: white; 82 | } 83 | .lx-osx { 84 | border-radius: 5px; 85 | margin: 0 100px; 86 | } 87 | .description h3 { 88 | margin: 0; 89 | } 90 | .description { 91 | width: 60%; 92 | } 93 | .opac { 94 | opacity: 0.5; 95 | } 96 | 97 | .osx-desktop .description{ 98 | padding: 8px 16px; 99 | width: 100%; 100 | box-sizing: border-box; 101 | } 102 | 103 | .gh-link:hover { 104 | opacity: 1; 105 | } 106 | 107 | .gh-link { 108 | color: rebeccapurple; 109 | opacity: 0.7; 110 | } 111 | 112 | 113 | @media screen and (max-width: 900px) { 114 | body, html { 115 | overflow: auto; 116 | } 117 | .title { 118 | width: 90%; 119 | margin: 24px auto; 120 | } 121 | .menu { 122 | display: none; 123 | } 124 | .description { 125 | width: 90%; 126 | margin: 18px auto; 127 | word-wrap: break-word; 128 | } 129 | 130 | #container { 131 | height: auto; 132 | width: 100%; 133 | display: block; 134 | } 135 | .lx-android, .lx-ios, .lx-osx { 136 | margin: 0 auto; 137 | } 138 | 139 | .innerContainer { 140 | flex-direction: column; 141 | } 142 | .osx-mobile { 143 | display: block !important; 144 | } 145 | .osx-desktop { 146 | display: none !important; 147 | } 148 | .mobile-title { 149 | display: block !important; 150 | text-align: center; 151 | } 152 | } 153 | -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/balzss/lx-devices/8ef94059f45e6400c186a6aa787f47a768e51cbd/static/favicon.png -------------------------------------------------------------------------------- /static/js/script.js: -------------------------------------------------------------------------------- 1 | function shift(x){ 2 | var b = document.getElementsByClassName('menuBtn'); 3 | for (var i = 0; i < b.length; i++) 4 | b[i].classList.remove('active'); 5 | b[x].classList.add('active'); 6 | var container = document.getElementById('container'); 7 | container.style.marginLeft = '-' + x + '00%'; 8 | } 9 | 10 | -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | test 6 | 7 | 31 | 32 |
33 |
34 |
35 |
36 |
37 | 38 | 39 | 40 | --------------------------------------------------------------------------------