breakout71/dist/index.html

1 line
168 KiB
HTML
Raw Normal View History

2025-03-19 14:31:14 +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:absolute;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}.popup{z-index:10;background:rgba(0,0,0,.9);display:-webkit-box;display:-moz-box;display:-webkit-flex;display:flex;position:fixed;top:0;bottom:0;left:0;right:0;overflow:auto}.popup>div{-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}.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-unless-hovered:not(:hover) img{-webkit-filter:saturate(0);filter:saturate(0)}.popup.actionsAsGrid>div{max-width:800px}.popup.actionsAsGrid>div section{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.popup button.close-modale{color:#fff;cursor:pointer;background:0 0;border:none;width:60px;height:60px;position:absolute;top:0;right:0;overflow:hidden}.popup button.close-modale:before{content:"+";font-size:80px;display:inline-block;position:absolute;top:34px;left:26px;-webkit-transform:translate(-50%,-50%)rotate(45deg);-moz-transform:translate(-50%,-50%)rotate(45deg);-ms-transfo