-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 84c3644
Showing
3 changed files
with
442 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,171 @@ | ||
| :root { | ||
| --blue: linear-gradient(180deg, #657EFF 0%, #2D0FBF 100%); | ||
| --teal: #8DF0FF; | ||
| --lilac: #ae8dfd; | ||
| --green: #71f1bc; | ||
| --spooky-orange: #FFF8F5; | ||
| --spooky-orange-text: #FFDED1; | ||
| --gap: 0.1em; | ||
| --text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); | ||
| } | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| html, body { | ||
| height: 100%; | ||
| } | ||
|
|
||
| body { | ||
| font-family: sans-serif; | ||
| background: #0071AF; | ||
| color: #7dd5f8; | ||
| font-size: 2vw; | ||
| text-align: center; | ||
| padding: 1em; | ||
| background: linear-gradient(180deg, #00328A 0%, #001649 100%); | ||
| } | ||
|
|
||
| .top-header { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| text-shadow: var(--text-shadow); | ||
| } | ||
| .score { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .score-count { | ||
| color: var(--teal); | ||
| font-size: 2em; | ||
| font-weight:bold; | ||
| margin-left: 0.2em; | ||
| } | ||
|
|
||
| .column ul { | ||
| list-style-type: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| .board { | ||
| display: flex; | ||
| justify-content: space-around; | ||
| } | ||
| .board .column { | ||
| flex: 1; | ||
| margin-left: var(--gap); | ||
| margin-right: var(--gap); | ||
| } | ||
| .board .column header { | ||
| text-transform: capitalize; | ||
| background: var(--blue); | ||
| text-align: center; | ||
| margin-bottom: 1em; | ||
| height: 3em; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| .board .column li { | ||
| background: var(--blue); | ||
| color: var(--teal); | ||
| height: 3em; | ||
| margin-bottom: 0.25em; | ||
| } | ||
| .board .column button { | ||
| height: 100%; | ||
| color: inherit; | ||
| font-size: 2em; | ||
| webkit-appearance: none; | ||
| border: 0; | ||
| background: none; | ||
| display: block; | ||
| width: 100%; | ||
| cursor: pointer; | ||
| text-shadow: var(--text-shadow); | ||
| font-weight:bold; | ||
| } | ||
| .board .column button.used { | ||
| visibility: hidden; | ||
| } | ||
|
|
||
| .card-modal { | ||
| opacity: 0; | ||
| pointer-events:none; | ||
| transition: opacity 0.4s; | ||
| left: 0; | ||
| right: 0; | ||
| top: 0; | ||
| bottom: 0; | ||
| background: var(--blue); | ||
| position: fixed; | ||
| font-size: 2vw; | ||
| text-align: center; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| .card-modal.visible { | ||
| opacity: 1; | ||
| pointer-events:initial; | ||
| } | ||
| .card-modal.showing-result .result { | ||
| display:block; | ||
| } | ||
|
|
||
| .card-model .clue-text { | ||
| margin-bottom: 2em; | ||
| } | ||
|
|
||
| .result, | ||
| .card-modal.showing-result form { | ||
| display:none; | ||
| } | ||
|
|
||
| .card-modal form { | ||
| display: flex; | ||
| } | ||
| .card-modal form input[type="text"] { | ||
| display: block; | ||
| flex-grow: 1; | ||
| height: 3em; | ||
| line-height: 3em; | ||
| border: 0; | ||
| text-align: center; | ||
| border-top-left-radius: 0.4em; | ||
| border-bottom-left-radius: 0.4em; | ||
| } | ||
| .card-modal form button[type="submit"] { | ||
| padding-left: 2em; | ||
| padding-right: 2em; | ||
| cursor: pointer; | ||
| font-family: inherit; | ||
| background: var(--teal); | ||
| border: 0; | ||
| font-size: inherit; | ||
| border-top-right-radius: 0.4em; | ||
| border-bottom-right-radius: 0.4em; | ||
| } | ||
| .card-modal-inner { | ||
| width: 60%; | ||
| text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); | ||
| } | ||
|
|
||
| .result_success, .result_fail { | ||
| font-size: 2em; | ||
| font-weight:bold; | ||
| } | ||
| .result_success { | ||
| color: var(--green); | ||
| } | ||
| .result_fail { | ||
| color: var(--lilac); | ||
| } | ||
| .result_correct-answer-text { | ||
| font-weight:bold; | ||
| font-size: 2em; | ||
| display:block; | ||
| margin-left: 0.1em; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <link rel="stylesheet" href="jeopardy.css"> | ||
| <div class="app"> | ||
|
|
||
| <!-- Top section --> | ||
| <header class="top-header"> | ||
| <h1>Jeopardy </h1> | ||
| <p class="score">Score <span class="score-count"></span></p> | ||
| </header> | ||
|
|
||
| <!-- container for the board --> | ||
| <div class="board"> | ||
| <!-- categories get injected here --> | ||
| </div> | ||
|
|
||
| <!-- invisible container for the card prompt --> | ||
| <div class="card-modal"> | ||
| <div class=card-modal-inner> | ||
| <h2 class="clue-text"><!-- clue gets injected here --></h2> | ||
| <form autocomplete="off"> | ||
| <input name="user-answer" type="text" /> | ||
| <button type="submit">Answer</button> | ||
| </form> | ||
| <div class="result"> | ||
| <p class="result_success">CORRECT</p> | ||
| <p class="result_fail">INCORRECT</p> | ||
| <p class="result_correct-answer"> | ||
| The correct answer is <span class="result_correct-answer-text"><!--answer gets injected here--></span> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| <script src="jeopardy.js"></script> | ||
| </html> | ||
|
|
||
|
|
||
|
|
||
|
|
Oops, something went wrong.