Ein Glücksrad bauen [geschlossen] ⇐ HTML

HTML-Programmierer
Post Reply Previous topicNext topic
Anonymous
 Ein Glücksrad bauen [geschlossen]

Post by Anonymous »

Ich muss in der Lage sein, Prozentsätze festzulegen. Ich möchte, dass alles visuell normal ist, sodass es immer bei „Nein“ stoppt (z. B. „Nein: 100 %“ und „Ja: 0 %“ im Textbereich).

Code: Select all

  @charset "UTF-8";[b]
.bg-base {
background: var(--base)
}

.bg-shade {
background: var(--shade)
}

.bg-glare {
background: var(--glare)
}

.bg-highlight {
background: var(--highlight)
}

.set-base {
--set: var(--base)
}

.set-shade {
--set: var(--shade)
}

.set-glare {
--set: var(--glare)
}

.set-text {
--set: var(--text)
}

.font-base,
:root,
code {
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace
}

.font-text,
.text-content p {
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif
}

.leading-loose {
line-height: 1.7
}

.leading-tight {
line-height: 1.3
}

.align-right {
text-align: right
}

.align-center {
text-align: center
}

*,
::after,
::before {
box-sizing: border-box;
text-decoration-skip-ink: auto;
position: relative
}

div {
border-color: currentColor
}

blockquote,
body,
button,
dd,
dl,
figcaption,
figure,
h1,
h2,
h3,
h4,
input,
li,
ol,
p,
ul {
margin: 0
}

html {
max-width: 100vw;
overflow-y: scroll
}

body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
-webkit-tap-highlight-color: transparent
}

button,
input,
select,
textarea {
font: inherit;
border: 0;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none
}

@media (prefers-reduced-motion:reduce) {
* {
animation-duration: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0s !important
}
}

.inset,
:after,
:before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}

:after,
:before {
pointer-events: none
}

.page,
body,
html {
width: 100vw;
max-width: 100vw;
min-height: 100vh;
padding: 0;
margin: 0;
position: relative;
overflow-x: hidden
}

.wrapper,
article,
footer,
header,
section {
width: 100%;
max-width: 100vw;
margin: 0;
padding: .56rem 2px
}

.wrapper>*+*,
article>*+*,
footer>*+*,
header>*+*,
section>*+* {
margin-top: 1rem
}

@media (min-width:320px) {

.wrapper,
article,
footer,
header,
section {
padding: 1.33rem .56rem
}
}

.action-button,
.block,
.checkbox,
.label-input,
.tada,
blockquote,
div,
figure,
h1,
h2,
h3,
h4,
li,
p,
table {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 35rem;
position: relative
}

.inline {
display: initial;
margin: initial;
width: auto
}

#tada-text,
.center,
.checkbox .check,
.dropdown>label .icon,
.tada,
.theme span {
display: flex;
align-items: center;
justify-content: center
}

main {
padding-bottom: 2.36rem;
min-height: 100vh
}

footer {
padding-top: 2.36rem
}

ol,
ul {
padding: 0
}

.inset {
max-width: none
}

* #default-btn>span,
:root {
--text: #17130D;
--glare: #FFF;
--base: #F4F0EB;
--shade: #E6DCD1;
--highlight: #F55D3E;
--highlight-text: #141414;
--ui: #141414;
--focus: #007CBE
}

* #dark-btn>span,
* #dark:checked~* {
--text: #fff;
--glare: #373740;
--base: #33333d;
--shade: #27272f;
--highlight: #ffac12;
--highlight-text: #000;
--ui: #000;
--focus:  #a932ff
}
#vegas-btn>span,
#vegas:checked~* {
--text: #FFF;
--glare: #439889;
--base: #00695c;
--shade: #003d33;
--highlight: #eeb544;
--highlight-text: #000;
--ui: #000;
--focus: #EE4B6A
}

#party-btn>span,
#party:checked~* {
--text: #000;
--glare: #f3d2d5;
--base: #fdb1b8;
--shade: #fd8189;
--highlight: #bdceeb;
--highlight-text: #000;
--ui: #000;
--focus: #ffe66d
}

