diginaut/alfagok
1
0
Fork 0
mirror of https://github.com/aquatix/alfagok.git synced 2025-12-07 00:25:12 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Styling

Browse Source
This commit is contained in:
Michiel Scholten
2024-11-05 14:12:16 +01:00
parent 066a99657e
commit e172166886
2 changed files with 44 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/alfagok/static/game.css
View File

@@ -1,6 +1,36 @@
body { body {
background-color: #333; background-color: #333;
color: #FFF; color: #FFF;
max-width: 600px;
margin: 0 auto;
padding: 2rem 1rem;
}
a.title {
color: #FF9800;
font-weight: bold;
text-decoration: none;
font-size: 1.5rem;
}
.puzzleno {
border: 1px solid grey;
color: grey;
padding: .2em .5em;
border-radius: 1em;
text-align: right;
float: right;
}
.instructions {
padding: 2rem 0;
}
input[type="text"] {
box-sizing: border-box;
width: 100%;
padding: .5rem;
} }
button { button {
@@ -8,5 +38,14 @@ button {
color: #333; color: #333;
border: 0; border: 0;
padding: .2rem; padding: .5rem;
margin-top: .5rem;
cursor: pointer;
width: 100%;
}
ul {
list-style-type: none;
} }

14
src/alfagok/templates/index.html
View File

@@ -9,20 +9,14 @@
</head> </head>
<body> <body>
<div <div id="container" x-data="">
id="container"
x-data=""
>
<a href="/" x-cloak class="title">alfagok</a> <span class="puzzleno">puzzle #<span x-text="$store.alfagok.gameID"></span> • <span id="nextgame"></span></span> <a href="/" x-cloak class="title">alfagok</a> <span class="puzzleno">puzzel #<span x-text="$store.alfagok.gameID"></span> • <span id="nextgame"></span></span>
<div x-cloak x-show="$store.alfagok.guessesBefore.length || $store.alfagok.guessesAfter.length"><br></div> <div x-cloak class="instructions" x-show="$store.alfagok.guessesBefore.length === 0 && $store.alfagok.guessesAfter.length === 0">
<div x-cloak class="instructions" x-else>
<p>Raad het woord van de dag. Elke gok geeft een hint over waar het woord zich in het alfabet bevindt.</p> <p>Raad het woord van de dag. Elke gok geeft een hint over waar het woord zich in het alfabet bevindt.</p>
</div> </div>
<center> <center>
<ul> <ul>
@@ -49,7 +43,7 @@
<p>Het woord van vandaag was <b x-text="$store.alfagok.guessValue"></b>.</p> <p>Het woord van vandaag was <b x-text="$store.alfagok.guessValue"></b>.</p>
<div id="stats"> <div id="stats">
<div id="results"> <div id="results">
<p><b x-data="{ message: '🧩 Puzzle #' + $store.alfagok.gameID }" x-text="message"></b></p> <p><b x-data="{ message: '🧩 Puzzel #' + $store.alfagok.gameID }" x-text="message"></b></p>
<p x-data="{ message: '🤔 '+ $store.alfagok.nrGuesses + ' gokken' }" x-text="message"></p> <p x-data="{ message: '🤔 '+ $store.alfagok.nrGuesses + ' gokken' }" x-text="message"></p>
<p x-data="{ message: '⏱️ ' + getFormattedTime($store.alfagok.winTime - $store.alfagok.startTime) }" x-text="message"></p> <p x-data="{ message: '⏱️ ' + getFormattedTime($store.alfagok.winTime - $store.alfagok.startTime) }" x-text="message"></p>
<p>🔗 <span style="color:var(--blue)">alfagok.diginaut.net</span></p> <p>🔗 <span style="color:var(--blue)">alfagok.diginaut.net</span></p>