diff options
| author | Jakob L. Kreuze <zerodaysfordays@sdf.org> | 2025-07-19 17:26:14 -0400 |
|---|---|---|
| committer | Jakob L. Kreuze <zerodaysfordays@sdf.org> | 2025-07-19 17:27:02 -0400 |
| commit | 4a0f339c419075e3a8365a88c76eb54880119c0c (patch) | |
| tree | 2f8322c8e02cad26cd1331e158e4cedec9acf295 | |
| parent | 2c7f6643df243693035a38d2b407eb758f625b41 (diff) | |
Classification banner
| -rw-r--r-- | flashcards.html | 25 | ||||
| -rw-r--r-- | style.css | 34 |
2 files changed, 50 insertions, 9 deletions
diff --git a/flashcards.html b/flashcards.html index 4727889..98df131 100644 --- a/flashcards.html +++ b/flashcards.html @@ -6,17 +6,24 @@ <link rel="stylesheet" href="style.css"> </head> <body> - <div id="flashcard"> - <div id="flashcard-front"></div> - <div id="flashcard-back"></div> - </div> + <div class="banner top-banner">UNCLASSIFIED // FOUO</div> + + <div class="banner bottom-banner">UNCLASSIFIED // FOUO</div> + + <div class="content"> + + <div id="flashcard"> + <div id="flashcard-front"></div> + <div id="flashcard-back"></div> + </div> - <div class="status-section"> - <div id="status-info"> - No cards loaded! + <div class="status-section"> + <div id="status-info"> + No cards loaded! + </div> + <hr> + <input type="file" id="cards-input" accept=".json" /> </div> - <hr> - <input type="file" id="cards-input" accept=".json" /> </div> <div id="button-container"> @@ -79,3 +79,37 @@ body { filter: drop-shadow(2px 2px 5px gray); box-shadow: 2px 2px 5px gray; } + + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.banner { + position: fixed; + width: 100%; + color: white; + text-align: center; + font-weight: bold; + line-height: 16px; + font-size: 12px; + z-index: 100; +} + +.top-banner { + top: 0; + background-color: #008000; +} + +.bottom-banner { + bottom: 0; + background-color: #008000; +} + +.content { + padding: 20px; + max-width: 800px; + margin: auto; +} |