#dd-btn>span,
#dd:checked~* {
--text: #C3B384;
--glare: #241A13;
--base: #1D150F;
--shade: #16100C;
--highlight: #8f272c;
--highlight-text: #D0C49F;
--ui: #692B2E;
--focus: #fd5523
}

.color-wrap {
min-height: 100vh;
width: 100vw;
max-width: 100vw;
background: var(--base);
color: var(--text)
}

:root {
line-height: 1.5;
font-size: 16px;
font-size: clamp(12px, 2vw, 18px);
--c0: #A1BAB4;
--c1: #f28482;
--c2: #f6bd60;
--c3: #f7ede2;
--c0-bg: #84a59d;
--c1-bg: #F0B1A8;
--c2-bg: #F8CF8B;
--c3-bg: #FFF
}

h1 {
font-size: 2.36rem
}

a {
text-decoration: underline dotted;
color: var(--text)
}

a:hover {
text-decoration: underline solid
}

.text-content {
padding: 3.15rem .75rem;
width: 100%;
background: var(--base)
}

.text-content>* {
width: 100%;
margin-left: auto;
margin-right: auto
}

.text-content>*+h2,
.text-content>*+h3,
.text-content>*+h4 {
margin-top: 3.15rem
}

.text-content ul {
list-style: none;
padding: 0
}

code {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
background: var(--shade);
padding: .1em .2em;
font-size: .75rem;
border-radius: 4px
}

pre code {
display: block;
white-space: pre;
overflow-x: scroll
}

table {
display: table;
border-collapse: collapse;
border-style: hidden
}

th {
text-align: left
}

table td,
table th {
border-top: solid 2px var(--glare);
padding: 4px 8px 4px 0
}

button {
--set: var(--ui);
cursor: pointer;
touch-action: manipulation;
background: var(--glare);
border: solid 2px var(--ui);
box-shadow: 0 2px var(--shade);
color: var(--text);
border-radius: 4px
}

button:disabled {
pointer-events: none;
border-color: var(--shade);
box-shadow: none;
background: var(--glare);
opacity: 0
}

button:active {
transform: translateY(1px)
}

.btn,
.btn-group>button {
position: relative;
border-radius: 6px;
text-transform: uppercase;
border: 0;
padding: 0
}

.btn-group>button>span,
.btn>span {
z-index: 3;
background: inherit;
border-radius: inherit;
padding: 1rem;
display: block;
color: var(--text);
border: 2px solid var(--set)
}

.btn-group>button.highlight,
.btn.highlight {
background-color: var(--highlight)
}

.btn-group>button.highlight>span,
.btn.highlight>span {
color: var(--highlight-text);
background: var(--highlight)
}

.btn-group>button:after,
.btn-group>button:before,
.btn:after,
.btn:before {
content: "";
border-radius: inherit;
display: block;
height: 100%;
width: 100%;
transform: translateY(4px)
}

.btn-group>button:before,
.btn:before {
background-color: var(--set);
z-index: 2
}

.btn-group>button:after,
.btn:after {
background-color: inherit;
border: 2px solid var(--set);
z-index: 1
}

.btn-group>button:hover,
.btn:hover {
transform: translateY(1px)
}

.btn-group>button:active,
.btn:active {
transform: translateY(2px)
}

.btn-group>button:hover:after,
.btn-group>button:hover:before,
.btn:hover:after,
.btn:hover:before {
transform:  translateY(3px)
}

.btn-group>button:active:after,
.btn-group>button:active:before,
.btn:active:after,
.btn:active:before {
transform: translateY(2px)
}

.btn-group {
display: inline-flex
}

.btn-group button {
border-radius: 0
}

.btn-group button:after,
.btn-group button:before {
border-right: 0
}

.btn-group button:first-child {
border-radius: 6px 0 0 6px
}

.btn-group button:last-child {
border-radius: 0 6px 6px 0
}

.btn-group button:last-child:after,
.btn-group button:last-child:before {
border-right: solid 2px var(--text)
}

.action-button {
font-size: 1.77rem;
font-weight: 700
}

