mirror of
https://github.com/IvarK/AntimatterDimensionsSourceCode.git
synced 2024-11-10 06:02:13 +00:00
136 lines
10 KiB
HTML
136 lines
10 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Antimatter Dimensions</title>
|
|
<link rel="icon" type="image/png" href="icon.png">
|
|
<meta name="Antimatter Dimensions" content="A game about huge numbers and watching them go up." charset="utf-8"/>
|
|
<script type="text/javascript" src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
|
|
<script type="text/javascript" src="javascripts/lib/jquery-3.2.1.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/ad-slider-component.css">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css?3">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/time-studies.css">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/tooltips.css">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/vis.css">
|
|
</head>
|
|
<body>
|
|
Tooltips are shown to assist in validation. Boundaries are shown for clarity.
|
|
<div id="ui" style="height: 100%; width: 100%; background:black;">
|
|
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
|
|
<ad-slider-component :min="-20" :max="20" :interval="1" :show="true" dot-size="2rem" width="20rem" tooltip-dir="bottom"
|
|
:value-in-dot="true" :plus-minus-buttons="true" dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg"
|
|
process-class="glyph-level-weight-slider-process"></ad-slider-component>
|
|
</div>
|
|
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
|
|
<ad-slider-component :piecewise-label="true" :label-style="{color: 'white'}" :data="['ace','b','car','doggy','ear']" :show="true" dot-width="3rem" width="20rem" tooltip-dir="top"
|
|
:value-in-dot="true" :plus-minus-buttons="true" dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg"
|
|
process-class="glyph-level-weight-slider-process"></ad-slider-component>
|
|
</div>
|
|
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
|
|
<ad-slider-component :min="-20" :max="20" :show="true" dot-size="2rem" width="20rem" tooltip-dir="bottom"
|
|
:value-in-dot="false" :plus-minus-buttons="true" dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg"
|
|
process-class="glyph-level-weight-slider-process"></ad-slider-component>
|
|
</div>
|
|
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
|
|
<ad-slider-component :min="-20" :max="20" :show="true" dot-size="2rem" width="20rem" tooltip-dir="bottom"
|
|
:value-in-dot="true" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg"
|
|
process-class="glyph-level-weight-slider-process"></ad-slider-component>
|
|
</div>
|
|
<div style="border: 1px solid red !important; display: inline-block; width: 80px">
|
|
<ad-slider-component :min="-20" :max="20" :show="true" dot-size="2rem" width="1rem" height="20rem" tooltip-dir="right"
|
|
:value-in-dot="true" direction="vertical" :plus-minus-buttons="true" dot-class="glyph-level-weight-slider-handle"
|
|
bg-class="glyph-level-weight-slider-bg" process-class="glyph-level-weight-slider-process"></ad-slider-component>
|
|
</div>
|
|
<div style="border: 1px solid red !important; display: inline-block; width: 80px">
|
|
<ad-slider-component :min="-20" :max="20" :show="true" dot-size="2rem" width="6px" height="20rem" tooltip-dir="right"
|
|
:value-in-dot="true" direction="vertical" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
|
|
bg-class="glyph-level-weight-slider-bg" process-class="glyph-level-weight-slider-process"></ad-slider-component>
|
|
</div>
|
|
<div style="border: 1px solid red !important; display: block; width: 100%">
|
|
<ad-slider-component :min="-20" :max="20" :show="true" dot-size="2rem" width="100%" height="6px" tooltip-dir="bottom"
|
|
:value-in-dot="true" direction="horizontal" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
|
|
bg-class="glyph-level-weight-slider-bg" process-class="glyph-level-weight-slider-process"></ad-slider-component>
|
|
</div>
|
|
<div style="display:block; height: 80px"></div>
|
|
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
|
|
<ad-slider-component :min="-20" :max="20" :value="[-2,2]" :show="true" dot-size="2rem" width="20rem" height="6px" tooltip-dir="bottom"
|
|
:value-in-dot="true" direction="horizontal" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
|
|
bg-class="glyph-level-weight-slider-bg" process-class="glyph-level-weight-slider-process"></ad-slider-component>
|
|
</div>
|
|
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
|
|
<ad-slider-component :min="-20" :max="20" :value="[-4,4]" :show="true" dot-size="2rem" width="20rem" height="6px" tooltip-dir="bottom"
|
|
:value-in-dot="true" direction="horizontal" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
|
|
bg-class="glyph-level-weight-slider-bg" :fixed="true" :process-draggable="true" process-class="glyph-level-weight-slider-process"></ad-slider-component>
|
|
</div>
|
|
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
|
|
<ad-slider-component :min="-20" :max="20" :value="[-4,4]" :show="true" dot-size="2rem" width="20rem" height="6px" tooltip-dir="bottom"
|
|
:value-in-dot="true" direction="horizontal" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
|
|
:disabled="true" bg-class="glyph-level-weight-slider-bg" :fixed="true" :process-draggable="true" process-class="glyph-level-weight-slider-process"></ad-slider-component>
|
|
</div>
|
|
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
|
|
<ad-slider-component :min="-20" :max="20" :value="[-2,2]" :show="true" dot-size="2rem" width="20rem" height="6px" tooltip-dir="bottom"
|
|
:value-in-dot="true" direction="horizontal" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
|
|
:enable-cross="false" bg-class="glyph-level-weight-slider-bg" process-class="glyph-level-weight-slider-process"></ad-slider-component>
|
|
</div>
|
|
<br>
|
|
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
|
|
<ad-slider-component :value="1" :min="1" :max="3" :interval="0.25" :show="true" dot-size="2rem" width="20rem" tooltip-dir="bottom"
|
|
dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg" :piecewise="true"
|
|
process-class="glyph-level-weight-slider-process">
|
|
<template slot="piecewise" slot-scope="{label}">
|
|
<div v-if="label % 0.5 == 0" style="height: 6px; width: 5rem; display:block; transform: translateX(9rem)"
|
|
:style="{background: (['white', '#43A047', '#2196F3', '#9C27B0'])[(label-1)*2]}"></div>
|
|
</template>
|
|
</ad-slider-component>
|
|
</div>
|
|
<div style="border: 1px solid red !important; display: inline-block; height: 80px; padding: 20px">
|
|
<ad-slider-component :value="1" :min="1" :max="3.5" :interval="0.125" :show="true" dot-size="4rem" width="30rem"
|
|
tooltip-dir="bottom" height="4rem" :bg-style="{'border-radius': '0.4rem !important', background:'black', 'box-sizing': 'content-box', border: '0.4rem double #0b600e'}" tooltip="never"
|
|
:slider-style="{border: '0.2rem outset gray', 'box-sizing': 'border-box', 'border-radius': '0.1rem !important', background:'black'}"
|
|
dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg" :process-style="{display: 'none'}">
|
|
<template slot="in-dot">
|
|
<div class="megaderp" style="font-size: 2.5rem; font-family: serif; color: #9C27B0;">Ξ</div>
|
|
</template>
|
|
</ad-slider-component>
|
|
</div>
|
|
<div style="border: 1px solid red !important; display: inline-block; height: 80px; padding: 20px">
|
|
<ad-slider-component :value="1" :min="1" :max="3.5" :interval="0.05" :show="true" dot-size="3rem" width="15rem"
|
|
tooltip-dir="bottom" height="3rem" :xformatter="e => ((e-1)*40).toFixed() + '%'"
|
|
:bg-style="{'border-radius': '0.1rem', background:'#0b600e', 'box-sizing': 'border-box'}" tooltip="hover"
|
|
:slider-style="{border: '0.2rem outset gray', 'box-sizing': 'border-box', 'border-radius': '0.1rem !important', background:'black'}"
|
|
dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg" :process-style="{display: 'none'}">
|
|
<template slot="in-dot">
|
|
<div class="megaderp" style="font-size: 2rem; font-family: serif; color: #9C27B0;">Ξ</div>
|
|
</template>
|
|
</ad-slider-component>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script type="text/javascript" src="javascripts/lib/vue.js"></script>
|
|
<script type="text/javascript" src="javascripts/lib/v-tooltip.min.js"></script>
|
|
<script type="text/javascript" src="javascripts/lib/vuedraggable.js"></script>
|
|
<script type="text/javascript" src="javascripts/lib/Tween.min.js"></script>
|
|
<script type="text/javascript" src="javascripts/DragDropTouch.js"></script>
|
|
<script type="text/javascript" src="javascripts/longpress.js"></script>
|
|
|
|
<script type="text/javascript" src="javascripts/core/polyfill.js"></script>
|
|
<script type="text/javascript" src="javascripts/core/extensions.js"></script>
|
|
|
|
<script type="text/javascript" src="javascripts/components/common/plus-minus-button.js"></script>
|
|
<script type="text/javascript" src="javascripts/components/common/ad-slider-component.js"></script>
|
|
|
|
<script type="text/javascript" src="javascripts/core/app/ui.init.js"></script>
|
|
<script type="text/javascript" src="javascripts/core/app/player-progress.js"></script>
|
|
<script type="text/javascript" src="javascripts/core/app/modal.js"></script>
|
|
<script type="text/javascript" src="javascripts/core/app/themes.js"></script>
|
|
|
|
<script type="text/javascript" src="javascripts/core/notations.js"></script>
|
|
|
|
<script type="text/javascript" src="javascripts/core/app/options.js"></script>
|
|
<script type="text/javascript" src="javascripts/core/event-hub.js"></script>
|
|
<script type="text/javascript" src="javascripts/core/app/ui.js"></script>
|
|
<script type="text/javascript" src="javascripts/core/app/notify.js"></script>
|
|
|
|
</html>
|