Skip to content
Permalink
ca041919ad
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-fall-2024/index.html

Go to file
 
 
Cannot retrieve contributors at this time
163 lines (144 sloc) 5.55 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%;
}
h1{
padding-left: 6%;
}
</style>
<!--Menu-->
<!--This is the menu inside-->
<ion-menu content-id="main-content" >
<ion-header>
<ion-toolbar color="primary">
<ion-title>Simple To Do List</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding" color="medium">This is the menu content.</ion-content>
</ion-menu>
<div class="ion-page" id="main-content">
<!--This is the actual menu header bar-->
<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-tabs>
<ion-tab tab="home">
<ion-nav id="home-nav"></ion-nav>
<div id="home-page">
<ion-header>
<ion-toolbar>
<ion-title>Home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h1 >Add an item:</h1>
<ion-grid>
<ion-row class="ion-justify-content-center">
<ion-col size="7">
<ion-input label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
</ion-col>
<ion-col size="4"><ion-button id="open-toast" expand="block">Save</ion-button> </ion-col>
</ion-row>
</ion-grid>
<ion-toast trigger="open-toast" message="Item added successfully!" duration="5000"></ion-toast>
<ion-grid>
<ion-row class="ion-justify-content-center">
<ion-col size="11" >
<ion-list>
<ion-item>
<ion-label><ion-checkbox label-placement="end" alignment="start">Pickup milk</ion-checkbox>
</ion-item></ion-label>
</ion-item>
<ion-item>
<ion-label><ion-checkbox label-placement="end" alignment="start">Pickup milk</ion-checkbox> </ion-item>
<ion-item>
<ion-label><ion-checkbox label-placement="end" alignment="start">Pickup milk</ion-checkbox> </ion-item>
<ion-item>
<ion-label><ion-checkbox label-placement="end" alignment="start">Pickup milk</ion-checkbox> </ion-item>
<ion-item>
<ion-label><ion-checkbox label-placement="end" alignment="start">Pickup milk</ion-checkbox> </ion-item>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
</div>
</ion-tab>
<ion-tab tab="radio">
<ion-nav id="radio-nav"></ion-nav>
<div id="radio-page">
<ion-header>
<ion-toolbar>
<ion-title>Lists</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="example-content">Lists</div>
</ion-content>
</div>
</ion-tab>
<ion-tab tab="library">
<ion-nav id="library-nav"></ion-nav>
<div id="library-page">
<ion-header>
<ion-toolbar>
<ion-title>Settings</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="example-content">Settings</div>
</ion-content>
</div>
</ion-tab>
<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="radio">
<ion-icon name="list-outline"></ion-icon>
List
</ion-tab-button>
<ion-tab-button tab="library">
<ion-icon name="settings-outline"></ion-icon>
Settings
</ion-tab-bar>
</ion-tabs>
</div>
<!--Menu End-->
<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;
const searchNav = document.querySelector('#search-nav');
const searchPage = document.querySelector('#search-page');
searchNav.root = searchPage;
</script>
</body>
</html>