.checkbox .check,
.input,
input,
textarea {
border: solid 2px var(--ui);
border-radius: 4px;
box-shadow: inset 0 2px var(--shade);
padding: .56rem;
margin: 0;
background: var(--glare);
color: var(--text)
}

input[type=checkbox],
input[type=radio] {
position: absolute;
top: .56rem;
right: .56rem;
opacity: .001
}

.checkbox,
.label-input {
padding: .56rem;
background: var(--base);
border: solid 2px var(--shade);
border-radius: 4px;
cursor: pointer
}

.checkbox:focus-within,
.label-input:focus-within {
border: solid 2px var(--focus)
}

.checkbox label,
.label-input label {
margin-right: auto;
cursor: pointer
}

.hint {
font-size: .75rem;
display: block
}

.dropdown input[type=checkbox]:focus+label,
.focus,
:focus {
outline: 0;
box-shadow: 0 0 0 4px var(--focus);
z-index: 100
}

.dropdown input[type=checkbox]:focus+label:after,
.focus:after,
:focus:after {
box-shadow: 0 0 0 4px var(--focus)
}

input:focus {
box-shadow: inset 0 0 0 2px var(--focus)
}

.site-head {
padding: 4px 2px;
height: calc(3.15rem + 8px)
}

.site-head a {
display: inline-flex;
align-items: center;
color: var(--text);
text-decoration: none;
height: 100%;
font-size: 1rem
}

.site-head a svg {
height: 100%;
margin: 0 4px 0 0
}

#tada-text,
.center,
.checkbox .check,
.dropdown>label .icon,
.tada,
.theme span {
display: flex;
justify-content: center;
align-items: center
}

.full {
width: 100%
}

.control-box>*+*,
.dropdown .hidden-items>*+*,
.flow>*+*,
.text-content>*+* {
margin-top: 1rem
}

.column {
display: flex;
flex-direction: column
}

.grow {
flex-grow: 1
}

.pattern>*,
.theme span:first-child>* {
position: relative;
z-index: 1
}

.pattern:before,
.theme span:first-child:before {
content: "";
background-color: var(--set);
position: absolute;
display: block;
z-index: 0;
max-width: none
}

.btn-group>button:before,
.btn:before,
.stripes:before,
.theme span:first-child:before {
--stripes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpattern id='s' width='4' height='4' viewBox='0 0 4 4' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Cpath d='M -1 2 h6 v2 h-6z'/%3E%3C/pattern%3E%3Crect fill='url(%23s)' height='100%25' width='100%25'/%3E%3C/svg%3E");
-webkit-mask-image: var(--stripes);
mask-image: var(--stripes)
}

.pin-stripes:before {
--pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='e' width='4' height='4' viewBox='0 0 8 8' patternUnits='userSpaceOnUse' patternTransform='rotate(45) '%3E%3Cpath fill='%23E1DACB' d='M -1 2 h9 v2 h-9z'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23e)' height='100%25' width='100%25'/%3E%3C/svg%3E");
-webkit-mask-image: var(--pin);
mask-image: var(--pin)
}

.hide {
display: none
}

.h-borders {
border-top: solid 1px var(--set);
border-bottom: solid 1px var(--set)
}

.b-border {
border-bottom: solid 1px var(--set)
}

.borders {
border:  solid 2px var(--set)
}

.header-box {
display: inline;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding: .2em .4em;
border: solid 1px var(--shade)
}

.tool {
display: flex;
flex-direction: column;
position: relative;
flex-grow: 1;
background: var(--glare)
}

.tool>* {
width: 100%;
margin-left: auto;
margin-right: auto
}

.result-text {
border-radius: 4px;
border: dashed 2px var(--shade);
padding: .75rem;
width: 100%;
font-size: 1.77rem;
margin-top: 1rem;
display: flex;
justify-content: space-between
}

.dropdown {
background: var(--base);
z-index: 5
}

.dropdown>input[type=checkbox] {
position: absolute;
left: -9999px
}

.dropdown>label {
cursor: pointer;
padding: .75rem;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 4px;
border: solid 2px var(--shade)
}

