Pricing Plans UI #1

Merged
reyhne merged 1 commits from develop into main 2026-07-17 17:33:20 +00:00
4 changed files with 75 additions and 33 deletions
+49 -20
View File
@@ -1,39 +1,68 @@
package workshop; package workshop;
import javafx.fxml.FXML; import javafx.fxml.FXML;
import javafx.scene.control.Label; import javafx.scene.Scene;
import javafx.scene.control.Alert;
import javafx.scene.control.Button; import javafx.scene.control.Button;
import javafx.scene.control.Label;
public class Controller { public class Controller
@FXML private Label titleLabel; {
@FXML private Button themeToggle; @FXML
private Label titleLabel;
@FXML
private Button themeToggle;
private boolean isDark = true; private boolean isDark = true;
// TODO: (Optional) Create initialize function and use it to set prices during runtime. // (Optional)
@FXML
public void initialize() {}
@FXML @FXML
private void buyBasic() { private void buyBasic() {showAlert("You entered the payment gateway for the Basic plan.");}
// TODO: Call showAlert() with a message indicating the user entered the payment gateway
}
@FXML @FXML
private void buyPro() { private void buyPro() {showAlert("You entered the payment gateway for the Pro plan.");}
// TODO: Call showAlert() with a message indicating the user entered the payment gateway
}
@FXML @FXML
private void buyEnterprise() { private void buyEnterprise() {showAlert("You entered the payment gateway for the Enterprise plan.");}
// TODO: Call showAlert() with a message indicating the user entered the payment gateway
}
@FXML @FXML
private void toggleTheme() { private void toggleTheme()
// TODO: Toggle the isDark flag. If dark, switch to style.css and set button text to "Switch to Light Mode" {
// TODO: If light, switch to light.css and set button text to "Switch to Dark Mode" Scene scene = themeToggle.getScene();
if (isDark)
{
scene.getStylesheets().clear();
scene.getStylesheets().add(
getClass().getResource("light.css").toExternalForm()
);
themeToggle.setText("Switch to Dark Mode");
isDark = false;
}
else
{
scene.getStylesheets().clear();
scene.getStylesheets().add(
getClass().getResource("style.css").toExternalForm()
);
themeToggle.setText("Switch to Light Mode");
isDark = true;
}
} }
private void showAlert(String message) { private void showAlert(String message)
// TODO: Create a new Alert of type INFORMATION with the given message and display it {
Alert alert = new Alert(Alert.AlertType.INFORMATION);
alert.setTitle("Payment");
alert.setHeaderText(null);
alert.setContentText(message);
alert.showAndWait();
} }
} }
+4 -5
View File
@@ -2,8 +2,7 @@ package workshop;
import javafx.application.Application; import javafx.application.Application;
public class Launcher { public class Launcher
public static void main(String[] args) { {
// TODO: Launch the JavaFX application by calling Application.launch(Main.class) public static void main(String[] args) {Application.launch(Main.class, args);}
} }
}
+20 -6
View File
@@ -1,13 +1,27 @@
package workshop; package workshop;
import javafx.application.Application; import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage; import javafx.stage.Stage;
public class Main extends Application { public class Main extends Application
{
@Override @Override
public void start(Stage stage) throws Exception { public void start(Stage stage) throws Exception
// TODO: Load the FXML file using FXMLLoader.load() and get the Parent root {
// TODO: Create a Scene with the root (width=750, height=450) and add the stylesheet "style.css" FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("pricing.fxml"));
// TODO: Set the stage title to "Pricing Plans", set the scene, and call stage.show()
Parent root = fxmlLoader.load();
Scene scene = new Scene(root, 750, 450);
scene.getStylesheets().add(
getClass().getResource("style.css").toExternalForm()
);
stage.setTitle("Pricing Plans");
stage.setScene(scene);
stage.show();
} }
} }
+2 -2
View File
@@ -17,14 +17,14 @@
<HBox spacing="25" alignment="CENTER" HBox.hgrow="ALWAYS"> <HBox spacing="25" alignment="CENTER" HBox.hgrow="ALWAYS">
<VBox styleClass="card" prefWidth="200"> <VBox styleClass="card" prefWidth="200">
<Label text="Basic" styleClass="plan-name" /> <Label text="Basic" styleClass="plan-name" />
<Label text="$9.99 / month" styleClass="price" /> <Label text="\$9.99 / month" styleClass="price" />
<Label text="Single user, basic features" styleClass="desc" wrapText="true" /> <Label text="Single user, basic features" styleClass="desc" wrapText="true" />
<Button text="Shop" onAction="#buyBasic" styleClass="shop-btn" /> <Button text="Shop" onAction="#buyBasic" styleClass="shop-btn" />
</VBox> </VBox>
<VBox styleClass="card" prefWidth="200"> <VBox styleClass="card" prefWidth="200">
<Label text="Pro" styleClass="plan-name" /> <Label text="Pro" styleClass="plan-name" />
<Label text="$19.99 / month" styleClass="price" /> <Label text="\$19.99 / month" styleClass="price" />
<Label text="Up to 5 users, advanced features" styleClass="desc" wrapText="true" /> <Label text="Up to 5 users, advanced features" styleClass="desc" wrapText="true" />
<Button text="Shop" onAction="#buyPro" styleClass="shop-btn" /> <Button text="Shop" onAction="#buyPro" styleClass="shop-btn" />
</VBox> </VBox>