diff --git a/README.md b/README.md index c645ab11..bc7032f4 100644 --- a/README.md +++ b/README.md @@ -1,103 +1,91 @@ -!["The Evolution of Trust"](https://i.imgur.com/kde760y.png) - -# PLAY IT HERE: [http://ncase.me/trust/](http://ncase.me/trust/) - -*The Evolution of Trust* is dedicated to the public domain, and is made thanks to the many Creative Commons & open source resources out there! Here is a full list of music, sounds, and code used: - -**Music:** "Bleu" by Komiku (CC Zero). [Download their full album on Free Music Archive](http://freemusicarchive.org/music/Komiku/Its_time_for_adventure_/) - -**Sound Effects:** - -* [Coin insert](https://freesound.org/people/bassmosphere/sounds/384700/) by bassmosphere (CC Zero) -* [Coin get!](https://freesound.org/people/plasterbrain/sounds/242857/) by plasterbrain (CC Zero) -* [Evil Laugh](https://freesound.org/people/JohnsonBrandEditing/sounds/173933/) by JohnsonBrandEditing (CC Zero) -* [Slot machine](https://freesound.org/people/lukaso/sounds/69689/) by lukaso (CC Sampling+) -* [Drumroll](https://freesound.org/people/adriann/sounds/191718/) by adriann (CC Zero) -* [click plink pop boop bonk](https://freesound.org/people/Owdeo/sounds/116653/) by Owdeo (CC BY-NC) -* [Swoosh](https://freesound.org/people/aglinder/sounds/264468/) by aglinder (CC Zero) -* [Squeaky Toy](https://freesound.org/people/survivalzombie/sounds/240015/) by survivalzombie (CC Zero) -* [Thump](https://freesound.org/people/Brokenphono/sounds/344149/) by Brokenphono (CC Zero) -* [Fart](https://freesound.org/people/DSISStudios/sounds/241000/) by DSISStudios (CC Zero) - -**Open Source Libraries:** - -* [PIXI.js](http://www.pixijs.com/) for rendering graphics -* [Howler.js](https://howlerjs.com/) for the audio -* [Tween.js](http://www.createjs.com/tweenjs) for tweening animation -* [Balloon.css](https://kazzkiq.github.io/balloon.css/) for pop-up tooltips -* [Q](https://github.com/kriskowal/q/) for promises -* [MinPubSub](https://github.com/daniellmb/MinPubSub) for publish/subscribe -* [Pegasus](https://github.com/typicode/pegasus) for me being too lazy to write my own XHR - -**Font:** [Futura Handwritten](http://www.dafont.com/futurahandwritten.font) by Bill Snyder - -# How-To: Translate this thang! - -**[IMPORTANT: -BEFORE YOU DECIDE TO MAKE A TRANSLATION, CHECK THE "ISSUES" TAB ABOVE, -TO SEE IF SOMEONE ELSE IS ALREADY WORKING ON IT. -If so, maybe you can collaborate! -And if no one else is, PLEASE CREATE A NEW ISSUE in this repo -so that others know you're working on it!]** - -Translations done so far: -[Japanese](https://htlife.github.io/trust_jp/), -[Chinese (Simplified)](https://sekai.co/trust/), -[Chinese (Taiwan)](https://audreyt.github.io/trust-zh-TW/), -[Brazilian Portuguese](https://brunolemos.github.io/trust/), -[French](https://ayowel.github.io/trust/), -[Spain Spanish](https://ccamara.github.io/trust/), -[Latin American Spanish](https://maeriens.github.io/trust/), -[Russian](https://notdotteam.github.io/trust/), -[German](https://jkoelling.github.io/trust/), -[Italian](https://lvdt.github.io/trust/), -[Turkish](https://osaatcioglu.github.io/trust), -[Polish](https://sin.github.io/trust/), -[Vietnamese](https://nghiatt90.github.io/trust-vn/), -[Greek](https://lightspot21.github.io/trust/), -[Persian/Farsi](https://hamed.github.io/trust/), -[Hungarian](http://ncase.me/trust-hu/), -[Catalan](https://fbricart.github.io/trust/), -[Arabic](https://mudaraljundi.github.io/trust/), -[Bulgarian](http://ncase.me/trust-bg/), -[Korean](https://osori.github.io/trust-ko/), -[Romanian](https://enfactorial.github.io/trust/), -[Ukrainian](https://yaroslav-f.github.io/trust/), -[Croatian](http://www.varljiv.org/evolucija-povjerenja/index.html), -[Swedish](http://trust.alicedarner.se/), -[Estonian](http://ncase.me/trust-et/), -[Czech](https://nextghost.github.io/trust/), -[Latvian](https://reversedfate.github.io/trust/), -[Dutch](https://rayraz.github.io/trust/), -[Finnish](https://1luap.github.io/trust/), -[Danish](https://mok0.github.io/trust/), -[Bahasa Indonesia](https://chairulakmal.github.io/trust/) -[Albanian](https://kreshnik.github.io/trust/), -[Macedonian](https://stosto2.github.io/trust/), -[Slovenian](https://matejko124.github.io/trust/), -[Armenian](https://kamee.gitlab.io/trust/), -[Filipino (Tagalog)](https://tiwalaph.github.io/TiwalaPH/), -[Esperanto](https://januscahill.github.io/trust/), -[Thai](http://myhtmlcopy.epizy.com/trust/) - -**Step 1)** Fork or download this repo -(if you're forking it, be sure to make sure *your* repo is on a branch called `gh-pages`, so that GitHub can automatically generate a webpage for it!) - -**Step 2)** Translate the following files: - -`index.html` -- The title & social sharing text (a few words) -`words.html` -- All the words for the interactive itself (~3,300 words) -(optional) `notes/index.html` -- The footnotes (~1,100 words) -(optional) `peeps/index.html` -- The full credits (a few words) - -**Step 3)** Remember to test your translation! You can test things locally using [http-server](https://www.npmjs.com/package/http-server) or [MAMP](https://www.mamp.info/en/). - -**Step 4)** Email me with a link to your forked repo / the translated files, at `N {{at}} NCASE {{dot}} ME` There may be a few things here and there we need to fix! (also, if you run into any issues, please email me as well! I may take a while to respond since I'm away the next couple weeks) - -**Step 5)** Wait for me to stop being busy and/or lazy and actually link your translated version from the main English version - -**Step 6)** Party! 🎉 - -# "LICENSE" - -[Creative Commons Zero](https://github.com/ncase/trust/blob/gh-pages/LICENSE): it's a public domain dedication, so basically, do whatever you want! Attribution is super appreciated, but I'm not gonna send legal goons after you or anything. +# Ishonchning evolyutsiyasi (O‘zbek tilida) + +!["Ishonchning evolyutsiyasi"](https://i.imgur.com/kde760y.png) + +## O‘YINNI BU YERDA O‘YNANG: [https://farrux05-ai.github.io/O-yin-nazariyasi/](https://farrux05-ai.github.io/O-yin-nazariyasi/) + +*Ishonchning evolyutsiyasi* – bu Nicky Case tomonidan yaratilgan interaktiv o‘yin bo‘lib, odamlar nima uchun va qanday qilib bir-biriga ishonishi haqidagi o‘yin nazariyasini tushuntiradi. Ushbu o‘yin jamoat mulki sifatida taqdim etilgan va ko‘plab Creative Commons va ochiq manba resurslari yordamida yaratilgan. Bu repositoriy o‘yinning o‘zbek tiliga tarjima qilingan versiyasini o‘z ichiga oladi. + +--- + +## Loyiha haqida + +Ushbu loyiha Nicky Case’ning asl “The Evolution of Trust” o‘yinining ([http://ncase.me/trust/](http://ncase.me/trust/)) o‘zbek tiliga tarjimasidir. O‘yin odamlar o‘rtasidagi ishonch dinamikasini o‘yin nazariyasi orqali tushuntiradi va interaktiv shaklda taqdim etadi. O‘zbek tilidagi versiya o‘zbek foydalanuvchilari uchun o‘yinni yanada qulay va tushunarli qilish maqsadida yaratildi. + +### Tarjima qilingan fayllar: +- `index.html`: Sarlavha, ijtimoiy tarmoqlarda ulashish matni va meta teglar. +- `words.html`: O‘yin uchun asosiy matnlar (~3,300 so‘z). +- `notes/index.html`: Izohlar (~1,100 so‘z, ixtiyoriy). +- `peeps/index.html`: Kreditlar va homiylar ro‘yxati (bir necha so‘z, ixtiyoriy). + +Tarjimachi: Farruxbek Valijonov. +Tarjima Nicky Case’ning ko‘rsatmalariga ([https://github.com/ncase/trust#how-to-translate-this-thang](https://github.com/ncase/trust#how-to-translate-this-thang)) asosan amalga oshirildi. + +--- + +## Qanday sinab ko‘rish mumkin? + +1. O‘zbek tilidagi versiyani [https://farrux05-ai.github.io/O-yin-nazariyasi/](https://farrux05-ai.github.io/O-yin-nazariyasi/) manzilida o‘ynang. +2. Mahalliy sinov uchun: + - Repositoriyni klonlang yoki yuklab oling: `git clone https://github.com/farrux05-ai/O-yin-nazariyasi.git` + - [http-server](https://www.npmjs.com/package/http-server) yoki [MAMP](https://www.mamp.info/en/) yordamida mahalliy server o‘rnating. + - Brauzerda `index.html` faylini oching va tarjimalarni tekshiring. + +--- + +## Resurslar va kreditlar + +O‘yin quyidagi Creative Commons va ochiq manba resurslari yordamida yaratilgan: + +### Musiqa: +- **"Bleu"** by Komiku (CC Zero). [To‘liq albomni Free Music Archive’dan yuklab oling](http://freemusicarchive.org/music/Komiku/Its_time_for_adventure_/) + +### Ovoz effektlari: +- [Coin insert](https://freesound.org/people/bassmosphere/sounds/384700/) by bassmosphere (CC Zero) +- [Coin get!](https://freesound.org/people/plasterbrain/sounds/242857/) by plasterbrain (CC Zero) +- [Evil Laugh](https://freesound.org/people/JohnsonBrandEditing/sounds/173933/) by JohnsonBrandEditing (CC Zero) +- [Slot machine](https://freesound.org/people/lukaso/sounds/69689/) by lukaso (CC Sampling+) +- [Drumroll](https://freesound.org/people/adriann/sounds/191718/) by adriann (CC Zero) +- [click plink pop boop bonk](https://freesound.org/people/Owdeo/sounds/116653/) by Owdeo (CC BY-NC) +- [Swoosh](https://freesound.org/people/aglinder/sounds/264468/) by aglinder (CC Zero) +- [Squeaky Toy](https://freesound.org/people/survivalzombie/sounds/240015/) by survivalzombie (CC Zero) +- [Thump](https://freesound.org/people/Brokenphono/sounds/344149/) by Brokenphono (CC Zero) +- [Fart](https://freesound.org/people/DSISStudios/sounds/241000/) by DSISStudios (CC Zero) + +### Ochiq manba kutubxonalari: +- [PIXI.js](http://www.pixijs.com/) – grafiklarni render qilish uchun +- [Howler.js](https://howlerjs.com/) – audio uchun +- [Tween.js](http://www.createjs.com/tweenjs) – animatsiya uchun +- [Balloon.css](https://kazzkiq.github.io/balloon.css/) – pop-up tooltiplar uchun +- [Q](https://github.com/kriskowal/q/) – promise’lar uchun +- [MinPubSub](https://github.com/daniellmb/MinPubSub) – publish/subscribe uchun +- [Pegasus](https://github.com/typicode/pegasus) – XHR yozishdan qochish uchun + +### Shrift: +- [Futura Handwritten](http://www.dafont.com/futurahandwritten.font) by Bill Snyder + +--- + +## Tarjima jarayoni + +O‘zbek tiliga tarjima Nicky Case’ning ko‘rsatmalariga asosan quyidagi bosqichlarda amalga oshirildi: +1. Asl repositoriy ([https://github.com/ncase/trust](https://github.com/ncase/trust)) fork qilindi va `gh-pages` shoxasida ish olib borildi. +2. Quyidagi fayllar tarjima qilindi: `index.html`, `words.html`, `notes/index.html`, `peeps/index.html`. +3. Tarjima GitHub Pages’da sinab ko‘rildi: [https://farrux05-ai.github.io/O-yin-nazariyasi/](https://farrux05-ai.github.io/O-yin-nazariyasi/). +4. Pull Request asl repositoriyga yuborildi va Nicky Case’ga (`n@ncase.me`) xabar berildi. + +Agar siz ham tarjima qilishni xohlasangiz, iltimos, asl repositoriyning “Issues” bo‘limini tekshiring va yangi tarjima boshlashdan oldin Nicky bilan aloqaga chiqing. + +--- + +## Litsenziya + +[Creative Commons Zero](https://github.com/ncase/trust/blob/gh-pages/LICENSE): Bu jamoat mulki sifatida taqdim etilgan, shuning uchun xohlagan narsangizni qilishingiz mumkin! Mualliflikni ko‘rsatish juda qadrlanadi, lekin hech qanday yuridik choralar ko‘rilmaydi. + +--- + +## Aloqa + +Tarjima bo‘yicha savollar yoki takliflar bo‘lsa, https://github.com/farrux05-ai, yoki telegramda @farruxbekvalijonov bilan bog‘laning. Asl loyiha muallifi Nicky Case bilan aloqa uchun: `n@ncase.me`. + +O‘zbek tilidagi “Ishonchning evolyutsiyasi” loyihasiga xush kelibsiz! 🎉 diff --git a/css/balloon.css b/css/balloon.css index 4b7aff22..6a0d733c 100755 --- a/css/balloon.css +++ b/css/balloon.css @@ -1,175 +1,202 @@ -button[data-balloon] { - overflow: visible; -} +/* O'yin uchun tuzatilgan Balloon.css tooltip v2 */ + +/* Asosiy tooltip konfiguratsiyasi */ [data-balloon] { position: relative; + cursor: pointer; } -[data-balloon]:before, -[data-balloon]:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - -khtml-opacity: 0; - -moz-opacity: 0; + +[data-balloon]::before, +[data-balloon]::after { opacity: 0; + visibility: hidden; pointer-events: none; - -webkit-transition: all 0.1s ease-out 0.1s; - transition: all 0.1s ease-out 0.1s; - bottom: 100%; - left: 50%; position: absolute; - z-index: 10; - -webkit-transform: translate(-50%, 10px); - -ms-transform: translate(-50%, 10px); - transform: translate(-50%, 10px); - -webkit-transform-origin: top; - -ms-transform-origin: top; - transform-origin: top; + transition: all 0.2s ease-out; + z-index: 10000; + transform-origin: center; } -[data-balloon]:after { - background: rgba(17, 17, 17, 0.9); - border-radius: 4px; - color: #fff; + +/* Tooltip matni */ +[data-balloon]::after { content: attr(data-balloon); - font-size: 18px; - padding: .5em 1em; - white-space: nowrap; - /*margin-bottom: 11px;*/ - margin-bottom: 26px; -} -[data-balloon]:before { - background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat; - background-size: 100% auto; - height: 6px; - width: 18px; + background: var(--balloon-color, rgba(17, 17, 17, 0.9)); + color: #fff; + padding: 8px 12px; + font-size: var(--balloon-font-size, 12px); + line-height: 1.2; + text-align: center; + border-radius: 4px; + white-space: normal; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.39); + max-width: 300px; + word-wrap: break-word; +} + +/* Tooltip uchi */ +[data-balloon]::before { content: ""; - /*margin-bottom: 5px;*/ - margin-bottom: 20px; -} -[data-balloon]:hover:before, -[data-balloon][data-balloon-visible]:before, -[data-balloon]:hover:after, -[data-balloon][data-balloon-visible]:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); - -khtml-opacity: 1; - -moz-opacity: 1; + width: 0; + height: 0; + border: 5px solid transparent; +} + +/* Holat: Hover yoki ko'rsatilgan */ +[data-balloon]:hover::before, +[data-balloon]:hover::after, +[data-balloon][data-balloon-visible]::before, +[data-balloon][data-balloon-visible]::after { opacity: 1; + visibility: visible; pointer-events: auto; - -webkit-transform: translate(-50%, 0); - -ms-transform: translate(-50%, 0); - transform: translate(-50%, 0); } -[data-balloon].font-awesome:after { - font-family: FontAwesome; + +/* Yuqoriga (default) */ +[data-balloon]:not([data-balloon-pos]), +[data-balloon][data-balloon-pos="up"] { + --balloon-translate: -10px; +} +[data-balloon]:not([data-balloon-pos])::after, +[data-balloon][data-balloon-pos="up"]::after { + bottom: 100%; + left: 50%; + transform: translate(-50%, var(--balloon-translate)); + margin-bottom: 10px; } -[data-balloon][data-balloon-break]:after { - white-space: pre; +[data-balloon]:not([data-balloon-pos])::before, +[data-balloon][data-balloon-pos="up"]::before { + bottom: 100%; + left: 50%; + transform: translateX(-50%); + border-top-color: var(--balloon-color, rgba(17, 17, 17, 0.9)); + margin-bottom: 5px; } -[data-balloon-pos="down"]:before, -[data-balloon-pos="down"]:after { - bottom: auto; + +/* Pastga */ +[data-balloon][data-balloon-pos="down"]::after { + top: 100%; left: 50%; + transform: translate(-50%, 10px); + margin-top: 10px; +} +[data-balloon][data-balloon-pos="down"]::before { top: 100%; - -webkit-transform: translate(-50%, -10px); - -ms-transform: translate(-50%, -10px); - transform: translate(-50%, -10px); -} -[data-balloon-pos="down"]:after { - margin-top: 11px; -} -[data-balloon-pos="down"]:before { - background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat; - background-size: 100% auto; - height: 6px; - width: 18px; + left: 50%; + transform: translateX(-50%); + border-bottom-color: var(--balloon-color, rgba(17, 17, 17, 0.9)); margin-top: 5px; - margin-bottom: 0; -} -[data-balloon-pos="down"]:hover:before, -[data-balloon-pos="down"][data-balloon-visible]:before, -[data-balloon-pos="down"]:hover:after, -[data-balloon-pos="down"][data-balloon-visible]:after { - -webkit-transform: translate(-50%, 0); - -ms-transform: translate(-50%, 0); - transform: translate(-50%, 0); -} -[data-balloon-pos="left"]:before, -[data-balloon-pos="left"]:after { - bottom: auto; - left: auto; +} + +/* Chapga */ +[data-balloon][data-balloon-pos="left"]::after { right: 100%; top: 50%; - -webkit-transform: translate(10px, -50%); - -ms-transform: translate(10px, -50%); - transform: translate(10px, -50%); -} -[data-balloon-pos="left"]:after { - margin-right: 11px; + transform: translate(-10px, -50%); + margin-right: 10px; } -[data-balloon-pos="left"]:before { - background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat; - background-size: 100% auto; - height: 18px; - width: 6px; +[data-balloon][data-balloon-pos="left"]::before { + right: 100%; + top: 50%; + transform: translateY(-50%); + border-left-color: var(--balloon-color, rgba(17, 17, 17, 0.9)); margin-right: 5px; - margin-bottom: 0; -} -[data-balloon-pos="left"]:hover:before, -[data-balloon-pos="left"][data-balloon-visible]:before, -[data-balloon-pos="left"]:hover:after, -[data-balloon-pos="left"][data-balloon-visible]:after { - -webkit-transform: translate(0, -50%); - -ms-transform: translate(0, -50%); - transform: translate(0, -50%); -} -[data-balloon-pos="right"]:before, -[data-balloon-pos="right"]:after { - bottom: auto; +} + +/* O'ngga */ +[data-balloon][data-balloon-pos="right"]::after { left: 100%; top: 50%; - -webkit-transform: translate(-10px, -50%); - -ms-transform: translate(-10px, -50%); - transform: translate(-10px, -50%); -} -[data-balloon-pos="right"]:after { - margin-left: 11px; + transform: translate(10px, -50%); + margin-left: 10px; } -[data-balloon-pos="right"]:before { - background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat; - background-size: 100% auto; - height: 18px; - width: 6px; - margin-bottom: 0; +[data-balloon][data-balloon-pos="right"]::before { + left: 100%; + top: 50%; + transform: translateY(-50%); + border-right-color: var(--balloon-color, rgba(17, 17, 17, 0.9)); margin-left: 5px; } -[data-balloon-pos="right"]:hover:before, -[data-balloon-pos="right"][data-balloon-visible]:before, -[data-balloon-pos="right"]:hover:after, -[data-balloon-pos="right"][data-balloon-visible]:after { - -webkit-transform: translate(0, -50%); - -ms-transform: translate(0, -50%); - transform: translate(0, -50%); -} -[data-balloon-length]:after { - white-space: normal; -} -[data-balloon-length="small"]:after { - width: 80px; -} -[data-balloon-length="medium"]:after { - width: 150px; -} -[data-balloon-length="large"]:after { - width: 260px; -} -[data-balloon-length="xlarge"]:after { + +/* Tooltip uzunlik turlari */ +[data-balloon-length="small"]::after { width: 80px; } +[data-balloon-length="medium"]::after { width: 150px; } +[data-balloon-length="large"]::after { width: 260px; } +[data-balloon-length="xlarge"]::after { width: 90vw; + max-width: 380px; +} +[data-balloon-length="fit"]::after { + width: max-content; + max-width: 300px; +} + +/* Qator uzilishi */ +[data-balloon][data-balloon-break]::after { + white-space: pre-line; +} + +/* FontAwesome integratsiya */ +[data-balloon].font-awesome::after { + font-family: FontAwesome, Arial, sans-serif; +} + +/* Game tugmalar uchun */ +.game-button[data-balloon]::after { + font-size: 11px; + padding: 6px 10px; + background: rgba(0, 0, 0, 0.8); + border-radius: 3px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} +.game-button:hover[data-balloon]::after { + background: rgba(0, 0, 0, 0.9); +} + +/* O'zgaruvchilar */ +:root { + --balloon-color: rgba(17, 17, 17, 0.9); + --balloon-font-size: 12px; +} + +/* Responsiv dizayn */ +@media screen and (max-width: 480px) { + [data-balloon]::after { + font-size: 11px; + padding: 6px 8px; + max-width: 200px; + } + [data-balloon-length="large"]::after, + [data-balloon-length="xlarge"]::after { + width: 80vw; + max-width: 250px; + } } -@media screen and (min-width: 768px) { - [data-balloon-length="xlarge"]:after { - width: 380px; + +/* Touch qurilmalar */ +@media (hover: none) { + [data-balloon]::before, + [data-balloon]::after { + transition-delay: 0s; } } -[data-balloon-length="fit"]:after { - width: 100%; + +/* High Contrast Mode */ +@media (prefers-contrast: high) { + [data-balloon]::after { + background: #000; + color: #fff; + border: 1px solid #fff; + } + [data-balloon][data-balloon-pos="down"]::before { + border-bottom-color: #000; + } + [data-balloon][data-balloon-pos="left"]::before { + border-left-color: #000; + } + [data-balloon][data-balloon-pos="right"]::before { + border-right-color: #000; + } + [data-balloon]:not([data-balloon-pos])::before { + border-top-color: #000; + } } diff --git a/css/slides.css b/css/slides.css index 952193f7..b6769288 100644 --- a/css/slides.css +++ b/css/slides.css @@ -1,28 +1,28 @@ @font-face{ - font-family: 'FuturaHandwritten'; - font-style: normal; - src: url('FuturaHandwritten.ttf') format('truetype'); + font-family: 'FuturaHandwritten'; + font-style: normal; + src: url('FuturaHandwritten.ttf') format('truetype'); } html,body{ - width: 100%; - height: 100%; + width: 100%; + height: 100%; } body{ - - margin:0; - overflow: hidden; - - background: #fff; - - font-family: 'FuturaHandwritten'; - color: #333; - font-size: 20px; - + margin:0; + overflow: hidden; + background: #fff; + font-family: 'FuturaHandwritten'; + color: #333; + font-size: 20px; + /* Asosiy matn uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; } + #preloader{ - position: absolute; + position: absolute; margin: auto; top: 0; left: 0; @@ -33,415 +33,553 @@ body{ font-size: 30px; text-align: center; } + #main{ - width: 100%; - height: calc(100% - 60px); - position: relative; - overflow: hidden; + width: 100%; + height: calc(100% - 60px); + position: relative; + overflow: hidden; } + #footer{ - position: absolute; - z-index: 1000; - width: 100%; - height: 60px; - background: #222; + position: absolute; + z-index: 1000; + width: 100%; + height: 60px; + background: #222; } + s{ - text-decoration: line-through; + text-decoration: line-through; } #translations{ - margin: 10px auto; + margin: 10px auto; font-size: 10px; line-height: 19px; color: #fff; text-align: center; width: 960px; letter-spacing: -0.5px; + /* Tarjimalar uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; } + #translations a{ - color:#dd4040; + color: +#dd4040; + word-wrap: break-word; } + #translations a:hover{ - color:#ee5151; + color: +#ee5151; } - - -/*************************/ -/******* SOUND *******/ -/*************************/ +/**/ +/** SOUND **/ +/**/ #sound{ - position: absolute; - left:13px; - top:5px; - width: 100px; - height: 50px; - cursor: pointer; + position: absolute; + left:13px; + top:5px; + width: 100px; + height: 50px; + cursor: pointer; } + #sound > div{ - position: absolute; + position: absolute; } + #sound #sound_icon{ - background: url(../assets/ui/sound.png); - background-size: auto 100%; - width: 40px; - height: 40px; - top: 5px; - left:2px; + background: url(../assets/ui/sound.png); + background-size: auto 100%; + width: 40px; + height: 40px; + top: 5px; + left:2px; } + #sound #sound_on, #sound #sound_off{ - left: 52px; + left: 52px; font-size: 30px; line-height: 55px; + /* Sound matnlari uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + box-sizing: border-box; } + #sound #sound_on{ - color:#fff; + color:#fff; } + #sound #sound_off{ - color:#595959; + color: +#595959; } + #sound[sound=off] #sound_icon{ - background-position: -40px 0; + background-position: -40px 0; } + #sound[sound=on] #sound_on, #sound[sound=off] #sound_off{ - display: block; + display: block; } + #sound[sound=off] #sound_on, #sound[sound=on] #sound_off{ - display: none; + display: none; } .sharing{ - position: absolute; - width:120px; - height:40px; - top:10px; - right:13px; + position: absolute; + width:120px; + height:40px; + top:10px; + right:13px; + /* Sharing uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; } + .sharing img{ - width: 40px; - height: 40px; + width: 40px; + height: 40px; + max-width: 100%; + height: auto; } -/*************************/ -/******* SLIDESHOW *******/ -/*************************/ +/**/ +/** SLIDESHOW **/ +/**/ #slideshow_container{ - width:0; height:0; - position:absolute; - margin:auto; - top:0; left:0; right:0; bottom:0; + width:0; height:0; + position:absolute; + margin:auto; + top:0; left:0; right:0; bottom:0; } -#slideshow{ - - /*border: 1px solid rgba(0,0,0,0.2);*/ - width:960px; - height:540px; - - /* Center this thing */ - position: absolute; - left:-480px; - top:-270px; +#slideshow{ + width:960px; + height:540px; + position: absolute; + left:-480px; + top:-270px; + /* Slideshow uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; } + .object{ - position: absolute; - transition: left 0.5s ease-in-out, top 0.5s ease-in-out; + position: absolute; + transition: left 0.5s ease-in-out, top 0.5s ease-in-out; + /* Barcha objektlar uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; } + .fader{ - transition: opacity 0.5s ease-in-out !important; + transition: opacity 0.5s ease-in-out !important; } -/******** Text Box ********/ +/** Text Box **/ + +.textbox{ + /* Textbox uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; + max-width: 100%; +} -.textbox{} .textbox > div{ - position: absolute; + position: absolute; + /* Textbox ichidagi divlar uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; + max-width: 100%; + overflow: hidden; } + /* fake bold */ .textbox b{ - font-weight: normal; - text-shadow:1px 0 0 currentColor; + font-weight: normal; + text-shadow:1px 0 0 currentColor; } - .label{ - position: absolute; + position: absolute; + /* Label uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; + max-width: 100%; } -/********* Button ********/ +/* Button **/ .no-select{ - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: default; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; } -.button{ - z-index: 0; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - - transform-origin: 97.5px 27.5px; - transition: transform 0.1s ease-out; - text-align: center; +.button{ + z-index: 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + transform-origin: 97.5px 27.5px; + transition: transform 0.1s ease-out; + text-align: center; + /* Button uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; } + .button #background{ - position: absolute; - background: url(../assets/ui/button.png); - width:250px; height:125px; - background-size: 100%; - top:-35px; left:-30px; - pointer-events:none; - cursor: default; + position: absolute; + background: url(../assets/ui/button.png); + width:250px; height:125px; + background-size: 100%; + top:-35px; left:-30px; + pointer-events:none; + cursor: default; } -.button #text{ - - font-family: 'FuturaHandwritten'; - color: #000; - font-size: 24px; - - width: 180px; - height: 30px; - text-align: center; - - position: absolute; - top:14px; left:5px; - - cursor: default; +.button #text{ + font-family: 'FuturaHandwritten'; + color: #000; + font-size: 24px; + width: 180px; + height: 30px; + text-align: center; + position: absolute; + top:14px; left:5px; + cursor: default; + /* Button text uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + line-height: 1.2; } + .button #hitbox{ - position: absolute; - width:195px; height:55px; - cursor: pointer; + position: absolute; + width:195px; height:55px; + cursor: pointer; } + .button[hover=yes]{ - z-index: 100; - transform: scale(1.02, 1.02); + z-index: 100; + transform: scale(1.02, 1.02); } + .button[hover=yes] #background{ - background-position: 0px -125px !important; + background-position: 0px -125px !important; } + .button[deactivated=yes] #background{ - background-position: 0px -250px !important; + background-position: 0px -250px !important; } + .button[deactivated=yes] #text{ - color: #CCCCCC; + color: +#CCCCCC; } + .button[deactivated=yes] #hitbox{ - display: none; + display: none; } + .button[size=short]{ - transform-origin: 57.5px 27.5px; + transform-origin: 57.5px 27.5px; } + .button[size=short] #background{ - background: url(../assets/ui/button_short.png); - background-size: 100%; - width:150px; left:-20px; + background: url(../assets/ui/button_short.png); + background-size: 100%; + width:150px; left:-20px; } + .button[size=short] #text{ - width:105px; - /*font-size: 18px; - top: 18px;*/ + width:105px; } + .button[size=short] #hitbox{ - width:115px; + width:115px; } + .button[size=long]{ - transform-origin: 172.5px 27.5px; + transform-origin: 172.5px 27.5px; } + .button[size=long] #background{ - background: url(../assets/ui/button_long.png); - background-size: 100%; - width:400px; + background: url(../assets/ui/button_long.png); + background-size: 100%; + width:400px; } + .button[size=long] #text{ - width:330px; - top: 11px; + width:330px; + top: 11px; } + .button[size=long] #hitbox{ - width:345px; + width:345px; } + .button:active{ transform: scale(0.95, 0.95); } - -/*************************/ -/****** SANDBOX UI *******/ -/*************************/ +/**/ +/** SANDBOX UI **/ +/*/ #sandbox_tabs{ - position: absolute; - left: 460px; top:-10px; - background: url(../assets/ui/sandbox_tabs.png); - width:500px; height:470px; - background-size: auto 100%; - - -webkit-user-select: none; /* Chrome all / Safari all */ - -moz-user-select: none; /* Firefox all */ - -ms-user-select: none; /* IE 10+ */ - user-select: none; - cursor: default; + position: absolute; + left: 460px; top:-10px; + background: url(../assets/ui/sandbox_tabs.png); + width:500px; height:470px; + background-size: auto 100%; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + /* Sandbox uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; } + #sandbox_tabs > div{ - position: absolute; + position: absolute; + /* Sandbox ichidagi divlar uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; } + #sandbox_tabs .hitbox{ - cursor: pointer; - font-size: 25px; - top: 22px; + cursor: pointer; + font-size: 25px; + top: 22px; } + #sandbox_tabs .sandbox_page{ - width: 433px; - height: 385px; - left: 33px; - top: 80px; + width: 433px; + height: 385px; + left: 33px; + top: 80px; + /* Sandbox page uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; + overflow: auto; } + .incdec{ - width: 0; height: 0; - position: absolute; + width: 0; height: 0; + position: absolute; } + .incdec > div{ - position: absolute; + position: absolute; } + .incdec > .incdec_num{ - width:50px; height:50px; - font-size: 25px; - text-align: center; + width:50px; height:50px; + font-size: 25px; + text-align: center; top: -16px; left: -25px; cursor: default; + /* Incdec num uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; + overflow: hidden; } + .incdec > .incdec_control{ - left:-10px; - width:20px; height:20px; - background: url(../assets/ui/sandbox_incdec.png); - background-size: auto 100%; - cursor: pointer; + left:-10px; + width:20px; height:20px; + background: url(../assets/ui/sandbox_incdec.png); + background-size: auto 100%; + cursor: pointer; } + .incdec > .incdec_control[arrow=up]{ top:-35px; background-position:0px 0px; } .incdec > .incdec_control[arrow=up]:hover{ background-position:-20px 0px; } .incdec > .incdec_control[arrow=down]{ bottom:-35px; background-position:-40px 0px; } .incdec > .incdec_control[arrow=down]:hover{ background-position:-60px 0px; } .slider{ - position: absolute; - height: 40px; + position: absolute; + height: 40px; } + .slider > div{ - position: absolute; + position: absolute; } + .slider > .slider_bg{ - top:0; - width:100%; height:30px; - background: url(../assets/ui/slider_bg.png); - background-size: auto 100%; + top:0; + width:100%; height:30px; + background: url(../assets/ui/slider_bg.png); + background-size: auto 100%; } + .slider > .slider_knob{ - top:0; - width:30px; height:30px; - background: url(../assets/ui/slider_knob.png); - background-size: 100% 100%; - cursor: -webkit-grab; - cursor: -moz-grab; - cursor: grab; + top:0; + width:30px; height:30px; + background: url(../assets/ui/slider_knob.png); + background-size: 100% 100%; + cursor: -webkit-grab; + cursor: -moz-grab; + cursor: grab; } + .slider > .slider_knob:active{ - cursor: -webkit-grabbing; - cursor: -moz-grabbing; - cursor: grabbing; + cursor: -webkit-grabbing; + cursor: -moz-grabbing; + cursor: grabbing; } .sandbox_pop{ - position: absolute; + position: absolute; + /* Sandbox pop uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; } + .sandbox_pop>div{ - position: absolute; + position: absolute; } + .sandbox_pop_icon{ - width: 40px; - height: 40px; - background: url(../assets/ui/sandbox_hats.png); - background-size: auto 100%; + width: 40px; + height: 40px; + background: url(../assets/ui/sandbox_hats.png); + background-size: auto 100%; } + .sandbox_pop_label{ - font-size: 18px; + font-size: 18px; width: 150px; top: 8px; left: 50px; + /* Sandbox pop label uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; + overflow: hidden; } -/*************************/ -/******* SCRATCHER *******/ -/*************************/ +/**/ +/** SCRATCHER **/ +/**/ .scratcher{ - position: absolute; - top:0; left:0; - width: 100%; height: 100%; - background: url(../assets/ui/scratch.png); - background-size: 200% 2000%; - display: none; - - z-index: 200; + position: absolute; + top:0; left:0; + width: 100%; height: 100%; + background: url(../assets/ui/scratch.png); + background-size: 200% 2000%; + display: none; + z-index: 200; } -/*************************/ -/******* SCOREBOARD *******/ -/*************************/ +/**/ +/** SCOREBOARD **/ +/**/ #scoreboard{ - position: absolute; - width:200px; height:100px; - background: url(../assets/iterated/iterated_scoreboard.png); - background-size: 100% 100%; + position: absolute; + width:200px; height:100px; + background: url(../assets/iterated/iterated_scoreboard.png); + background-size: 100% 100%; } + #scoreboard > div{ - position: absolute; - width: 60px; height: 60px; - text-align: center; - font-size: 50px; - color: #666666; + position: absolute; + width: 60px; height: 60px; + text-align: center; + font-size: 50px; + color: +#666666; + /* Scoreboard uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; + overflow: hidden; } + #scoreboard > div:nth-child(1){ - left: 20px; + left: 20px; top: 21px; } + #scoreboard > div:nth-child(2){ - right: 15px; + right: 15px; top: 21px; } -/*************************/ -/******* CHARACTERS *******/ -/*************************/ +/**/ +/** CHARACTERS **/ +/**/ .character{ - position: absolute; - height: 114px; + position: absolute; + height: 114px; + /* Character uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; } + .character #peep{ - background: url(../assets/tournament/peep_characters.png); - background-size: auto 100%; - width: 105px; - height: 114px; - top: -5px; + background: url(../assets/tournament/peep_characters.png); + background-size: auto 100%; + width: 105px; + height: 114px; + top: -5px; left: -10px; } + .character #desc{ - width: calc(100% - 100px); - font-size: 18px; - height: 114px; - right: 0; - line-height: 1.2em; + width: calc(100% - 100px); + font-size: 18px; + height: 114px; + right: 0; + line-height: 1.2em; + /* Character description uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; + overflow: hidden; } + .character #peep[char=tft]{ background-position: 0 0; } .character #peep[char=all_d]{ background-position: -105px 0; } .character #peep[char=all_c]{ background-position: -210px 0; } @@ -451,94 +589,140 @@ s{ .character #peep[char=pavlov]{ background-position: -630px 0; } .character #peep[char=random]{ background-position: -735px 0; } -.tft{ color:#4089DD; } -.all_d{ color:#52537F; } -.all_c{ color:#FF75FF; } -.grudge{ color:#efc701; } -.prober{ color:#f6b24c; } -.tf2t{ color:#88A8CE; } -.pavlov{ color:#86C448; } -.random{ color:#FF5E5E; } +.tft{ color: +#4089DD; } +.all_d{ color: +#52537F; } +.all_c{ color: +#FF75FF; } +.grudge{ color: +#efc701; } +.prober{ color: +#f6b24c; } +.tf2t{ color: +#88A8CE; } +.pavlov{ color: +#86C448; } +.random{ color: +#FF5E5E; } .icon{ - width:25px; height:25px; - background: url(../assets/ui/sandbox_hats.png); - background-size: auto 100%; - display: inline-block; - position: relative; + width:25px; height:25px; + background: url(../assets/ui/sandbox_hats.png); + background-size: auto 100%; + display: inline-block; + position: relative; top: 1px; } + .icon_label{ - display: inline-block; - font-size: 20px; - position: relative; + display: inline-block; + font-size: 20px; + position: relative; top: -3px; + /* Icon label uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; } -.tft .icon{ background-position: 0 0; } -.all_d .icon{ background-position: -25px 0; } -.all_c .icon{ background-position: -50px 0; } -.grudge .icon{ background-position: -75px 0; } -.prober .icon{ background-position: -100px 0; } -.tf2t .icon{ background-position: -125px 0; } -.pavlov .icon{ background-position: -150px 0; } -.random .icon{ background-position: -175px 0; } -/*************************/ -/******* MISC STUFF *******/ -/*************************/ +.tft .icon{ background-position: 0 0; } +.all_d .icon{ background-position: -25px 0; } +.all_c .icon{ background-position: -50px 0; } +.grudge .icon{ background-position: -75px 0; } +.prober .icon{ background-position: -100px 0; } +.tf2t .icon{ background-position: -125px 0; } +.pavlov .icon{ background-position: -150px 0; } +.random .icon{ background-position: -175px 0; } + +/**/ +/** MISC STUFF **/ +/**/ .score_small{ - width:40px; height:40px; - background: url(../assets/tournament/score_small.png); - background-size: auto 100%; - display: inline-block; + width:40px; height:40px; + background: url(../assets/tournament/score_small.png); + background-size: auto 100%; + display: inline-block; } + .score_small[payoff=R]{ background-position: 0 0; } .score_small[payoff=T]{ background-position: -40px 0; } .score_small[payoff=S]{ background-position: -80px 0; } .score_small[payoff=P]{ background-position: -120px 0; } -/*************************/ -/***** SLIDE SELECT ******/ -/*************************/ +/**/ +/** SLIDE SELECT **/ +/*/ #select{ - width:100%; - text-align: center; + width:100%; + text-align: center; padding-top: 15px; } + #select .dot{ - width: 30px; - height: 30px; - border-radius: 40px; - border: 1px solid #fff; - display: inline-block; - margin: 0 5px; - cursor: pointer; + width: 30px; + height: 30px; + border-radius: 40px; + border: 1px solid #fff; + display: inline-block; + margin: 0 5px; + cursor: pointer; } + #select .dot[selected]{ - background: #fff; + background: #fff; } -/*************************/ -/***** CREDITS ******/ -/*************************/ +/**/ +/** CREDITS **/ +/*/ .credits{ - color: #888; + color: #888; + /* Credits uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; + box-sizing: border-box; } + .credits .big{ - font-size:40px; - line-height: 42px; - color:#fff; + font-size:40px; + line-height: 42px; + color:#fff; + /* Credits big uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; } + .credits .divider{ - display: block; - height: 40px; + display: block; + height: 40px; } + .credits a{ - color:#dd4040; + color: +#dd4040; + /* Credits linklari uchun word-wrap */ + word-wrap: break-word; + overflow-wrap: break-word; } + .credits a:hover{ - color:#ee5151; + color: +#ee5151; +} + +/* Umumiy matn elementlari uchun global qoidalar */ +p, div, span, h1, h2, h3, h4, h5, h6, +text, tspan, textPath, title, desc { + word-wrap: break-word !important; + overflow-wrap: break-word !important; + box-sizing: border-box !important; +} + +/* Uzun so'zlar uchun maxsus qoida */ +.force-break { + word-break: break-all !important; + overflow-wrap: break-word !important; } diff --git a/index.html b/index.html index f7bf3cb7..3df49bc1 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,23 @@ - The Evolution of Trust - + + Ishonchning Evolyutsiyasi + - - - + + + - + - - + + - - + + - + - + -
loading...
+
yuklanmoqda...