.dropdown>label:hover {
background: var(--glare)
}

.dropdown>label .icon {
border: solid 2px var(--ui);
background: var(--glare);
box-shadow: 0 2px var(--shade);
height: 1.77rem;
width: 1.77rem;
border-radius: 2rem;
font-weight: 700
}

.dropdown>label .icon:active {
transform: translateY(1px)
}

.dropdown>label .icon:after {
content: "+";
position: static
}

.dropdown .open-label {
display: none
}

.dropdown input[type=checkbox]:checked+label {
border-radius: 4px 4px 0 0
}

.dropdown input[type=checkbox]:checked+label .icon:after {
content: "-"
}

.dropdown input[type=checkbox]:checked+label .closed-label {
display: none
}

.dropdown input[type=checkbox]:checked+label .open-label {
display: inline
}

.dropdown .hidden-items {
display: none;
padding: .75rem;
border: solid 2px var(--shade);
background: var(--base);
left: 0;
right: 0;
border-radius: 0 0 4px 4px;
transform: translateY(-2px)
}

.dropdown input[type=checkbox]:checked~.hidden-items {
display: block
}

.control-box {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center
}

.control-box>* {
width: 100%;
max-width: 35rem;
margin-left: auto;
margin-right: auto
}

.theme {
position: absolute;
top: 4px;
right: 4px;
z-index: 1;
height: 2.36rem;
width: calc(2.36rem * 2);
border: solid 2px var(--ui);
cursor: pointer;
border-radius: 9em;
user-select: none;
opacity: 0;
pointer-events: none
}

.theme:active {
transform: translateY(1px)
}

.theme span {
height: 100%;
overflow: hidden;
color: var(--text);
padding: 0 .75rem 1px;
border-radius: 9em
}

.theme span:first-child {
position: absolute;
width: 100%;
background: var(--glare);
--set: var(--shade)
}

.theme .light-mode-hide {
display: none
}

.theme-box:checked+.theme+.theme-box+.theme,
.theme-box:first-of-type:checked+.theme-box+.theme,
.theme-box:last-of-type:checked+.theme+.theme {
opacity: 1;
pointer-events: auto
}

.theme-box:focus+.theme {
opacity: 1;
z-index: 1;
box-shadow: 0 0 0 4px var(--focus)
}

textarea {
width: 100%;
resize: vertical;
min-height: calc(4.2rem * 2);
margin-top: .75rem
}

#results,
#spinner,
#spinner-inner,
#ticker {
max-width: 75vh
}

#spinner {
width: 100%;
padding-top: 100%;
max-height: 100vw;
position: relative
}

#spinner-inner,
#ticker {
transform-origin: 50% 50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}

#spinner-inner {
border-radius: 99rem;
overflow: hidden
}

.results {
padding-bottom: 0
}

.results+div {
margin-top:  0
}

#remove-button {
overflow: hidden;
text-overflow: ellipsis
}

#remove-name {
white-space: nowrap
}

* #dark:checked~* {
--c0: #212F45;
--c1: #312244;
--c2: #4D194D;
--c3: #144552;
--c0-bg: #1B2537;
--c1-bg: #271B36;
--c2-bg: #3E143E;
--c3-bg: #103742
}

@media (prefers-color-scheme:dark) {

* #default-btn>span,
:root {
--text: #fff;
--glare: #373740;
--base: #33333d;
--shade: #27272f;
--highlight: #ffac12;
--highlight-text: #000;
--ui: #000;
--focus: #a932ff
}

* #dark-btn>span,
* #dark:checked~* {
--text: #17130D;
--glare: #FFF;
--base: #F4F0EB;
--shade: #E6DCD1;
--highlight: #F55D3E;
--highlight-text: #141414;
--ui: #141414;
--focus: #007CBE
}

.theme .dark-mode-hide {
display: none
}

.theme .light-mode-hide {
display: flex
}

:root {
--c0: #212F45;
--c1: #312244;
--c2: #4D194D;
--c3: #144552;
--c0-bg: #1B2537;
--c1-bg: #271B36;
--c2-bg: #3E143E;
--c3-bg: #103742
}

