diff options
Diffstat (limited to 'elm/cyoa/index.html')
| -rw-r--r-- | elm/cyoa/index.html | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/elm/cyoa/index.html b/elm/cyoa/index.html new file mode 100644 index 0000000..8bee220 --- /dev/null +++ b/elm/cyoa/index.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <title>Choose Your Own Adventure</title> + <style> + body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + max-width: 800px; + margin: 0 auto; + padding: 20px; + background-color: #f5f5f5; + } + + .game-container { + background-color: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + } + + .scene { + margin-bottom: 20px; + } + + h1 { + color: #2c3e50; + margin-bottom: 10px; + } + + h2 { + color: #34495e; + font-size: 1.2em; + margin-top: 20px; + } + + .choices ul, .items ul, .inventory ul { + list-style: none; + padding: 0; + } + + .choices li, .items li { + margin: 10px 0; + } + + .choice-button, .item-button { + background-color: #3498db; + color: white; + border: none; + padding: 10px 20px; + border-radius: 4px; + cursor: pointer; + font-size: 1em; + transition: background-color 0.2s; + } + + .choice-button:hover, .item-button:hover { + background-color: #2980b9; + } + + .choice-button.disabled { + background-color: #bdc3c7; + cursor: not-allowed; + } + + .inventory { + margin-top: 30px; + padding-top: 20px; + border-top: 1px solid #eee; + } + + .inventory li { + margin: 5px 0; + color: #7f8c8d; + } + </style> + </head> + <body> + <div id="elm"></div> + <script src="elm.js"></script> + <script> + var app = Elm.Main.init({ + node: document.getElementById('elm') + }); + </script> + </body> +</html> \ No newline at end of file |