Skip to content
Permalink
bf142e05d3
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

m1-2024/index.html

Go to file
 
 
Cannot retrieve contributors at this time
156 lines (142 sloc) 5.64 KB
Raw Blame
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple To Do List</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
</head>
<body>
<style>
.example-content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.input-button-container {
display: flex;
align-items: center;
gap: 10px;
}
</style>
<ion-app>
<ion-menu content-id="main-content">
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button id="close-menu-button">
<ion-icon class="ion-padding" name="close" style="width: 25px; height: 25px; "></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-title>Simple To Do List</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<div style="background: lightblue; border-radius: 50%; width: 50px; height: 50px;"></div>
<h5>This does nothing</h5>
<p>But built it anyway.</p>
</ion-content>
</ion-menu>
<ion-tabs>
<!-- Home Tab -->
<ion-tab tab="home">
<ion-header>
<ion-toolbar>
<div class="ion-page" id="main-content">
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Simple To Do List</ion-title>
</ion-toolbar>
</ion-header>
</div>
</ion-toolbar>
</ion-header>
<!-- Input for the To-Do item -->
<ion-content id="main-content" class="ion-padding">
<h3 style="color: grey;">Add an item</h3>
<div class="input-button-container" style="padding: 20px 0px;">
<ion-input label-placement="floating" fill="outline" placeholder="Enter text" height="36px"></ion-input>
<ion-button id="open-toast" expand="block">Save</ion-button>
<ion-toast trigger="open-toast" message="Item added successfully" duration="5000"></ion-toast>
</div>
<ion-list id="task-list" style="padding: 40px 0px;">
<ion-item style="border: 1px rgb(180, 176, 176) solid;">
<ion-checkbox slot="start"></ion-checkbox>
<ion-label style="color: rgb(109, 108, 108);" >Launch app on Google Pay Store</ion-label>
</ion-item>
<ion-item style="border: 1px rgb(180, 176, 176) solid;">
<ion-checkbox slot="start"></ion-checkbox>
<ion-label style="color: rgb(109, 108, 108);">Finish app prototype</ion-label>
</ion-item>
<ion-item style="border: 1px rgb(180, 176, 176) solid;">
<ion-checkbox slot="start"></ion-checkbox>
<ion-label style="color: rgb(109, 108, 108);">Build the app</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-tab>
<ion-tab tab="setting">
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Simple To Do List</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h3 style="color: grey;">Setting</h3>
</ion-content>
</ion-tab>
<ion-tab tab="lists">
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Simple To Do List</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h3 style="color: grey;">Lists</h3>
</ion-content>
</ion-tab>
<!-- Tab Bar -->
<ion-tab-bar slot="bottom" color="primary">
<ion-tab-button tab="home">
<ion-icon name="home-outline"></ion-icon>
HOME
</ion-tab-button>
<ion-tab-button tab="lists">
<ion-icon name="list-outline"></ion-icon>
LISTS
</ion-tab-button>
<ion-tab-button tab="setting">
<ion-icon name="settings-outline"></ion-icon>
SETTING
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-app>
<script>
const homeNav = document.querySelector('#home-nav');
const homePage = document.querySelector('#home-page');
homeNav.root = homePage;
const radioNav = document.querySelector('#radio-nav');
const radioPage = document.querySelector('#radio-page');
radioNav.root = radioPage;
const libraryNav = document.querySelector('#library-nav');
const libraryPage = document.querySelector('#library-page');
libraryNav.root = libraryPage;
</script>
</body>
</html>