* #dark:checked~* {
--c0: #A1BAB4;
--c1: #f28482;
--c2: #f6bd60;
--c3: #f7ede2;
--c0-bg: #84a59d;
--c1-bg: #F0B1A8;
--c2-bg: #F8CF8B;
--c3-bg: #FFF
}
}

#vegas:checked~* {
--c0: #96031A;
--c1: #1B1B1E;
--c2: #96031A;
--c3: #1B1B1E;
--c0-bg: #8C0317;
--c1-bg: #131315;
--c2-bg: #8C0317;
--c3-bg: #131315
}

#party:checked~* {
--c0: #A1BAB4;
--c1: #f28482;
--c2: #f6bd60;
--c3: #f7ede2;
--c0-bg: #84a59d;
--c1-bg: #F0B1A8;
--c2-bg: #F8CF8B;
--c3-bg: #FFF
}

#dd:checked~* {
--c0: #4A594F;
--c1: #392D2F;
--c2: #1D342F;
--c3: #500206;
--c0-bg: #38433B;
--c1-bg: #2E2426;
--c2-bg: #162723;
--c3-bg: #3C0204
}

.tada {
padding: 0;
background: var(--base);
border-radius: 1rem 1rem 0 0;
box-shadow: 0 0 0 2px var(--base), 0 0 0 4px var(--shade), 0 0 0 8px var(--base);
border: dotted 4px var(--shade);
border-bottom: 0;
text-align: center;
font-size: 1.33rem;
text-transform: uppercase;
letter-spacing: 1px
}

.tada.highlight {
border-color: var(--highlight)
}

@media (min-width:320px) {
.tada {
padding: 1rem 0
}
}

#tada-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0;
margin: 0 .56rem;
height: 2.36rem
}

.text-only-btn {
color: var(--text)
}

.text-only-btn:hover {
text-decoration: underline
}

.checkbox {
display: flex;
justify-content: space-between;
align-items: center
}

.checkbox:hover {
background: var(--glare)
}

.checkbox .check {
padding: 0;
float: right;
height: 1.33em;
width: 1.33em;
box-shadow: inset 0 2px var(--shade), 0 2px var(--shade);
position: relative;
color: transparent
}

.checkbox:focus-within .check {
box-shadow: inset 0 2px var(--focus), 0 0 0 4px var(--focus)
}

.checkbox input[type=checkbox]:checked+.check {
color: var(--text)
}

.copy-box {
cursor: pointer
}

.copy-box input {
display: block;
width: 100%;
margin-top: .56rem;
padding-right: 5rem;
overflow: hidden;
text-overflow: ellipsis
}

.copy-box button {
position: absolute;
background: var(--highlight);
bottom: calc(.56rem - 1px);
right: .56rem;
z-index: 101
}

#tada {
margin-top:  -2rem
}

Code: Select all




Wanghao | Spin the Wheel


 关灯
light   vegas
  party   d&d  Выключить светлую тему Светлая тема

[url= /]






Главная страница[/url]


Настраиваемое колесо 🎡
Тяжело сделать выбор? [b]Создайте колесо с именами, решениями или задачами — и пусть всё произойдёт случайно.[/b] Пусть решит колесо.





[b]Показать параметры[/b]
[b]Скрыть параметры[/b]



Можно добавить или удалить строки
Количество секторов колеса меняется в зависимости от количества строк
yes:0%
no:100%


Воспроизводить звук
✔[/b]




[b]Javascript disabled?[/b] You can still use this tool.  Write a list and click "spin the wheel".






Крутить колесо
Удалить [b]winner[/b]
победителя с этого колеса? Сбросить колесо


Поделиться своим индивидуальным колесом:Copy  
[url=https://blog.csdn.net/qq_44273429/article/details/115362643]Узнайте, как сделать [/url]
[url=https://gitee.com/haiyongcsdn/spin-the-wheel/]Исходный код [/url]
[url=https://blog.csdn.net/qq_44273429]Тех. поддержка [/url]
[/list]
Top
Post Reply Previous topicNext topic

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post

Return to “HTML”