modified: index.html

modified: sleep.css
Vebochkin · Apr 4, 2024 · d253a6f · d253a6f
1 parent ea8c610
commit d253a6f
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -7,32 +7,17 @@
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-  <h1 id="appTitle">Sleep Calculator</h1>
-  <label for="bedtime">Enter your bedtime:</label>
-  <input type="time" id="bedtime" name="bedtime">
-  <button onclick="calculateSleep()">Calculate</button>
-  <div id="result"></div>
-  <button onclick="togglePremium()">Premium Version ($0.79)</button>
+  <div class="container">
+    <h1 class="app-title">Sleep Calculator</h1>
+    <div class="calculator">
+      <label for="bedtime">Enter your bedtime:</label>
+      <input type="time" id="bedtime" name="bedtime">
+      <button class="calculate-button" onclick="calculateSleep()">Calculate</button>
+      <div id="result" class="result"></div>
+      <button class="premium-button" onclick="togglePremium()">Go Premium ($0.79)</button>
+    </div>
+  </div>
 
-  <script src="https://js.stripe.com/v3/"></script>
   <script src="script.js"></script>
-  <script>
-    let premiumEnabled = localStorage.getItem('premiumEnabled') === 'true';
-
-    function togglePremium() {
-      premiumEnabled = !premiumEnabled;
-
-      if (premiumEnabled) {
-        openPremiumWindow();
-        localStorage.setItem('premiumEnabled', 'true');
-      } else {
-        localStorage.removeItem('premiumEnabled');
-      }
-    }
-
-    function openPremiumWindow() {
-      window.open('premium.html', 'premiumWindow', 'width=400,height=400');
-    }
-  </script>
 </body>
 </html>
diff --git a/sleep.css b/sleep.css
@@ -1,35 +1,64 @@
 body {
-    font-family: Arial, sans-serif;
-    text-align: center;
+    font-family: 'Arial', sans-serif;
+    background-color: #f7f7f7;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+
+  .container {
+    max-width: 400px;
+    width: 100%;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
 
-  h1 {
+  .app-title {
+    text-align: center;
+    margin-bottom: 20px;
     color: #333;
   }
 
+  .calculator {
+    display: flex;
+    flex-direction: column;
+  }
+
   label {
-    display: block;
+    color: #666;
+    margin-bottom: 10px;
+  }
+
+  input[type="time"] {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
     margin-bottom: 10px;
   }
 
-  button {
+  .calculate-button, .premium-button {
     background-color: #007bff;
     color: #fff;
     padding: 10px 20px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
+    margin-top: 10px;
   }
 
-  button:hover {
+  .calculate-button:hover, .premium-button:hover {
     background-color: #0056b3;
   }
 
-  #result {
+  .result {
     margin-top: 20px;
-  }
-  .dark-theme {
-    background-color: #333;
-    color: #fff;
+    text-align: center;
+    font-size: 18px;
+    color: #333;
   }