75 lines
3.6 KiB
HTML
75 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Motivational Quotes</title>
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Wrapper to center the container -->
|
|
<div class="container-wrapper">
|
|
<div class="container text-center">
|
|
<div id="quote" class="my-4">Loading...</div>
|
|
<div id="author" class="mb-4"></div>
|
|
</div>
|
|
<!-- Button outside the container but inside the wrapper -->
|
|
<button id="new-quote" class="btn btn-primary btn-lg">New Quote</button>
|
|
<!-- Screenshot Button -->
|
|
<button id="screenshot-button" class="btn btn-secondary btn-lg">📷 Take Screenshot</button>
|
|
<button id="clipboard-button" class="btn btn-secondary btn-lg">📋 Copy to Clipboard</button>
|
|
</div>
|
|
|
|
<!-- Floating Settings Button -->
|
|
<button id="settings-button" class="btn btn-primary btn-circle">⚙️</button>
|
|
|
|
<!-- Settings Modal -->
|
|
<div id="settings-modal" class="modal fade" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Settings</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="bg-color">Background Color:</label>
|
|
<input type="color" id="bg-color" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="text-color">Text Color:</label>
|
|
<input type="color" id="text-color" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="box-color">Box Color:</label>
|
|
<input type="color" id="box-color" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="font-size">Font Size:</label>
|
|
<input type="range" id="font-size" class="custom-range" min="16" max="36" value="24">
|
|
<small class="form-text text-muted">Current font size: <span id="font-size-value">24px</span></small>
|
|
</div>
|
|
<button id="toggle-dark-mode" class="btn btn-secondary btn-block">Toggle Dark Mode</button>
|
|
<button id="reset-settings" class="btn btn-danger btn-block mt-2">Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer fixed-bottom text-center py-3">
|
|
<p class="mb-0">© Noah Pombas | <a href="mailto:info@noahpombas.ch">info@noahpombas.ch</a> | <a href="https://portfolio.noahpombas.ch" target="_blank">portfolio.noahpombas.ch</a></p>
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|