breakout71/app/src/main/assets/index.html

1 line
194 KiB
HTML
Raw Normal View History

2025-03-24 12:53:09 +01:00
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Breakout 71</title><meta name="description" content="A breakout game with roguelite mechanics. Break bricks, catch coins, pick upgrades, repeat. Play for free on mobile and desktop."><link rel="manifest" href="/PWA/manifest.webmanifest"><style>*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family:Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace}body{width:100vw;height:100vh;height:calc(var(--vh,1vh)*100);color:#fff;background-size:120px 120px;background-color:var(--background1);--background1:#030c23;--background2:#03112a;margin:0;padding:0;overflow:hidden}#game{height:100vh;height:calc(var(--vh,1vh)*100);width:100vw;position:fixed;top:0;left:0}#score,#menu{z-index:1;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;font:inherit;color:#fff;text-shadow:0 0 4px rgba(0,0,0,.8);background:0 0;border:none;min-width:40px;min-height:40px;padding:10px;line-height:20px;position:absolute;top:0}#score:hover,#menu:hover,#score:focus,#menu:focus{cursor:pointer;background:rgba(0,0,0,.3)}#score{color:#fff;-o-transition:color .3s;-webkit-transition:color .3s;-o-transition:color .3s;transition:color .3s;right:0}#score.active{color:gold;-o-transition:color 10ms;-webkit-transition:color 10ms;-o-transition:color 10ms;transition:color 10ms}#menu{left:0}#FPSDisplay{z-index:1;white-space:nowrap;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.8;color:#fff;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;padding:0;line-height:20px;position:fixed;bottom:0;left:0;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}body.has-alert-open{height:auto;overflow:visible}body:not(.has-alert-open) #popup{display:none}#popup{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:flex;overflow:auto}#popup:before{z-index:10;content:"";background:rgba(0,0,0,.9);display:block;position:fixed;top:0;bottom:0;left:0;right:0}#popup>div{z-index:11;-webkit-transform-origin:50%;-moz-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:stretch;-moz-box-align:stretch;-webkit-align-items:stretch;align-items:stretch;width:100%;max-width:450px;margin:auto;padding:20px 10px;display:-webkit-box;display:-moz-box;display:-webkit-flex;display:flex;position:relative}#popup>div>*{margin:0;padding:0}#popup>div>h2,#popup>div>p{margin-bottom:20px}#popup>div>section{-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:stretch;-moz-box-align:stretch;-webkit-align-items:stretch;align-items:stretch;margin-top:20px;display:-webkit-box;display:-moz-box;display:-webkit-flex;display:flex}#popup>div>section button{font:inherit;color:#fff;cursor:pointer;text-align:left;background:rgba(0,0,0,.8);border:1px solid #fff;gap:10px;margin-top:-1px;padding:10px;display:-webkit-box;display:-moz-box;display:-webkit-flex;display:flex}#popup>div>section button:not([disabled]):hover{z-index:1;border-color:#f1d33b;position:relative}#popup>div>section button:not([disabled]):focus{z-index:1;border-color:#f1d33b;position:relative}#popup>div>section button[disabled]{opacity:.5;-webkit-filter:saturate(0);filter:saturate(0);pointer-events:none}#popup>div>section button>div{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex-grow:1;flex-grow:1}#popup>div>section button>div>em{opacity:.8;display:block}#popup>div>section button.grey-out-unless-hovered:not(:hover){opacity:.6}#popup>div>section button.grey-out-