├── .gitignore ├── .gitattributes ├── banner.png ├── matisse-split.woff ├── readme.md ├── LICENSE ├── index.html ├── document.js └── document.less /.gitignore: -------------------------------------------------------------------------------- 1 | 参考/* 2 | ./* 3 | di.m4a 4 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * linguist-language=HTML 2 | -------------------------------------------------------------------------------- /banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itorr/magi/HEAD/banner.png -------------------------------------------------------------------------------- /matisse-split.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itorr/magi/HEAD/matisse-split.woff -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ![MAGI System](banner.png) 2 | 3 | # 👩🏼「MAGI System」一键决议系统 4 | 5 | 通过 `MELCHIOR`、`BALTHASAR`、`CASPER` 三大模块，虚拟人类所具有的多重身份思考模式，对案件进行智能决议。 6 | 7 | ## 地址 8 | https://lab.magiconch.com/magi/ 9 | 10 | ## 如何使用 11 | 点击鼠标或者敲击空格即可开启决议 12 | 13 | ## 功能 14 | - [x] 基础决议 15 | - [x] EX MODE 16 | - [x] 概率调整 17 | - [x] 优先级 18 | - [x] 提示音效 19 | 20 | ## 微博 21 | https://weibo.com/1197780522/LwOVxaMdO 22 | 23 | ## 字体授权 24 | https://fontworks.co.jp/products/evamatisse/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 itorr/magi 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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | MAGI System 一键決議系统 8 | 9 | 10 | 11 | 12 |

MAGI

13 |

14 |

15 |

提訴

16 |

決議

17 |

18 |

19 |

20 | Code: 21 | 22 |

23 |

24 | File: 25 | MAGI_SYS 26 |

27 |

28 | Volume: 29 | 30 |

31 |

32 | EX_MODE: 33 | 34 |

35 |

36 | Priority: 37 | 38 |

39 |

40 | Sound: 41 | 42 |

43 | RESET 44 |

45 |

46 |

47 |

48 |

MELCHIOR

49 |

50 |

51 |

52 |

53 |

BALTHASAR

54 |

55 |

56 |

CASPER

57 |

58 |

59 |

60 | 71 |

72 | 73 | 74 | -------------------------------------------------------------------------------- /document.js: -------------------------------------------------------------------------------- 1 | let device = String(navigator.userAgent.match(/steam|macos/i)).toLowerCase(); 2 | 3 | if( 4 | /iPhone|iPad|iPod/i.test(navigator.userAgent) 5 | || 6 | (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) 7 | ) device = 'ios'; 8 | 9 | document.documentElement.setAttribute('data-device',device) 10 | 11 | // console.log(navigator.userAgent) 12 | 13 | // if(device === 'ios'){ 14 | // document.documentElement.style.setProperty('--max-width', `${window.innerHeight}px`); 15 | // } 16 | 17 | 18 | 19 | const $ = s=>document.querySelector(s); 20 | const $$ = s=>[...document.querySelectorAll(s)]; 21 | const finalVoteStatusEl = $('.final-vote-status'); 22 | const casperEl = $('.casper'); 23 | const items = $$('.magi-item'); 24 | const bodyEl = document.body; 25 | 26 | 27 | 28 | 29 | const randAll = _=>{ 30 | $('.code').innerHTML = 100 + Math.floor(Math.random() * 600); 31 | }; 32 | 33 | let sound = true; 34 | const soundEl = $('.sound'); 35 | soundEl.onclick = e=>{ 36 | e.stopPropagation(); 37 | sound = !sound; 38 | soundEl.setAttribute('data-text',sound?'ON':'OFF'); 39 | }; 40 | soundEl.setAttribute('data-text',sound?'ON':'OFF'); 41 | 42 | 43 | 44 | // https://codepen.io/jonoliver/pen/NoawPv 45 | // https://tomhazledine.com/web-audio-delay/ 46 | 47 | // https://mdn.github.io/webaudio-examples/step-sequencer/ 48 | let play = _=>{ 49 | startWebAudio(); 50 | play() 51 | }; 52 | let stopAll = _=>{}; 53 | let playOscillator = _=>{} 54 | 55 | let audioCtx; 56 | 57 | let osc; 58 | let lfo; 59 | let VCO; 60 | let carrierVolume; 61 | AudioContext = (window.AudioContext||window.webkitAudioContext); 62 | let load = _=>{ 63 | // startWebAudio = _=>{}; 64 | audioCtx = new AudioContext(); 65 | 66 | audioCtx.addEventListener('close',e=>{ 67 | console.log('close') 68 | }) 69 | 70 | carrierVolume = audioCtx.createGain(); 71 | carrierVolume.gain.linearRampToValueAtTime(.5, 0); 72 | carrierVolume.connect(audioCtx.destination); 73 | } 74 | let startWebAudio = _=>{ 75 | play = function () { 76 | if(!audioCtx){ 77 | load(); 78 | } 79 | osc = audioCtx.createOscillator(); 80 | osc.type = 'sine'; 81 | osc.frequency.value = 2080; 82 | 83 | lfo = audioCtx.createOscillator(); 84 | lfo.type = 'square'; 85 | lfo.frequency.value = exMode?30:10; 86 | 87 | lfo.connect(carrierVolume.gain); 88 | osc.connect(carrierVolume);//.connect(audioCtx.destination); 89 | lfo.start(0); 90 | osc.start(0); 91 | // carrierVolume.gain.linearRampToValueAtTime(.1, 0); 92 | } 93 | 94 | playOscillator = (hz = 3400)=>{ 95 | if(!audioCtx){ 96 | load(); 97 | } 98 | 99 | VCO = audioCtx.createOscillator(); 100 | VCO.frequency.value = hz; 101 | VCO.connect(carrierVolume); 102 | VCO.start(0); 103 | VCO.stop(audioCtx.currentTime + .8); 104 | // carrierVolume.gain.linearRampToValueAtTime(.1, 0); 105 | } 106 | stopAll = _=> { 107 | try{ 108 | osc.stop(0); 109 | lfo.stop(0); 110 | }catch(e){} 111 | try{ 112 | VCO.stop(audioCtx.currentTime); 113 | }catch(e){} 114 | // audioCtx = null; 115 | } 116 | }; 117 | document.addEventListener('visibilitychange',e=>{ 118 | // console.log(document['hidden']) 119 | if( document['hidden'] ){ 120 | stopAll(); 121 | try{ 122 | audioCtx.close(); 123 | audioCtx = null; 124 | }catch(e){} 125 | }else{ 126 | 127 | } 128 | }) 129 | // document.addEventListener('touchstart',startWebAudio,{ 130 | // once:true 131 | // }) 132 | if(!AudioContext){ 133 | soundEl.setAttribute('data-text','ERR'); 134 | } 135 | 136 | 137 | 138 | let volume = 66; 139 | let reject; 140 | const one = _=>{ 141 | const voteStatus = bodyEl.getAttribute('data-status') === 'voting'?'voted':'voting'; 142 | bodyEl.setAttribute( 143 | 'data-status', 144 | voteStatus 145 | ); 146 | 147 | 148 | 149 | if(sound){ 150 | stopAll(); 151 | if(voteStatus === 'voted'){ 152 | playOscillator(reject?3400:2000); 153 | }else{ 154 | play(); 155 | } 156 | } 157 | 158 | if(voteStatus === 'voted'){ 159 | 160 | }else{ 161 | reject = (Math.random() * 100) > volume; 162 | 163 | if(reject){ 164 | items.forEach(el=>el.setAttribute('data-status','resolve')); 165 | if(Math.random() > .5){ 166 | casperEl.setAttribute('data-status','reject'); 167 | }else{ 168 | items[Math.floor(items.length*Math.random())].setAttribute('data-status','reject'); 169 | items.forEach(item=>{ 170 | if( (Math.random() * 100) > volume ){ 171 | item.setAttribute('data-status','reject'); 172 | } 173 | }); 174 | } 175 | // bodyEl.setAttribute('data-status','data-status="voted"') 176 | finalVoteStatusEl.setAttribute('data-status','reject'); 177 | }else{ 178 | items.forEach(el=>el.setAttribute('data-status','resolve')); 179 | finalVoteStatusEl.setAttribute('data-status','resolve'); 180 | } 181 | 182 | bodyEl.setAttribute('data-vote-status',reject?'reject':'resolve'); 183 | 184 | randAll() 185 | } 186 | 187 | 188 | 189 | }; 190 | randAll(); 191 | $('.magi-box').onclick = one; 192 | window.onkeydown = e=>{ 193 | const { keyCode } = e; 194 | 195 | if(keyCode === 32){ 196 | one(); 197 | } 198 | 199 | } 200 | 201 | 202 | //reset 203 | $('.reset').onclick = e=>{ 204 | e.stopPropagation(); 205 | bodyEl.removeAttribute('data-status'); 206 | } 207 | 208 | $('footer').onclick=e=>e.stopPropagation(); 209 | 210 | 211 | // ex mode 212 | let exMode = false; 213 | const exModeEl = $('.ex-mode'); 214 | exModeEl.onclick = e=>{ 215 | e.stopPropagation(); 216 | 217 | exMode = !exMode; 218 | bodyEl.setAttribute('data-ex-mode',exMode); 219 | exModeEl.setAttribute('data-text',exMode?'ON':'OFF'); 220 | }; 221 | exModeEl.setAttribute('data-text',exMode?'ON':'OFF'); 222 | 223 | // input file 224 | const fileEl = $('.file'); 225 | fileEl.onclick = e=>{ 226 | e.stopPropagation(); 227 | fileEl.innerText = prompt('INPUT FILE',fileEl.innerText) || 'MAGI_SYS'; 228 | } 229 | 230 | 231 | // volume 232 | const volumeEl = $('.volume'); 233 | const volumes = [ 234 | 1, 235 | 10, 236 | 33, 237 | 50, 238 | 66, 239 | 90, 240 | 65535, 241 | ]; 242 | volumeEl.onclick = e=>{ 243 | e.stopPropagation(); 244 | const index = volumes.indexOf(volume); 245 | 246 | let nextIndex = index + 1; 247 | 248 | if(nextIndex >= volumes.length){ 249 | nextIndex = 0; 250 | } 251 | 252 | volume = volumes[nextIndex]; 253 | 254 | volumeEl.setAttribute('data-text',volume); 255 | } 256 | 257 | // priority 258 | const priorityEl = $('.priority'); 259 | let priority = 'A'; 260 | const prioritys = [ 261 | 'E', 262 | '+++', 263 | 'A', 264 | 'AA', 265 | 'AAA', 266 | ]; 267 | priorityEl.onclick = e=>{ 268 | e.stopPropagation(); 269 | const index = prioritys.indexOf(priority); 270 | 271 | let nextIndex = index + 1; 272 | 273 | if(nextIndex >= prioritys.length){ 274 | nextIndex = 0; 275 | } 276 | 277 | priority = prioritys[nextIndex]; 278 | 279 | priorityEl.setAttribute('data-text',priority); 280 | } 281 | 282 | 283 | 284 | 285 | 286 | setTimeout(_=>{ 287 | bodyEl.removeAttribute('data-loading') 288 | },1000); 289 | 290 | 291 | 292 | window._hmt = []; 293 | window.dataLayer = [ 294 | ['js', new Date()], 295 | ['config', 'G-13BQC1VDD8'] 296 | ]; 297 | window.gtag = function(){dataLayer.push(arguments)}; 298 | 299 | const headEl = $('head'); 300 | const loadScript = (src,cb=_=>{},el) =>{ 301 | el = document.createElement('script'); 302 | el.src = src; 303 | el.onload=cb; 304 | headEl.appendChild(el); 305 | }; 306 | 307 | setTimeout(_=>{ 308 | loadScript('//hm.baidu.com/hm.js?f4e477c61adf5c145ce938a05611d5f0'); 309 | loadScript('//www.googletagmanager.com/gtag/js?id=G-13BQC1VDD8'); 310 | },400); -------------------------------------------------------------------------------- /document.less: -------------------------------------------------------------------------------- 1 | :root{ 2 | --color-orange: orange; 3 | --color-yellow: #ffff00; 4 | --color-blue: aquamarine; 5 | --color-black: #000; 6 | --color-red: #C00; 7 | --color-green:chartreuse; 8 | --body-padding: 20px; 9 | --app-height: 100vh; 10 | 11 | --flash-time: .4s; 12 | } 13 | 14 | body[data-ex-mode="true"]{ 15 | --flash-time: .1s; 16 | } 17 | 18 | @font-face { 19 | font-weight: 900; 20 | font-family: FOTMatisseProEB; 21 | src: url(matisse-split.woff); 22 | } 23 | 24 | html{ 25 | font-size:2em; 26 | line-height: 1.2; 27 | font-weight: 900; 28 | font-family: FOTMatisseProEB,'EVA-Matisse_Classic',serif; 29 | background:var(--color-orange); 30 | color: var(--color-orange); 31 | text-align: center; 32 | overflow: hidden; 33 | // background: repeating-linear-gradient( 34 | // 45deg, 35 | // var(--color-black), 36 | // var(--color-black) 1em, 37 | // var(--color-orange) 1em, 38 | // var(--color-orange) 2em 39 | // ); 40 | // animation: origin 5s infinite linear; 41 | 42 | font-variant-east-asian: proportional-width; 43 | -moz-font-feature-settings: "pwid"; 44 | -webkit-font-feature-settings: "pwid"; 45 | font-feature-settings: "pwid"; 46 | 47 | -webkit-text-size-adjust:none; 48 | } 49 | @keyframes origin { 50 | 100%{ 51 | background-position: 1em 1em; 52 | } 53 | } 54 | body{ 55 | background:var(--color-black); 56 | box-shadow: 0 0 0 var(--body-padding) var(--color-orange) inset; 57 | // margin:var(--body-padding); 58 | margin:0; 59 | box-sizing: border-box; 60 | height:var(--app-height); 61 | // height: -webkit-fill-available; 62 | position: relative; 63 | overflow: hidden; 64 | &[data-status="voted"]{ 65 | transition: none; 66 | &[data-vote-status="resolve"]{ 67 | color: var(--color-green); 68 | box-shadow: 0 0 0 var(--body-padding) var(--color-green) inset; 69 | }; 70 | &[data-vote-status="reject"]{ 71 | color: var(--color-red); 72 | box-shadow: 0 0 0 var(--body-padding) var(--color-red) inset; 73 | } 74 | } 75 | } 76 | 77 | 78 | .magi-box{ 79 | margin:var(--body-padding); 80 | padding:var(--body-padding); 81 | position: relative; 82 | box-sizing: border-box; 83 | height:calc(100% - var(--body-padding) * 2); 84 | cursor: pointer; 85 | } 86 | 87 | html[data-device="iphone"], 88 | html[data-device="ipad"], 89 | html[data-device="ipod"], 90 | html[data-device="ios"]{ 91 | --app-height:-webkit-fill-available; 92 | body{ 93 | min-height:-webkit-fill-available; 94 | // height: calc(var(--app-height) - var(--body-padding) * 4); 95 | } 96 | .magi-box{ 97 | height:-webkit-fill-available; 98 | } 99 | } 100 | 101 | h1,h2,h3,h4, 102 | p{ 103 | margin:0; 104 | } 105 | a{ 106 | color: currentColor; 107 | text-decoration: none; 108 | } 109 | ::selection{ 110 | background:none; 111 | } 112 | header{ 113 | &:after{ 114 | content: ''; 115 | display: block; 116 | clear: both; 117 | } 118 | 119 | h1{ 120 | font-size: 4em; 121 | display: inline-block; 122 | transform: scale(1,0.8); 123 | position: relative; 124 | padding:0 .1em; 125 | margin:0 .05em; 126 | letter-spacing: .1em; 127 | &:nth-child(1){ 128 | float: left; 129 | } 130 | &:nth-child(2){ 131 | float: right; 132 | } 133 | &:before, 134 | &:after{ 135 | content: ''; 136 | position: absolute; 137 | left:0; 138 | right:0; 139 | height:2px; 140 | border-radius: .5px; 141 | } 142 | &:before{ 143 | top:0; 144 | box-shadow: 145 | 0 0 0 2px currentColor, 146 | 0 -8px 0 .1px var(--color-black), 147 | 0 -8px 0 2px currentColor; 148 | } 149 | &:after{ 150 | bottom:0; 151 | box-shadow: 152 | 0 0 0 2px currentColor, 153 | 0 8px 0 .1px var(--color-black), 154 | 0 8px 0 2px currentColor; 155 | } 156 | } 157 | } 158 | .config-box{ 159 | font-weight: 200; 160 | font-family: 'Neue Helvetica',Helvetica,sans-serif; 161 | font-size:.8em; 162 | text-align: left; 163 | padding:2em .3em; 164 | 165 | text-transform:uppercase; 166 | 167 | h4{ 168 | font-size:3em; 169 | transform: scale(.6,1); 170 | transform-origin: 0 0; 171 | } 172 | p{ 173 | line-height: 1.4; 174 | transform: scale(1,1.4); 175 | b{ 176 | // margin-left:.2em; 177 | } 178 | } 179 | 180 | .reset{ 181 | visibility: hidden; 182 | display: inline-block; 183 | margin:1em 0; 184 | padding:0 .3em; 185 | line-height: 1.4; 186 | // border-radius: 1px; 187 | transform: scale(1); 188 | box-shadow: 0 0 0 .1em currentColor; 189 | } 190 | } 191 | 192 | [data-text]{ 193 | &:before{ 194 | content: attr(data-text); 195 | } 196 | } 197 | [data-text="ERR"]{ 198 | pointer-events: none; 199 | } 200 | .volume{ 201 | &:after{ 202 | content: '%'; 203 | } 204 | 205 | &[data-text="1"]{ 206 | &:before{ 207 | content:'0.0000001'; 208 | } 209 | } 210 | } 211 | .magi-logo{ 212 | position: absolute; 213 | left:0; 214 | right:0; 215 | top:0; 216 | bottom:0; 217 | margin:auto; 218 | 219 | width: 8em; 220 | height: 8em; 221 | line-height: 8em; 222 | 223 | 224 | border-radius: 9em; 225 | font-size: 2em; 226 | box-shadow:0 0 0 .18em currentColor; 227 | 228 | pointer-events: none; 229 | 230 | &:after{ 231 | display: none; 232 | content:'System'; 233 | text-transform: uppercase; 234 | font-weight: 400; 235 | font-family: 'Neue Helvetica',Helvetica,sans-serif; 236 | position: absolute; 237 | top:57%; 238 | left:0; 239 | right:0; 240 | text-align: center; 241 | line-height: 1; 242 | font-size:12px; 243 | opacity: 0; 244 | transform: scale(.4); 245 | } 246 | } 247 | .magi-list{ 248 | // position: absolute; 249 | // bottom:0; 250 | // left:0; 251 | // right:0; 252 | // padding:20px; 253 | } 254 | .magi-item{ 255 | width: 8em; 256 | height:8em; 257 | display: inline-block; 258 | box-shadow: 259 | 0 0 0 .1em var(--color-black), 260 | 0 0 0 .4em currentColor, 261 | 0 0 0 .5em var(--color-black); 262 | background:var(--color-blue); 263 | background:var(--color-green); 264 | text-align: center; 265 | padding:0; 266 | 267 | font-family: 'Neue Helvetica',Helvetica,sans-serif; 268 | h2{ 269 | font-size:4em; 270 | font-weight: 900; 271 | transform: scale(1.2 ,1); 272 | font-weight: 600; 273 | line-height: 1.5; 274 | color: var(--color-black); 275 | } 276 | h3{ 277 | font-size:1em; 278 | line-height: 2em; 279 | letter-spacing: .1em; 280 | color: var(--color-black); 281 | } 282 | 283 | position: absolute; 284 | top:50%; 285 | 286 | 287 | 288 | &.melchior{ 289 | left:50%; 290 | // transform: translate(20%,30%); 291 | transform: translate(35%,10%) rotate(-57deg); 292 | h2{ 293 | &:before{ 294 | content:'1'; 295 | } 296 | } 297 | } 298 | &.malthasar{ 299 | left:50%; 300 | transform: translate(-50%,-135%); 301 | h2{ 302 | &:before{ 303 | content:'2'; 304 | } 305 | } 306 | } 307 | &.casper{ 308 | right:50%; 309 | // transform: translate(-20%,30%); 310 | transform: translate(-35%,10%) rotate(57deg); 311 | h2{ 312 | &:before{ 313 | content:'3'; 314 | } 315 | } 316 | } 317 | 318 | } 319 | 320 | 321 | .final-vote-status{ 322 | position: absolute; 323 | font-size:2.5em; 324 | top:3.4em; 325 | right:.5em; 326 | line-height: 1; 327 | padding:.1em 0; 328 | 329 | visibility: hidden; 330 | 331 | box-shadow: 332 | 0 0 0 .03em currentColor, 333 | 0 0 0 .07em var(--color-black), 334 | 0 0 0 .1em currentColor; 335 | // border-radius: 1px; 336 | &:before{ 337 | display: inline-block; 338 | transform: scale(.85,1); 339 | } 340 | 341 | 342 | &[data-status="reject"]{ 343 | color:var(--color-red); 344 | &:before{ 345 | content: '否定'; 346 | } 347 | } 348 | 349 | &[data-status="resolve"]{ 350 | color:var(--color-green); 351 | &:before{ 352 | content: '承認'; 353 | } 354 | } 355 | } 356 | 357 | body[data-status="voting"]{ 358 | .magi-box>*{ 359 | pointer-events: none; 360 | } 361 | .magi-item{ 362 | background:var(--color-green); 363 | animation: magi-flash var(--flash-time) infinite step-end; 364 | 365 | 366 | h2{ 367 | &:before{ 368 | font-size:.6em; 369 | font-family: FOTMatisseProEB,'EVA-Matisse_Classic',serif; 370 | content: '承認'; 371 | animation: value-flash var(--flash-time) infinite step-end; 372 | } 373 | } 374 | 375 | &.melchior{ 376 | animation-delay: .1s; 377 | } 378 | &.malthasar{ 379 | animation-delay: .2s; 380 | } 381 | &.casper{ 382 | animation-delay: .3s; 383 | } 384 | 385 | 386 | } 387 | @keyframes magi-flash { 388 | // 49.9%{ background-color: var(--color-blue); } 389 | 50%{ background-color: var(--color-red); } 390 | } 391 | 392 | @keyframes value-flash { 393 | 50%{ 394 | content: '否定'; 395 | } 396 | } 397 | 398 | 399 | .final-vote-status{ 400 | visibility: visible; 401 | animation: flash var(--flash-time) infinite step-end; 402 | color: var(--color-yellow); 403 | &:before{ 404 | content: '審議中'; 405 | } 406 | } 407 | @keyframes flash { 408 | // 49.9%{ background-color: var(--color-blue); } 409 | 60%{ visibility: hidden; } 410 | } 411 | } 412 | 413 | body[data-status="voted"]{ 414 | .reset{ 415 | visibility:visible; 416 | } 417 | .final-vote-status{ 418 | visibility: visible; 419 | margin:0 .5em; 420 | } 421 | .magi-item{ 422 | 423 | h2{ 424 | &:before{ 425 | font-size:.6em; 426 | font-family: FOTMatisseProEB,'EVA-Matisse_Classic',serif; 427 | } 428 | } 429 | &[data-status="resolve"]{ 430 | background:var(--color-green); 431 | h2{ 432 | &:before{ 433 | content:'承認'; 434 | } 435 | } 436 | } 437 | &[data-status="reject"]{ 438 | background:var(--color-red); 439 | h2{ 440 | &:before{ 441 | content:'否定'; 442 | } 443 | } 444 | animation: red-flash 1s infinite ease; 445 | 446 | @keyframes red-flash { 447 | 70%{ background:#BB0000; } 448 | } 449 | } 450 | } 451 | } 452 | 453 | 454 | footer{ 455 | position: absolute; 456 | bottom:0; 457 | right:0; 458 | font-size:14px; 459 | padding:.5em .7em; 460 | } 461 | 462 | 463 | @media (max-width:1000px), (max-height:800px) { 464 | html{ 465 | font-size:1.5em; 466 | } 467 | } 468 | 469 | @media (max-width:700px), (max-height:700px){ 470 | :root{ 471 | --body-padding: 15px; 472 | } 473 | html{ 474 | font-size:1.2em; 475 | } 476 | } 477 | @media (max-width:700px){ 478 | .magi-list{ 479 | position: absolute; 480 | top: 60%; 481 | left: 50%; 482 | } 483 | .magi-logo{ 484 | top:20%; 485 | } 486 | } 487 | 488 | @media (max-width:520px), (max-height:520px){ 489 | :root{ 490 | --body-padding: 12px; 491 | } 492 | html{ 493 | font-size:.9em; 494 | } 495 | } 496 | @media (max-width:400px), (max-height:400px){ 497 | :root{ 498 | --body-padding: 10px; 499 | } 500 | html{ 501 | font-size:.8em; 502 | } 503 | } 504 | 505 | 506 | body{ 507 | transition: 508 | color 1s ease, 509 | box-shadow 1s ease; 510 | } 511 | .magi-logo{ 512 | transition: 513 | top 1s ease, 514 | transform 1s ease; 515 | &:after{ 516 | transition: 517 | opacity .5s ease; 518 | } 519 | } 520 | .magi-box{ 521 | transition: 522 | transform 1.4s ease-out, 523 | opacity .5s ease; 524 | } 525 | footer{ 526 | transition: 527 | transform .3s ease, 528 | opacity .3s ease; 529 | } 530 | body[data-loading="true"]{ 531 | box-shadow: 0 0 0 0 var(--color-orange) inset; 532 | .magi-logo{ 533 | top:0; 534 | transition:transform .3s ease; 535 | transform: scale(4,4); 536 | &:after{ 537 | opacity: 1; 538 | } 539 | } 540 | .magi-box{ 541 | transform: scale(.9); 542 | opacity: 0; 543 | } 544 | footer{ 545 | opacity: 0; 546 | transform: translate(0,10px); 547 | } 548 | } --------------------------------------------------------------------------------