7361 lines
567 KiB
HTML
7361 lines
567 KiB
HTML
<!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" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<title>Phone</title>
|
|
|
|
<link rel="stylesheet" href="./css/modules/emojionearea.css" />
|
|
<link rel="stylesheet" href="./css/device.css" />
|
|
<link rel="stylesheet" href="./css/main.css" />
|
|
<link rel="stylesheet" href="./css/modules/numberpicker.css" />
|
|
<link rel="stylesheet" href="./css/modules/tooltip.css" />
|
|
<link rel="stylesheet" href="./css/apps/settings.css" />
|
|
<link rel="stylesheet" href="./css/apps/phone.css" />
|
|
<link rel="stylesheet" href="./css/apps/twitter.css" />
|
|
<link rel="stylesheet" href="./css/apps/bank.css" />
|
|
<link rel="stylesheet" href="./css/apps/health.css" />
|
|
<link rel="stylesheet" href="./css/apps/whatsapp.css" />
|
|
<link rel="stylesheet" href="./css/apps/tiktok.css" />
|
|
<link rel="stylesheet" href="./css/apps/uberRider.css">
|
|
<link rel="stylesheet" href="./css/apps/garage.css" />
|
|
<link rel="stylesheet" href="https://cdn.rawgit.com/ichord/At.js/master/dist/css/jquery.atwho.css" />
|
|
<link rel="stylesheet" href="./css/apps/darkweb.css" />
|
|
<link rel="stylesheet" href="./css/apps/mail.css" />
|
|
<link rel="stylesheet" href="./css/apps/racing.css" />
|
|
<link rel="stylesheet" href="./css/apps/state.css" />
|
|
<link rel="stylesheet" href="./css/apps/calendar.css" />
|
|
<link rel="stylesheet" href="./css/apps/crypto.css" />
|
|
<link rel="stylesheet" href="./css/apps/jobcenter.css" />
|
|
<link rel="stylesheet" href="./css/apps/houses.css" />
|
|
<link rel="stylesheet" href="./css/apps/tinder.css" />
|
|
<link rel="stylesheet" href="./css/apps/clock.css" />
|
|
<link rel="stylesheet" href="./css/modules/iosmodals.css" />
|
|
<link rel="stylesheet" href="./css/apps/gallery.css" />
|
|
<link rel="stylesheet" href="./css/apps/messages.css" />
|
|
<link rel="stylesheet" href="./css/apps/youtube.css" />
|
|
<link rel="stylesheet" href="./css/apps/store.css" />
|
|
<link rel="stylesheet" href="./css/modules/controlcenter.css" />
|
|
<link rel="stylesheet" href="./css/modules/homescreen.css" />
|
|
<link rel="stylesheet" href="./css/modules/lockscreen.css" />
|
|
<link rel="stylesheet" href="./css/modules/dynamicisland.css" />
|
|
<link rel="stylesheet" href="./css/modules/widgetcenter.css" />
|
|
<link rel="stylesheet" href="./css/modules/applibrary.css" />
|
|
<link rel="stylesheet" href="./css/modules/closedapps.css" />
|
|
<link rel="stylesheet" href="./css/modules/instagram-filters.min.css" />
|
|
<link rel="stylesheet" href="./css/modules/pincode.css" />
|
|
<link rel="stylesheet" href="./css/apps/weather.css" />
|
|
<link rel="stylesheet" href="./css/apps/calculator.css" />
|
|
<link rel="stylesheet" href="./css/apps/spotify.css" />
|
|
<link rel="stylesheet" href="./css/modules/slick.css" />
|
|
<link rel="stylesheet" href="./css/apps/instagram.css" />
|
|
<link rel="stylesheet" href="./css/apps/discord.css" />
|
|
<link rel="stylesheet" href="./css/apps/facetime.css" />
|
|
<link rel="stylesheet" href="./css/apps/yellowpages.css" />
|
|
<link rel="stylesheet" href="./css/apps/uber.css">
|
|
<link rel="stylesheet" href="./css/apps/notes.css">
|
|
<link rel="stylesheet" href="./css/apps/rentel.css">
|
|
<link rel="stylesheet" href="./css/apps/market.css">
|
|
<link rel="stylesheet" href="./css/apps/map.css">
|
|
<link rel="stylesheet" href="./css/apps/weazel.css">
|
|
<link rel="stylesheet" href="./css/apps/darkchat.css">
|
|
<link rel="stylesheet" href="./css/apps/reminder.css" />
|
|
<link rel="stylesheet" href="./css/apps/camera.css" />
|
|
<link rel="stylesheet" href="./css/modules/star-rating.svg.css" />
|
|
<link rel="stylesheet" href="./css/modules/bootstrap.css" />
|
|
<link rel="stylesheet" href="./css/modules/startup.css" />
|
|
<link rel="stylesheet" href="./css/themes.css" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
|
|
|
|
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.1.5/purify.min.js" integrity="sha512-JatFEe90fJU2nrgf27fUz2hWRvdYrSlTEV8esFuqCtfiqWN8phkS1fUl/xCfYyrLDQcNf3YyS0V9hG7U4RHNmQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://use.fortawesome.com/1ce05b4b.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
|
|
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js'></script>
|
|
<script src="https://apis.google.com/js/api.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" integrity="sha512-h9FcoyWjHcOcmEVkxOfTLnmZFWIH0iZhZT1H2TbOq55xssQGEJHEaIm+PgoUaZbRvQTNTluNOEfb1ZRy6D3BOw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" integrity="sha512-puJW3E/qXDqYp9IfhAI54BJEaWIfloJ7JWs7OeD5i6ruC9JZL1gERT1wjtwXFlh7CjE7ZJ+/vcRZRkIYIb6p4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://code.highcharts.com/highcharts.js"></script>
|
|
<link rel="stylesheet" href="./css/tailwind.css">
|
|
<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
|
|
</head>
|
|
|
|
<body style="background-color: transparent;">
|
|
<div class="stopDraggingPhone">Confirm</div>
|
|
|
|
<div id="spotify-play"></div>
|
|
|
|
<div id="youtube-otherPlays"></div>
|
|
|
|
<div class="race-container">
|
|
<div class="ui">
|
|
<div class="editor">
|
|
<span id="editor-racename">Race: Test Race</span>
|
|
<span id="editor-checkpoints">Checkpoints: 1 / ?</span>
|
|
<span id="editor-keys-add">+ ] / - [ - Tire Distance: [dist]</span>
|
|
<span id="editor-keys-tiredistance">7 - Add Checkpoint</span>
|
|
<span id="editor-keys-delete">8 - Delete Checkpoint</span>
|
|
<span id="editor-keys-cancel">9 - Cancel Editor</span>
|
|
<span id="editor-keys-save">K - Save Race</span>
|
|
</div>
|
|
|
|
<div class="race">
|
|
<span id="race-racename">Race: Test Race</span>
|
|
<span id="race-checkpoints">Checkpoints: 1 / 1</span>
|
|
<span id="race-lap">Lap: 1 / 1</span>
|
|
<span id="race-time">Current Lap: </span>
|
|
<span id="race-besttime">Best Lap: </span>
|
|
<span id="race-totaltime">Total Time: </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template id="phone-widget-container">
|
|
<section class="phone-widget-container">
|
|
<section class="weather-widget phone-widget phone-application" data-app='weather-widget'>
|
|
<header class="flex flex-col">
|
|
<span>
|
|
<a class="font-bold tracking-1">Los Santos</a>
|
|
<i class="fas fa-paper-plane text-sm"></i>
|
|
</span>
|
|
<a class="weather-degree">7°</a>
|
|
</header>
|
|
<footer class="flex flex-col gap-2">
|
|
<img alt="" width="18" height="18" class="weather-icon">
|
|
<a class="weather-type text-sm">Clear</a>
|
|
</footer>
|
|
</section>
|
|
<a class="phone-widget-name">Weather</a>
|
|
</section>
|
|
|
|
<section class="phone-widget-container">
|
|
<section class="crypto-widget phone-widget phone-application" data-app='crypto-widget'>
|
|
<header class="flex flex-row items-center justify-between w-full">
|
|
<a class="ellipsis crypto-widget-name">BTC</a>
|
|
<span class="graph-info-small">+2.18 (3.71%)</span>
|
|
</header>
|
|
<div class="crypto-graph"></div>
|
|
<div class="graph-info">
|
|
<span class="graph-info-big">634.39</span>
|
|
</div>
|
|
</section>
|
|
<a class="phone-widget-name">Crypto</a>
|
|
</section>
|
|
|
|
<section class="phone-widget-container">
|
|
<section class="calendar-widget phone-widget phone-application" class="overflow-hidden" data-app='clock-widget'>
|
|
<div class="calendarioWrapper"></div>
|
|
</section>
|
|
<a class="phone-widget-name">Calendar</a>
|
|
</section>
|
|
|
|
<section class="phone-widget-container">
|
|
<section class="map-widget phone-widget phone-application" class="overflow-hidden" data-app='map-widget'>
|
|
<div class="map-widget-map w-full h-full"></div>
|
|
</section>
|
|
<a class="phone-widget-name">Map</a>
|
|
</section>
|
|
|
|
<section class="phone-widget-container">
|
|
<section class="notes-widget phone-widget phone-application" data-app='notes-widget'>
|
|
<header id="notes-widget-header">
|
|
<i class="fa-solid fa-folder"></i>
|
|
<a>Notes</a>
|
|
</header>
|
|
<section class="notes-widget-list self-start w-full overflow-y">
|
|
</section>
|
|
</section>
|
|
<a class="phone-widget-name">Notes</a>
|
|
</section>
|
|
<section class="phone-widget-container">
|
|
<section class="gallery-widget phone-widget phone-application" data-app='gallery-widget'></section>
|
|
<a class="phone-widget-name">Gallery</a>
|
|
</section>
|
|
<section class="phone-widget-container">
|
|
<section class="reminder-widget phone-widget phone-application" data-app='reminder-widget'>
|
|
<div class="reminder-widget-information">
|
|
<div class="reminder-icon">
|
|
<i class="fa-solid fa-list"></i>
|
|
</div>
|
|
<p class="reminder-widget-count" id="total-reminders-widget-count">0</p>
|
|
</div>
|
|
<header id="reminder-widget-header">
|
|
<a>Reminders</a>
|
|
</header>
|
|
<section class="reminder-widget-list self-start w-full overflow-y">
|
|
</section>
|
|
</section>
|
|
<a class="phone-widget-name">Reminder</a>
|
|
</section>
|
|
<section class="phone-widget-container">
|
|
<div class="weazel-widget phone-widget phone-application" data-app='weazel-widget'>
|
|
<header id="weazel-widget-header">
|
|
<h7>Top Stories</h7>
|
|
<img src="img/app_details/news.png">
|
|
</header>
|
|
<article class="weazel-widget-contents w-full"></article>
|
|
</div>
|
|
<a class="phone-widget-name">Weazel</a>
|
|
</section>
|
|
<section class="phone-widget-container">
|
|
<div class="battery-widget phone-widget phone-application" data-app="battery-widget">
|
|
<div class="batteryInfo">
|
|
<div class="iconWrapper high">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
<path d="M14 59a3 3 0 0 0 3 3h30a3 3 0 0 0 3-3v-9H14zM50 5a3 3 0 0 0-3-3H17a3 3 0 0 0-3 3v5h36zm0 45V10m-36 0v40">
|
|
</path>
|
|
<circle cx="32" cy="56" r="2"></circle>
|
|
</svg>
|
|
</div>
|
|
<a class="battery-charge" style="font-size: 2.5rem;">100%</a>
|
|
</div>
|
|
</div>
|
|
<a class="phone-widget-name">Battery</a>
|
|
</section>
|
|
|
|
<section class="phone-widget-container">
|
|
<div class="spotify-widget phone-widget phone-application" data-app='spotify-widget'>
|
|
<div class="spotify-widget-header">
|
|
<img src="img/apps/spotify.png">
|
|
<div id="spotify-widget-content">
|
|
<a id="spotify-widget-author" class="artist widget-artist">Artist</a>
|
|
<a id="spotify-widget-title" class="track widget-track">Song Name</a>
|
|
</div>
|
|
</div>
|
|
<div class="player">
|
|
<div class="prevTrack" onmousedown="event.stopPropagation()" onclick="spotifyPlayerPrevTrack(event)">
|
|
<i class="fa fa-step-backward" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="playBtn" onmousedown="event.stopPropagation()" onclick="playPauseCheck(event)"><i class="fa fa-play" aria-hidden="true"></i></div>
|
|
<div class="nextTrack" onmousedown="event.stopPropagation()" onclick="spotifyPlayerNextTrack(event)">
|
|
<i class="fa fa-step-forward" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a class="phone-widget-name">Spotify</a>
|
|
</section>
|
|
</template>
|
|
|
|
|
|
<template id="instagram-post-template">
|
|
<header onclick="{{onclick_header}}">
|
|
<img alt="" src="{{avatar}}" class="post_owner_image">
|
|
<a class="post_owner">{{username}}</a>
|
|
{{verified}}
|
|
</header>
|
|
<figure class="{{filter}}">
|
|
{{post_image}}
|
|
</figure>
|
|
<div class="actions justify-between">
|
|
<div class="left">
|
|
<button type="button" onclick="{{onclick_like}}">
|
|
{{like_icon}}
|
|
</button>
|
|
<button type="button" class="instagram-view-comments" onclick="{{onclick_view_comments}}">
|
|
<svg height="24" role="img" viewBox="0 0 24 24" width="24">
|
|
<path d="M20.656 17.008a9.993 9.993 0 10-3.59 3.615L22 22z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{{delete}}
|
|
</div>
|
|
<div class="infos">
|
|
<div class="likes">{{likes}}</div>
|
|
<div class="postName">
|
|
<span class="bold">{{username}}</span>
|
|
<span class="modern-ellipsis">{{description}}</span>
|
|
</div>
|
|
<div class="instagram-view-comments text-muted" onclick="{{onclick_view_comments}}">{{comments}}</div>
|
|
<div class="post_time">{{date}}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="messages-app-chat-template">
|
|
{{read}}
|
|
<img class="messages-app-body-messagePP" src="{{avatar}}" alt="Avatar">
|
|
<div class="messages-app-body-message-content">
|
|
<a class="message-app-body-messageOwner">{{name}}</a>
|
|
<a class="message-app-body-lastMessage">{{last_message}}</a>
|
|
</div>
|
|
<a class="messages-app-body-messageTime">{{time}}</a>
|
|
<i class="fas fa-chevron-right messages-app-body-message-right"></i>
|
|
</template>
|
|
|
|
<section id="camera-helper-text" class="hidden absolute left-0 z-9999999999 top-0">
|
|
<div class="text-red-500">
|
|
<div class="text text-press">Press</div>
|
|
<div class="letter enter-key">↵</div>
|
|
<div class="text text-take-cam">to take a photo</div>
|
|
</div>
|
|
<div class="text-blue-500">
|
|
<div class="text text-press">Press</div>
|
|
<div class="letter">Alt</div>
|
|
<div class="text text-rotate-cam">to rotate the camera</div>
|
|
</div>
|
|
<div class="text-blue-500">
|
|
<div class="text text-press">Press</div>
|
|
<div class="letter">Q</div>
|
|
<div class="text text-flip-cam">to flip the camera</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<template class="calendar-icon">
|
|
<a class="calendar-day text-red-500 font-semibold"></a>
|
|
<a class="calendar-date text-black- text-3-5xl"></a>
|
|
</template>
|
|
|
|
<section id="phone-device-container">
|
|
<figure id="phone-device">
|
|
<figure id="phone-dynamic-island-container">
|
|
<figure id="phone-camera"></figure>
|
|
<header id="phone-dynamic-island">
|
|
<div id="phone-notification-container" class="phone-notification-container phone-dynamic-island-child">
|
|
<div class="notification-icon"></div>
|
|
<div class="flex flex-col">
|
|
<div class="notification-title text-white-"></div>
|
|
<div class="notification-text text-muted text-sm"></div>
|
|
</div>
|
|
</div>
|
|
<div class="phone-spotify-island phone-dynamic-island-child flex-col justify-center pt-3 pb-3">
|
|
<header class="flex flex-row items-center gap-4 px-4 justify-between">
|
|
<div class="flex flex-row items-center gap-4">
|
|
<img src="https://i1.sndcdn.com/artworks-000176581039-ec258e-t500x500.jpg" alt="" width="40" height="40" class="rounded-full spotify-song-thumbnail">
|
|
<div class="flex flex-col gap-1" id="phone-spotify-island-informations">
|
|
<a class="artist text-white- widget-artist">Artist</a>
|
|
<a class="track text-white- widget-track">Track</a>
|
|
</div>
|
|
</div>
|
|
<div class="audio-icon is-active">
|
|
<div class="audio-icon-nib"></div>
|
|
<div class="audio-icon-nib"></div>
|
|
<div class="audio-icon-nib"></div>
|
|
<div class="audio-icon-nib"></div>
|
|
<div class="audio-icon-nib"></div>
|
|
</div>
|
|
</header>
|
|
<footer class="flex flex-col gap-6 w-full">
|
|
<article class="flex flex-row items-center w-full timeline">
|
|
<span class="current-time">00:00</span>
|
|
<div class="slider" data-direction="horizontal">
|
|
<div class="spotify-progress">
|
|
<div class="pin" id="progress-pin" data-method="rewind"></div>
|
|
</div>
|
|
</div>
|
|
<span class="total-time">02:00</span>
|
|
</article>
|
|
<article class='player flex flex-row items-center w-full justify-around mt-3'>
|
|
<div class="prevTrack text-white-" onclick="spotifyPlayerPrevTrack(event)">
|
|
<i class="fa fa-step-backward text-white-" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="playBtn text-white-" onclick="playPauseCheck(event)">
|
|
<i class="fa fa-play text-white-" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="nextTrack text-white-" onclick="spotifyPlayerNextTrack(event)">
|
|
<i class="fa fa-step-forward text-white-" aria-hidden="true"></i>
|
|
</div>
|
|
</article>
|
|
</footer>
|
|
</div>
|
|
<div class="phone-lockscreen-island phone-dynamic-island-child flex-col justify-center pt-3 pb-3">
|
|
<header class="flex flex-row items-center gap-4 px-4 justify-between relative bottom-0-15rem">
|
|
<div class="lockIcon"></div>
|
|
<div class="face-id-wrapper">
|
|
<svg class="face-id-default" version="1.1" viewBox="0 0 30 30">
|
|
<path d="M12.062 20c.688.5 1.688 1 2.938 1s2.25-.5 2.938-1M20 12v2M10 12v2M15 12v4a1 1 0 0 1-1 1" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" />
|
|
<g fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">
|
|
<path d="M26 9V6a2 2 0 0 0-2-2h-3M9 4H6a2 2 0 0 0-2 2v3M21 26h3a2 2 0 0 0 2-2v-3M4 21v3a2 2 0 0 0 2 2h3" />
|
|
</g>
|
|
</svg>
|
|
<div class="circle green"></div>
|
|
<div class="circle blue"></div>
|
|
<div class="circle purple"></div>
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
|
|
<path class="path-tick" stroke="#FFF" stroke-width="5" fill="none" stroke-linecap="butt" stroke-linejoin="butt" d="M 25,45 35,55 60,30" />
|
|
</svg>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
<div class="phone-low-battery-island phone-dynamic-island-child flex flex-row items-center justify-between px-4">
|
|
<a class="text-white- island-low-battery">Low Battery</a>
|
|
<article class="flex flex-row items-center">
|
|
<a class="text-red-400 text-sm" id="phone-low-battery-island-battery">20%</a>
|
|
<div class="battery-container low-battery">
|
|
<div class="battery">
|
|
<div class="battery-bar-wrapper">
|
|
<div class="battery-bar" data-low="false" data-savemode="false" data-charging="false"></div>
|
|
</div>
|
|
</div>
|
|
<div class="battery-plup" style="background: var(--battery-border-white);"></div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="phone-airplane-mode-island phone-dynamic-island-child flex flex-row items-center justify-between px-4">
|
|
<a class="text-white- silence-mode-bell"><i class="fa-solid fa-bell-slash"></i></a>
|
|
<article class="flex flex-row items-center">
|
|
<a class="text-red-400 text-sm" id="phone-airplane-mode-island"></a>
|
|
</article>
|
|
</div>
|
|
<div class="phone-airplane-mode-disabled-island phone-dynamic-island-child flex flex-row items-center justify-between px-4">
|
|
<a class="text-white- silence-mode-bell"><i class="fa-solid fa-bell"></i></a>
|
|
<article class="flex flex-row items-center">
|
|
<a class="text-red-400 text-sm" id="phone-airplane-mode-disabled-island"></a>
|
|
</article>
|
|
</div>
|
|
<section class="facetime-current-call-interactions phone-dynamic-island-child">
|
|
<article class="p-2 pt-5 flex flex-col gap-2">
|
|
<header class="flex flex-row items-center justify-between">
|
|
<div class="flex flex-row items-center gap-2">
|
|
<img id="facetime-current-call-avatar" src="" class="rounded-full" width="54" height="54" alt="" />
|
|
<div class="flex flex-col">
|
|
<a id="facetime-current-call-name" class="text-white-">Quasar Store</a>
|
|
<span class="text-muted text-sm flex flex-row items-center gap-2">
|
|
<i class="fas fa-video"></i>
|
|
<a class="text-muted">FaceTime</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<section id="facetime-current-call-in-call">
|
|
<a id="facetime-finish" class="px-6 py-4 bg-red-600 text-white- rounded-3xl cursor-pointer" onclick="finishFaceTimeCall(event)">Finish</a>
|
|
</section>
|
|
<section id="facetime-current-call-out-call" class="hide">
|
|
<a id="facetime-cancel" class="px-6 py-4 bg-red-600 text-white- rounded-3xl cursor-pointer" onclick="finishFaceTimeCall(event)">Cancel</a>
|
|
<a id="facetime-answer" class="px-6 py-4 bg-green-600 text-white- rounded-3xl cursor-pointer" onclick="faceTimeAnswerCall(event)">Answer</a>
|
|
</section>
|
|
</header>
|
|
<footer id="facetime-current-call-buttons" class="flex flex-row items-center justify-between pb-1">
|
|
<section class="flex flex-col items-center text-white- text-sm gap-2">
|
|
<div class="facetime-fast-call-button ongoing" data-type="microphone">
|
|
<i class="fas fa-microphone-slash"></i>
|
|
</div>
|
|
</section>
|
|
<section class="flex flex-col items-center text-white- text-sm gap-2">
|
|
<div class="facetime-fast-call-button ongoing" data-type="speaker">
|
|
<i class="fas fa-volume-up"></i>
|
|
</div>
|
|
</section>
|
|
<section class="flex flex-col items-center text-white- text-sm gap-2">
|
|
<div class="facetime-call-ongoing-videocall facetime-fast-call-button ongoing" onclick="startVideoCalls()" data-type="video">
|
|
<i class="fas fa-video"></i>
|
|
</div>
|
|
</section>
|
|
<section class="flex flex-col items-center text-white- text-sm gap-2 hide" id="video-call-swap">
|
|
<div class="facetime-fast-call-button ongoing" onclick="swpCam()" data-type="swap">
|
|
<i class="fa-solid fa-camera-rotate"></i>
|
|
</div>
|
|
</section>
|
|
</footer>
|
|
</article>
|
|
</section>
|
|
<div class="phone-currentcall-container phone-dynamic-island-child">
|
|
<section id="phone-currentcall-outgoing" class="phone-currentcall-children hide">
|
|
<header class="flex flex-row items-center justify-between">
|
|
<nav class="flex flex-row items-center gap-4" aria-label="left">
|
|
<img src="https://i1.sndcdn.com/artworks-000176581039-ec258e-t500x500.jpg" alt="" width="36" height="36" class="rounded-full phone-call-img">
|
|
<div class="flex flex-col" id="phone-currentcall-caller">
|
|
<a class="phone-currentcall-type text-muted text-sm">mobile</a>
|
|
<a class="phone-currentcall-title text-white-">Quasar Store</a>
|
|
</div>
|
|
</nav>
|
|
<nav class="flex flex-row items-center gap-4" aria-label="right">
|
|
<button class="phone-currentcall-action-btn" onclick="CancelCall(event)">
|
|
<i class="fa-solid fa-phone-hangup"></i>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
</section>
|
|
<section id="phone-currentcall-ongoing" class="phone-currentcall-children hide">
|
|
<article id="phone-currentcall-ongoing-informations" class="flex flex-row items-center justify-between">
|
|
<nav aria-label="left">
|
|
<i class="fa-solid fa-phone text-green-500"></i>
|
|
<a class="phone-currentcall-ongoing-time text-green-500">00:00</a>
|
|
</nav>
|
|
<nav aria-label="right">
|
|
<div class="audio-icon is-active">
|
|
<div class="audio-icon-nib"></div>
|
|
<div class="audio-icon-nib"></div>
|
|
<div class="audio-icon-nib"></div>
|
|
<div class="audio-icon-nib"></div>
|
|
<div class="audio-icon-nib"></div>
|
|
</div>
|
|
</nav>
|
|
</article>
|
|
<article id="phone-currentcall-ongoing-interactions">
|
|
<header class="flex flex-row items-center justify-between px-4">
|
|
<nav class="flex flex-row items-center gap-4" aria-label="">
|
|
<img src="https://i1.sndcdn.com/artworks-000176581039-ec258e-t500x500.jpg" alt="" width="36" height="36" class="rounded-full phone-call-img">
|
|
<div class="phone-currentcall-contact">
|
|
<div class="phone-currentcall-title">Quasar Store</div>
|
|
<a class="text-muted text-sm">mobile</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<footer class="flex flex-row justify-around items-center mt-5" id="phone-currentcall-interactions">
|
|
<div class="phone-fast-call-button" data-type="speaker">
|
|
<i class="fas fa-volume-up"></i>
|
|
</div>
|
|
<div class="phone-fast-call-button" data-type="microphone">
|
|
<i class="fas fa-microphone-slash"></i>
|
|
</div>
|
|
<div class="phone-fast-call-button phone-call-ongoing-videocall" onclick="faceTimeFromCall()" data-type="video">
|
|
<i class="fas fa-video"></i>
|
|
</div>
|
|
<div class="phone-fast-call-button" data-type="message">
|
|
<i class="fas fa-comment"></i>
|
|
</div>
|
|
<div class="phone-fast-call-button bg-red-500" data-type="end" onclick="cancelOnGoingCall(event)">
|
|
<i class="fas fa-times"></i>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
</section>
|
|
<section id="phone-currentcall-incoming" class="phone-currentcall-children hide">
|
|
<header class="flex flex-row items-center justify-between">
|
|
<nav class="flex flex-row items-center gap-4" aria-label="left">
|
|
<img src="https://i1.sndcdn.com/artworks-000176581039-ec258e-t500x500.jpg" alt="" width="36" height="36" class="rounded-full phone-call-img">
|
|
<div class="flex flex-col" id="phone-currentcall-caller">
|
|
<a class="phone-currentcall-type text-muted text-sm">mobile</a>
|
|
<a class="phone-currentcall-title text-white-">Quasar Store</a>
|
|
</div>
|
|
</nav>
|
|
<nav class="flex flex-row items-center gap-4" aria-label="right">
|
|
<button class="phone-currentcall-action-btn" onclick="CancelCall(event)">
|
|
<i class="fa-solid fa-phone-hangup"></i>
|
|
</button>
|
|
<button class="phone-currentcall-action-btn bg-green-500" onclick="AnswerCall(event)">
|
|
<i class="fas fa-phone"></i>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
</section>
|
|
</div>
|
|
</header>
|
|
</figure>
|
|
<figure id="phone-device-buttons">
|
|
<figure class="phone-busy-mode" onclick="toggleAirPlaneMode()"></figure>
|
|
<figure class="phone-volume-up" onclick="openVolumeController('up')"></figure>
|
|
<figure class="phone-volume-down" onclick="openVolumeController('down')"></figure>
|
|
<figure class="phone-lock" onmousedown="handleMouseDownLockButton()"></figure>
|
|
</figure>
|
|
<section id="phone-device-screen" class="phone-container">
|
|
<div id="phone-old-notification-container" class="bg-blur">
|
|
<header class="phone-old-notification-header">
|
|
<div class="notification-icon flex flex-row items-center gap-1">
|
|
<img alt="" class="rounded-lg" width='26' height='26'>
|
|
</div>
|
|
<div class="flex flex-row items-center notification-timer">
|
|
<a class="phone-old-notification-gray now-notify text-sm">now</a>
|
|
</div>
|
|
</header>
|
|
<div class="phone-old-notification-information">
|
|
<div class="notification-title">New, apple music bla bla is so good</div>
|
|
<div class="notification-text phone-old-notification-gray text-sm">Now you can do this play the music now. This is amazing right?</div>
|
|
</div>
|
|
</div>
|
|
<article id="volume-controller" onmouseover="handleMouseDownVolumeController(event)" onmouseout="createVolumeControllerTimeout(event)">
|
|
<article class="w-90 relative control-center-input-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
<path d="M44.2 21.8a12 12 0 0 1 0 20.5M50 16a20 20 0 0 1 0 32"></path>
|
|
<path class="filled" d="M38 6L20 24H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12l18 18z">
|
|
</path>
|
|
</svg>
|
|
<input type="range" min="5" max="100" value="100" class="ios-range bg-filter-blur volume-range" id="volume-range" onchange="updatePhoneVolume(this.value)">
|
|
</article>
|
|
</article>
|
|
<figure class="phone-brightness-background"></figure>
|
|
<figure class="phone-background"></figure>
|
|
<div id="showContent-container" class="hide" onclick="closeShowContent()">
|
|
<div id="showContent-content">
|
|
<section id="showContent-img">
|
|
<div id="player"></div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<section id="phone-unavailable" class="flex flex-col items-center justify-center bg-dark absolute inset-0 w-full h-full z-9999999999">
|
|
<header class="text-4xl text-white- phone-unavailable">iPhone Unavailable</header>
|
|
<a class="text-white- phone-unavailable-try">try again in 1 minute</a>
|
|
</section>
|
|
<section id="phone-close-screen" class="flex flex-col items-center justify-between bg-blur absolute inset-0 w-full h-full p-12 z-9999999999 py-36">
|
|
<header id="phone-close-crash-content" class="flex flex-col justify-center items-center gap-6">
|
|
<a class="text-3xl font-semibold text-center phone-slide-title">It looks like you've been in a crash.</a>
|
|
<div class="flex flex-col items-center justify-center">
|
|
<a class="phone-slide-description">iPhone detected a crash at</a>
|
|
<a id="phone-close-screen-crash-time">9:41 AM.</a>
|
|
</div>
|
|
</header>
|
|
<div class="flex flex-col gap-4 w-full">
|
|
<article id="phone-lock-slider-power-off" class="phone-lock-slider-container flex flex-row items-center bg-blur mb-20 w-full p-4 rounded-full">
|
|
<div class="phone-lock-slider bg-white- p-8">
|
|
<i class="fa-solid fa-power-off text-red-500 text-3xl"></i>
|
|
</div>
|
|
<input type="range" min="0" max="100" value="0" class="ios-close-range" onchange="handleIosCloseChangeRange(this, 'power')">
|
|
<a class="text-white- margin-center text-xl font-semibold phone-slide-to-power-off">slide to power off</a>
|
|
</article>
|
|
<article id="phone-lock-slider-sos" class="phone-lock-slider-container flex flex-row items-center bg-blur w-full p-4 rounded-full">
|
|
<div class="phone-lock-slider bg-red-500 p-8">
|
|
<a class="font-bold text-2xl text-white-">SOS</a>
|
|
</div>
|
|
<input type="range" min="0" max="100" value="0" id="phone-sos-slider" class="ios-close-range" onchange="handleIosCloseChangeRange(this, 'SOS')">
|
|
<a class="text-white- margin-center text-xl font-semibold phone-slide-to-emergency-call">Emergency Call</a>
|
|
</article>
|
|
</div>
|
|
|
|
<footer class="w-full flex flex-col gap-4 items-center justify-center">
|
|
<div class="phone-lock-slider-cancel bg-blur flex items-center justify-center rounded-full" onclick="closeCloseScreen()">
|
|
<i class="fa-solid fa-times"></i>
|
|
</div>
|
|
<a class="slide-cancel-box">Cancel</a>
|
|
</footer>
|
|
</section>
|
|
<div id="popup-actions"></div>
|
|
<div id="popup-confirm-container">
|
|
<div id="popup-actions-background"></div>
|
|
<div id="popup-actions-modal">
|
|
<h4>uWu</h4>
|
|
<div class="popup-actions-button left">Okey</div>
|
|
<div class="popup-actions-button right">Cancel</div>
|
|
</div>
|
|
</div>
|
|
<section class="phone-home-button-container">
|
|
<div class="phone-home-button"></div>
|
|
</section>
|
|
<div id="pincode" class="hidden">
|
|
<article class="phone-background z-0 absolute left-0 top-0 w-full h-full"></article>
|
|
<div class="table bg-filter-blur">
|
|
<div class="cell">
|
|
<div class="lockIcon"></div>
|
|
<div id="anleitung">
|
|
<span class="text-2xl">Enter Passcode</span>
|
|
</div>
|
|
<div id="fields">
|
|
<div class="pincode_grid">
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-4 numberfield"><span></span></div>
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-4 numberfield"><span></span></div>
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-4 numberfield"><span></span></div>
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-4 numberfield"><span></span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="numbers">
|
|
<div class="pincode_grid">
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-3">
|
|
<button>
|
|
<a>1</a>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-3">
|
|
<button>
|
|
<a>2</a>
|
|
<span>A B C</span>
|
|
</button>
|
|
</div>
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-3">
|
|
<button>
|
|
<a>3</a>
|
|
<span>D E F</span>
|
|
</button>
|
|
</div>
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-3">
|
|
<button>
|
|
<a>4</a>
|
|
<span>G H I</span>
|
|
</button>
|
|
</div>
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-3">
|
|
<button>
|
|
<a>5</a>
|
|
<span>J K L</span>
|
|
</button>
|
|
</div>
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-3">
|
|
<button>
|
|
<a>6</a>
|
|
<span>M N O</span>
|
|
</button>
|
|
</div>
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-3">
|
|
<button>
|
|
<a>7</a>
|
|
<span>P Q R S</span>
|
|
</button>
|
|
</div>
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-3">
|
|
<button>
|
|
<a>8</a>
|
|
<span>T U V</span>
|
|
</button>
|
|
</div>
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-3">
|
|
<button>
|
|
<a>9</a>
|
|
<span>W X Y Z</span>
|
|
</button>
|
|
</div>
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-3"></div>
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-3">
|
|
<button>
|
|
<a>0</a>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
<div class="pincode_grid__col pincode_grid__col--1-of-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section id="lock-screen-customize" class="absolute w-full bottom-0 pb-8 z-99999999999 bg-container-dark left-0 rounded-2xl p-4">
|
|
<article id="time-customize" class="hide">
|
|
<header class="flex justify-center pb-5 items-center pt-5">
|
|
<a class="text-white font-semibold text-xl widget-font-color">Font & Color</a>
|
|
<i class="fas fa-times fa-lg absolute right-5 text-white cursor-pointer" onclick="closeLockScreenCustomize()"></i>
|
|
</header>
|
|
<section id="time-fonts" class="w-full">
|
|
<ul class="grid grid-cols-3 w-full place-items-center border-b">
|
|
<li class="font-lemon">
|
|
<input type="radio" name="font" id="font-lemon" value="lemon">
|
|
<label for="font-lemon">12</label>
|
|
</li>
|
|
<li class="font-inter">
|
|
<input type="radio" name="font" id="font-inter" value="inter" checked>
|
|
<label for="font-inter">12</label>
|
|
</li>
|
|
<li class="font-prism">
|
|
<input type="radio" name="font" id="font-prism" value="prism">
|
|
<label for="font-prism">12</label>
|
|
</li>
|
|
<li class="font-dancing">
|
|
<input type="radio" name="font" id="font-dancing" value="dancing">
|
|
<label for="font-dancing">12</label>
|
|
</li>
|
|
<li class="font-tsukimi">
|
|
<input type="radio" name="font" id="font-tsukimi" value="tsukimi">
|
|
<label for="font-tsukimi">12</label>
|
|
</li>
|
|
<li class="font-marker">
|
|
<input type="radio" name="font" id="font-marker" value="marker">
|
|
<label for="font-marker">12</label>
|
|
</li>
|
|
<li class="font-rubik">
|
|
<input type="radio" name="font" id="font-rubik" value="rubik">
|
|
<label for="font-rubik">12</label>
|
|
</li>
|
|
<li class="font-fredoka">
|
|
<input type="radio" name="font" id="font-fredoka" value="fredoka">
|
|
<label for="font-fredoka">12</label>
|
|
</li>
|
|
<li class="font-moirai">
|
|
<input type="radio" name="font" id="font-moirai" value="moirai">
|
|
<label for="font-moirai">12</label>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section id="time-colors" class="w-full flex flex-row items-center justify-around">
|
|
<div class="time-color">
|
|
<input type="radio" name="color" id="color-white" value="white" checked>
|
|
<label for="color-white"></label>
|
|
</div>
|
|
<div class="time-color">
|
|
<input type="radio" name="color" id="color-black" value="black">
|
|
<label for="color-black" style="background: #000"></label>
|
|
</div>
|
|
<div class="time-color">
|
|
<input type="radio" name="color" id="color-red" value="red">
|
|
<label for="color-red" style="background: rgb(185 28 28)"></label>
|
|
</div>
|
|
<div class="time-color">
|
|
<input type="radio" name="color" id="color-green" value="green">
|
|
<label for="color-green" style="background: rgb(101 163 13)"></label>
|
|
</div>
|
|
<div class="time-color">
|
|
<input type="radio" name="color" id="color-blue" value="blue">
|
|
<label for="color-blue" style="background: rgb(6 182 212)"></label>
|
|
</div>
|
|
<div class="time-color">
|
|
<input type="color" name="color" id="color-picker">
|
|
<label for="color-picker" class="bg-rainbow"></label>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
<article id="date-customize" class="hide">
|
|
<header class="flex justify-center pb-5 items-center pt-5">
|
|
<a class="text-white font-semibold text-xl widget-choose-change">Choose Widget</a>
|
|
<i class="fas fa-times fa-lg absolute right-5 text-white cursor-pointer" onclick="closeLockScreenCustomize()"></i>
|
|
</header>
|
|
<section id="date-customize-list" class="w-full p-4 flex-col flex">
|
|
<a class="ml-4 mb-2 font-bold">Suggestions</a>
|
|
<ul class="flex flex-col w-full border-b bg-dark rounded-2xl p-4 gap-6">
|
|
<li class="flex flex-row items-center gap-4 cursor-pointer" onclick="changeDateWidget('#date-widget-weather')">
|
|
<img src="./img/apps/weather.png" alt="" width="46" height="46" class="rounded-xl">
|
|
<div class="w-full border-b flex flex-col pb-3">
|
|
<div class="weather-temp" id="date-widget-weather">
|
|
<i class="fa-solid fa-cloud"></i>
|
|
<span class="weather-temp-value weather-degree">22°</span>
|
|
</div>
|
|
<footer>
|
|
<a class="text-muted text-sm">Conditions</a>
|
|
</footer>
|
|
</div>
|
|
</li>
|
|
<li class="flex flex-row items-center gap-4 cursor-pointer">
|
|
<img src="./img/apps/calendar.png" alt="" width="46" height="46" class="rounded-xl">
|
|
<div class="w-full border-b flex flex-col pb-3" onclick="changeDateWidget(null)">
|
|
<div class="date text-white" id="date-widget-date">
|
|
16 June Friday
|
|
</div>
|
|
<footer>
|
|
<a class="text-muted text-sm">Date</a>
|
|
</footer>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</article>
|
|
<article id="widget-customize" class="hide">
|
|
<header class="flex justify-center pb-5 items-center pt-5">
|
|
<a class="text-white font-semibold text-xl widget-add-more">Add Widgets</a>
|
|
<i class="fas fa-times fa-lg absolute right-5 text-white cursor-pointer" onclick="closeLockScreenCustomize()"></i>
|
|
</header>
|
|
<section id="widget-customize-list" class="w-full p-4 grid grid-cols-4 gap-4">
|
|
<section class="lock-screen-widget-bg" onclick="addLockScreenWidget('battery')">
|
|
<div class="batteryInfo">
|
|
<div class="iconWrapper high">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
<path d="M14 59a3 3 0 0 0 3 3h30a3 3 0 0 0 3-3v-9H14zM50 5a3 3 0 0 0-3-3H17a3 3 0 0 0-3 3v5h36zm0 45V10m-36 0v40">
|
|
</path>
|
|
<circle cx="32" cy="56" r="2"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="lock-screen-widget-bg" onclick="addLockScreenWidget('rain')">
|
|
<div class="weather-rain-percentage-widget"></div>
|
|
</section>
|
|
<div class="weather-mini-widget" onclick="addLockScreenWidget('weather')">
|
|
<header class="flex flex-row gap-1 items-center self-start">
|
|
<i class="fa-solid fa-cloud"></i>
|
|
<div class="weather-temp">
|
|
<span class="weather-temp-value weather-degree">22°</span>
|
|
</div>
|
|
</header>
|
|
<article>
|
|
<div class="weather-type"></div>
|
|
</article>
|
|
</div>
|
|
<section class="reminder-widget phone-widget" data-app='reminder-widget' onclick="addLockScreenWidget('reminder')">
|
|
<div class="reminder-widget-information">
|
|
<div class="reminder-icon">
|
|
<i class="fa-solid fa-list"></i>
|
|
</div>
|
|
<p class="reminder-widget-count" id="total-reminders-widget-count">0</p>
|
|
</div>
|
|
<header id="reminder-widget-header">
|
|
<a>Reminders</a>
|
|
</header>
|
|
<section class="reminder-widget-list self-start w-full overflow-y">
|
|
</section>
|
|
</section>
|
|
<div class="weazel-widget phone-widget" data-app='weazel-widget' onclick="addLockScreenWidget('weazel')">
|
|
<header id="weazel-widget-header">
|
|
<h7>Top Stories</h7>
|
|
<img src="img/app_details/news.png">
|
|
</header>
|
|
<article class="weazel-widget-contents w-full"></article>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
</section>
|
|
<div id="lock-screen" class="phone-background" style="display: flex;">
|
|
<div id="lock-screen-middle">
|
|
<div id="lock-screen-top" class="lock-screen-top">
|
|
<span class="lock-screen-top-date date" onclick="openLockScreenCustomize('date')"></span>
|
|
<span class="time" onclick="openLockScreenCustomize('time')">13:00</span>
|
|
<section id="lock-screen-widgets" onclick="openLockScreenCustomize('widgets')" class="grid grid-cols-4 gap-4 w-full p-4">
|
|
<section class="lock-screen-widget-bg">
|
|
<div class="batteryInfo">
|
|
<div class="iconWrapper high">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
<path d="M14 59a3 3 0 0 0 3 3h30a3 3 0 0 0 3-3v-9H14zM50 5a3 3 0 0 0-3-3H17a3 3 0 0 0-3 3v5h36zm0 45V10m-36 0v40">
|
|
</path>
|
|
<circle cx="32" cy="56" r="2"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="remove-widget" onclick="removeLockScreenWidget('battery')">
|
|
<i class="far fa-minus"></i>
|
|
</div>
|
|
</section>
|
|
<section class="lock-screen-widget-bg">
|
|
<div class="weather-rain-percentage-widget"></div>
|
|
<div class="remove-widget" onclick="removeLockScreenWidget('rain')">
|
|
<i class="far fa-minus"></i>
|
|
</div>
|
|
</section>
|
|
<div class="weather-mini-widget relative">
|
|
<header class="flex flex-row gap-1 items-center self-start">
|
|
<i class="fa-solid fa-cloud"></i>
|
|
<div class="weather-temp">
|
|
<span class="weather-temp-value weather-degree">22°</span>
|
|
</div>
|
|
</header>
|
|
<article>
|
|
<div class="weather-type"></div>
|
|
</article>
|
|
<div class="remove-widget" onclick="removeLockScreenWidget('weather')">
|
|
<i class="far fa-minus"></i>
|
|
</div>
|
|
</div>
|
|
<section class="reminder-widget phone-widget relative" data-app='reminder-widget'>
|
|
<header id="reminder-widget-header">
|
|
<a>Reminders</a>
|
|
</header>
|
|
<section class="reminder-widget-list self-start w-full overflow-y">
|
|
</section>
|
|
<div class="remove-widget" onclick="removeLockScreenWidget('reminder')">
|
|
<i class="far fa-minus"></i>
|
|
</div>
|
|
</section>
|
|
<div class="weazel-widget phone-widget relative" data-app='weazel-widget'>
|
|
<header id="weazel-widget-header">
|
|
<h7>Top Stories</h7>
|
|
</header>
|
|
<article class="weazel-widget-contents w-full"></article>
|
|
<div class="remove-widget" onclick="removeLockScreenWidget('weazel')">
|
|
<i class="far fa-minus"></i>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div class="spotify-lockScreen bg-filter-blur">
|
|
<div class="spotify-lockScreenHeader">
|
|
<img>
|
|
<div class="spotify-lockScreen-content">
|
|
<a class="spotify-lockScreen-content-author artist widget-artist">Artist</a>
|
|
<a class="spotify-lockScreen-content-title track widget-track">Song Name</a>
|
|
</div>
|
|
</div>
|
|
<div class="timeline">
|
|
<span class="current-time">--:--</span>
|
|
<span class="total-time">--:--</span>
|
|
<div class="slider" data-direction="horizontal">
|
|
<div class="spotify-progress">
|
|
<div class="pin" id="progress-pin" data-method="rewind"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="player">
|
|
<div class="prevTrack" onmousedown="event.stopPropagation()" onclick="spotifyPlayerPrevTrack(event)"><i class="fa fa-step-backward" aria-hidden="true"></i></div>
|
|
<div class="playBtn" onmousedown="event.stopPropagation()" onclick="playPauseCheck(event)"><i class="fa fa-play" aria-hidden="true"></i></div>
|
|
<div class="nextTrack" onmousedown="event.stopPropagation()" onclick="spotifyPlayerNextTrack(event)"><i class="fa fa-step-forward" aria-hidden="true"></i></div>
|
|
</div>
|
|
</div>
|
|
<div id="lock-screen-delete-all" class="flex w-full items-end justify-end">
|
|
<button class="text-white- text-sm bg-low-opacity rounded-full mr-3 w-24 h-24 flex items-center justify-center mb-5" onclick="deleteAllNotifications()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<main id='lock-screen-main-container' class="h-auto overflow-hidden relative">
|
|
<section id="lock-screen-notifications-container"></section>
|
|
</main>
|
|
</div>
|
|
<div id="lock-screen-down">
|
|
<img class="down_padding flash" onclick="toggleFlashlight()" src="./img/flashlight.png">
|
|
<img class="down_padding cam" onclick="lockCamera()" src="./img/camera.png">
|
|
</div>
|
|
<div class="lockScreen">
|
|
<div class="phone-home-swipe"></div>
|
|
</div>
|
|
<div id="lock-screen-specified"></div>
|
|
</div>
|
|
|
|
<!-- Startup Screen -->
|
|
<div id="startup-page" style="display: none">
|
|
<section id="startup-first-screen" class='startup-screen bg-black-'>
|
|
<div class="logo">
|
|
<img src="./img/startup/applelogo-pear.png" alt="Logo">
|
|
</div>
|
|
</section>
|
|
<section id="hello-screen" class='startup-screen top-0 hide bg-transparent'>
|
|
<figure class="phone-background inset-0 blur-4 z-1"></figure>
|
|
<div class='flex flex-col items-center justify-center w-full h-full z-2 relative'>
|
|
<span id='hello'></span>
|
|
</div>
|
|
<section class="hello-home-button-container">
|
|
<a class="absolute bottom-0-7 text-white- swipe-to-configuration">Swipe up to open</a>
|
|
<div class="phone-home-button"></div>
|
|
</section>
|
|
</section>
|
|
<!-- <section id="language-screen" class="startup-screen top-0 hide">
|
|
<header class="pt-7 flex items-center justify-center w-full">
|
|
<i class="fa-regular fa-globe text-6xl mb-7 text-blue-500"></i>
|
|
</header>
|
|
<section id="language-locales" class='flex flex-col overflow-y max-h-84 pt-2 pb-2 rounded-lg bg-dark margin-center w-90 margin-center gap-4'>
|
|
<article class="locale p-4 flex flex-row items-center justify-between border-b">
|
|
<a>English</a>
|
|
<i class="fa-solid fa-chevron-right text-muted"></i>
|
|
</article>
|
|
<article class="locale p-4 flex flex-row items-center justify-between border-b">
|
|
<a>Türkçe</a>
|
|
<i class="fa-solid fa-chevron-right text-muted"></i>
|
|
</article>
|
|
<article class="locale p-4 flex flex-row items-center justify-between border-b">
|
|
<a>Espanol</a>
|
|
<i class="fa-solid fa-chevron-right text-muted"></i>
|
|
</article>
|
|
<article class="locale p-4 flex flex-row items-center justify-between border-b hide-border-last">
|
|
<a>Deutsch</a>
|
|
<i class="fa-solid fa-chevron-right text-muted"></i>
|
|
</article>
|
|
</section>
|
|
</section> -->
|
|
<section id="quickstart-screen" class="startup-screen hide">
|
|
<header class="flex flex-row items-center gap-4 p-4 pt-8 text-blue-500"></header>
|
|
<img src="./img/startup/quick.png" width="100%" alt="" class="object-cover margin-center">
|
|
<article class="flex flex-col justify-center items-center">
|
|
<h2>Quick Start</h2>
|
|
<p class="text-center quickstart-screen-texts">
|
|
<p class="text-center st-1">
|
|
Welcome to the main configuration of your new Phone, configure and customize each section as you wish.
|
|
</p>
|
|
<p class="text-center st-2">
|
|
Remember that each configuration in this section can be reconfigured within the settings section
|
|
of your Phone, have fun configuring your Phone and be careful with your data!
|
|
</p>
|
|
</p>
|
|
<div class="flex flex-row items-center justify-center gap-4 absolute bottom-0-7">
|
|
<a class="text-blue-500 cursor-pointer setup-manually" onclick="gotoNextPage('#quickstart-screen')">Set Up Manually</a>
|
|
<i class="fa-solid fa-chevron-right text-blue-500"></i>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
<section id="privacy-screen" class="startup-screen hide">
|
|
<header onclick="gotoBackPage('#privacy-screen')" class="cursor-pointer flex flex-row items-center gap-4 p-4 pt-8 text-blue-500">
|
|
<i class="fa fa-chevron-left"></i>
|
|
<a class="text-blue-500 cursor-pointer startup-back">Back</a>
|
|
</header>
|
|
<img src="./img/startup/privacy.png" width="50%" alt="" class="object-cover margin-center">
|
|
<article class="flex flex-col justify-center items-center">
|
|
<h2 class="startup-privacity-title">Data & Privacy</h2>
|
|
<p class="text-center st-3 startup-privacity1">This icon appears when an Apple feature asks to use your personal information.</p>
|
|
<p class="text-center st-4 startup-privacity2">You won't see this with every feature since
|
|
Apple collects this information only when
|
|
needed to enable features, secure our
|
|
services, or personalize your experience.</p>
|
|
<p class="text-center st-5 startup-privacity3">
|
|
Apple believes privacy is a fundamental
|
|
human right, so every Apple product is
|
|
designed to minimize the collection and use
|
|
of your data, use on-device processing
|
|
whenever possible, and provide
|
|
transparency and control over your
|
|
information.
|
|
</p>
|
|
<div class="flex flex-row items-center justify-center gap-4 absolute bottom-0-7 w-full">
|
|
<button onclick="gotoNextPage('#privacy-screen')" class="cursor-pointer bg-blue-500 text-white- rounded-xl p-6 w-90 margin-center flex items-center justify-center startup-continue">Continue</button>
|
|
</div>
|
|
</article>
|
|
<!-- <i class="fa-solid fa-people-pulling fa-2xl margin-center text-blue-500"></i> -->
|
|
</section>
|
|
<section id="faceid-screen" class="startup-screen hide">
|
|
<header onclick="gotoBackPage('#faceid-screen')" class="flex flex-row items-center gap-4 p-4 pt-8 text-blue-500">
|
|
<i class="fa fa-chevron-left"></i>
|
|
<a class="text-blue-500 cursor-pointer startup-back">Back</a>
|
|
</header>
|
|
<img src="./img/startup/faceid.gif" width="70%" height="20%" alt="" class="object-cover margin-center">
|
|
<article class="flex flex-col justify-center items-center p-4">
|
|
<h2>Face ID</h2>
|
|
<p class="text-center st-6">iPhone can recognize the unique, three-
|
|
dimensional features of your face to unlock
|
|
automatically, use Apple Pay, make
|
|
purchases, or subscribe to services from
|
|
Apple.</p>
|
|
<div onclick="gotoNextPage('#faceid-screen')" class="flex flex-col items-center justify-center gap-4 absolute bottom-0-7 w-full">
|
|
<a onclick="startupFaceId(false)" class="text-blue-500 cursor-pointer set-in-config">Set Up Later in Settings</a>
|
|
<button onclick="startupFaceId(true)" class=" cursor-pointerbg-blue-500 text-white- rounded-xl p-6 w-90 margin-center flex items-center justify-center startup-continue">Continue</button>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
<section id="startup-lock-screen" class="startup-screen hide">
|
|
<header onclick="gotoBackPage('#startup-lock-screen')" class="flex flex-row items-center gap-4 p-4 pt-8 text-blue-500 mb-3">
|
|
<i class="fa fa-chevron-left"></i>
|
|
<a class="text-blue-500 cursor-pointer startup-back">Back</a>
|
|
</header>
|
|
<i class="fa-solid fa-lock fa-2xl margin-center text-blue-500"></i>
|
|
<article class="flex flex-col justify-center items-center p-4">
|
|
<h2>Create a Passcode</h2>
|
|
<p class="text-center st-7">A passcode protects your data and is used to unlock iPhone.</p>
|
|
<section id="enter-new-password" class="w-full h-ful mt-8">
|
|
<article class="flex flex-col items-center justify-center w-full h-65">
|
|
<header class="flex flex-col">
|
|
<div class="password-circle-container flex items-center justify-center w-full gap-6">
|
|
<figure class="password-circle" data-number="1"></figure>
|
|
<figure class="password-circle" data-number="2"></figure>
|
|
<figure class="password-circle" data-number="3"></figure>
|
|
<figure class="password-circle" data-number="4"></figure>
|
|
</div>
|
|
</header>
|
|
<footer class="password-button-container bg-dark">
|
|
<span class="password-button bg-white" data-value="1">1</span>
|
|
<span class="password-button bg-white" data-value="2">2</span>
|
|
<span class="password-button bg-white" data-value="3">3</span>
|
|
<span class="password-button bg-white" data-value="4">4</span>
|
|
<span class="password-button bg-white" data-value="5">5</span>
|
|
<span class="password-button bg-white" data-value="6">6</span>
|
|
<span class="password-button bg-white" data-value="7">7</span>
|
|
<span class="password-button bg-white" data-value="8">8</span>
|
|
<span class="password-button bg-white" data-value="9">9</span>
|
|
<span class="password-button bg-white" data-value="0">0</span>
|
|
<fas class="fas fa-backspace password-delete-icon fa-lg bg-white cursor-pointer" onclick="deleteLastPinCode()"></fas>
|
|
</footer>
|
|
</article>
|
|
</section>
|
|
<div class="flex flex-row items-center justify-center gap-4 w-full mt-8">
|
|
<a onclick="startupSetPinCodeScreenAfter()" class="text-blue-500 cursor-pointer set-in-config">Set Up Later in Settings</a>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
<section id="appearance-screen" class="startup-screen hide">
|
|
<header onclick="gotoBackPage('#appearance-screen')" class="flex flex-row items-center gap-4 p-4 pt-8 text-blue-500 mb-3">
|
|
<i class="fa fa-chevron-left"></i>
|
|
<a class="text-blue-500 cursor-pointer startup-back">Back</a>
|
|
</header>
|
|
<article class="flex flex-col justify-center items-center p-4">
|
|
<h2>Appearance</h2>
|
|
<p class="text-center st-8">Select a light or dark appearance and see how iPhone adjusts depending on which one you choose.</p>
|
|
<section class="flex flex-row items-center justify-center w-full gap-8">
|
|
<div>
|
|
<img src="./img/startup/light-skeleton.png" alt="" class="object-cover" onclick="ToggleDarkMode(false)">
|
|
<footer class="flex flex-col items-center mt-3">
|
|
<a class="text-center settings-light">Light</a>
|
|
<div>
|
|
<input type="radio" id="light" name="appearance-first" class="ios-tick" value="light" checked>
|
|
<label for="light">
|
|
<span>
|
|
<img src="img/startup/checkbox.svg" alt="Checked Icon" />
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<div>
|
|
<img src="./img/startup/dark-skeleton.png" alt="" class="object-cover" onclick="ToggleDarkMode(true)">
|
|
<footer class="flex flex-col items-center mt-3">
|
|
<a class="text-center settings-dark">Dark</a>
|
|
<div>
|
|
<input type="radio" id="dark" name="appearance-first" class="ios-tick" value="dark">
|
|
<label for="dark">
|
|
<span>
|
|
<img src="img/startup/checkbox.svg" alt="Checked Icon" />
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
<div class="flex flex-col items-center justify-center gap-4 absolute bottom-0-7 w-full">
|
|
<button onclick="gotoNextPage('#appearance-screen')" class="cursor-pointer bg-blue-500 text-white- rounded-xl p-6 w-90 margin-center flex items-center justify-center startup-continue">Continue</button>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
<section id="welcome-screen" class="startup-screen items-center justify-center hide">
|
|
<h2>Welcome to iPhone</h2>
|
|
<section class="welcome-home-button-container">
|
|
<a class="absolute bottom-0-7 text-white cursor-pointer swipe-to-configuration">Swipe up to get started</a>
|
|
<div class="phone-home-button"></div>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="close-screen" class="phone-background" style="display: none;">
|
|
<div id="close-screen-battery"></div>
|
|
</div>
|
|
|
|
<div class="controlCenter bg-filter-blur up">
|
|
<figure id="controlCenter-slider" class="z-0 absolute inset-0 cursor-grab"></figure>
|
|
<div class="content">
|
|
<div class="iconsGroup iconWrapper-wX2 padding grid grid-cols-2 gap-4" style="display: grid">
|
|
<div class="actionIcon icon modoVuelo">
|
|
<div class="ico">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 510" style="transform: rotate(90deg);">
|
|
<path d="M497.25,357v-51l-204-127.5V38.25C293.25,17.85,275.4,0,255,0c-20.4,0-38.25,17.85-38.25,38.25V178.5L12.75,306v51 l204-63.75V433.5l-51,38.25V510L255,484.5l89.25,25.5v-38.25l-51-38.25V293.25L497.25,357z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<div class="txt">
|
|
<p class="name">Modo de vuelo</p>
|
|
<p class="val">No</p>
|
|
</div>
|
|
</div>
|
|
<div class="actionIcon icon datosCelulares activo">
|
|
<div class="ico">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 510">
|
|
<path d="m255.991 169.039c-30.327 0-55 24.673-55 55 0 25.127 16.943 46.356 40 52.904v171.096c0 8.284 6.716 15 15 15s15-6.716 15-15v-171.096c23.057-6.547 40-27.777 40-52.904 0-30.327-24.673-55-55-55z">
|
|
</path>
|
|
<path d="m186.597 143.845c-5.857-5.858-15.354-5.858-21.213 0-46.505 46.503-46.512 121.781 0 168.291 5.859 5.858 15.355 5.858 21.213 0 5.858-5.857 5.858-15.355 0-21.213-34.78-34.779-34.786-91.08 0-125.865 5.858-5.858 5.858-15.356 0-21.213z">
|
|
</path>
|
|
<path d="m346.597 143.845c-5.857-5.857-15.355-5.857-21.213 0s-5.858 15.355 0 21.213c34.701 34.701 34.701 91.164 0 125.865-5.858 5.857-5.858 15.355 0 21.213 5.859 5.858 15.355 5.858 21.213 0 46.399-46.397 46.399-121.894 0-168.291z">
|
|
</path>
|
|
<path d="m141.342 119.803c5.858-5.857 5.858-15.355 0-21.213-5.857-5.857-15.355-5.857-21.213 0-71.352 71.352-71.352 187.449 0 258.801 5.856 5.857 15.354 5.86 21.213 0 5.858-5.857 5.858-15.355 0-21.213-59.654-59.655-59.654-156.72 0-216.375z">
|
|
</path>
|
|
<path d="m391.852 98.59c-5.857-5.857-15.355-5.857-21.213 0s-5.858 15.355 0 21.213c59.654 59.655 59.654 156.72 0 216.375-5.858 5.857-5.858 15.355 0 21.213 5.859 5.858 15.355 5.858 21.213 0 71.352-71.352 71.352-187.449 0-258.801z">
|
|
</path>
|
|
<path d="m96.087 74.548c5.858-5.857 5.858-15.355 0-21.213-5.857-5.857-15.355-5.857-21.213 0-99.941 99.94-99.724 249.587 0 349.311 5.856 5.857 15.354 5.86 21.213 0 5.858-5.857 5.858-15.355 0-21.213-87.475-87.477-87.475-219.408 0-306.885z">
|
|
</path>
|
|
<path d="m437.107 53.335c-5.857-5.857-15.355-5.857-21.213 0s-5.858 15.355 0 21.213c87.477 87.477 87.477 219.408 0 306.885-5.858 5.857-5.858 15.355 0 21.213 5.859 5.858 15.355 5.858 21.213 0 99.94-99.939 99.725-249.587 0-349.311z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<div class="txt">
|
|
<p class="name">Datos celulares</p>
|
|
<p class="val">No</p>
|
|
</div>
|
|
</div>
|
|
<div class="actionIcon icon wifi">
|
|
<div class="ico">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 470 470">
|
|
<path d="M170.667,336.6l64,64l64-64C263.36,301.293,205.973,301.293,170.667,336.6z">
|
|
</path>
|
|
<path d="M85.333,251.267L128,293.933c58.88-58.88,154.453-58.88,213.333,0L384,251.267 C301.547,168.813,167.787,168.813,85.333,251.267z">
|
|
</path>
|
|
<path d="M0,165.933L42.667,208.6c106.027-106.027,277.973-106.027,384,0l42.667-42.667C339.733,36.333,129.6,36.333,0,165.933z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<div class="txt">
|
|
<p class="name">Wi-Fi</p>
|
|
<p class="val">CODEPEN-1234</p>
|
|
</div>
|
|
</div>
|
|
<div class="actionIcon icon bluetooth">
|
|
<div class="ico">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path d="M413.913,148.622L234.447,0v211.397L123.846,118.51l-25.759,30.672l126.44,106.189L98.087,361.56l25.759,30.672 l110.601-92.887V512l179.381-149.95L286.806,255.371L413.913,148.622z M274.501,85.175l76.876,63.663l-76.876,64.563V85.175z M351.463,361.978l-76.962,64.336V297.342L351.463,361.978z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<div class="txt">
|
|
<p class="name">Bluetooth</p>
|
|
<p class="val">No</p>
|
|
</div>
|
|
</div>
|
|
<div class="actionIcon icon airDrop" style="display: none;">
|
|
<div class="ico"></div>
|
|
<div class="txt">
|
|
<p class="name">AirDrop</p>
|
|
<p class="val">No recibir</p>
|
|
</div>
|
|
</div>
|
|
<div class="actionIcon icon compartirInternet" style="display: none;">
|
|
<div class="ico"></div>
|
|
<div class="txt">
|
|
<p class="name">Compartir internet</p>
|
|
<p class="val">No</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="musicWdg iconWrapper-wX2 flex-col p-8 py-12">
|
|
<div class="spotify-widget-header w-full">
|
|
<div id="spotify-widget-content w-full">
|
|
<a id="spotify-widget-author" class="artist text-xl text-center ellipsis max-w-full widget-artist">Artist</a>
|
|
<a id="spotify-widget-title" class="track text-gray text-center ellipsis max-w-full widget-track">Song Name</a>
|
|
</div>
|
|
</div>
|
|
<div class="player flex flex-row items-center justify-around mt-8 w-full">
|
|
<div class="prevTrack" onclick="spotifyPlayerPrevTrack(event)"><i class="fa fa-step-backward" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="playBtn" onclick="playPauseCheck(event)"><i class="fa fa-play" aria-hidden="true"></i></div>
|
|
<div class="nextTrack" onclick="spotifyPlayerNextTrack(event)"><i class="fa fa-step-forward" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="displayOptions iconWrapper-wX2">
|
|
<div class="actionIcon iconItem lockOrientacion">
|
|
<div class="lockIcon"></div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
<path d="M53.832 34.947a26.016 26.016 0 1 0-7.45 15.432"></path>
|
|
<path d="M62 23l-8.168 11.947L43.014 25"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="actionIcon iconItem moon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="transform: rotate(90deg);">
|
|
<path d="M35 2a25 25 0 0 1-22 36.8 24.9 24.9 0 0 1-10.6-2.3A30 30 0 1 0 35 2z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<div class="iconItem duplicate full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
<path d="M20 26V8h42v32H44"></path>
|
|
<path d="M2 26h42v32H2z"></path>
|
|
</svg>
|
|
<p class="text-white- duplicate-screen">Duplicar pantalla</p>
|
|
</div>
|
|
</div>
|
|
<div class="fullBars iconWrapper-wX2 justify-default rotate-90 flex-col gap-4">
|
|
<article class="w-90 relative control-center-input-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 64 64">
|
|
<circle class="filled" cx="32" cy="32" r="14"></circle>
|
|
<path d="M32 2v8m0 44v8m30-30h-8m-44 0H2m8.8-21.2l5.6 5.6m31.2 31.2l5.6 5.6m0-42.4l-5.6 5.6M16.4 47.6l-5.6 5.6">
|
|
</path>
|
|
</svg>
|
|
<input type="range" min="5" max="100" value="100" class="ios-range" class="brightness-range" onchange="updateBrightness(this.value)">
|
|
</article>
|
|
<article class="w-90 relative control-center-input-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
<path d="M44.2 21.8a12 12 0 0 1 0 20.5M50 16a20 20 0 0 1 0 32"></path>
|
|
<path class="filled" d="M38 6L20 24H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12l18 18z">
|
|
</path>
|
|
</svg>
|
|
<input type="range" min="5" max="100" value="100" class="ios-range volume-range" id="volume-range" onchange="updatePhoneVolume(this.value)">
|
|
</article>
|
|
</div>
|
|
<div class="textGroup">
|
|
<div class="icono">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
<path d="M54 22.6V8h-9v7.445M40 62h14V29.769M10 30v32h14"></path>
|
|
<circle cx="32" cy="29" r="5"></circle>
|
|
<path d="M24 42h16v20H24zm8-37L2.436 28.651a.5.5 0 0 0-.036.749l3.287 3.287a.5.5 0 0 0 .668.035L32 12l25.65 20.718a.5.5 0 0 0 .668-.035l3.287-3.283a.5.5 0 0 0-.041-.744z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<p class="text-white- control-center-housing-info">Aquí se mostrarán los accesorios y ambientaciones que agregues a la app Casa.</p>
|
|
<p class="link control-center-housing-link" onclick="ControlCenterOpenApplication('houses')">Abrir app Casa</p>
|
|
</div>
|
|
<div class="actionIcon iconItem flashlight">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
|
|
<path class="filled" d="M117,62.85v13.72c0,32.45,10.64,61.49,27.43,81.57v206.43h109.71V158.14c16.79-20.08,27.43-49.12,27.43-81.57 V62.85H117z M203.37,246.86c0,6.45-10,6.43-10,0v-41.88c0-6.45,10-6.43,10,0V246.86z M259.35,73.33H136.65c-6.45,0-6.43-10,0-10 h122.69C265.79,63.33,265.78,73.33,259.35,73.33z">
|
|
</path>
|
|
<path class="filled" d="M144.43,364.57v13.71c0,7.57,6.14,13.72,13.71,13.72h82.29c7.57,0,13.71-6.15,13.71-13.72v-13.71H144.43z M144.43,364.57">
|
|
</path>
|
|
<path class="filled" d="M267.86,8H130.71C123.14,8,117,14.14,117,21.71v41.14h164.57V21.71C281.57,14.14,275.43,8,267.86,8L267.86,8z M267.86,8">
|
|
</path>
|
|
<path d="M267.86,8h-68.57v54.85h-82.07v13.72h164.35V21.71C281.57,14.14,275.43,8,267.86,8z M259.35,73.33H136.65 c-6.45,0-6.43-10,0-10h122.69C265.79,63.33,265.78,73.33,259.35,73.33z">
|
|
</path>
|
|
<path d="M199.29,364.57v13.71h-54.86c0,7.57,6.14,13.72,13.71,13.72h82.29c7.57,0,13.71-6.15,13.71-13.72v-13.71 H199.29z M199.29,364.57">
|
|
</path>
|
|
<path d="M257.68,153.45c5.97-8.05,11-17.29,14.9-27.46C268.35,136.16,263.34,145.37,257.68,153.45L257.68,153.45z M257.68,153.45">
|
|
</path>
|
|
<path d="M199.29,158.85c-15.13,0-27.43,12.29-27.43,27.43c0,13.11,9.22,24.07,21.51,26.78v-8.09c0-6.45,10-6.43,10,0 v8.43c13.2-1.98,23.35-13.37,23.35-27.13C226.72,171.15,214.41,158.85,199.29,158.85z">
|
|
</path>
|
|
<path d="M218.68,166.9l-9.7,9.69c-2.48-2.48-5.91-4.02-9.7-4.02c-7.55,0-13.72,6.14-13.72,13.71 c0,3.79,1.54,7.22,4.02,9.7l-9.7,9.7c3.84,3.84,8.53,6.29,13.47,7.37v-8.07c0-6.45,10-6.43,10,0v8.41 c5.61-0.84,11-3.41,15.31-7.72C229.39,194.98,229.38,177.58,218.68,166.9z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<div class="actionIcon iconItem" onclick="ControlCenterOpenApplication('clock')">
|
|
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
|
<path class="filled" d="M29.375 35.625L16.293 18.707a1.007 1.007 0 0 1 1.414-1.414l16.918 13.082A3.739 3.739 0 0 1 30 36.254a3.914 3.914 0 0 1-.625-.629z">
|
|
</path>
|
|
<path d="M10.787 10.787A30 30 0 1 0 32 2v13"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="actionIcon iconItem" onclick="ControlCenterOpenApplication('calculator')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
<rect x="10" y="2" width="44" height="60" rx="2" ry="2"></rect>
|
|
<circle cx="21.5" cy="53.5" r="1.5"></circle>
|
|
<circle cx="32" cy="53.5" r="1.5"></circle>
|
|
<circle cx="42.5" cy="53.5" r="1.5"></circle>
|
|
<circle cx="21.5" cy="42.5" r="1.5"></circle>
|
|
<circle cx="32" cy="42.5" r="1.5"></circle>
|
|
<circle cx="42.5" cy="42.5" r="1.5"></circle>
|
|
<circle cx="21.5" cy="31.5" r="1.5"></circle>
|
|
<circle cx="32" cy="31.5" r="1.5"></circle>
|
|
<circle cx="42.5" cy="31.5" r="1.5"></circle>
|
|
<path d="M16 8h32v14H16zm26 4v4"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="actionIcon iconItem" onclick="ControlCenterOpenApplication('camera')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 512 512">
|
|
<circle class="filled" cx="256" cy="296" r="81"></circle>
|
|
<path class="filled" d="m374.297 91-5.177-25.883c-2.794-13.974-15.166-24.117-29.417-24.117h-167.406c-14.25 0-26.623 10.143-29.417 24.117l-5.177 25.883z">
|
|
</path>
|
|
<path class="filled" d="m467 121c-35.223 0-405.516 0-422 0-24.813 0-45 20.187-45 45v260c0 24.813 20.187 45 45 45h422c24.813 0 45-20.187 45-45v-260c0-24.813-20.187-45-45-45zm-339 94h-48c-8.284 0-15-6.716-15-15s6.716-15 15-15h48c8.284 0 15 6.716 15 15s-6.716 15-15 15zm128 192c-61.206 0-111-49.794-111-111s49.794-111 111-111 111 49.794 111 111-49.794 111-111 111z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<!-- <div class="actionIcon iconItem" onclick="ControlCenterOpenApplication('camera')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
<circle cx="32" cy="32" r="30"></circle>
|
|
<circle class="filled" cx="32" cy="32" r="15"></circle>
|
|
</svg>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<section id="closed-apps" class="hideToLeft">
|
|
<article id="closed-apps-wrapper" class="swiper-wrapper"></article>
|
|
</section>
|
|
|
|
<!-- Phone Header -->
|
|
<figure id="face-time-icon">
|
|
<i class="fas fa-video"></i>
|
|
</figure>
|
|
<div class="phone-header">
|
|
<a id="phone-time">08:05</a>
|
|
<div id="phone-icons-container" class="flex flex-row items-center">
|
|
<div id="phone-icons">
|
|
<div class="signal">
|
|
<i class="bar"></i>
|
|
</div>
|
|
<a class="text-sm">LTE</a>
|
|
<div class="battery-container home">
|
|
<div class="battery">
|
|
<div class="battery-bar-wrapper">
|
|
<div class="battery-bar" data-low="false" data-savemode="false" data-charging="false"></div>
|
|
</div>
|
|
</div>
|
|
<div class="battery-plup" style="background: var(--battery-border-white);"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section id="lock-screen-edit-confirmation">
|
|
<div id="confirmation-cancel" onclick="notSaveLockScreenWidgets()">Cancel</div>
|
|
<div id="confirmation-done" onclick="saveLockScreenWidgets()">Done</div>
|
|
</section>
|
|
<div id="exitShake">Done</div>
|
|
<header id="phone-header-sliders">
|
|
<figure id="phone-header-slider-left"></figure>
|
|
<figure id="phone-header-slider-right"></figure>
|
|
</header>
|
|
|
|
<section id="phone-request-money-modal" class="bg-container-dark absolute bottom-0 px-20 pb-8 z-99999999 w-full">
|
|
<header class="py-4 flex flex-row items-center justify-between">
|
|
<div id="phone-request-money-decrease" class="flex flex-row items-center justify-center bg-dark w-7rem h-7rem rounded-full cursor-pointer">
|
|
<i class="fas fa-minus text-xl text-white"></i>
|
|
</div>
|
|
<div>
|
|
<input id="phone-request-money-amount" class="text-3xl w-10rem text-center"></input>
|
|
</div>
|
|
<div id="phone-request-money-increase" class="flex flex-row items-center justify-center bg-dark w-7rem h-7rem rounded-full cursor-pointer">
|
|
<i class="fas fa-plus text-xl text-white"></i>
|
|
</div>
|
|
</header>
|
|
<footer class="py-4 flex flex-row items-center justify-between">
|
|
<a id="phone-request-money-cancel" class="px-16 py-8 rounded-xl bg-red-500 cursor-pointer">Cancel</a>
|
|
<a id="phone-request-money-send" class="px-16 py-8 rounded-xl bg-blue-500 cursor-pointer">Send</a>
|
|
</footer>
|
|
</section>
|
|
|
|
<div class="phone-bottom-selector">
|
|
<div class="phone-bottom-selector-items">
|
|
<div class="phone-bototm-selector-title">Something</div>
|
|
</div>
|
|
<div class="phone-bottom-selector-close-button">Close</div>
|
|
</div>
|
|
|
|
<section id="phone-input-container">
|
|
<header class="flex flex-col items-center justify-center gap-2">
|
|
<div id="phone-input-title">Enter Passcode</div>
|
|
<div id="phone-input-subtitle" class="text-sm text-white">iPhone</div>
|
|
</header>
|
|
<input id="phone-input" type="text" placeholder="Title">
|
|
<footer class="grid grid-cols-2">
|
|
<button id="phone-input-cancel" class="text-blue-500">Cancel</button>
|
|
<button id="phone-input-confirm" class="disabled">Save</button>
|
|
</footer>
|
|
</section>
|
|
|
|
<section id="phone-home-search-container" onclick="closeHomeSearch()" class="absolute p-4 w-full h-full pb-8 flex flex-col gap-6 z-9999 bg-blur w-full rounded-xl overflow-y top-0">
|
|
<header class="pt-8 pb-3 sticky top-0">
|
|
<a class="apps-text-translation text-white-">Apps</a>
|
|
</header>
|
|
<article id="phone-home-search-list" class="w-full p-4 bg-dark rounded-xl flex flex-col gap-6 overflow-y h-72"></article>
|
|
<footer class="w-full bg-dark p-4 absolute bottom-0 pb-8 left-0">
|
|
<div class="bg-dark rounded-xl p-6">
|
|
<i class="fas fa-search text-white-"></i>
|
|
<input class="text-white- placeholder-white-" type="text" placeholder="Search" id="phone-home-search-input" onclick="event.stopPropagation()">
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
|
|
<section id="phone-group-applications-container" class="absolute top-0 z-100 flex flex-col justify-center items-center w-full h-full bg-blur gap-y-8 p-24">
|
|
<header class="text-white- text-3xl mb-20">
|
|
<input type="text" id="phone-group-applications-name" value="Finance" class="bg-transparent text-white- text-3xl w-full text-center" placeholder="" maxlength="12">
|
|
</header>
|
|
<article id="phone-group-wrapper" class="relative h-45 w-full rounded-4xl bg-blur px-4 py-6 flex flex-col cursor-grab justify-start overflow-hidden">
|
|
<article id="phone-group-applications-wrapper" class="flex-1 w-full flex items-start justify-default gap-8"></article>
|
|
<footer id="phone-group-application-dots" class="phone-dots-container bg-transparent bg-filter-none">
|
|
<div class="wrapperDots active">
|
|
<div class="dot"></div>
|
|
<div class="dot active"></div>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
</section>
|
|
|
|
<section id="phone-airdrop" class="absolute bottom-0 pb-8 h-90 flex flex-col gap-6 z-9999 bg-container-dark w-full rounded-xl overflow-y">
|
|
<header class="flex flex-row justify-center py-5 border-b sticky top-0 bg-container-dark">
|
|
<a class="font-semibold airdrop-title">AirDrop a Copy</a>
|
|
<a class="absolute right-2 text-blue-500 cursor-pointer" id="phone-airdrop-close">Done</a>
|
|
</header>
|
|
<a class="text-lg px-4 font-semibold airdrop-other">Other People</a>
|
|
<article id="airdrop-people" class="p-4 grid grid-cols-3 gap-y-6"></article>
|
|
</section>
|
|
|
|
<section id="phone-airdrop-receive" class="absolute top-0 z-9999999999 flex flex-col w-full h-full items-center justify-center bg-dark px-12 bg-filter-blur">
|
|
<article class="flex flex-col gap-2 bg-blur rounded-2xl">
|
|
<header class="pt-5 flex flex-col gap-2 items-center justify-center p-12">
|
|
<a class="text-white- font-semibold">AirDrop</a>
|
|
<a id="phone-airdrop-receive-message" class="text-white-"> would like to share a photo.</a>
|
|
</header>
|
|
<article id="phone-airdrop-receive-content">
|
|
<img alt="" width="100%" style="height: 150px;">
|
|
</article>
|
|
<footer class="grid grid-cols-2">
|
|
<button class="border-r py-6" onclick="rejectAirDrop()">
|
|
<a class="text-blue-500 airdrop-reject">Decline</a>
|
|
</button>
|
|
<button class="py-6" onclick="acceptAirDrop()">
|
|
<a class="text-blue-500 font-semibold airdrop-accept">Accept</a>
|
|
</button>
|
|
</footer>
|
|
</article>
|
|
|
|
</section>
|
|
|
|
<section id="phone-media-share" class="absolute bottom-0 hide pb-8 flex flex-col gap-6 z-9999 bg-container-dark w-full rounded-xl">
|
|
<div class="flex flex-row items-end justify-end p-4" onclick="closeMediaShare()">
|
|
<i class="fas fa-times fa-lg text-muted p-3-5 bg-dark rounded-full"></i>
|
|
</div>
|
|
<article id="phone-media-share-with-users" class="w-full h-full swiper border-t pt-5">
|
|
<ul class="swiper-wrapper"></ul>
|
|
</article>
|
|
<article id="phone-media-share-with-applications" class="w-full h-full swiper border-t pt-5">
|
|
<ul class="swiper-wrapper"></ul>
|
|
</article>
|
|
<article id="phone-media-interactions" class="w-full p-4 flex flex-col gap-6">
|
|
<div class="p-4 flex flex-row justify-between bg-dark rounded-lg cursor-pointer box-gallery-option" onclick="copyMediaShareUrl()">
|
|
<a class="shared-copy-photo">Copy Photo</a>
|
|
<i class="fas fa-copy fa-lg text-white"></i>
|
|
</div>
|
|
<section class="p-4 flex flex-col gap-4 bg-dark rounded-lg box-gallery-option-group">
|
|
<div class="flex flex-row justify-between border-b pb-3 cursor-pointer" onclick="useMediaAsWallpaper()">
|
|
<a class="shared-wallpaper-photo">Use as Wallpaper</a>
|
|
<i class="fas fa-image fa-lg text-white"></i>
|
|
</div>
|
|
<div class="flex flex-row justify-between cursor-pointer" onclick="saveMediaToGallery()">
|
|
<a class="shared-save-photo">Save to Photos</a>
|
|
<i class="fas fa-save fa-lg text-white"></i>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
</section>
|
|
|
|
<div class="gray-background"></div>
|
|
|
|
<!-- Phone Big Image -->
|
|
<div class="phone-image-container">
|
|
<div class="image-rotate-cover"></div>
|
|
<div id="phone-image-container-header" class="global-app-header" style="margin-bottom: 32px; z-index: 50; margin-top: 15px">
|
|
<p id="cancel-image-container" class="blue-text"><i class="fas fa-chevron-left"></i> Back</p>
|
|
<p id="phone-image-container-header-text">Gallery</p>
|
|
<!-- <p id="save-image-to-photos" class="blue-text">Kaydet</p> -->
|
|
</div>
|
|
<div class="phone-image-source-container">
|
|
<div class="phone-image-source-container-child settings-image-selected">
|
|
<img class="phone-image-source" alt=""></img>
|
|
</div>
|
|
</div>
|
|
<div id="gallery-swiper" class="swiper gallery-swiper w-full absolute-center-y">
|
|
<ul id="gallery-photo-list" class="swiper-wrapper"></ul>
|
|
</div>
|
|
<footer class="photo-opt-back absolute bottom-0 pb-8 bg-dark border-t flex flex-col w-full pt-5 gap-8">
|
|
<section id="phone-image-container-other-images">
|
|
<div class="swiper gallery-other-images-swiper">
|
|
<div class="swiper-wrapper"></div>
|
|
</div>
|
|
</section>
|
|
<section class="photo-footer flex flex-row items-center justify-around">
|
|
<i class="fa-regular fa-arrow-up-from-square text-blue-500" onclick="openMediaShareScreen()"></i>
|
|
<i class="fa-regular fa-trash-can fa-lg text-blue-500" id="phone-image-delete-image"></i>
|
|
<i class="fa-light fa-floppy-disk text-blue-500" id="phone-image-save-image"></i>
|
|
</section>
|
|
</footer>
|
|
</div>
|
|
|
|
<div class="gif-container">
|
|
<header class="w-full h-10 pb-3 pt-8 flex items-center justify-center">
|
|
<a onclick="CloseGifMenu()" class="absolute left-4">
|
|
<i class="fas fa-chevron-circle-left fa-lg text-white"></i>
|
|
</a>
|
|
<input type="text" class="w-70 h-32" id="gifinput" placeholder="Search a gif..." />
|
|
</header>
|
|
<div class="gifs"></div>
|
|
</div>
|
|
|
|
<div class="phone-select-photo-container">
|
|
<section class="absolute top-0 left-0 w-full h-full flex-col overflow-y">
|
|
<header class="flex flex-row justify-center items-center p-4 pt-8 sticky top-0 bg-white">
|
|
<i id="phone-select-photo-back" class="fa fa-chevron-left fa-lg absolute left-2"></i>
|
|
<a class="select-photo-news">Select A Photo</a>
|
|
</header>
|
|
<div class="gallery-images"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="phone-select-gallery-container">
|
|
<section class="absolute top-0 left-0 w-full h-full flex-col overflow-y">
|
|
<header class="flex flex-row justify-center items-center p-4 pt-8 sticky top-0 bg-white">
|
|
<i id="phone-select-gallery-back" class="fa fa-chevron-left fa-lg absolute left-2"></i>
|
|
<a class="modal-search-photos">Select A Photo Or Video</a>
|
|
</header>
|
|
<div class="gallery-data"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="phone-video-container">
|
|
<div class="image-rotate-cover"></div>
|
|
<div id="phone-video-container-header" class="global-app-header" style="margin-bottom: 32px; z-index: 50; margin-top: 15px">
|
|
<p id="cancel-video-container" class="blue-text"><i class="fas fa-chevron-left"></i> Back</p>
|
|
<p>Video</p>
|
|
<p id="save-video" class="blue-text">Save</p>
|
|
</div>
|
|
<div class="phone-image-source-container">
|
|
<div class="phone-image-source-container-child">
|
|
<video id="phone-video-source" autoplay loop></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="widgetCenter out">
|
|
<div class="contenido">
|
|
<div class="block midd batteryInfo" data-charge="100">
|
|
<div class="iconWrapper high">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
<path d="M14 59a3 3 0 0 0 3 3h30a3 3 0 0 0 3-3v-9H14zM50 5a3 3 0 0 0-3-3H17a3 3 0 0 0-3 3v5h36zm0 45V10m-36 0v40">
|
|
</path>
|
|
<circle cx="32" cy="56" r="2"></circle>
|
|
</svg>
|
|
</div>
|
|
<a class="text-2xl">100%</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section class="app-library out">
|
|
<header class="w-full mb-5 sticky top-0 pt-7">
|
|
<div class="flex flex-row items-center justify-center w-full bg-blur rounded-xl p-4">
|
|
<i class="fa fa-search fa-lg"></i>
|
|
<input type="text" id="app-library-search-input" class="w-full ml-2 text-white-" placeholder="App Library">
|
|
</div>
|
|
</header>
|
|
<section id="app-library-list" class="grid grid-cols-2 gap-8 h-83 overflow-y"></section>
|
|
<section id="app-library-search-list" class="flex flex-col gap-2 h-83 overflow-y"></section>
|
|
<section id="app-library-category-show" onclick="hideAppLibraryCategoryShow()" class="flex flex-col w-full h-full absolute bg-blur top-0 z-20 bg-dark left-0 overflow-y">
|
|
<header class="bg-dark pt-9 sticky top-0 mb-6 w-full bg-blur px-4 pb-3">
|
|
<a class="text-xl text-white- font-semibold" id="app-library-category">Other</a>
|
|
</header>
|
|
<article class="grid grid-cols-4 gap-4" id="app-library-showing-category-list"></article>
|
|
</section>
|
|
</section>
|
|
<figure id="phone-application-navigation-left"></figure>
|
|
<figure id="phone-application-navigation-right"></figure>
|
|
<div class="phone-applications">
|
|
<section id="wrapper-apps-container">
|
|
<div class="wrapperApps"></div>
|
|
</section>
|
|
<article id="phone-footer-applications-container" data-page="0">
|
|
<section id="phone-footer-applications-wrapper" class="phone-dots-container">
|
|
<div class="wrapperDots"></div>
|
|
<div class="phone-footer-applications-search" onclick="openHomeSearch()">
|
|
<i class="fas fa-search text-white- text-sm"></i>
|
|
<a class="text-white- text-sm">Search</a>
|
|
</div>
|
|
</section>
|
|
<div class="phone-footer-applications phone-app-container bg-filter-blur"></div>
|
|
</article>
|
|
</div>
|
|
<!-- end custom content -->
|
|
|
|
<!-- Container for all application's -->
|
|
<div class="phone-application-container">
|
|
<div id="phone-notConnection" style="display: none">
|
|
<article>
|
|
<h3>Phone out of service</h3>
|
|
<p>The mobile device is not connected to a signal network, please try again later or go to an area with signal</p>
|
|
<button onclick="CloseApplication()">Exit application</button>
|
|
</article>
|
|
</div>
|
|
|
|
<div class=" application settings-app">
|
|
<div id="settings-home-page" class="flex flex-col h-full w-full overflow-y p-4">
|
|
<div class="settings-app-header">
|
|
<p>Settings</p>
|
|
</div>
|
|
|
|
<header class="settings-tab">
|
|
<div class="settings-app-tab py-4 cursor-pointer" data-tab="profilepicture">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<img class="phone-settings-image-source" alt=""></img>
|
|
<div class="settings-tab-texts">
|
|
<div class="settings-player-name settings-tab-title">
|
|
<a>Quasar Store</a>
|
|
</div>
|
|
<div class="settings-tab-description">
|
|
<a class="text-sm">Apple ID, iCloud+, Media & Purchases</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<i class="fas fa-chevron-right text-sm text-muted"></i>
|
|
</div>
|
|
</header>
|
|
|
|
<article class="settings-tab">
|
|
<div class="settings-app-tab secondTab" data-tab="available">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<label class="switch">
|
|
<input class="available-box" type="checkbox" />
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<div class="settings-tab-icon bg-orange-500">
|
|
<i class="fas fa-plane" style="color: var(--primary-optionicon-color);"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-airplane-title">
|
|
<a>Airplane Mode</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="settings-app-tab secondTab" data-tab="bluetooth">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<label class="switch">
|
|
<input class="bluetooth-box" type="checkbox">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<div class="settings-tab-icon"><i class="fab fa-bluetooth-b" style="color: var(--primary-optionicon-color);"></i></div>
|
|
<div class="settings-tab-title settings-bluetooth-title">
|
|
<a>Bluetooth</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="settings-app-tab secondTab" data-tab="darkmode">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<label class="switch">
|
|
<input name="theme" value="dark" class="darkmode-box" type="checkbox" />
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<div class="settings-tab-icon bg-slate-600">
|
|
<i class="fas fa-moon" style="color: var(--primary-optionicon-color);"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-darkmode-title">
|
|
<a>Dark mode</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="settings-app-tab secondTab" data-tab="sound">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<label class="switch">
|
|
<input class="sound-box" type="checkbox" checked="true" />
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<div class="settings-tab-icon bg-red-600">
|
|
<i class="fas fa-volume-up" style="color: var(--primary-optionicon-color) ;"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-ringtones-title">
|
|
<a>Ringtones</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="settings-tab">
|
|
<div class="settings-app-tab" data-tab="details">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<div class="settings-tab-icon" style="background: gray"><i class="fa-solid fa-gear"></i></div>
|
|
<div class="settings-tab-title settings-general-title">
|
|
<a>General</a>
|
|
</div>
|
|
</nav>
|
|
<i class="fas fa-chevron-right text-sm text-muted"></i>
|
|
</div>
|
|
<div class="settings-app-tab" data-tab="display">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<div class="settings-tab-icon bg-blue-600">
|
|
<i class="fa-light fa-sun-bright"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-display-title">
|
|
<a>Display & Brightness</a>
|
|
</div>
|
|
</nav>
|
|
<i class="fas fa-chevron-right text-sm text-muted"></i>
|
|
</div>
|
|
<div class="settings-app-tab" data-tab="background">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<div class="settings-tab-icon" style="background: #13a1ac">
|
|
<i class="fa-solid fa-paintbrush-pencil"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-wallpaper-title">
|
|
<a>Wallpaper</a>
|
|
</div>
|
|
</nav>
|
|
<i class="fas fa-chevron-right text-sm text-muted"></i>
|
|
</div>
|
|
<div class="settings-app-tab" data-tab="notifications">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<div class="settings-tab-icon" style="background: #e62908">
|
|
<i class="fas fa-bell"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-notification-title">
|
|
<a>Notifications</a>
|
|
</div>
|
|
</nav>
|
|
<i class="fas fa-chevron-right text-sm text-muted"></i>
|
|
</div>
|
|
<div class="settings-app-tab" data-tab="security">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<div class="settings-tab-icon" style="background: gray">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-security-title">
|
|
<a>Security</a>
|
|
</div>
|
|
</nav>
|
|
<i class="fas fa-chevron-right text-sm text-muted"></i>
|
|
</div>
|
|
|
|
<div class="settings-app-tab secondTab" data-tab="change-ringtone">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
|
|
<div class="settings-tab-icon" style="background: #0daf15">
|
|
<i class="fas fa-volume-up" style="color: var(--primary-optionicon-color) ;"></i>
|
|
|
|
</div>
|
|
<div class="settings-tab-title settings-change-ringtones-title">
|
|
<a>Change Ringtone</a>
|
|
</div>
|
|
</nav>
|
|
<i class="fas fa-chevron-right text-sm text-muted"></i>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="settings-tab">
|
|
<div class="settings-app-tab secondTab" data-tab="localTime">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<label class="switch">
|
|
<input class="localTime-box" type="checkbox" />
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<div class="settings-tab-icon">
|
|
<i class="far fa-clock" style="color: var(--primary-optionicon-color) ;"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-time-title">
|
|
<a>Local Time</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="settings-app-tab secondTab" data-tab="streamermode">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<label class="switch">
|
|
<input class="streamer-box" type="checkbox" />
|
|
<span class="slider round"></span>
|
|
</label>
|
|
<div class="settings-tab-icon" style="background: #be0fce">
|
|
<i class="fas fa-user-secret" style="color: var(--primary-optionicon-color) ;"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-streamer-title">
|
|
<a>Streamer Mode</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="settings-app-tab" data-tab="onduty">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
|
|
<div class="settings-tab-icon" style="background: gray">
|
|
<i class="fas fa-user-clock"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-toggle-title">
|
|
<a>Toggle Duty</a>
|
|
</div>
|
|
</nav>
|
|
<i class="fas fa-chevron-right text-sm text-muted"></i>
|
|
</div>
|
|
<div class="settings-app-tab" data-tab="changePhoneLoc">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<div class="settings-tab-icon"><i class="fas fa-caret-square-right"></i></div>
|
|
<div class="settings-tab-title settings-position-title">
|
|
<a>Change Phone Location</a>
|
|
</div>
|
|
</nav>
|
|
<i class="fas fa-chevron-right text-sm text-muted"></i>
|
|
</div>
|
|
<div class="settings-app-tab secondTab" data-tab="myPhone">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<div class="settings-tab-icon" style="background: #0daf15">
|
|
<i class="fas fa-phone-alt"></i>
|
|
</div>
|
|
<div class="settings-tab-title" id="myPhoneNumber">
|
|
<a></a>
|
|
</div>
|
|
</nav>
|
|
<i class="fa-regular fa-copy text-sm text-muted"></i>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="settings-tab">
|
|
<div class="settings-app-tab secondTab" data-tab="numberrecognition">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<label class="switch">
|
|
<input class="numberrec-box" type="checkbox" />
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<div class="settings-tab-icon bg-slate-700">
|
|
<i class="fas fa-user-slash"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-hidden-title">
|
|
<a>Hidden Number</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="settings-app-tab secondTab" data-tab="faceid">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<label class="switch">
|
|
<input class="faceid-box" type="checkbox" />
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<div class="settings-tab-icon bg-green-500">
|
|
<!-- faceid icon -->
|
|
<i class="fas fa-user-secret" style="color: var(--primary-optionicon-color) ;"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-faceid-title">
|
|
<a>Faceid</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="settings-app-tab secondTab" data-tab="lockScreen">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<label class="switch">
|
|
<input class="lockScreen-box" type="checkbox" />
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<div class="settings-tab-icon">
|
|
<i class="fas fa-lock" style="color: var(--primary-optionicon-color) ;"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-lockscreen-title">
|
|
<a>Lock Screen</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="settings-app-tab secondTab" data-tab="batteryPercentage">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<label class="switch">
|
|
<input class="batteryPercentage-box" type="checkbox" />
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<div class="settings-tab-icon" style="background: #0daf15">
|
|
<i class="fa-light fa-battery-quarter" style="color: var(--primary-optionicon-color) ;"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-battery-number-title">
|
|
<a>Battery Percentage</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="settings-app-tab secondTab" data-tab="disableBlur">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<label class="switch">
|
|
<input class="disableBlur-box" type="checkbox" />
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<div class="settings-tab-icon" style="background: #13a1ac">
|
|
<i class="fa-solid fa-compact-disc" style="color: var(--primary-optionicon-color) ;"></i>
|
|
</div>
|
|
<div class="settings-tab-title" id="disable-blur-title">
|
|
<a>Disable Blur</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<article class="settings-display-tab settings-page">
|
|
<div class="global-app-header">
|
|
<p id="cancel-settings-submenu" class="blue-text"><i class="fas fa-chevron-left"></i> Back</p>
|
|
<a class="settings-display-">Display & Brightness</a>
|
|
</div>
|
|
<a class="ml-4 text-sm text-muted settings-appearance">APPEARANCE</a>
|
|
<article class="settings-tab">
|
|
<section id="settings-display-appearance" class="flex flex-row items-center justify-center w-full gap-8 p-4">
|
|
<div>
|
|
<img class="appearance-skeleton" src="./img/startup/light-skeleton.png" alt="" class="object-cover" onclick="ToggleDarkMode(false)">
|
|
<footer class="flex flex-col items-center mt-3">
|
|
<a class="text-center settings-light">Light</a>
|
|
<div>
|
|
<input type="radio" id="settings-light" class="ios-tick" name="appearance" value="light" checked>
|
|
<label for="settings-light">
|
|
<span>
|
|
<img src="img/startup/checkbox.svg" alt="Checked Icon" />
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<div>
|
|
<img class="appearance-skeleton" src="./img/startup/dark-skeleton.png" alt="" class="object-cover" onclick="ToggleDarkMode(true)">
|
|
<footer class="flex flex-col items-center mt-3">
|
|
<a class="text-center settings-dark">Dark</a>
|
|
<div>
|
|
<input type="radio" id="settings-dark" class="ios-tick" name="appearance" value="dark">
|
|
<label for="dark">
|
|
<span>
|
|
<img src="img/startup/checkbox.svg" alt="Checked Icon" />
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
<a class="ml-4 text-sm text-muted settings-brightness">BRIGHTNESS</a>
|
|
<article class="settings-tab flex flex-row items-center justify-between gap-6 p-4">
|
|
<i class="fa-solid fa-brightness-low text-muted text-xl"></i>
|
|
<input type="range" min="5" max="100" value="100" class="range brightness-range" onchange="updateBrightness(this.value)">
|
|
<i class="fa-solid fa-brightness text-muted text-xl"></i>
|
|
</article>
|
|
<a class="ml-4 text-sm text-muted settings-scale">SCALE</a>
|
|
<article class="settings-tab flex flex-row items-center justify-between gap-6 p-4">
|
|
<i class="fa-thin fa-text-size text-muted text-xl"></i>
|
|
<input type="range" step="0.01" min="0.5" max="1" value="1" class="range phone-scale-range" onchange="updatePhoneScale(this.value)">
|
|
<i class="fa-solid fa-text-size text-muted text-xl"></i>
|
|
</article>
|
|
</article>
|
|
|
|
<div class="settings-background-tab settings-page">
|
|
<div class="global-app-header">
|
|
<p id="cancel-settings-submenu" class="blue-text"><i class="fas fa-chevron-left"></i> Settings</p>
|
|
<a>Wallpaper</a>
|
|
</div>
|
|
|
|
<section id="settings-background-container" class="rounded-lg">
|
|
<div data-slide="slide" class="swiper background-swiper">
|
|
<header id="background-swiper-header">Current</header>
|
|
<ul id="background-list" class="swiper-wrapper"></ul>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
<footer id="background-swiper-footer" onclick="addCustomWallpaper()">Add Custom Wallpaper</footer>
|
|
</section>
|
|
|
|
<footer id="background-tab-info" class="flex flex-row p-6 w-full bg-settings-tab mt-5 rounded-lg justify-between">
|
|
<aside class="flex flex-col gap-2">
|
|
<header class="font-bold change-wallpaper-settings">Change your Wallpaper</header>
|
|
<p class="text-muted change-wallpaper-settings-desc">touch and hold the wallpaper to preview it and then tap set. Or tap Add Custom Wallpaper and choose an image from url.</p>
|
|
</aside>
|
|
<img src="../html/img/settings/wallpaper_help.png" alt=""></img>
|
|
</footer>
|
|
</div>
|
|
|
|
<div class="settings-notifications-tab settings-page">
|
|
<header class="global-app-header">
|
|
<p id="cancel-settings-submenu" class="blue-text"><i class="fas fa-chevron-left"></i> Back</p>
|
|
<a>Notifications</a>
|
|
</header>
|
|
<section id="settings-app-notifications-type">
|
|
<a class="text-muted ml-4 display-as">DISPLAY AS</a>
|
|
<article class="settings-tab grid grid-cols-3 items-center justify-center w-full gap-8">
|
|
<div class="notification-type-container cursor-pointer">
|
|
<img src="./img/settings/1.png" alt="" class="object-cover notification-type-image" onclick="changeNotificationType('count')">
|
|
<footer class="flex flex-col items-center mt-3">
|
|
<div>
|
|
<input type="radio" id="notification-type-count" name="notification-type" class="notification-type-tick" value="count" checked>
|
|
<label for="notification-type-count">
|
|
<span class="type-count">Count</span>
|
|
</label>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<div class="notification-type-container cursor-pointer">
|
|
<img src="./img/settings/2.png" alt="" class="object-cover notification-type-image" onclick="changeNotificationType('stack')">
|
|
<footer class="flex flex-col items-center mt-3">
|
|
<div>
|
|
<input type="radio" id="notification-type-stack" name="notification-type" class="notification-type-tick" value="stack">
|
|
<label for="notification-type-stack">
|
|
<span class="type-stack">Stack</span>
|
|
</label>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<div class="notification-type-container cursor-pointer">
|
|
<img src="./img/settings/3.png" alt="" class="object-cover notification-type-image" onclick="changeNotificationType('list')">
|
|
<footer class="flex flex-col items-center mt-3">
|
|
<div>
|
|
<input type="radio" id="notification-type-list" name="notification-type" class="notification-type-tick" value="list">
|
|
<label for="notification-type-list">
|
|
<span class="type-list">List</span>
|
|
</label>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
<section id="settings-app-notifications-container" class="h-86 overflow-y"></section>
|
|
</div>
|
|
<div class="settings-details-tab settings-page">
|
|
<div class="global-app-header">
|
|
<p id="cancel-settings-submenu" class="blue-text"><i class="fas fa-chevron-left"></i> Back</p>
|
|
<a>About</a>
|
|
</div>
|
|
<article class="settings-tab">
|
|
<div class="settings-app-tab">
|
|
<a class="settings-general-name">Name</a>
|
|
<a class="text-muted settings-general-description">Phone</a>
|
|
</div>
|
|
<div class="settings-app-tab">
|
|
<a class="settings-version-name">iOS Version</a>
|
|
<a class="text-muted settings-version-description">16.6</a>
|
|
</div>
|
|
<div class="settings-app-tab">
|
|
<a class="settings-model-name">Model Name</a>
|
|
<a class="text-muted settings-model-description">Phone 15 Pro Max</a>
|
|
</div>
|
|
<div class="settings-app-tab">
|
|
<a class="settings-modeln-name">Model Number</a>
|
|
<a class="text-muted settings-modeln-description">MLKFYHER/U</a>
|
|
</div>
|
|
<div class="settings-app-tab">
|
|
<a class="settings-serial-name">Serial Number</a>
|
|
<a class="text-muted settings-serial-description">H5424242XSDSD</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="settings-security-tab settings-page">
|
|
<div class="global-app-header">
|
|
<p id="cancel-settings-submenu" class="blue-text"><i class="fas fa-chevron-left"></i> Back</p>
|
|
<a>Change Passcode</a>
|
|
<i class="fas fa-times fa-lg cursor-pointer" id="reset-password"></i>
|
|
</div>
|
|
<section id="enter-new-password" class="w-full h-full">
|
|
<article class="flex flex-col items-center justify-center w-full h-65">
|
|
<header class="flex flex-col">
|
|
<a class="text-2xl pb-4 enter-password">Enter Your New Password</a>
|
|
<div class="password-circle-container flex items-center justify-center w-full gap-6">
|
|
<figure class="password-circle" data-number="1"></figure>
|
|
<figure class="password-circle" data-number="2"></figure>
|
|
<figure class="password-circle" data-number="3"></figure>
|
|
<figure class="password-circle" data-number="4"></figure>
|
|
</div>
|
|
</header>
|
|
<footer class="password-button-container">
|
|
<span class="password-button" data-value="1">1</span>
|
|
<span class="password-button" data-value="2">2</span>
|
|
<span class="password-button" data-value="3">3</span>
|
|
<span class="password-button" data-value="4">4</span>
|
|
<span class="password-button" data-value="5">5</span>
|
|
<span class="password-button" data-value="6">6</span>
|
|
<span class="password-button" data-value="7">7</span>
|
|
<span class="password-button" data-value="8">8</span>
|
|
<span class="password-button" data-value="9">9</span>
|
|
<span class="password-button" data-value="0">0</span>
|
|
<fas class="fas fa-backspace password-delete-icon fa-lg" onclick="deleteLastPinCode()"></fas>
|
|
</footer>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
<div class="settings-onduty-tab settings-page">
|
|
<div class="global-app-header">
|
|
<p id="cancel-settings-submenu" class="blue-text"><i class="fas fa-chevron-left"></i> Back</p>
|
|
<p>On Duty</p>
|
|
</div>
|
|
<article class="settings-tab">
|
|
<div class="settings-app-tab onduty-option">
|
|
<nav class="flex flex-row items-center gap-4" aria-label="">
|
|
<div class="settings-tab-icon">
|
|
<i class="fas fa-user-secret fa-lg" style="color: white;"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-duty-option">On Duty</div>
|
|
<label class="switch">
|
|
<input class="onduty-box" type="checkbox" />
|
|
<span class="slider round"></span>
|
|
</label>
|
|
</nav>
|
|
</div>
|
|
</article>
|
|
|
|
</div>
|
|
<div class="settings-profilepicture-tab settings-page">
|
|
<div class="global-app-header">
|
|
<p id="cancel-settings-submenu" class="blue-text"><i class="fas fa-chevron-left"></i> Back</p>
|
|
<p>Profile photo</p>
|
|
<a id="save-profilepicture" class="blue-text cursor-pointer">Save</a>
|
|
</div>
|
|
|
|
<div class="phone-add-contact-image">
|
|
<img class="phone-settings-image-source" src="img/default.png"></img>
|
|
<a class="settings-player-name">Quasar Store</a>
|
|
</div>
|
|
<div class="overflow-y h-67">
|
|
<a class="text-muted ml-4 option-setting-profile">Profile Name</a>
|
|
<div class="settings-app-tab mb-1">
|
|
<input type="text" class="custom-profilename-input p-4" placeholder="Name" spellcheck="false">
|
|
</div>
|
|
<a class="text-muted ml-4 option-setting-picture">Profile Picture</a>
|
|
<article class="settings-tab mt-4 mb-5">
|
|
<div class="settings-app-tab nomargin profilepicture-option" data-profilepicture="default">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<div class="settings-tab-icon">
|
|
<i class="fa-solid fa-star" style="color: var(--primary-optionicon-color);"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-img-default">Default</div>
|
|
</nav>
|
|
</div>
|
|
<div class="settings-app-tab nomargin profilepicture-option" data-profilepicture="custom-profilepicture">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<div class="settings-tab-icon bg-orange-500">
|
|
<i class="fa-solid fa-paperclip" style="color: var(--primary-optionicon-color);"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-img-url">URL Link</div>
|
|
</nav>
|
|
</div>
|
|
<div class="settings-app-tab profilepicture-option" data-profilepicture="custom-camera">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<div class="settings-tab-icon bg-slate-600">
|
|
<i class="fa-solid fa-camera" style="color: var(--primary-optionicon-color);"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-img-photo">Take a photo</div>
|
|
</nav>
|
|
</div>
|
|
</article>
|
|
<a class="text-muted ml-4 settings-create-backup">Create Backup</a>
|
|
<article class="settings-tab mt-4 mb-5">
|
|
<div class="settings-app-tab nomargin">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4" onclick="createBackup()">
|
|
<div class="settings-tab-icon">
|
|
<i class="fa-solid fa-cloud" style="color: var(--primary-optionicon-color);"></i>
|
|
</div>
|
|
<div class="settings-tab-title settings-create-backup-">Create backup</div>
|
|
</nav>
|
|
</div>
|
|
</article>
|
|
<a class="text-muted ml-4 settings-cloud">Backups</a>
|
|
<article class="settings-tab mt-4 mb-5" id="phone-backups">
|
|
<div class="settings-app-tab nomargin">
|
|
<nav aria-label="left" class="flex flex-row items-center gap-4">
|
|
<div class="settings-tab-icon bg-blue-400">
|
|
<i class="fa-solid fa-cloud-arrow-up" style="color: var(--primary-optionicon-color);"></i>
|
|
</div>
|
|
<div class="settings-tab-title">(90) 2132131 21</div>
|
|
</nav>
|
|
</div>
|
|
</article>
|
|
|
|
<div class="gray-background-profile"></div>
|
|
|
|
<div class="profilepicture-custom">
|
|
<div class="profilepicture-custom-title settings-private-photo">Private profile photo</div>
|
|
<div class="profilepicture-custom-input-fields">
|
|
<input type="text" class="custom-profilepicture-input" placeholder="URL (jpg/png)" spellcheck="false">
|
|
</div>
|
|
<div class="profilepicture-custom-buttons">
|
|
<div class="custom-profilepicture-button" id="cancel-custom-profilepicture">
|
|
<p>Cancel</p>
|
|
</div>
|
|
<div class="custom-profilepicture-button" id="accept-custom-profilepicture">
|
|
<p>Save</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="phone-call-app phone-background">
|
|
<div class="phone-call-incoming">
|
|
<div class="phone-call-incoming-title">Coming call</div>
|
|
<div class="phone-call-incoming-caller">Coming call</div>
|
|
<i class="fas fa-phone incoming-answer" onclick="AnswerCall(event)" id="incoming-answer"></i>
|
|
<i class="fa-solid fa-phone-hangup" id="incoming-deny"></i>
|
|
</div>
|
|
|
|
<div class="phone-call-outgoing">
|
|
<div class="phone-call-outgoing-title">Searching...</div>
|
|
<div class="phone-call-outgoing-caller">Searching...</div>
|
|
|
|
<i class="fa-solid fa-phone-hangup" id="outgoing-cancel"></i>
|
|
</div>
|
|
|
|
<div class="phone-call-ongoing">
|
|
<header class="flex flex-col justify-center">
|
|
<div class="phone-call-ongoing-caller">Test Yeey</div>
|
|
<div class="phone-call-ongoing-time">05:05</div>
|
|
</header>
|
|
<article class="grid grid-cols-3 justify-items-center gap-8 mt-8 relative">
|
|
<section class="flex flex-col items-center text-white- text-sm gap-2">
|
|
<div class="phone-fast-call-button ongoing" data-type="microphone">
|
|
<i class="fas fa-microphone-slash"></i>
|
|
</div>
|
|
<a class="call-mute-opt">Mute</a>
|
|
</section>
|
|
<section class="flex flex-col items-center text-white- text-sm gap-2">
|
|
<div class="phone-fast-call-button ongoing" data-type="speaker">
|
|
<i class="fas fa-volume-up"></i>
|
|
</div>
|
|
<a class="call-speaker-opt">Speaker</a>
|
|
</section>
|
|
<section class="flex flex-col items-center text-white- text-sm gap-2">
|
|
<div class="phone-call-ongoing-videocall phone-fast-call-button ongoing" onclick="faceTimeFromCall()" data-type="video">
|
|
<i class="fas fa-video"></i>
|
|
</div>
|
|
<a class="call-video-opt">Video</a>
|
|
</section>
|
|
</article>
|
|
<footer class="flex items-center justify-center relative">
|
|
<i class="fa-solid fa-phone-hangup" id="ongoing-cancel"></i>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application phone-app">
|
|
<div class="phone-contacts">
|
|
<div id="phone-app-contacts-head">
|
|
<i class="fas fa-plus text-blue-500 fa-xl self-end" id="phone-app-contacts-plus" onclick="OpenEditor()"></i>
|
|
<a class="text-3xl mb-3 phone-header-contacts-title">Contacts</a>
|
|
<div class="flex flex-row gap-2 bg-dark rounded-xl p-4 phone-app-contacts-searchArea">
|
|
<i class="fas fa-search text-muted"></i>
|
|
<input id="phone-app-contacts-searchArea" oninput="inputSearch(this, 'phone-app-contacts-body-contact', 'phone-app-contacts-body-contact')" placeholder="Search"></input>
|
|
</div>
|
|
</div>
|
|
<section class="phone-alphabet-list">
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('A')">A</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('B')">B</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('C')">C</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('D')">D</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('E')">E</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('F')">F</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('G')">G</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('H')">H</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('I')">I</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('J')">J</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('K')">K</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('L')">L</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('M')">M</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('N')">N</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('O')">O</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('P')">P</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('Q')">Q</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('R')">R</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('S')">S</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('T')">T</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('U')">U</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('V')">V</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('W')">W</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('X')">X</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('Y')">Y</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterPhone('Z')">Z</a>
|
|
</section>
|
|
<article id="phone-contact-my-card" class="phone-contact-my-card flex flex-row items-center gap-4 mt-5 mb-8 border-t pt-3 cursor-pointer px-4">
|
|
<img src="./img/default.png" class="rounded-full" width="60" height="60" alt="">
|
|
<div class="flex flex-col gap-2">
|
|
<a class="text-xl contact-name"></a>
|
|
<a class="text-muted text-sm phone-my-card">My Card</a>
|
|
</div>
|
|
</article>
|
|
<div id="phone-app-contacts-body"></div>
|
|
</div>
|
|
|
|
<div id="phone-app-viewContact">
|
|
<div id="back-container" onclick="phoneAppBack('#phone-app-viewContact')">
|
|
<img id="back_icon" src="./img/back.png">
|
|
</div>
|
|
<a class="contacts-app-done" style="color: #3291fe;" onclick="OpenEditor(true)">Edit</a>
|
|
<div id="phone-app-viewContact-imageContainer">
|
|
<img id="phone-app-viewContact-image" src="./img/default.png">
|
|
<a id="phone-app-viewContactName" style="color: initial;"></a>
|
|
</div>
|
|
<div id="phone-app-viewContactActions">
|
|
<div class="phone-app-viewContactActionsFast phone-msg-opt" onclick="newChatMessage()">
|
|
<img class="phone-app-viewContactActionsFastIcons" src="./img/phone_app/message.png">
|
|
<a>Message</a>
|
|
</div>
|
|
<div class="phone-app-viewContactActionsFast phone-call-opt" onclick="callContactFromContacts()">
|
|
<img class="phone-app-viewContactActionsFastIcons" src="./img/phone_app/call.png">
|
|
<a>Call</a>
|
|
</div>
|
|
<div class="phone-app-viewContactActionsFast phone-video-opt" onclick="faceTimeFromContacts()">
|
|
<img class="phone-app-viewContactActionsFastIcons" src="./img/phone_app/capturevideo.png">
|
|
<a>Video</a>
|
|
</div>
|
|
<div class="phone-app-viewContactActionsFast phone-wsp-opt" onclick="whatsappNewChatFromContacts()">
|
|
<img class="phone-app-viewContactActionsFastIcons" src="./img/phone_app/whatsapp.png">
|
|
<a>Whatsapp</a>
|
|
</div>
|
|
</div>
|
|
<div id="phone-app-numberInformation">
|
|
<a id="phone-information-number" style="margin-left: 15px; font-size: 15px; font-weight: 600;">Phone</a>
|
|
<a style="margin-left: 15px; color: #3291fe;" id="phone-app-numberInfoContent"></a>
|
|
</div>
|
|
<div id="phone-app-noteInformation">
|
|
<a id="phone-information-notes" style="margin-top: 10px; margin-left: 15px; font-size: 15px; font-weight: 600;">Notes</a>
|
|
<a style="margin-left: 15px; width: 90%; height: 100%;" id="phone-app-noteInfoContent"></a>
|
|
</div>
|
|
<div id="phone-app-fastActions-container">
|
|
<div class="phone-app-fastActions" onclick="newChatMessage()">
|
|
<a class="text-blue-500 phone-information-send">Send Message</a>
|
|
</div>
|
|
<div class="phone-app-fastActions" onclick="shareContact()">
|
|
<a class="text-blue-500 phone-information-share">Share Contact</a>
|
|
</div>
|
|
<div class="phone-app-fastActions" onclick="addToFavorites()">
|
|
<a id="phone-app-favorite" class="text-blue-500">Add to Favorites</a>
|
|
</div>
|
|
<div class="phone-app-fastActions" onclick="blockContact()">
|
|
<a id="phone-app-block">Block</a>
|
|
</div>
|
|
<div class="phone-app-fastActions" onclick="removeContact()">
|
|
<a class="text-blue-500 phone-information-delete">Delete Contact</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="phone-app-newcontact">
|
|
<a class="phone-app-cancel" onclick="phoneAppBack('#phone-app-newcontact')">Cancel</a>
|
|
<a id="phone-app-newcontact-done" class="contacts-app-done" onclick="contactEdit()">Done</a>
|
|
<div id="phone-app-newcontact-imageContainer" onclick="SetNewContactPP()">
|
|
<img id="phone-app-newcontact-image" src="./img/default.png">
|
|
<a style="margin-top: 5; cursor: pointer;">Edit</a>
|
|
</div>
|
|
<div id="phone-app-newcontact-body">
|
|
<div class="phone-app-newcontact-bodyContainer">
|
|
<textarea id="phone-app-newcontactName" class="phone-app-newcontact-bodyContainerName" placeholder="Name" oninput="checkNewContact()"></textarea>
|
|
</div>
|
|
<div style="position: relative; width: 100%;right: 3.5%;">
|
|
</div>
|
|
<div class="phone-app-newcontact-bodyContainer">
|
|
<textarea id="phone-app-newcontactNumber" class="phone-app-newcontact-bodyContainerName" placeholder="Number" oninput="checkNewContact()" style="color: #3291fe;"></textarea>
|
|
</div>
|
|
<div style="position: relative; width: 100%;right: 3.5%;">
|
|
</div>
|
|
<div class="phone-app-newcontact-bodyContainer" style="margin-top: 20px; height: 92px;">
|
|
<textarea id="phone-app-newcontactNote" class="phone-app-newcontact-bodyContainerName" placeholder="Note"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="phone-recent">
|
|
<div class="phone-recent-header">
|
|
<p class="phone-recent-title">Recent</p>
|
|
</div>
|
|
|
|
<div class="phone-recent-calls"></div>
|
|
</div>
|
|
|
|
<div class="phone-suggestedcontacts">
|
|
<header class="flex items-center justify-center w-full pt-7 border-b pb-3">
|
|
<a class="text-lg font-semibold favourites-option-title">Favorites</a>
|
|
</header>
|
|
|
|
<ul id="favorites-contacts">
|
|
<li class="flex flex-row justify-between items-center px-4 border-b hide-border-last">
|
|
<section class="flex flex-row items-center gap-2">
|
|
<img src="./img/default.png" class="rounded-full" width="52" height="52" alt="">
|
|
<div class="flex flex-col">
|
|
<a class="font-semibold">Quasar Store</a>
|
|
<span class="text-sm text-muted flex items-center gap-1">
|
|
<i class="fa-solid fa-phone"></i>
|
|
<a class="text-muted">mobile</a>
|
|
</span>
|
|
</div>
|
|
</section>
|
|
<i class="fas fa-trash-alt text-red-500 cursor-pointer" onclick="removeFavorite('3231')"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="phone-keypad noselect">
|
|
<article class="relative w-full h-full top-8">
|
|
<header class="absolute flex flex-col gap-4 items-center justify-center w-full top-10 text-3xl">
|
|
<a id="phone-keypad-value" class="h-3rem"></a>
|
|
<a onclick="keypadAddContact()" id="phone-keypad-add" class="text-lg text-blue-500 transition duration-500 cursor-pointer">Add Number</a>
|
|
</header>
|
|
<article class="phone-keypad-container relative top-22 w-full h-1/2 grid gap-6 justify-center items-center">
|
|
<div onclick="pad('1')" class="relative flex w-100px h-100px bg-dark Full rounded-full justify-center items-center cursor-pointer transition flex-col">
|
|
<a class="text-3xl font-medium">1</a>
|
|
</div>
|
|
<div onclick="pad('2')" class="relative flex w-100px h-100px bg-dark Full rounded-full justify-center items-center cursor-pointer transition flex-col">
|
|
<a class="text-3xl font-medium">2</a>
|
|
<p class="text-sm">A B C</p>
|
|
</div>
|
|
|
|
<div onclick="pad('3')" class="relative flex w-100px h-100px bg-dark Full rounded-full justify-center items-center cursor-pointer transition flex-col">
|
|
<a class="text-3xl font-medium">3</a>
|
|
<p class="text-sm">D E F</p>
|
|
</div>
|
|
|
|
<div onclick="pad('4')" class="relative flex w-100px h-100px bg-dark Full rounded-full justify-center items-center cursor-pointer transition flex-col">
|
|
<a class="text-3xl font-medium">4</a>
|
|
<p class="text-sm">G H I</p>
|
|
</div>
|
|
|
|
<div onclick="pad('5')" class="relative flex w-100px h-100px bg-dark Full rounded-full justify-center items-center cursor-pointer transition flex-col">
|
|
<a class="text-3xl font-medium">5</a>
|
|
<p class="text-sm">J K L</p>
|
|
</div>
|
|
|
|
<div onclick="pad('6')" class="relative flex w-100px h-100px bg-dark Full rounded-full justify-center items-center cursor-pointer transition flex-col">
|
|
<a class="text-3xl font-medium">6</a>
|
|
<p class="text-sm">M N O</p>
|
|
</div>
|
|
|
|
<div onclick="pad('7')" class="relative flex w-100px h-100px bg-dark Full rounded-full justify-center items-center cursor-pointer transition flex-col">
|
|
<a class="text-3xl font-medium">7</a>
|
|
<p class="text-sm">P Q R S</p>
|
|
</div>
|
|
|
|
<div onclick="pad('8')" class="relative flex w-100px h-100px bg-dark Full rounded-full justify-center items-center cursor-pointer transition flex-col">
|
|
<a class="text-3xl font-medium">8</a>
|
|
<p class="text-sm">T U V</p>
|
|
</div>
|
|
|
|
<div onclick="pad('9')" class="relative flex w-100px h-100px bg-dark Full rounded-full justify-center items-center cursor-pointer transition flex-col">
|
|
<a class="text-3xl font-medium">9</a>
|
|
<p class="text-sm">W X Y Z</p>
|
|
</div>
|
|
|
|
<div onclick="pad('*')" class="relative flex w-100px h-100px bg-dark Full rounded-full justify-center items-center cursor-pointer transition flex-col">
|
|
<a class="text-2xl font-semibold">🞶</a>
|
|
</div>
|
|
<div onclick="pad('0')" class="relative flex w-100px h-100px bg-dark Full rounded-full justify-center items-center cursor-pointer transition flex-col">
|
|
<a class="text-3xl font-semibold">0</a>
|
|
</div>
|
|
<div onclick="pad('#')" class="relative flex w-100px h-100px bg-dark Full rounded-full justify-center items-center cursor-pointer transition flex-col">
|
|
<a class="text-3xl font-medium">#</a>
|
|
</div>
|
|
</article>
|
|
<div class="flex justify-center w-full absolute bottom-14 items-center content-center text-center">
|
|
<div onclick="callWithKeyPad()" class="cursor-pointer bg-green-500 p-8 flex items-center justify-center rounded-full"><svg class="cursor-pointer" xmlns="http://www.w3.org/2000/svg" width="38px" fill="#ffff" height="38px" viewBox="0 0 512 512">
|
|
<path d="M436.9 364.8c-14.7-14.7-50-36.8-67.4-45.1-20.2-9.7-27.6-9.5-41.9.8-11.9 8.6-19.6 16.6-33.3 13.6-13.7-2.9-40.7-23.4-66.9-49.5-26.2-26.2-46.6-53.2-49.5-66.9-2.9-13.8 5.1-21.4 13.6-33.3 10.3-14.3 10.6-21.7.8-41.9C184 125 162 89.8 147.2 75.1c-14.7-14.7-18-11.5-26.1-8.6 0 0-12 4.8-23.9 12.7-14.7 9.8-22.9 18-28.7 30.3-5.7 12.3-12.3 35.2 21.3 95 27.1 48.3 53.7 84.9 93.2 124.3l.1.1.1.1c39.5 39.5 76 66.1 124.3 93.2 59.8 33.6 82.7 27 95 21.3 12.3-5.7 20.5-13.9 30.3-28.7 7.9-11.9 12.7-23.9 12.7-23.9 2.9-8.1 6.2-11.4-8.6-26.1z"></path>
|
|
</svg>
|
|
</div>
|
|
<svg onclick="pad('del')" id="keypad-delete" class="absolute ml-40 fill-text-gray transition duration-500 cursor-pointer opacity-1" width="38px" height="38px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path d="M395 96H230c-46.7 0-73.2 34.7-102 63.5s-72.1 74.7-72.1 74.7C51 239.8 48 247 48 255.1c0 8 3 15.3 7.9 21 0 0 34.3 37.6 72.1 75.5 37.8 37.8 56.7 64.5 102 64.5h165c38.5 0 69-32.5 69-71V165c0-38.5-30.5-69-69-69zm-17.7 212.7c6.2 6.2 6.2 16.4 0 22.6-6.2 6.2-16.4 6.2-22.6 0L302 278.6l-52.7 52.7c-6.2 6.2-16.3 6.4-22.6 0-6.4-6.4-6.7-15.9 0-22.6l52.7-52.7-52.7-52.7c-6-6-7.1-15.6 0-22.6 7.1-7.1 16.4-6.2 22.6 0l52.7 52.7 52.7-52.7c6.2-6.2 16.4-6.2 22.6 0 6.2 6.2 6.2 16.4 0 22.6L324.6 256l52.7 52.7z"></path>
|
|
</svg>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="phone-app-footer border-t">
|
|
<div class="phone-app-footer-button" data-test="test" data-phonefootertab="suggestedcontacts">
|
|
<img class="suggestedcontacts_0" width="30%" src="../html/img/app_details/favorites.png" />
|
|
<img class="suggestedcontacts_1" style="display: none" width="30%" src="../html/img/app_details/favorites_selected.png" />
|
|
<p class="footer-button-text phone-footer-suggestions">Favorites</p>
|
|
</div>
|
|
<div class="phone-app-footer-button" data-phonefootertab="recent">
|
|
<img class="recent_0" width="30%" src="../html/img/app_details/recent.png" />
|
|
<img class="recent_1" style="display: none" width="30%" src="../html/img/app_details/recent_selected.png" />
|
|
<p class="footer-button-text phone-footer-recent">Recent</p>
|
|
</div>
|
|
<div class="phone-app-footer-button" data-phonefootertab="contacts">
|
|
<img class="contacts_0" style="display: none" width="30%" src="../html/img/app_details/contacts.png" />
|
|
<img class="contacts_1" width="30%" src="../html/img/app_details/contacts_selected.png" />
|
|
<p class="footer-button-text blue-text phone-footer-contact">Contact</p>
|
|
</div>
|
|
<div class="phone-app-footer-button" data-phonefootertab="keypad">
|
|
<img class="keypad_0" width="30%" src="../html/img/app_details/kypad.png" />
|
|
<img class="keypad_1" style="display: none" width="30%" src="../html/img/app_details/kypad_selected.png" />
|
|
<p class="footer-button-text phone-footer-keypad">Keypad</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application contacts-app">
|
|
<div class="phone-contacts">
|
|
<div id="phone-app-contacts-head">
|
|
<i class="fas fa-plus text-blue-500 fa-xl self-end" id="phone-app-contacts-plus" onclick="openEditorForContacts()"></i>
|
|
<a class="text-3xl mb-3 contacts-title">Contacts</a>
|
|
<div class="flex flex-row gap-2 bg-dark rounded-xl p-4 phone-app-contacts-searchArea">
|
|
<i class="fas fa-search text-muted"></i>
|
|
<input id="phone-app-contacts-searchArea" oninput="inputSearch(this, 'contacts-app-contacts-body-contact', 'contacts-app-contacts-body-contact')" placeholder="Search"></input>
|
|
</div>
|
|
</div>
|
|
<section class="phone-alphabet-list">
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('A')">A</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('B')">B</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('C')">C</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('D')">D</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('E')">E</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('F')">F</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('G')">G</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('H')">H</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('I')">I</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('J')">J</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('K')">K</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('L')">L</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('M')">M</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('N')">N</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('O')">O</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('P')">P</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('Q')">Q</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('R')">R</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('S')">S</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('T')">T</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('U')">U</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('V')">V</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('W')">W</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('X')">X</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('Y')">Y</a>
|
|
<a class="phone-alphabet-list-item" onclick="scrollToLetterContacts('Z')">Z</a>
|
|
</section>
|
|
<article class="phone-contact-my-card contacts-contact-my-card flex flex-row items-center gap-4 mt-5 mb-8 border-t pt-3 cursor-pointer px-4">
|
|
<img src="./img/default.png" class="rounded-full" width="60" height="60" alt="">
|
|
<div class="flex flex-col gap-2">
|
|
<a class="text-xl contact-name"></a>
|
|
<a class="text-muted text-sm contacts-my-card">My Card</a>
|
|
</div>
|
|
</article>
|
|
<div id="contacts-app-contacts-body"></div>
|
|
</div>
|
|
<div id="contacts-app-viewContact">
|
|
<div id="back-container" onclick="contactAppBack('#contacts-app-viewContact')">
|
|
<img id="back_icon" src="./img/back.png">
|
|
</div>
|
|
<a class="contacts-app-done" id="contacts-edit" style="color: #3291fe;" onclick="openEditorForContacts(true)">Edit</a>
|
|
<div id="phone-app-viewContact-imageContainer">
|
|
<img id="contacts-app-viewContact-image" src="./img/default.png">
|
|
<a id="contacts-app-viewContactName" style="color: initial;"></a>
|
|
</div>
|
|
<div id="phone-app-viewContactActions">
|
|
<div class="phone-app-viewContactActionsFast contacts-message" onclick="newChatMessageForContacts()">
|
|
<img class="phone-app-viewContactActionsFastIcons" src="./img/phone_app/message.png">
|
|
<a>Message</a>
|
|
</div>
|
|
<div class="phone-app-viewContactActionsFast contacts-call" onclick="callContactFromContactsApp()">
|
|
<img class="phone-app-viewContactActionsFastIcons" src="./img/phone_app/call.png">
|
|
<a>Call</a>
|
|
</div>
|
|
<div class="phone-app-viewContactActionsFast contacts-video" onclick="faceTimeFromContactsApp()">
|
|
<img class="phone-app-viewContactActionsFastIcons" src="./img/phone_app/capturevideo.png">
|
|
<a>Video</a>
|
|
</div>
|
|
<div class="phone-app-viewContactActionsFast contacts-whatsapp" onclick="whatsappNewChatFromContacts()">
|
|
<img class="phone-app-viewContactActionsFastIcons" src="./img/phone_app/whatsapp.png">
|
|
<a>Whatsapp</a>
|
|
</div>
|
|
</div>
|
|
<div id="phone-app-numberInformation">
|
|
<a id="contacts-information-number" style="margin-left: 15px; font-size: 15px; font-weight: 600;">Phone</a>
|
|
<a style="margin-left: 15px; color: #3291fe;" id="contacts-app-numberInfoContent"></a>
|
|
</div>
|
|
<div id="phone-app-noteInformation">
|
|
<a id="contacts-information-notes" style="margin-top: 10px; margin-left: 15px; font-size: 15px; font-weight: 600;">Notes</a>
|
|
<a style="margin-left: 15px; width: 90%; height: 100%;" id="contacts-app-noteInfoContent"></a>
|
|
</div>
|
|
<div id="phone-app-fastActions-container">
|
|
<div class="phone-app-fastActions" onclick="newChatMessageForContacts()">
|
|
<a class="text-blue-500 contacts-information-send">Send Message</a>
|
|
</div>
|
|
<div class="phone-app-fastActions" onclick="shareContactForContacts()">
|
|
<a class="text-blue-500 contacts-information-share">Share Contact</a>
|
|
</div>
|
|
<div class="phone-app-fastActions" onclick="blockContactForContacts()">
|
|
<a id="contacts-app-block">Block this contact</a>
|
|
</div>
|
|
<div class="phone-app-fastActions" onclick="removeContactForContacts()">
|
|
<a id="contacts-information-delete" class="text-blue-500">Delete Contact</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="contacts-app-newcontact">
|
|
<a class="phone-app-cancel" onclick="contactAppBack('#contacts-app-newcontact')">Cancel</a>
|
|
<a id="contacts-app-newcontact-done" class="contacts-app-done" onclick="contactEditForContacts()">Done</a>
|
|
<div id="phone-app-newcontact-imageContainer" onclick="SetNewContactPP()">
|
|
<img id="contacts-app-newcontact-image" src="./img/default.png">
|
|
<a id="contacts-app-newcontact-edit" style="margin-top: 5; cursor: pointer;">Edit</a>
|
|
</div>
|
|
<div id="phone-app-newcontact-body">
|
|
<div class="phone-app-newcontact-bodyContainer">
|
|
<textarea id="contacts-app-newcontactName" class="phone-app-newcontact-bodyContainerName" placeholder="Name" oninput="checkNewContactForContacts()"></textarea>
|
|
</div>
|
|
<div style="position: relative; width: 100%;right: 3.5%;">
|
|
</div>
|
|
<div class="phone-app-newcontact-bodyContainer">
|
|
<textarea id="contacts-app-newcontactNumber" class="phone-app-newcontact-bodyContainerName" placeholder="Number" oninput="checkNewContactForContacts()" style="color: #3291fe;"></textarea>
|
|
</div>
|
|
<div style="position: relative; width: 100%;right: 3.5%;">
|
|
</div>
|
|
<div class="phone-app-newcontact-bodyContainer" style="margin-top: 20px; height: 92px;">
|
|
<textarea id="contacts-app-newcontactNote" class="phone-app-newcontact-bodyContainerName" placeholder="Note"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application houses-app pt-9">
|
|
<figure id="houses-app-bg"></figure>
|
|
<section id="house-list-container" class="relative flex flex-col gap-6 w-full px-12 h-full">
|
|
<header class="text-2xl">
|
|
<i class="fas fa-home"></i>
|
|
<a class="my-houses-header">My Houses</a>
|
|
</header>
|
|
<ul id="house-list" class="flex flex-col gap-4 w-full overflow-y">
|
|
<li class="house-item-bg flex items-center w-full p-6 rounded-2xl gap-4 cursor-pointer h-9rem" onclick="houseOpenInteractionMenu(1)">
|
|
<figure class="house-icon p-6 house-item-bg rounded-full">
|
|
<i class="fas fa-home text-blue-500 text-2xl"></i>
|
|
</figure>
|
|
<div class="flex flex-col">
|
|
<a class="text-lg font-semibold">Grove St. 1</a>
|
|
<a class="text-muted">#1</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section id="house-interaction-container" class="relative px-12 w-full h-full gap-6 flex flex-col hide">
|
|
<header class="text-2xl w-full flex justify-between">
|
|
<a class="my-home-header">My Home</a>
|
|
<i id="house-interaction-close" class="fas fa-times text-2xl text-white-" onclick="houseCloseInteractionMenu()"></i>
|
|
</header>
|
|
<article id="house-actions" class="flex flex-col gap-4">
|
|
<header class="gap-2 text-xl flex items-center">
|
|
<a class="my-home-actions">Actions</a>
|
|
<i class="fas fa-chevron-right text-muted"></i>
|
|
</header>
|
|
<ul class="grid grid-cols-2 gap-6 w-full">
|
|
<li class="house-action rounded-2xl p-4 flex flex-col justify-between" onclick="setWaypointToHouse()">
|
|
<figure class="p-4 house-action-icon">
|
|
<i class="fas fa-map-marker-alt text-3xl text-blue-500"></i>
|
|
</figure>
|
|
<footer class="flex flex-col">
|
|
<a class="my-home-location">Location</a>
|
|
<a class="text-muted my-home-waypoint">Set Waypoint</a>
|
|
</footer>
|
|
</li>
|
|
<li class="house-action rounded-2xl p-4 flex flex-col justify-between" onclick="houseToggleDoorStatus()">
|
|
<figure class="p-4 house-action-icon">
|
|
<i class="fas fa-lock text-3xl text-blue-500"></i>
|
|
</figure>
|
|
<footer class="flex flex-col">
|
|
<a class="houses-front-doors">Front Door</a>
|
|
<a class="text-muted houses-unlocked" id="house-action-door-state">Unlocked</a>
|
|
</footer>
|
|
</li>
|
|
<li class="house-action rounded-2xl p-4 flex flex-col justify-between" onclick="houseGiveKey()">
|
|
<figure class="p-4 house-action-icon">
|
|
<i class="fas fa-key text-3xl text-blue-500"></i>
|
|
</figure>
|
|
<footer class="flex flex-col">
|
|
<a class="houses-keys-option">Give Key</a>
|
|
<a class="text-muted houses-manage-keys">Manage</a>
|
|
</footer>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
<article id="house-key-actions" class="flex flex-col gap-4">
|
|
<header class="gap-2 text-xl flex items-center">
|
|
<a class="houses-keys-access">Key Access</a>
|
|
<i class="fas fa-chevron-right text-muted"></i>
|
|
</header>
|
|
<ul class="grid grid-cols-2 gap-6 w-full" id="house-key-action-list"></ul>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="application garage-app">
|
|
<section id="garage-cars-page" class="twitter-screen h-90 pb-3">
|
|
<div class="garage-app-header text-white-">Your Cars</div>
|
|
<header class="flex flex-col p-4">
|
|
<div class="garage-search-button flex flex-row items-center gap-2 bg-dark rounded-xl w-full p-6">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" id="garage-search-input" placeholder="Search" required spellcheck="false" />
|
|
</div>
|
|
<div class="garage-second-button flex flex-row items-center gap-2 bg-dark rounded-xl w-full p-6" onclick="setVehicleshop()">
|
|
<a>Get your vehicle at the best price</a>
|
|
<i class="fa-solid fa-chevron-right"></i>
|
|
</div>
|
|
</header>
|
|
<div id="garage-vehicles" class="flex flex-col gap-4 overflow-y max-h-72 px-4"></div>
|
|
</section>
|
|
<section id="garage-garages-page" class="twitter-screen h-90 pb-3 hide">
|
|
<div class="garage-app-header text-white-">Your Garages</div>
|
|
<div id="garage-list" class="flex flex-col gap-4 overflow-y max-h-72 px-4 mt-5">
|
|
<div class="garage-vehicle" id="garage-1">
|
|
<header class="flex flex-row items-center justify-between">
|
|
<div class="flex flex-row items-center gap-2">
|
|
<a class="garage-vehicle-first-letter">A</a>
|
|
<div class="flex flex-col">
|
|
<a class="font-semibold text-lg">Occupation Ave Garage1</a>
|
|
<a class="text-muted text-sm">Vehicle Count: 2</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<footer class="grid grid-cols-3 place-items-center items-center gap-2">
|
|
<span class="flex flex-row items-center gap-2 p-4 bg-dark rounded-lg w-full justify-center cursor-default">
|
|
<i class="fa-solid fa-car-garage"></i>
|
|
<a class="text-green-500">VEHICLE</a>
|
|
</span>
|
|
<button class="flex flex-row items-center gap-2 bg-green-500 p-4 rounded-lg w-full justify-center">
|
|
<i class="fa-solid fa-directions"></i>
|
|
<a class="text-white- text-nowrap">Set GPS</a>
|
|
</button>
|
|
<button class="flex flex-row items-center gap-2 bg-red-500 p-4 rounded-lg w-full justify-center">
|
|
<i class="fa-solid fa-money-bill-wave"></i>
|
|
<a class="text-white-">Sell</a>
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer id="garage-footer" class="absolute bottom-0 w-full h-10 grid z-10 place-items-center grid-cols-2 pb-5 bg-black border-t">
|
|
<button id="garage-cars" class="flex flex-col gap-1 items-center justify-center" onclick="garageFooterRouter(this, '#garage-cars-page')">
|
|
<i class="fas fa-car fa-lg current garage-footer-icon"></i>
|
|
</button>
|
|
<button id="garage-garages" class="flex flex-col gap-1 items-center justify-center" onclick="garageFooterRouter(this, '#garage-garages-page')">
|
|
<i class="fas fa-warehouse fa-lg garage-footer-icon"></i>
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
|
|
<div class="jobcenter-app">
|
|
<div class="jobcenter-header">
|
|
<img alt="jobcenter" id="jobcenter-header-img" src="./img/app_details/jobcenter_header.png">
|
|
<a>Get one of our available jobs!</a>
|
|
</div>
|
|
<div class="jobcenter-list">
|
|
</div>
|
|
</div>
|
|
|
|
<!--Instagram-->
|
|
<div class="application instagram-app">
|
|
<canvas class="canvas-render" id="instagram-live-canvas"></canvas>
|
|
<video class="video-render" id="instagram-live-video" autoplay></video>
|
|
<section id="instagram-login-window">
|
|
<article id="instagram-register-firstscreen" class="w-full h-full items-center justify-center flex flex-col absolute left-0 bg-black">
|
|
<figure>Instagram</figure>
|
|
<button class="instagram-create-account instagram-blue-button" onclick="gotoNextPage('instagramCreateAccountPage')">Create a new account</button>
|
|
<button class="instagram-login-account instagram-login-page" onclick="gotoNextPage('instagramLogInPage')">Log in</button>
|
|
</article>
|
|
<article id="instagram-login-screen" class="instagram-login-account w-full h-full items-center justify-center flex-col p-4 absolute left-0 hide bg-black">
|
|
<figure>Instagram</figure>
|
|
<form action="#" class="w-full items-center flex flex-col gap-4">
|
|
<input id="instagram-username-input" type="text" name="username" placeholder="Username" class="instagram-input w-full" required>
|
|
<input id="instagram-password-input" type="password" name="password" placeholder="Password" class="instagram-input w-full" required>
|
|
<button class="instagram-blue-button instagram-login">Log in</button>
|
|
</form>
|
|
<a class="insta-text instagram-forgot-password self-end pt-3 cursor-pointer" onclick="gotoNextPage('instagramPasswordScreen')">Forgot password?</a>
|
|
<footer class="flex flex-col items-center justify-center">
|
|
<p class="text-sm -muted">Don't have an account? <a class="instagram-create-account insta-text" onclick="gotoNextPage('#instagram-login-screen')">Sign up</a></p>
|
|
</footer>
|
|
</article>
|
|
<section id="instagram-forgot-password-screen" class="w-full h-full flex-col p-4 absolute left-0 hide bg-black hide">
|
|
<header class="twitter-register-screen-header">
|
|
<a class="absolute left-2 top-0 pt-8 w-full cursor-pointer instagram-cancel" onclick="gotoBackPage('#instagram-forgot-password-screen')">Cancel</a>
|
|
<figure>Instagram</figure>
|
|
</header>
|
|
<section id="instagram-forgot-password-accounts" class="overflow-y gap-4 flex flex-col pt-4"></section>
|
|
</section>
|
|
<section id="instagram-register-screen" class="w-full h-full bg-black">
|
|
<article id="instagram-register-screen-first" class="instagram-register-page">
|
|
<header class="instagram-register-header">
|
|
<h4>Enter Phone</h4>
|
|
</header>
|
|
<form action="#" class="w-full items-center flex flex-col gap-6 p-4">
|
|
<input type="text" name="phone" placeholder="Phone Number" class="instagram-input w-full" title="Phone number must be 10 character" required>
|
|
<button class="instagram-next instagram-blue-button instagram-register">Next</button>
|
|
<p class="text-sm text-center text-muted">You may receive SMS notifications from
|
|
us
|
|
for security and login purposes.</p>
|
|
</form>
|
|
<footer>
|
|
<p class="text-sm text-muted">Already have an account? <a class="instagram-create-account insta-text" onclick="gotoBackPage('#instagram-register-screen-first')">Sign In.</a></p>
|
|
</footer>
|
|
</article>
|
|
<article id="instagram-register-screen-second" class="instagram-register-page">
|
|
<header class="instagram-register-header">
|
|
<i class="fas fa-chevron-left fa-lg"></i>
|
|
<h4>Enter the confirmation code</h4>
|
|
<!-- 6 code. -->
|
|
</header>
|
|
<form action="#" class="w-full items-center flex flex-col gap-6 p-4 ">
|
|
<input type="text" name="code" placeholder="Code" class="instagram-input instagram-input-code w-full" required>
|
|
<button class="instagram-next instagram-blue-button instagram-register">Next</button>
|
|
<p class="text-sm text-center text-muted">We sent a code to your phone number.
|
|
Please enter it below.</p>
|
|
</form>
|
|
</article>
|
|
<article id="instagram-register-screen-third" class="instagram-register-page">
|
|
<header class="instagram-register-header">
|
|
<h4>Enter your name</h4>
|
|
</header>
|
|
<form action="#" class="w-full items-center flex flex-col gap-6 p-4">
|
|
<input type="text" name="name" placeholder="Full name" class="instagram-input instagram-input-name w-full" required>
|
|
<button class="instagram-next instagram-blue-button instagram-register">Next</button>
|
|
<p class="text-sm text-center text-muted">Add your name so friends can find you.
|
|
</p>
|
|
</form>
|
|
</article>
|
|
<article id="instagram-register-screen-fourth" class="instagram-register-page">
|
|
<header class="instagram-register-header">
|
|
<i class="fas fa-chevron-left fa-lg"></i>
|
|
<h4>Create a password</h4>
|
|
</header>
|
|
<form action="#" class="w-full items-center flex flex-col gap-6 p-4">
|
|
<input type="password" name="password" placeholder="Password" class="instagram-input instagram-input-pass w-full" required>
|
|
<button class="instagram-next instagram-blue-button instagram-register">Next</button>
|
|
</form>
|
|
</article>
|
|
<article id="instagram-register-screen-fifth" class="instagram-register-page">
|
|
<header class="instagram-register-header">
|
|
<i class="fas fa-chevron-left fa-lg"></i>
|
|
<h4>Create username</h4>
|
|
</header>
|
|
<form action="#" class="w-full items-center flex flex-col gap-6 p-4">
|
|
<input type="text" name="username" placeholder="Username" class="instagram-input instagram-input-username w-full" required pattern="[A-Za-z0-9]+">
|
|
<button class="instagram-next instagram-blue-button instagram-register">Next</button>
|
|
<p class="text-sm text-center text-muted instagram-username-information">Pick a username for your new account.
|
|
You
|
|
can always change it later.</p>
|
|
</form>
|
|
</article>
|
|
</section>
|
|
</section>
|
|
<section id="instagram-window" class="hide">
|
|
<article id="instagram-homePage">
|
|
<header id="instagram-homePage-head">
|
|
<a>Instagram</a>
|
|
<div id="instagram-header-actions" class="flex flex-row gap-4 items-center justify-center relative">
|
|
<svg onclick="gotoNextPage('createPage')" color="#fafafa" fill="#fafafa" height="24" role="img" viewBox="0 0 24 24" width="24">
|
|
<path d="M2 12v3.45c0 2.849.698 4.005 1.606 4.944.94.909 2.098 1.608 4.946 1.608h6.896c2.848 0 4.006-.7 4.946-1.608C21.302 19.455 22 18.3 22 15.45V8.552c0-2.849-.698-4.006-1.606-4.945C19.454 2.7 18.296 2 15.448 2H8.552c-2.848 0-4.006.699-4.946 1.607C2.698 4.547 2 5.703 2 8.552Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
|
|
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="6.545" x2="17.455" y1="12.001" y2="12.001"></line>
|
|
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12.003" x2="12.003" y1="6.545" y2="17.455"></line>
|
|
</svg>
|
|
<div id="instagram-message-icon">
|
|
<svg id="" onclick="gotoNextPage('openMessages')" color="#262626" fill="#262626" height="24" role="img" viewBox="0 0 24 24" width="24">
|
|
<path d="M12.003 2.001a9.705 9.705 0 110 19.4 10.876 10.876 0 01-2.895-.384.798.798 0 00-.533.04l-1.984.876a.801.801 0 01-1.123-.708l-.054-1.78a.806.806 0 00-.27-.569 9.49 9.49 0 01-3.14-7.175 9.65 9.65 0 0110-9.7z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="1.739"></path>
|
|
<path d="M17.79 10.132a.659.659 0 00-.962-.873l-2.556 2.05a.63.63 0 01-.758.002L11.06 9.47a1.576 1.576 0 00-2.277.42l-2.567 3.98a.659.659 0 00.961.875l2.556-2.049a.63.63 0 01.759-.002l2.452 1.84a1.576 1.576 0 002.278-.42z" fill-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section id="instagram-contents">
|
|
<article id="instagram-stories">
|
|
<div class="swiper instagram-swiper">
|
|
<ul id="instagram-stories-list" class="swiper-wrapper"></ul>
|
|
</div>
|
|
</article>
|
|
<article class="instagram-posts"></article>
|
|
</section>
|
|
</article>
|
|
<article id="instagram-make-comment" class="absolute top-0 left-0 z-30 bg-black w-full h-full hide flex-col">
|
|
<header id="instagram-make-comment-header">
|
|
<i class="fas fa-chevron-left fa-lg" onclick="gotoBackPage('#instagram-make-comment')"></i>
|
|
<a class="text-xl ig-comments">Comments</a>
|
|
</header>
|
|
<article id="instagram-post-creator"></article>
|
|
<article id="instagram-post-comments"></article>
|
|
<footer class="w-full p-2 absolute bottom-1">
|
|
<div class="flex flex-row gap-2 items-center">
|
|
<img class="rounded-full instagram-avatar" src="" width="32" height="32">
|
|
<input type="text" id="instagram-comment-input" class="w-full rounded-2xl flex items-center justify-between" placeholder="Add a comment...">
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
<article id="instagram-show-stories" class="absolute top-0 left-0 bg-black w-full h-full hide flex-col z-10">
|
|
<article data-slide="slide" class="swiper instagram-users-stories">
|
|
<section id="instagram-users-stories-list" class="swiper-wrapper slide-items"></section>
|
|
</article>
|
|
</article>
|
|
<article id="instagram-user-self-profile" class="absolute top-0 left-0 bg-black w-full h-88 z-5 flex-col hide overflow-y">
|
|
<header class="instagram-user-informations p-6 gap-4">
|
|
<section class="flex flex-row gap-2 mb-4 items-center justify-between">
|
|
<div class="flex items-center gap-2 instagram-name-personal">
|
|
<a class="text-xl instagram-username"></a>
|
|
<img id="instagram-self-verify" src="img/instagram/instagram-verify.png" style="width: 16px; height: 16px;">
|
|
</div>
|
|
<a onclick="logoutInstagramAccount()" class="ig-logout red_text">Logout</a>
|
|
</section>
|
|
<section class="flex flex-row justify-around items-center mb-4 instagram-information-self-profile">
|
|
<img class="rounded-full instagram-avatar" src="" style="width: 64px; height: 64px;">
|
|
<article class="flex flex-row gap-6">
|
|
<header class="flex flex-col gap-2 items-center">
|
|
<a class="instagram-posts-count">0</a>
|
|
<a class="instagram-profile-info-title ig-post">Posts</a>
|
|
</header>
|
|
<header class="flex flex-col gap-2 items-center">
|
|
<a class="instagram-followers-count">0</a>
|
|
<a class="instagram-profile-info-title ig-followers">Followers</a>
|
|
</header>
|
|
<header class="flex flex-col gap-2 items-center">
|
|
<a class="instagram-following-count">0</a>
|
|
<a class="instagram-profile-info-title ig-following">Following</a>
|
|
</header>
|
|
</article>
|
|
</section>
|
|
<section class="flex flex-col gap-2">
|
|
<a class="instagram-name"></a>
|
|
<p class="text-sm instagram-bio"></p>
|
|
</section>
|
|
<button class="instagram-dark-btn w-95 instagram-edit-profile-btn" onclick="gotoNextPage('instagramEditProfile')">Edit profile</button>
|
|
</header>
|
|
<section id="instagram-user-self-profile-user-posts" class="instagram-user-posts-list mt-4"></section>
|
|
</article>
|
|
<article id="instagram-user-profile" class="absolute top-0 left-0 bg-black w-full h-full z-10 hide flex-col">
|
|
<header class="instagram-user-informations p-6 gap-4">
|
|
<section class="flex flex-row gap-2 mb-4 items-center">
|
|
<i class="fas fa-chevron-left text-white text-2xl" onclick="gotoBackPage('#instagram-user-profile')"></i>
|
|
<div class="flex items-center justify-center w-full gap-2 instagram-name-other">
|
|
<a class="text-xl instagram-username" id="instagram-user-profile-username">quasarstore</a>
|
|
<img class="instagram-verify" src="img/instagram/instagram-verify.png" style="width: 16px; height: 16px;">
|
|
</div>
|
|
</section>
|
|
<section class="flex flex-row justify-around items-center mb-4 instagram-information-other-profile">
|
|
<img id="instagram-user-profile-avatar" class="rounded-full instagram-avatar" src="" style="width: 64px; height: 64px;">
|
|
<article class="flex flex-row gap-6">
|
|
<header class="flex flex-col gap-2 items-center">
|
|
<a class="instagram-posts-count" id="instagram-user-profile-posts-count">0</a>
|
|
<a class="instagram-profile-info-title ig-post-other">Posts</a>
|
|
</header>
|
|
<header class="flex flex-col gap-2 items-center">
|
|
<a class="instagram-followers-count" id="instagram-user-profile-followers-count">0</a>
|
|
<a class="instagram-profile-info-title ig-followers-other">Followers</a>
|
|
</header>
|
|
<header class="flex flex-col gap-2 items-center">
|
|
<a class="instagram-following-count" id="instagram-user-profile-following-count">0</a>
|
|
<a class="instagram-profile-info-title ig-following-other">Following</a>
|
|
</header>
|
|
</article>
|
|
</section>
|
|
<section class="flex flex-col gap-2">
|
|
<a id="instagram-user-profile-name"></a>
|
|
<p id="instagram-user-profile-bio" class="text-sm instagram-bio"></p>
|
|
</section>
|
|
<div class="w-full flex flex-row items-center justify-between gap-6">
|
|
<button id="instagram-user-profile-follow-btn" class="instagram-dark-btn w-full blue_text">Follow</button>
|
|
<button class="instagram-dark-btn w-full text-white instagram-user-profile-message-btn" onclick="instagramSendMessageViaProfile()">Message</button>
|
|
|
|
</div>
|
|
</header>
|
|
<section id="instagram-profile-user-posts" class="instagram-user-posts-list mt-4"></section>
|
|
</article>
|
|
<article id="instagram-edit-profile" class="absolute top-0 left-0 bg-black w-full h-full z-10 hide flex-col">
|
|
<header class="flex flex-row items-center justify-between sticky top-0 w-full bg-black pt-8 pb-4 border-b">
|
|
<i class="fas fa-chevron-left fa-lg" onclick="gotoBackPage('#instagram-edit-profile')"></i>
|
|
<a class="edit-profile-title-ig">Edit profile</a>
|
|
<a class="blue_text" onclick="editInstagramProfile()">Done</a>
|
|
</header>
|
|
<div class="flex flex-col gap-2 items-center justify-center pt-4 pb-4 border-b" onclick="changeInstagramProfilePicture()">
|
|
<img id="instagram-edit-avatar" class="rounded-full instagram-avatar" width="64" height="64" src="" />
|
|
<a class="blue_text edit-avatar-ig">Edit Avatar</a>
|
|
</div>
|
|
<form id="instagram-edit-profile-form">
|
|
<div class="flex flex-row gap-2 items-center justify-center pt-4 pb-4 border-b">
|
|
<a class="w-54 ig-name">Name</a>
|
|
<input id="instagram-edit-name" class="bg-black text-white w-full instagram-name" type="text" placeholder="Name" />
|
|
</div>
|
|
<div class="flex flex-row gap-2 items-center justify-center pt-4 pb-4 border-b">
|
|
<a class="w-54 ig-user">Username</a>
|
|
<input id="instagram-edit-username" class="bg-black text-white w-full instagram-username" type="text" placeholder="Username" />
|
|
</div>
|
|
<div class="flex flex-row gap-2 items-center justify-center pt-4 pb-4 border-b">
|
|
<a class="w-54 ig-bio">Bio</a>
|
|
<input id="instagram-edit-bio" class="bg-black text-white w-full instagram-bio" type="text" placeholder="Bio" maxlength="100" />
|
|
</div>
|
|
<div class="flex flex-row gap-2 items-center justify-center pt-4 pb-4 border-b">
|
|
<a class="w-54 ig-pass">Password</a>
|
|
<input id="instagram-edit-password" class="bg-black text-white w-full" type="password" placeholder="Password" />
|
|
</div>
|
|
</form>
|
|
<div class="ig-delete-account">
|
|
<button onclick="instagramDeleteAccount()" class="instagram-dark-btn red_text w-full mt-4">Delete Account</button>
|
|
</div>
|
|
</article>
|
|
<article id="instagram-user-posts" class="absolute top-0 left-0 z-20 bg-black w-full h-full hide flex-col overflow-y">
|
|
<header class="flex flex-row items-center justify-center sticky top-0 bg-black pt-8 pb-4">
|
|
<i class="fas fa-chevron-left fa-lg absolute left-4" onclick="gotoBackPage('#instagram-user-posts')"></i>
|
|
<article class="flex flex-col items-center">
|
|
<a id="instagram-user-posts-username" class="text-muted text-sm"></a>
|
|
<a class="ig-posts-personal">Posts</a>
|
|
</article>
|
|
</header>
|
|
<section id="instagram-profile-posts" class="w-full h-full overflow-y instagram-posts"></section>
|
|
</article>
|
|
<article id="instagram-messages-container" class="absolute top-0 left-0 z-10 bg-black w-full h-full flex-col overflow-y hide">
|
|
<section id="instagram-messages" class="absolute left-0 flex flex-col gap-6 overflow-y h-95 w-full bg-black">
|
|
<header class="p-4 pt-8 flex flex-row gap-4 items-center justify-between cursor-pointer sticky top-0 bg-black pb-5 w-full">
|
|
<div class="flex flex-row gap-4 items-center" onclick="gotoBackPage('#instagram-messages-container')">
|
|
<i class="fas fa-chevron-left fa-lg"></i>
|
|
<a class="instagram-username" class="text-xl">quuasar.foreva</a>
|
|
</div>
|
|
<i class="fas fa-paper-plane fa-lg self-end" onclick="gotoNextPage('instagramCreateMessage')"></i>
|
|
</header>
|
|
<section id="instagram-messages-content" class="flex flex-col gap-6 h-full w-full"></section>
|
|
</section>
|
|
<section id="instagram-create-message-container" class="absolute left-0 hide flex-col gap-6 overflow-y h-95 w-full bg-black">
|
|
<header class="flex flex-row items-center justify-center sticky top-0 bg-black pt-8 pb-4">
|
|
<i class="fas fa-chevron-left fa-lg absolute left-4" onclick="gotoBackPage('#instagram-create-message-container')"></i>
|
|
<article class="flex flex-col items-center">
|
|
<a>New Message</a>
|
|
</article>
|
|
</header>
|
|
<section id="instagram-create-message-users" class="flex flex-col gap-4">
|
|
<article class="flex flex-row items-center gap-4 cursor-pointer">
|
|
<img class="rounded-full" src="" width="46" height="46">
|
|
<div class="flex flex-col">
|
|
<span class=""></span>
|
|
<span class="text-sm text-gray-500"></span>
|
|
</div>
|
|
<i class="fas fa-chevron-right fa-lg absolute right-2"></i>
|
|
</article>
|
|
</section>
|
|
</section>
|
|
<section id="instagram-chat" class="absolute left-0 top-0 z-10 flex-col hide w-full h-full bg-black">
|
|
<header class="pt-8 mb-6 flex flex-row gap-4 items-center cursor-pointer border-b pb-3" onclick="gotoBackPage('#instagram-chat')">
|
|
<i class="fas fa-chevron-left fa-lg"></i>
|
|
<div class="flex flex-row gap-4 justify-center" id="instagram-chat-informations">
|
|
<img class="rounded-full" src="" width="36" height="36">
|
|
<div class="flex flex-col justify-center">
|
|
<a></a>
|
|
<a class="text-muted"></a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<article id="instagram-chat-messages" class="flex flex-col gap-4 p-4 h-65 overflow-y"></article>
|
|
<footer id="instagram-chat-input-container" class="flex flex-row gap-4 p-4 absolute bottom-1 w-full items-center">
|
|
<fas class="fa-light fa-circle-plus" onclick="OpenInstagramAlternativeMenu()">
|
|
</fas>
|
|
<input type="text" id="instagram-chat-input" class="w-full rounded-full flex items-center justify-between" placeholder="Message...">
|
|
</footer>
|
|
</section>
|
|
</article>
|
|
<article id="instagram-create-new-thing" class="absolute top-0 left-0 z-10 bg-black w-full h-full hide flex-col">
|
|
<section id="instagram-create-post-page" class="absolute top-0 left-0 w-full h-full ">
|
|
<section id="instagram-create-post" class="absolute top-0 left-0 z-10 bg-black w-full h-full flex-col overflow-y">
|
|
<header class="flex flex-row justify-between items-center p-4 pt-8 sticky top-0 bg-black">
|
|
<i class="fa fa-times" onclick="gotoBackPage('#instagram-create-new-thing')"></i>
|
|
<a>New Post</a>
|
|
<i class="fa-solid fa-bars" onclick="addInstagramPostByLink()"></i>
|
|
</header>
|
|
<div class="gallery-data" class=""></div>
|
|
</section>
|
|
<section id="instagram-share-post" class="absolute top-0 left-0 z-10 bg-black w-full h-full hide flex-col">
|
|
<header class="flex flex-row justify-between items-center p-4 pt-8 sticky top-0 bg-black">
|
|
<i class="fas fa-chevron-left" onclick="gotoBackPage('#instagram-share-post')"></i>
|
|
<a>Share Post</a>
|
|
<a class="blue_text" onclick="sharePost()">Share</a>
|
|
</header>
|
|
<article class="flex gap-2 pb-2 border-b">
|
|
<video class="instagram-share-post-video" src="" width="64" height="64"></video>
|
|
<img class="instagram-share-post-image" alt="" src="" width="64" height="64">
|
|
<textarea class="w-full h-20 p-4" id="instagram-share-post-description" placeholder="Write a description..."></textarea>
|
|
</article>
|
|
<div class="post-photo-filter">
|
|
<div class="image-preview-show">
|
|
<figure class="sem-filtro">
|
|
<img class="instagram-share-post-image" alt="" src="" height="360">
|
|
<video class="instagram-share-post-video" src="" height="360"></video>
|
|
</figure>
|
|
</div>
|
|
|
|
<div class="swiper instagram-filters-swiper">
|
|
<ul class="instagram-filters-list swiper-wrapper mt-3"></ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section id="instagram-create-story-page" class="absolute top-0 left-0 w-full h-full hide">
|
|
<section id="instagram-create-story" class="absolute top-0 left-0 z-10 bg-black w-full h-full flex-col overflow-y">
|
|
<header class="flex flex-row justify-between items-center p-4 pt-8 sticky top-0 bg-black">
|
|
<i class="fa fa-times" onclick="gotoBackPage('#instagram-create-new-thing')"></i>
|
|
<a>New Story</a>
|
|
<i class="fa-solid fa-bars" onclick="addInstagramStoryByLink()"></i>
|
|
</header>
|
|
<div class="gallery-data"></div>
|
|
</section>
|
|
<section id="instagram-share-story" class="absolute top-0 left-0 z-10 bg-black w-full h-full hide flex-col">
|
|
<header class="flex flex-row justify-between items-center p-4 pt-8 sticky top-0 bg-black">
|
|
<i class="fas fa-chevron-left" onclick="gotoBackPage('#instagram-share-story')"></i>
|
|
<a>Share Story</a>
|
|
<a class="blue_text" onclick="shareStory()">Share</a>
|
|
</header>
|
|
<div class="post-photo-filter">
|
|
<div class="image-preview-show">
|
|
<figure class="sem-filtro">
|
|
<img class="instagram-share-story-image" alt="" src="" height="360">
|
|
<video class="instagram-share-story-video" src="" height="360"></video>
|
|
</figure>
|
|
</div>
|
|
<div class="swiper instagram-filters-swiper">
|
|
<ul class="instagram-filters-list swiper-wrapper mt-3"></ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section id="instagram-create-live-page" class="absolute top-0 left-0 w-full h-full hide items-center justify-center">
|
|
<header class="flex flex-row justify-center items-center p-4 pt-8 sticky top-0 bg-black">
|
|
<i class="fa fa-times absolute left-2" onclick="gotoBackPage('#instagram-create-new-thing')"></i>
|
|
<a>Start a live</a>
|
|
<!-- <a class="blue_text">Next</a> -->
|
|
</header>
|
|
<div class="w-full h-80 items-center justify-center flex">
|
|
<span onclick="instagramCreateLive()">Start a live!</span>
|
|
</div>
|
|
</section>
|
|
<footer id="instagram_create_footer">
|
|
<a id="instagram-create-post-footer" class="active">POST</a>
|
|
<a id="instagram-create-story-footer">STORY</a>
|
|
<a id="instagram-create-live-footer">LIVE</a>
|
|
</footer>
|
|
</article>
|
|
<article id="instagram-search-container" class="absolute top-0 left-0 bg-black w-full h-88 z-5 hide flex-col">
|
|
<header class="flex flex-row gap-4 p-4 pt-8 w-full">
|
|
<input id="instagram-search" type="text" class="input_search" placeholder="Search" onkeyup="instagramSearch()">
|
|
</header>
|
|
<section id="instagram-search-results" class="flex flex-col gap-4 p-4 overflow-y h-86"></section>
|
|
</article>
|
|
<article id="instagram-notifications-container" class="absolute top-0 left-0 bg-black w-full h-88 z-5 hide flex-col">
|
|
<section id="instagram-notifications" class="absolute left-0 top-0 bg-black overflow-y w-full h-full flex flex-col">
|
|
<header class="pt-8 flex flex-row items-center gap-4 cursor-pointer relative border-b pb-5">
|
|
<span class="absolute right-2 red_text clear-notify-ig" onclick="clearInstagramNotifications()">Clear Notifications</span>
|
|
</header>
|
|
<section id="instagram-notifications-content" class="pt-2"></section>
|
|
</section>
|
|
</article>
|
|
<footer id="instagram-footer">
|
|
<svg class="active" onclick="footerRouter(this, '#instagram-homePage')" id="instagram-home" role="img" viewBox="0 0 24 24" width="24" height="24">
|
|
<path d="M9.005 16.545a2.997 2.997 0 0 1 2.997-2.997A2.997 2.997 0 0 1 15 16.545V22h7V11.543L12 2 2 11.543V22h7.005Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2">
|
|
</path>
|
|
</svg>
|
|
<svg onclick="footerRouter(this, '#instagram-search-container')" id="instagram-search" viewBox="0 0 24 24" role="img" width="24" height="24">
|
|
<g class="search-path" fill="none">
|
|
<path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4" />
|
|
<circle cx="8" cy="8" r="7" />
|
|
</g>
|
|
</svg>
|
|
<svg onclick="footerRouter(this, '#instagram-notifications-container')" id="instagram-notifications-footer" height="24" role="img" viewBox="0 0 24 24" width="24">
|
|
<path d="M16.792 3.904A4.989 4.989 0 0121.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.167 2.5 9.122a4.989 4.989 0 014.708-5.218 4.21 4.21 0 013.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 013.679-1.938m0-2a6.04 6.04 0 00-4.797 2.127 6.052 6.052 0 00-4.787-2.127A6.985 6.985 0 00.5 9.122c0 3.61 2.55 5.827 5.015 7.97.283.246.569.494.853.747l1.027.918a44.998 44.998 0 003.518 3.018 2 2 0 002.174 0 45.263 45.263 0 003.626-3.115l.922-.824c.293-.26.59-.519.885-.774 2.334-2.025 4.98-4.32 4.98-7.94a6.985 6.985 0 00-6.708-7.218z">
|
|
</path>
|
|
</svg>
|
|
|
|
<img onclick="footerRouter(this, '#instagram-user-self-profile')" id="instagram-profile" class="instagram-avatar" src="">
|
|
</footer>
|
|
</section>
|
|
<section id="instagram-streamer-window" class="p-4">
|
|
<header class="pt-8 flex justify-between items-center">
|
|
<article class="flex flex-row items-center gap-4">
|
|
<img class="instagram-live-owner-avatar rounded-full" src="" style="width: 40px; height: 40px;">
|
|
<article class="flex flex-col gap-1">
|
|
<header class="flex flex-row gap-2 items-center">
|
|
<a class="instagram-live-owner-username"></a>
|
|
</header>
|
|
</article>
|
|
</article>
|
|
<article class="flex items-center justify-center gap-6">
|
|
<span class="instagram-live">LIVE</span>
|
|
<div class="instagram-dark-btn w-auto flex items-center justify-center gap-2 instagram-total-watchers-btn bg-filter-blur">
|
|
<i class="fas fa-eye"></i>
|
|
<span class="instagram-live-watching-count">1.5K</span>
|
|
</div>
|
|
<span class="cursor-pointer" onclick="finishInstagramLive()"><i class="fa-regular fa-xmark"></i></span>
|
|
</article>
|
|
</header>
|
|
<section class="flex flex-col gap-6 w-full absolute bottom-15 instagram-live-messages"></section>
|
|
<footer class="w-full p-2 absolute bottom-1">
|
|
<div class="flex flex-row gap-2 items-center">
|
|
<input type="text" class="p-4 w-95 rounded-2xl instagram-live-comment-input bg-filter-blur" id="instagram-streamer-comment-input" placeholder="Comment">
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
<section id="instagram-watcher-window" class="p-4">
|
|
<header class="pt-8 flex justify-between items-center">
|
|
<article class="flex flex-row items-center gap-4">
|
|
<img class="instagram-live-owner-avatar rounded-full" src="" style="width: 40px; height: 40px;">
|
|
<article class="flex flex-col gap-1">
|
|
<header class="flex flex-row gap-2 items-center">
|
|
<a class="instagram-live-owner-username"></a>
|
|
</header>
|
|
</article>
|
|
</article>
|
|
<article class="flex items-center justify-center gap-6">
|
|
<span class="instagram-live">LIVE</span>
|
|
<div class="instagram-dark-btn w-auto flex items-center justify-center gap-2 instagram-total-watchers-btn bg-filter-blur>
|
|
<i class=" fas fa-eye"></i>
|
|
<span class="instagram-live-watching-count">1.5K</span>
|
|
</div>
|
|
<i class="fas fa-times fa-2x" onclick="exitInstagramLive()"></i>
|
|
</article>
|
|
</header>
|
|
<section class="flex flex-col gap-6 w-full absolute bottom-15 instagram-live-messages"></section>
|
|
<footer class="w-full p-2 absolute bottom-1">
|
|
<div class="flex flex-row gap-2 items-center">
|
|
<input type="text" class="p-4 w-95 rounded-2xl instagram-live-comment-input bg-filter-blur" id="instagram-watcher-comment-input" placeholder="Comment">
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="application calculator-app">
|
|
<div class="calculator_value">0</div>
|
|
<div class="buttons-container">
|
|
<div class="calculator_button function ac">AC</div>
|
|
<div class="calculator_button function pm">±</div>
|
|
<div class="calculator_button function percent">%</div>
|
|
<div class="calculator_button operator division">÷</div>
|
|
<div class="calculator_button number-7">7</div>
|
|
<div class="calculator_button number-8">8</div>
|
|
<div class="calculator_button number-9">9</div>
|
|
<div class="calculator_button operator multiplication">x</div>
|
|
<div class="calculator_button number-4">4</div>
|
|
<div class="calculator_button number-5">5</div>
|
|
<div class="calculator_button number-6">6</div>
|
|
<div class="calculator_button operator subtraction">-</div>
|
|
<div class="calculator_button number-1">1</div>
|
|
<div class="calculator_button number-2">2</div>
|
|
<div class="calculator_button number-3">3</div>
|
|
<div class="calculator_button operator addition">+</div>
|
|
<div class="calculator_button number-0">0</div>
|
|
<div class="calculator_button decimal">.</div>
|
|
<div class="calculator_button operator equal">=</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application spotify-app">
|
|
<div id="spotify-app-musicPlayer" style="display: none">
|
|
<div class="headings">
|
|
<i class="fa fa-chevron-down spotify-row" onclick="spotifyCloseMusicPlayer()" aria-hidden="true"></i>
|
|
<a>PLAYING FROM PLAYLIST</a>
|
|
<p id="musicFrom" class="spotify-row">Tirade</p>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="currentCover"></div>
|
|
<div class="nextCover"></div>
|
|
<div class="prevCover"></div>
|
|
<div class="details">
|
|
<div class="track"></div>
|
|
<div class="artist"></div>
|
|
<div id="spotify-like" onclick="spotifyToggleLike()">
|
|
<svg role="img" height="18" fill="currentColor" width="18" viewBox="0 0 24 24" class="Svg-ytk21e-0 jAKAlG">
|
|
<path d="M5.21 1.57a6.757 6.757 0 016.708 1.545.124.124 0 00.165 0 6.741 6.741 0 015.715-1.78l.004.001a6.802 6.802 0 015.571 5.376v.003a6.689 6.689 0 01-1.49 5.655l-7.954 9.48a2.518 2.518 0 01-3.857 0L2.12 12.37A6.683 6.683 0 01.627 6.714 6.757 6.757 0 015.21 1.57zm3.12 1.803a4.757 4.757 0 00-5.74 3.725l-.001.002a4.684 4.684 0 001.049 3.969l.009.01 7.958 9.485a.518.518 0 00.79 0l7.968-9.495a4.688 4.688 0 001.049-3.965 4.803 4.803 0 00-3.931-3.794 4.74 4.74 0 00-4.023 1.256l-.008.008a2.123 2.123 0 01-2.9 0l-.007-.007a4.757 4.757 0 00-2.214-1.194z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<div id="spotify-playlist-add" onclick="spotifyAddToPlaylistFromPlaying()">
|
|
<i class="fa fa-plus text-xl" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
<div class="timeline">
|
|
<span class="current-time">--:--</span>
|
|
<span class="total-time">--:--</span>
|
|
<div class="slider" data-direction="horizontal">
|
|
<div class="spotify-progress">
|
|
<div class="pin" id="progress-pin" data-method="rewind"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="player">
|
|
<div class="prevTrack" onmousedown="event.stopPropagation()" onclick="spotifyPlayerPrevTrack(event)"><i class="fa fa-step-backward" aria-hidden="true"></i></div>
|
|
<div class="playBtn" onmousedown="event.stopPropagation()" onclick="playPauseCheck(event)"><i class="fa fa-play" aria-hidden="true"></i></div>
|
|
<div class="nextTrack" onmousedown="event.stopPropagation()" onclick="spotifyPlayerNextTrack(event)"><i class="fa fa-step-forward" aria-hidden="true"></i></div>
|
|
</div>
|
|
</div>
|
|
<section id="spotify-add-to-playlist">
|
|
<header class="flex justify-between items-center bg-dark pb-5 pt-5 mb-7 px-4">
|
|
<a class="cursor-pointer spotify-cancel-opt" onclick="closeAddToPlaylist()">Cancel</a>
|
|
<a class="spotify-playlist-opt">Add to playlist</a>
|
|
<a id="spotify-add-to-playlist-button" class="text-green-500 cursor-pointer">Done</a>
|
|
</header>
|
|
<button onclick="spotifyCreateNewPlaylist()" class="bg-white- w-16rem h-5rem p-4 flex items-center justify-center text-center rounded-3xl mt-5 mb-5 margin-center text-black- spotify-new-playlist-opt">New playlist</button>
|
|
<section id="spotify-add-to-playlist-list" class="p-4 mt-5 flex flex-col gap-6 h-82 overflow-y"></section>
|
|
</section>
|
|
<div id="spotify-app-showPlaylist">
|
|
<h4>Hi !</h4>
|
|
<div id="spotify-app-playlists">
|
|
<div class="spotify-app-playlist" onclick="spotifyOpenPlaylistSongs()">
|
|
<img src="https://i1.sndcdn.com/artworks-000176581039-ec258e-t500x500.jpg" class="spotify-playlist-image" />
|
|
<a>Closer</a>
|
|
</div>
|
|
<div class="spotify-app-playlist" onclick="spotifyOpenPlaylistSongs()">
|
|
<img src="https://i1.sndcdn.com/artworks-000176581039-ec258e-t500x500.jpg" class="spotify-playlist-image" />
|
|
<a>Closer</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="spotify-app-playlistSongs" style="display: none">
|
|
<div id="back-container" style="top: 8%" onclick="spotifyBack('#spotify-app-playlistSongs', '#spotify-app-showPlaylist')">
|
|
<img id="back_icon" src="./img/back.png" style="filter: invert(94%) sepia(100%) saturate(23%) hue-rotate(1deg) brightness(105%) contrast(109%)">
|
|
</div>
|
|
<div id="spotify-app-headerImage">
|
|
<img src="https://i1.sndcdn.com/artworks-000176581039-ec258e-t500x500.jpg" width="150" height="150" />
|
|
<a>Hardcore</a>
|
|
<div id="playButton" onclick="spotifyShuffle()"><i class="fa fa-play" aria-hidden="true"></i></div>
|
|
</div>
|
|
<i id="spotify-delete-playlist" class="fa fa-trash absolute right-4"></i>
|
|
<section id="songs-container">
|
|
<div class="song">
|
|
<img src="https://i1.sndcdn.com/artworks-000176581039-ec258e-t500x500.jpg">
|
|
<section>
|
|
<a class="spotify-song-name playing">JUST DANCE</a>
|
|
<a class="spotify-song-author">David Guetta, Paulo Londra, Clefitas</a>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div id="spotify-app-searchContainer" style="display: none">
|
|
<h4>Search</h4>
|
|
<div class="input-container">
|
|
<i class="fas fa-search text-muted"></i>
|
|
<input type="text" name="text" id="spotify-search" placeholder="Search">
|
|
</div>
|
|
<div id="spotify-app-searchhandleContainer"></div>
|
|
</div>
|
|
<div id="spotify-app-playingSong">
|
|
<img src="https://i1.sndcdn.com/artworks-000176581039-ec258e-t500x500.jpg" onclick="spotifyOpenMusicPlayer()">
|
|
<section onclick="spotifyOpenMusicPlayer()">
|
|
<a class="spotify-song-name">JUST DANCE</a>
|
|
<a class="spotify-song-author">David Guetta, Paulo Londra, Clefitas</a>
|
|
</section>
|
|
<div class="playBtn" onclick="playPauseCheck(event)"><i class="fa fa-play" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
<div id="spotify-app-footer">
|
|
<div class="spotify-footer" id="spotify-footer-home" onclick="footerChange('home')">
|
|
<div class="logo">
|
|
<svg role="img" height="24" width="24" class="home-active-icon" viewBox="0 0 24 24">
|
|
<path d="M13.5 1.515a3 3 0 00-3 0L3 5.845a2 2 0 00-1 1.732V21a1 1 0 001 1h6a1 1 0 001-1v-6h4v6a1 1 0 001 1h6a1 1 0 001-1V7.577a2 2 0 00-1-1.732l-7.5-4.33z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<a>Home</a>
|
|
</div>
|
|
<div class="spotify-footer" id="spotify-footer-search" onclick="footerChange('search')">
|
|
<div class="logo">
|
|
<svg role="img" height="24" width="24" class="search-icon" viewBox="0 0 24 24">
|
|
<path d="M10.533 1.279c-5.18 0-9.407 4.14-9.407 9.279s4.226 9.279 9.407 9.279c2.234 0 4.29-.77 5.907-2.058l4.353 4.353a1 1 0 101.414-1.414l-4.344-4.344a9.157 9.157 0 002.077-5.816c0-5.14-4.226-9.28-9.407-9.28zm-7.407 9.279c0-4.006 3.302-7.28 7.407-7.28s7.407 3.274 7.407 7.28-3.302 7.279-7.407 7.279-7.407-3.273-7.407-7.28z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<a>Search</a>
|
|
</div>
|
|
<div class="spotify-footer" id="spotify-footer-create-playlist" onclick="spotifyCreatePlaylist()">
|
|
<i class="fa-solid fa-list-music text-2xl"></i>
|
|
<a>Library</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application camera-app bg-black-">
|
|
<section class="relative w-full h-full">
|
|
<header class="bg-black- h-9rem flex flex-row justify-center items-center relative">
|
|
<div id="camera-flash" onclick="toggleCameraFlash()" class="absolute left-4 w-full text-2xl text-white pb-2 ml-6 cursor-pointer bottom-0">
|
|
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M432 448a15.92 15.92 0 01-11.31-4.69l-352-352a16 16 0 0122.62-22.62l352 352A16 16 0 01432 448zm-.5-244a16 16 0 00-15.5-12H307.19L335.4 37.63c.05-.3.1-.59.13-.89A18.45 18.45 0 00302.73 23l-92.58 114.46a4 4 0 00.29 5.35l151 151a4 4 0 005.94-.31l60.8-75.16A16.37 16.37 0 00431.5 204zM301.57 369.19l-151-151a4 4 0 00-5.93.31L83.8 293.64A16.37 16.37 0 0080.5 308 16 16 0 0096 320h108.83l-28.09 154.36v.11a18.37 18.37 0 0032.5 14.53l92.61-114.46a4 4 0 00-.28-5.35z"></path>
|
|
</svg>
|
|
</div>
|
|
<a id="camera-video-time" class="text-2xl pb-2 hide text-white- absolute bottom-0">00:00:00</a>
|
|
</header>
|
|
<section id="camera-render-container">
|
|
<div id="camera-grid">
|
|
<div class="line horizontal"></div>
|
|
<div class="line horizontal"></div>
|
|
<div class="line vertical"></div>
|
|
<div class="line vertical"></div>
|
|
</div>
|
|
<section id="camera-loader-container">
|
|
<a>Loading</a>
|
|
<figure id="camera-loader"></figure>
|
|
</section>
|
|
<div class="camera-focus">
|
|
<div class="h"></div>
|
|
<div class="v"></div>
|
|
</div>
|
|
<div class="camera-body">
|
|
<canvas id="camera-canvas"></canvas>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="camera-footer">
|
|
<article class="camera-mode">
|
|
<ul>
|
|
<li class="vd">video</li>
|
|
<li class="ph">photo</li>
|
|
<li class="po">portrait</li>
|
|
</ul>
|
|
<!-- <a id="take-video-footer" class="cursor-pointer" onclick="selectFooter(this)">VIDEO</a> -->
|
|
<!-- <a id="take-photo-footer" class="cursor-pointer" onclick="selectFooter(this)" style="color: #ddbe00">PHOTO</a> -->
|
|
</article>
|
|
<article class="w-full flex justify-between items-center">
|
|
<div id="camera-last-content" style="width: 54px; height: 54px">
|
|
<img class="rounded" width="54" height="54">
|
|
<video muted class="rounded" width="54" height="54"></video>
|
|
</div>
|
|
<figure id="camera-take-photo" onclick="handleCameraButton()">
|
|
<figure id="camera-take-photo-circle"></figure>
|
|
</figure>
|
|
<div id="camera-rotate-camera" onclick="rotateCamera()">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
<path d="M54.741 28.14a23.002 23.002 0 0 1-39.088 19.124"></path>
|
|
<path d="M9.065 33.62A23.008 23.008 0 0 1 31.917 8a22.934 22.934 0 0 1 16.262 6.732">
|
|
</path>
|
|
<path d="M2 24l7.065 9.619L18 26"></path>
|
|
<path d="M62 38l-7.259-9.86L46 36"></path>
|
|
</svg>
|
|
</div>
|
|
</article>
|
|
</footer>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="application gallery-app">
|
|
<div class="photos-container pt-7">
|
|
<div class="photos-app-page photos-app-page-active" data-page="photos">
|
|
<header id="photo-interaction-container" class="sticky top-0 flex justify-end items-end mb-4">
|
|
<button class="photo-interaction gallery-photo-select" data-type="select">Select</button>
|
|
<button class="photo-interaction gallery-photo-select-hide hide" data-type="cancel">Cancel</button>
|
|
</header>
|
|
<div class="photos-content" data-showing="all"></div>
|
|
<div class="photos-range-wrapper">
|
|
<figure id="photos-range-divider"></figure>
|
|
<button class="photo-range-item gallery-photo-years text-muted" data-layout="year">Years</button>
|
|
<button class="photo-range-item gallery-photo-month text-muted" data-layout="month">Months</button>
|
|
<button class="photo-range-item gallery-photo-days text-muted" data-layout="day">Days</button>
|
|
<button class="photo-range-item gallery-photo-all text-muted current" data-layout="all">All Photos</button>
|
|
</div>
|
|
</div>
|
|
<div class="photos-app-page" data-page="albums">
|
|
<div class="photos-album-content"></div>
|
|
</div>
|
|
<div class="photos-app-page" data-page="foryou">
|
|
<div class="photos-foryou-container">
|
|
<span class="photos-foryou-header">For you</span>
|
|
<span class="photos-foryou-title">Memories</span>
|
|
<div class="photos-foryou-memories"></div>
|
|
<span class="photos-foryou-title">Recommended Photos</span>
|
|
<div class="photos-foryou-featured-photos"></div>
|
|
</div>
|
|
</div>
|
|
<div class="photos-album-content-container">
|
|
<div id="photos-album-content-header" class="global-app-header">
|
|
<p id="cancel-album-container" class="blue-text"><i class="fas fa-chevron-left"></i> Back</p>
|
|
<p id="album-name">Album Name</p>
|
|
</div>
|
|
<div class="photos-album-content-inside photos-content" data-showing="all">
|
|
</div>
|
|
</div>
|
|
<div class="photos-app-page" data-page="search">
|
|
<div class="photos-search-bar">
|
|
<i class="fas fa-search"></i>
|
|
<textarea id="photos-search-bar-input" placeholder="Location, album or date" spellcheck="false"></textarea>
|
|
</div>
|
|
<div class="photos-content" data-showing="all">
|
|
</div>
|
|
</div>
|
|
<article id="photos-add-to-album" class="absolute bottom-0 h-92 w-full rounded-2xl z-99999999 bg-container-dark gap-6">
|
|
<header class="flex flex-row justify-center items-center w-full pt-3">
|
|
<a class="font-bold text-lg gallery-add-album">Add to Album</a>
|
|
<a class="text-blue-500 absolute right-2 cursor-pointer gallery-add-album-cancel" onclick="closeAddToAlbum()">Cancel</a>
|
|
</header>
|
|
<section class="flex flex-row items-center gap-4 ml-2 p-4">
|
|
<section id="photo-album-media"></section>
|
|
<a id="photo-album-count">1 Photo</a>
|
|
</section>
|
|
<section class="overflow-y h-85">
|
|
<article class="album-create flex flex-col gap-1 mt-5 p-6 w-full cursor-pointer" onclick="createAlbum()">
|
|
<section id="new-album" class="bg-dark flex items-center justify-center">
|
|
<i class="fa-solid fa-images text-muted text-4xl"></i>
|
|
</section>
|
|
<a>New Album...</a>
|
|
</article>
|
|
<article class="p-4">
|
|
<a class="text-lg font-semibold my-albums">My Albums</a>
|
|
<section id="photos-my-albums" class="mt-5 grid grid-cols-2 gap-4"></section>
|
|
</article>
|
|
</section>
|
|
|
|
|
|
</article>
|
|
<footer id="photo-select-footer" class="flex flex-row items-center justify-between absolute bottom-0 w-full bg-container-dark">
|
|
<i class="fa-light fa-arrow-up-from-bracket fa-lg cursor-pointer" onclick="openShareSelectedPhotos()"></i>
|
|
<a class="font-bold text-lg photo-select-items">Select Items</a>
|
|
<div class="flex flex-row items-center gap-6">
|
|
<i class="fas fa-trash fa-lg" onclick="deleteSelectedPhotos()"></i>
|
|
<i class="fas fa-bookmark fa-lg" onclick="openAddToAlbum()"></i>
|
|
</div>
|
|
</footer>
|
|
<div class="photos-footer">
|
|
<div class="photos-footer-button photos-footer-button-selected" data-page="photos">
|
|
<i class="fas fa-images"></i>
|
|
<p class="gallery-lib">Library</p>
|
|
</div>
|
|
<div class="photos-footer-button" data-page="foryou">
|
|
<i class="fas fa-heart"></i>
|
|
<p class="gallery-foryou">For you</p>
|
|
</div>
|
|
<div class="photos-footer-button" data-page="albums">
|
|
<i class="fas fa-bookmark"></i>
|
|
<p class="gallery-albums">Albums</p>
|
|
</div>
|
|
<div class="photos-footer-button" data-page="search">
|
|
<i class="fas fa-search"></i>
|
|
<p class="gallery-search">Search</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application health-app">
|
|
<header class="health-app-header flex flex-row items-center justify-between px-4 pt-8">
|
|
<a class="text-2xl">Summary</a>
|
|
<i class="fas fa-cog" onclick="openHealthSettings()"></i>
|
|
</header>
|
|
<article class="health-app-content px-4 mt-5 flex flex-col gap-4">
|
|
<section class="p-4 bg-container-dark rounded-xl">
|
|
<header class="heatlh-header-steps flex flex-row items-center gap-1 pb-5">
|
|
<i class="fas fa-fire-alt text-green-500"></i>
|
|
<a class="text-green-500">Steps</a>
|
|
</header>
|
|
<footer class="flex flex-row items-center">
|
|
<a id="health-steps" class="text-2xl">205</a>
|
|
<a class="health-steps text-muted mb-2 self-end">steps</a>
|
|
</footer>
|
|
</section>
|
|
<section class="p-4 bg-container-dark rounded-xl">
|
|
<header class="heatlh-header-heart flex flex-row items-center gap-1 pb-5">
|
|
<i class="fas fa-heartbeat text-red-500"></i>
|
|
<a class="text-red-500">Heart</a>
|
|
</header>
|
|
<footer class="flex flex-row items-center">
|
|
<a id="health-health" class="text-2xl">20</a>
|
|
<a class="text-muted mb-2 self-end">%</a>
|
|
</footer>
|
|
</section>
|
|
<section class="p-4 bg-container-dark rounded-xl">
|
|
<header class="heatlh-header-hungry flex flex-row items-center gap-1 pb-5">
|
|
<i class="fas fa-hamburger text-yellow-500"></i>
|
|
<a class="text-yellow-500">Hungry</a>
|
|
</header>
|
|
<footer class="flex flex-row items-center">
|
|
<a id="health-hungry" class="text-2xl">5</a>
|
|
<a class="text-muted mb-2 self-end">%</a>
|
|
</footer>
|
|
</section>
|
|
<section class="p-4 bg-container-dark rounded-xl">
|
|
<header class="heatlh-header-thirsty flex flex-row items-center gap-1 pb-5">
|
|
<i class="fas fa-glass-whiskey text-blue-500"></i>
|
|
<a class="text-blue-500">Thirsty</a>
|
|
</header>
|
|
<footer class="flex flex-row items-center">
|
|
<a id="health-thirsty" class="text-2xl">20</a>
|
|
<a class="text-muted mb-2 self-end">%</a>
|
|
</footer>
|
|
</section>
|
|
</article>
|
|
<section id="health-settings" class="absolute bottom-0 bg-container-dark w-full h-full z-20 left-0 p-4 rounded-2xl">
|
|
<header class="flex justify-center pb-5 items-center pt-5 border-b">
|
|
<a class="text-white font-semibold text-xl">Health Notice</a>
|
|
<i class="fas fa-times fa-lg absolute right-5 text-white cursor-pointer" onclick="closeHealthSettings()"></i>
|
|
</header>
|
|
<form action="#" id="health-form" class="flex flex-col gap-6 h-80 relative pt-5">
|
|
<div class="flex flex-col gap-2 pb-3 health-form">
|
|
<input type="checkbox" id="health-health-notice" class="health-checkbox ios8-switch" onclick="toggleNotice('#health-health-notice', 'health')">
|
|
<label for="health-health-notice" class="text-xl text-white font-semibold health-text">
|
|
Health Notice
|
|
</label>
|
|
</div>
|
|
<div class="flex flex-col gap-2 pb-3" id="health-health-notice-value-container">
|
|
<label for="health-health-notice-value" class="text-xl text-white font-semibold health-text-title">Health Notice Value</label>
|
|
<input type="range" id="health-health-notice-value" class="health-range" min="5" max="100" value="20" onchange="onChangeNoticeValue('health')">
|
|
<div class="text-muted flex flex-row items-center gap-1">
|
|
<a class="health-text-desc text-muted">if health value is less than</a>
|
|
<a class="text-white" id="health-health-notice-value-text">20%</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2 pb-3 health-form">
|
|
<input type="checkbox" id="health-hungry-notice" class="health-checkbox ios8-switch" onclick="toggleNotice('#health-hungry-notice', 'hungry')">
|
|
<label for="health-hungry-notice" class="text-xl text-white font-semibold hungry-text">Hungry Notice</label>
|
|
</div>
|
|
<div class="flex flex-col gap-2 pb-3" id="health-hungry-notice-value-container">
|
|
<label for="health-hungry-notice-value" class="text-xl text-white font-semibold hungry-text-title">Hungry Notice Value</label>
|
|
<input type="range" id="health-hungry-notice-value" class="health-range" min="5" max="100" value="20" onchange="onChangeNoticeValue('hungry')">
|
|
<div class="text-muted flex flex-row items-center gap-1">
|
|
<a class="text-muted hungry-text-desc">if hungry value is less than</a>
|
|
<a class="text-white" id="health-hungry-notice-value-text">20%</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2 pb-3 health-form">
|
|
<input type="checkbox" id="health-thirsty-notice" class="health-checkbox ios8-switch" onclick="toggleNotice('#health-thirsty-notice', 'thirsty')">
|
|
<label for="health-thirsty-notice" class="text-xl text-white font-semibold thirst-text">Thirsty Notice</label>
|
|
</div>
|
|
<div class="flex flex-col gap-2 pb-3" id="health-thirsty-notice-value-container">
|
|
<label for="health-thirsty-notice-value" class="text-xl text-white font-semibold thirst-text-title">Thirsty Notice Value</label>
|
|
<input type="range" id="health-thirsty-notice-value" class="health-range" min="5" max="100" value="20" onchange="onChangeNoticeValue('thirsty')">
|
|
<div class="text-muted flex flex-row items-center gap-1">
|
|
<a class="text-muted thirst-text-desc">if thirsty value is less than</a>
|
|
<a class="text-white" id="health-thirsty-notice-value-text">20%</a>
|
|
</div>
|
|
</div>
|
|
<footer class="flex justify-center absolute bottom-0-5 w-full">
|
|
<button type="submit" class="bg-blue-500 text-white- text-lg font-semibold p-6 w-full rounded-2xl health-button">Save</button>
|
|
</footer>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="application clock-app">
|
|
<div class="clock-app-loaded">
|
|
<div class="clock-app-container">
|
|
<div class="clock-app-worldtime clock-app-tab">
|
|
<div class="clock-app-tab-header worldtime-title">
|
|
<p>World Time</p>
|
|
</div>
|
|
<div class="world-time" data-string="İstanbul" data-time-zone="Europe/Istanbul">
|
|
</div>
|
|
<div class="world-time" data-string="Berlin" data-time-zone="Europe/Berlin"></div>
|
|
<div class="world-time" data-string="Londra" data-time-zone="Europe/London"></div>
|
|
<div class="world-time" data-string="Tokyo" data-time-zone="Asia/Tokyo"></div>
|
|
<div class="world-time" data-string="New York" data-time-zone="America/New_York">
|
|
</div>
|
|
</div>
|
|
<div class="clock-app-alarm clock-app-tab">
|
|
<div class="clock-app-alarm-page clock-app-alarm-show">
|
|
<div class="global-app-header">
|
|
<!-- <p id="clock-alarm-edit" class="blue-text">Edit</p> -->
|
|
<p id="alarm-title" style="grid-column: 2;">Alarm</p>
|
|
<p id="clock-alarm-add" class="blue-text">Add <i class="fas fa-chevron-right"></i></p>
|
|
</div>
|
|
<div class="clock-app-alarm-lists"></div>
|
|
</div>
|
|
<div class="clock-app-alarm-page clock-app-alarm-add">
|
|
<div id="phone-image-container-header" class="global-app-header">
|
|
<p id="clock-alarm-cancel" class="blue-text"><i class="fas fa-chevron-left"></i> Back</p>
|
|
<p id="clock-alarm-add-menu" style="grid-column: 2;">Add Alarm</p>
|
|
<p id="clock-alarm-save" class="blue-text">Save</p>
|
|
</div>
|
|
<div class="clock-selector-timer"></div>
|
|
<div class="clock-timer-setup-container">
|
|
<div id="clock-alarm-hour-picker"></div>
|
|
<div id="clock-alarm-minute-picker"></div>
|
|
</div>
|
|
<div class="clock-add-alarm-settings">
|
|
<div id="clock-alarm-repeat-option" data-value="everyday" class="settings-app-tab secondTab nomargin">
|
|
<div class="clock-tab-title">
|
|
<p id="clock-tab-title-repeat">Repeat</p>
|
|
</div>
|
|
<div class="clock-tab-description">
|
|
<p id="clock-tab-description-repeat">Every day </p> <i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
<div id="clock-alarm-label-option" data-value="Alarm" class="settings-app-tab secondTab nomargin">
|
|
<div class="clock-tab-title">
|
|
<p id="clock-tab-title-alarm">Alarm</pc>
|
|
</div>
|
|
<div class="clock-tab-description">
|
|
<p id="clock-tab-description-alarm">Alarm </p> <i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clock-app-alarm-page clock-app-alarm-add-label">
|
|
<div id="phone-image-container-header" class="global-app-header">
|
|
<p id="clock-alarm-add-label-cancel" class="blue-text"><i class="fas fa-chevron-left"></i> Back</p>
|
|
<p id="clock-alarm-tag-title">Alarm Tag</p>
|
|
<p id="clock-alarm-add-label-save" class="blue-text">Save</p>
|
|
</div>
|
|
<div class="clock-app-alarm-add-info">
|
|
<a>Set your alarm name</a>
|
|
</div>
|
|
<div class="clock-app-alarm-add-label-container">
|
|
<input id="clock-alarm-label-option-input" type="text" placeholder="Alarm"></input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clock-app-stopwatch clock-app-tab" style="display: flex;">
|
|
<div class="clock-app-tab-inside">
|
|
<div class="stopwatch-timer">
|
|
<p class="stopwatch-timer-text" data-type="minute">00</p>
|
|
<p class="stopwatch-timer-text">:</p>
|
|
<p class="stopwatch-timer-text" data-type="second">00</p>
|
|
<p class="stopwatch-timer-text">.</p>
|
|
<p class="stopwatch-timer-text" data-type="milisecond">00</p>
|
|
</div>
|
|
<div class="clock-buttons">
|
|
<div id="stopwatch-button" class="clock-button clock-clear-button" data-type="clear">
|
|
<p class="timer-button-clear">Clean</p>
|
|
</div>
|
|
<div id="stopwatch-button" class="clock-button clock-start-button" data-type="start">
|
|
<p class="timer-button-start">Start</p>
|
|
</div>
|
|
</div>
|
|
<div class="stopwatch-lap-list">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clock-app-timer clock-app-tab">
|
|
<div class="clock-app-timer-setup">
|
|
<div class="global-app-header">
|
|
<p style="display: none;" id="clock-timer-cancel" class="blue-text"><i class="fas fa-chevron-left"></i> Back</p>
|
|
<p id="clock-timer-title" style="grid-column: 2;">Timer</p>
|
|
<p id="clock-timer-save" class="blue-text">Save</p>
|
|
</div>
|
|
<div class="clock-selector-timer"></div>
|
|
<div class="clock-timer-setup-container">
|
|
<div id="clock-timer-minute-picker"></div>
|
|
<div id="clock-timer-second-picker"></div>
|
|
</div>
|
|
</div>
|
|
<div class="clock-app-timer-show">
|
|
<div class="global-app-header">
|
|
<p id="clock-timer-cancel" style="display: none;" class="blue-text"><i class="fas fa-chevron-left"></i> Back</p>
|
|
<p id="clock-timer-title" style="grid-column: 2;">Timer</p>
|
|
<p id="clock-timer-edit" class="blue-text">Edit <i class="fas fa-chevron-right"></i></p>
|
|
</div>
|
|
<div class="clock-app-timer-show-container">
|
|
<div class="clock-app-timer-show-container-texts">
|
|
<p class="clock-app-timer-remaining" data-type="minute">00</p>
|
|
<p class="clock-app-timer-remaining">:</p>
|
|
<p class="clock-app-timer-remaining" data-type="second">00</p>
|
|
</div>
|
|
<div class="clock-buttons">
|
|
<div id="timer-button" class="clock-button timer-button-clear" data-type="clear">
|
|
<p>Clean</p>
|
|
</div>
|
|
<div id="timer-button" class="clock-button timer-button-flow" data-type="stop">
|
|
<p>Flow</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clock-app-footer">
|
|
<div data-tab="worldtime" class="clock-app-footer-button menu-worldtime">
|
|
<i class="fas fa-globe"></i>
|
|
<p>World Time</p>
|
|
</div>
|
|
<div data-tab="alarm" class="clock-app-footer-button menu-alarm">
|
|
<i class="fas fa-bell"></i>
|
|
<p>Alarm</p>
|
|
</div>
|
|
<div data-tab="stopwatch" class="clock-app-footer-button clock-app-footer-selected menu-stopwatch">
|
|
<i class="fas fa-stopwatch"></i>
|
|
<p>Stopwatch</p>
|
|
</div>
|
|
<div data-tab="timer" class="clock-app-footer-button menu-timer">
|
|
<i class="fas fa-clock"></i>
|
|
<p>Timer</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application youtube-app">
|
|
<div id="youtube-app-home-page" style="width: 100%; height: 100%;">
|
|
<div id="youtube-app-head">
|
|
<div id="youtube-app-head-content">
|
|
<img id="youtube-app-head-Img" src="./img/youtube_app/youtube.png">
|
|
<a>YouTube</a>
|
|
</div>
|
|
</div>
|
|
<div id="youtube-app-body"></div>
|
|
</div>
|
|
<div id="youtube-app-search-page" style="width: 100%; height: 100%;" class="hide">
|
|
<div id="youtube-app-search-page-head">
|
|
<div id="youtube-app-serach-page-head-content">
|
|
<input type="text" placeholder="Search YouTube" id="youtube-app-search-page-search">
|
|
<i class="fas fa-search" id="youtube-app-search-page-search-icon" onclick="loadVideos('search')"></i>
|
|
</div>
|
|
</div>
|
|
<div id="youtube-app-search-page-body">
|
|
|
|
</div>
|
|
</div>
|
|
<div id="youtube-app-footer">
|
|
<div class="footer-item" onclick="YoutubeFastActions('home')">
|
|
<i class="fas fa-home youtube-app-footer-icon" id="youtube-footer-home" style="color:red"></i>
|
|
<span class="youtube-app-footer-text yt-home" style="color:red">Home</span>
|
|
</div>
|
|
<div class="footer-item" onclick="YoutubeFastActions('search')">
|
|
<i class="fas fa-search youtube-app-footer-icon" id="youtube-footer-search"></i>
|
|
<span class="youtube-app-footer-text yt-search">Search</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application notes-app">
|
|
<div class="n-header" id="p">
|
|
<a href="#">
|
|
<span>Notes</span>
|
|
</a>
|
|
<div class="notes-search flex flex-row items-center gap-2 w-full bg-dark p-4 rounded-xl">
|
|
<i class="fas fa-search fa-lg text-muted"></i>
|
|
<input type="text" id="notes-search-chats" class="notes-search-input" placeholder="Search">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notes-list"></div>
|
|
|
|
<div class="n-p" style="display: none; height: -webkit-fill-available">
|
|
<div class="n-header">
|
|
<a href="javascript:not('0');" class="notes-back"><span><i class="fas fa-chevron-left"></i> Back</span></a>
|
|
<a href="javascript:createNote();"><span style="float: right"><i class="far fa-save"></i></span></a>
|
|
</div>
|
|
<div class="paylas">
|
|
<input type="text" maxlength="25" id="ttr" placeholder="Enter title..." />
|
|
|
|
<textarea id="tarea" placeholder="Enter description..."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gstr">
|
|
<div class="n-header">
|
|
<a href="javascript:not('0');" class="notes-back"><span><i class="fas fa-chevron-left"></i> Back</span></a>
|
|
<a href="javascript:updateNote();"><span style="float: right"><i class="far fa-save"></i></span></a>
|
|
</div>
|
|
<div class="paylas">
|
|
<input type="text" maxlength="25" id="gnc_ttr" placeholder="Enter title..." />
|
|
|
|
<textarea id="gnc_tarea" placeholder="Enter description..."></textarea>
|
|
|
|
<a href="javascript:silNot();" class="v"><i class="fas fa-trash fa-lg"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<a class="note-amount">5 notes</a>
|
|
<a href="javascript:not('1');"><span style="float: right"><i class="far fa-sticky-note"></i></span></a>
|
|
</footer>
|
|
</div>
|
|
|
|
<div class="application weather-app">
|
|
<header class="pt-7 text-center weather-header-title">
|
|
<h3>Los Santos</h3>
|
|
<h1 class="weather-degree">12°</h1>
|
|
<h4 class="weather-type">Clear</h4>
|
|
</header>
|
|
<section id="weather-container">
|
|
<article class="weather-tomorrow">
|
|
<header class="weather-hourly-forecast">
|
|
<i class="far fa-clock text-gray-200"></i>
|
|
<a class="text-gray-200">Hourly Forecast</a>
|
|
</header>
|
|
<div class="flex flex-col gap-2 items-center w-fit weather-hourly-forecast-now">
|
|
<a class="text-lg">Now</a>
|
|
<img src="./img/weather_app/night.png" width="32" height="32" alt="weather" class="weather-icon">
|
|
<a class="text-lg weather-degree">12°</a>
|
|
</div>
|
|
</article>
|
|
<section class="grid grid-cols-2 w-full gap-4">
|
|
<article class="weather_container weather-container-one">
|
|
<div>
|
|
<header class="weather-feels-like">
|
|
<i class="fas fa-temperature-high text-gray-200"></i>
|
|
<a class="text-gray-200 text-sm">FEELS LIKE</a>
|
|
</header>
|
|
<a class="text-xl weather-degree">12°</a>
|
|
</div>
|
|
<p>Similar to the actual temperature.</p>
|
|
</article>
|
|
<article class="weather_container weather-container-two">
|
|
<div>
|
|
<header class="weather-sunset">
|
|
<i class="fas fa-sun text-gray-200"></i>
|
|
<a class="text-sm">SUNSET</a>
|
|
|
|
</header>
|
|
<span class="text-3xl">
|
|
10:09
|
|
<a class="text-xl">PM</a>
|
|
</span>
|
|
</div>
|
|
<span class="weather-sunrise">
|
|
Sunrise 3:31
|
|
<a class="text-sm">PM</a>
|
|
</span>
|
|
</article>
|
|
</section>
|
|
<section class="grid grid-cols-2 w-full gap-4">
|
|
<article class="weather_container">
|
|
<div>
|
|
<header class="weather-wind-title">
|
|
<i class="fas fa-wind text-gray-200"></i>
|
|
<a class="text-gray-200 text-sm">WIND</a>
|
|
</header>
|
|
<span class="text-3xl">
|
|
<a class="weather-wind">10</a>
|
|
<a class="text-xl">km/h</a>
|
|
</span>
|
|
</div>
|
|
</article>
|
|
<article class="weather_container">
|
|
<div>
|
|
<header class="weather-precipitation-title">
|
|
<i class="fas fa-tint text-gray-200"></i>
|
|
<a class="text-gray-200 text-sm">PRECIPITATION</a>
|
|
</header>
|
|
<span class="text-3xl weather-last-day">
|
|
0
|
|
<a class="text-xl">mm</a>
|
|
<p class="text-medium">in the last 24h</p>
|
|
</span>
|
|
<p class="weather-expected">
|
|
0 mm expected in the next 24h.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="application crypto-app">
|
|
<div class="crypto-header">
|
|
|
|
<h1>BTC-USD</h1>
|
|
<h2>Bitcoin USD</h2>
|
|
|
|
<div class="crypto-header-values">
|
|
<div class="crypto-header-value crypto-portofolio">
|
|
<span>Wallet</span>
|
|
<p>0.2555</p>
|
|
</div>
|
|
<div class="crypto-header-value crypto-course">
|
|
<span>Value</span>
|
|
<p>$9000</p>
|
|
</div>
|
|
<div class="crypto-header-value crypto-volume">
|
|
<span>Volume</span>
|
|
<p>$2299.5</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="crypto-dark-background"></div>
|
|
|
|
<div class="crypto-action-page">
|
|
<div class="crypto-action-page-buy-crypto">
|
|
|
|
<div class="crypto-action-page-buy-crypto-footer">
|
|
<div class="crypto-action-page-buy-crypto-footer-button crypto-cancel" id="cancel-crypto">
|
|
<i class="fas fa-chevron-left"></i> Back
|
|
</div>
|
|
<div class="crypto-action-page-buy-crypto-footer-button" id="buy-crypto">
|
|
<a>Confirm</a>
|
|
</div>
|
|
</div>
|
|
<article>
|
|
<div class="crypto-action-page-header crypto-header-buy">Buy BTC</div>
|
|
<div class="crypto-action-page-wallet">Wallet: 1.000500 BTC('s)</div>
|
|
|
|
<i class="crypto-action-page-buy-crypto-input-coins-icon fas fa-coins"></i>
|
|
<input type="number" oninput="this.value = Math.abs(this.value)" class="crypto-action-page-buy-crypto-input-coins" required spellcheck="false" placeholder="1.000000" step="0.000001" min="0">
|
|
|
|
<i class="crypto-action-page-buy-crypto-input-money-icon fas fa-dollar-sign"></i>
|
|
<!-- <input type="number" oninput="this.value = Math.abs(this.value)" class="crypto-action-page-buy-crypto-input-money" required spellcheck="false" placeholder="1000" step="1.0" min="0"> -->
|
|
<div class="crypto-action-page-buy-crypto-input-money">0 Dollars</div>
|
|
</article>
|
|
</div>
|
|
<div class="crypto-action-page-sell-crypto">
|
|
|
|
<div class="crypto-action-page-buy-crypto-footer">
|
|
<div class="crypto-action-page-buy-crypto-footer-button crypto-cancel" id="cancel-crypto">
|
|
<i class="fas fa-chevron-left"></i> Back
|
|
</div>
|
|
<div class="crypto-action-page-buy-crypto-footer-button" id="sell-crypto">
|
|
<a>Confirm</a>
|
|
</div>
|
|
</div>
|
|
<article>
|
|
<div class="crypto-action-page-header crypto-header-sell">Sell BTC</div>
|
|
<div class="crypto-action-page-wallet">Wallet: 1.000500 BTC('s)</div>
|
|
|
|
<i class="crypto-action-page-sell-crypto-input-coins-icon fas fa-coins"></i>
|
|
<input type="number" oninput="this.value = Math.abs(this.value)" class="crypto-action-page-sell-crypto-input-coins" required spellcheck="false" placeholder="1.000000" step="0.000001" min="0">
|
|
|
|
<i class="crypto-action-page-sell-crypto-input-money-icon fas fa-dollar-sign"></i>
|
|
<!-- <input type="number" oninput="this.value = Math.abs(this.value)" class="crypto-action-page-sell-crypto-input-money" required spellcheck="false" placeholder="1000" step="1.0" min="0"> -->
|
|
<div class="crypto-action-page-sell-crypto-input-money">0</div>
|
|
</article>
|
|
</div>
|
|
<div class="crypto-action-page-transfer-crypto">
|
|
|
|
<div class="crypto-action-page-buy-crypto-footer">
|
|
<div class="crypto-action-page-buy-crypto-footer-button crypto-cancel" id="cancel-crypto">
|
|
<i class="fas fa-chevron-left"></i> Back
|
|
</div>
|
|
<div class="crypto-action-page-buy-crypto-footer-button" id="transfer-crypto">
|
|
<a>Confirm</a>
|
|
</div>
|
|
</div>
|
|
<article>
|
|
<div class="crypto-action-page-header crypto-header-transfer">Transfer BTC</div>
|
|
<div class="crypto-action-page-wallet">Wallet: 0 BTC('s)</div>
|
|
|
|
<i class="crypto-action-page-transfer-crypto-input-coins-icon fas fa-coins"></i>
|
|
<input type="number" oninput="this.value = Math.abs(this.value)" class="crypto-action-page-transfer-crypto-input-coins" required spellcheck="false" placeholder="1.000000" step="0.000001" min="0">
|
|
|
|
<i class="crypto-action-page-transfer-crypto-input-money-icon fas fa-address-book"></i>
|
|
<input type="texts" class="crypto-action-page-transfer-crypto-input-walletid" required spellcheck="false" placeholder="swIrm19228EeX">
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="crypto-graphic">
|
|
<h1>Graphic</h1>
|
|
<header class="flex flex-row items-center justify-between w-full">
|
|
<a class="ellipsis crypto-header-name">BTC('s)</a>
|
|
<span class="graph-info-small">+2.18 (3.71%)</span>
|
|
</header>
|
|
<div class="crypto-graph"></div>
|
|
<div class="graph-info">
|
|
<span class="graph-info-big">634.39</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="crypto-page">
|
|
<div class="cryptotab-general">
|
|
<h1>Trading</h1>
|
|
<div class="cryptotab-general-actions">
|
|
<div class="cryptotab-general-action" data-action="buy-crypto">
|
|
<i class="fas fa-shopping-basket" style="color:green"></i>
|
|
<span class="cryptotab-general-action-title buy-crypto-title">BUY</span>
|
|
<span class="cryptotab-general-action-description buy-crypto-desc">You can buy crypto here</span>
|
|
</div>
|
|
<div class="cryptotab-general-action" data-action="sell-crypto">
|
|
<i class="fas fa-hand-holding-usd" style="color:red"></i>
|
|
<span class="cryptotab-general-action-title sell-crypto-title">SELL</span>
|
|
<span class="cryptotab-general-action-description sell-crypto-desc">You can sell crypto here</span>
|
|
</div>
|
|
<div class="cryptotab-general-action" data-action="transfer-crypto">
|
|
<i class="fas fa-share" style="color:orange"></i>
|
|
<span class="cryptotab-general-action-title transfer-crypto-title">TRANSFER</span>
|
|
<span class="cryptotab-general-action-description transfer-crypto-desc">You can transfer crypto here</span>
|
|
</div>
|
|
</div>
|
|
<span class="crypto-walletid">Wallet: swIrm19228EeX</span>
|
|
</div>
|
|
|
|
<div class="cryptotab-transactions">
|
|
<h1>Transactions</h1>
|
|
<div class="cryptotab-transactions-list">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cryptotab-course">
|
|
<h1>Values</h1>
|
|
<div class="cryptotab-course-list">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="crypto-header-footer">
|
|
<div class="crypto-header-footer-item" data-cryptotab="general">
|
|
<p id="crypto-menu-general">General</p>
|
|
</div>
|
|
<div class="crypto-header-footer-item" data-cryptotab="transactions">
|
|
<p id="crypto-menu-transactions">Transactions</p>
|
|
</div>
|
|
<div class="crypto-header-footer-item" data-cryptotab="course">
|
|
<p id="crypto-menu-value">Value</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application yellowpages-app">
|
|
<article id="yellowpages-home-page" class="overflow-y h-full yellow-pages-screen">
|
|
<header class="pt-7 pb-3 margin-center w-full p-4 bg-yellow-500 p-6 sticky top-0">
|
|
<div class="bg-dark flex flex-row items-center w-full margin-center rounded-lg p-4">
|
|
<i class="fas fa-search text-muted"></i>
|
|
<input type="text" id="yellowpages-search-input" placeholder="Search for posts or numbers">
|
|
</div>
|
|
</header>
|
|
<section id="yellowpages-list" class="pt-3 p-6 flex flex-col gap-4">
|
|
<div class="bg-shadow p-4 flex flex-col gap-2 rounded-lg">
|
|
<span class="flex flex-row items-center gap-2">
|
|
<a class="text-muted">From</a>
|
|
<a class="text-yellow-500">(520) 586-9082</a>
|
|
</span>
|
|
<section class="flex items-center justify-between">
|
|
<nav class="flex flex-col gap-2" aria-label="">
|
|
<a class="font-semibold">Dino Restaurant</a>
|
|
<a class="text-muted">Come over at dino's restaurant and order some food!</a>
|
|
</nav>
|
|
<nav aria-label="">
|
|
<img class="rounded-lg" width="100" height="100" alt="" src="">
|
|
</nav>
|
|
</section>
|
|
<footer class="justify-between flex flex-row items-center mt-3">
|
|
<a class="font-semibold">5000$</a>
|
|
<div class="flex flex-row items-center gap-4">
|
|
<button class="flex items-center justify-center px-8 py-4 bg-yellow-500 rounded-lg">Call</button>
|
|
<button class="flex items-center justify-center px-8 py-4 bg-red-500 rounded-lg">
|
|
<i class="fas fa-trash-alt text-white-"></i>
|
|
</button>
|
|
</div>
|
|
|
|
</footer>
|
|
</div>
|
|
<div class="bg-shadow p-4 flex flex-col gap-2 rounded-lg">
|
|
<span class="flex flex-row items-center gap-2">
|
|
<a class="text-muted">From</a>
|
|
<a class="text-yellow-500">(520) 586-9082</a>
|
|
</span>
|
|
<section class="flex items-center justify-between">
|
|
<nav class="flex flex-col gap-2" aria-label="">
|
|
<a class="font-semibold">Dino Restaurant</a>
|
|
<a class="text-muted">Come over at dino's restaurant and order some food!</a>
|
|
</nav>
|
|
<nav aria-label="">
|
|
<img class="rounded-lg" width="100" height="100" alt="" src="">
|
|
</nav>
|
|
</section>
|
|
<footer class="self-end flex flex-row items-center gap-4 mt-3">
|
|
<button class="flex items-center justify-center px-8 py-4 bg-yellow-500 rounded-lg">Call</button>
|
|
<button class="flex items-center justify-center px-8 py-4 bg-red-500 rounded-lg">
|
|
<i class="fas fa-trash-alt text-white-"></i>
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
<div class="bg-shadow p-4 flex flex-col gap-2 rounded-lg">
|
|
<span class="flex flex-row items-center gap-2">
|
|
<a class="text-muted">From</a>
|
|
<a class="text-yellow-500">(520) 586-9082</a>
|
|
</span>
|
|
<section class="flex items-center justify-between">
|
|
<nav class="flex flex-col gap-2" aria-label="">
|
|
<a class="font-semibold">Dino Restaurant</a>
|
|
<a class="text-muted">Come over at dino's restaurant and order some food!</a>
|
|
</nav>
|
|
<nav aria-label="">
|
|
<img class="rounded-lg" width="100" height="100" alt="" src="">
|
|
</nav>
|
|
</section>
|
|
<footer class="self-end flex flex-row items-center gap-4 mt-3">
|
|
<button class="flex items-center justify-center px-8 py-4 bg-yellow-500 rounded-lg">Call</button>
|
|
<button class="flex items-center justify-center px-8 py-4 bg-red-500 rounded-lg">
|
|
<i class="fas fa-trash-alt text-white-"></i>
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
<div class="bg-shadow p-4 flex flex-col gap-2 rounded-lg">
|
|
<span class="flex flex-row items-center gap-2">
|
|
<a class="text-muted">From</a>
|
|
<a class="text-yellow-500">(520) 586-9082</a>
|
|
</span>
|
|
<section class="flex items-center justify-between">
|
|
<nav class="flex flex-col gap-2" aria-label="">
|
|
<a class="font-semibold">Dino Restaurant</a>
|
|
<a class="text-muted">Come over at dino's restaurant and order some food!</a>
|
|
</nav>
|
|
<nav aria-label="">
|
|
<img class="rounded-lg" width="100" height="100" alt="" src="">
|
|
</nav>
|
|
</section>
|
|
<footer class="self-end flex flex-row items-center gap-4 mt-3">
|
|
<button class="flex items-center justify-center px-8 py-4 bg-yellow-500 rounded-lg">Call</button>
|
|
<button class="flex items-center justify-center px-8 py-4 bg-red-500 rounded-lg">
|
|
<i class="fas fa-trash-alt text-white-"></i>
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
<div class="bg-shadow p-4 flex flex-col gap-2 rounded-lg">
|
|
<span class="flex flex-row items-center gap-2">
|
|
<a class="text-muted">From</a>
|
|
<a class="text-yellow-500">(520) 586-9082</a>
|
|
</span>
|
|
<section class="flex items-center justify-between">
|
|
<nav class="flex flex-col gap-2" aria-label="">
|
|
<a class="font-semibold">Dino Restaurant</a>
|
|
<a class="text-muted">Come over at dino's restaurant and order some food!</a>
|
|
</nav>
|
|
<nav aria-label="">
|
|
<img class="rounded-lg" width="100" height="100" alt="" src="">
|
|
</nav>
|
|
</section>
|
|
<footer class="self-end flex flex-row items-center gap-4 mt-3">
|
|
<button class="flex items-center justify-center px-8 py-4 bg-yellow-500 rounded-lg">Call</button>
|
|
<button class="flex items-center justify-center px-8 py-4 bg-red-500 rounded-lg">
|
|
<i class="fas fa-trash-alt text-white-"></i>
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
<div class="bg-shadow p-4 flex flex-col gap-2 rounded-lg">
|
|
<span class="flex flex-row items-center gap-2">
|
|
<a class="text-muted">From</a>
|
|
<a class="text-yellow-500">(520) 586-9082</a>
|
|
</span>
|
|
<section class="flex items-center justify-between">
|
|
<nav class="flex flex-col gap-2" aria-label="">
|
|
<a class="font-semibold">Dino Restaurant</a>
|
|
<a class="text-muted">Come over at dino's restaurant and order some food!</a>
|
|
</nav>
|
|
<nav aria-label="">
|
|
<img class="rounded-lg" width="100" height="100" alt="" src="">
|
|
</nav>
|
|
</section>
|
|
<footer class="self-end flex flex-row items-center gap-4 mt-3">
|
|
<button class="flex items-center justify-center px-8 py-4 bg-yellow-500 rounded-lg">Call</button>
|
|
<button class="flex items-center justify-center px-8 py-4 bg-red-500 rounded-lg">
|
|
<i class="fas fa-trash-alt text-white-"></i>
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
<div class="bg-shadow p-4 flex flex-col gap-2 rounded-lg">
|
|
<span class="flex flex-row items-center gap-2">
|
|
<a class="text-muted">From</a>
|
|
<a class="text-yellow-500">(520) 586-9082</a>
|
|
</span>
|
|
<section class="flex items-center justify-between">
|
|
<nav class="flex flex-col gap-2" aria-label="">
|
|
<a class="font-semibold">Dino Restaurant</a>
|
|
<a class="text-muted">Come over at dino's restaurant and order some food!</a>
|
|
</nav>
|
|
<nav aria-label="">
|
|
<img class="rounded-lg" width="100" height="100" alt="" src="">
|
|
</nav>
|
|
</section>
|
|
<footer class="self-end flex flex-row items-center gap-4 mt-3">
|
|
<button class="flex items-center justify-center px-8 py-4 bg-yellow-500 rounded-lg">Call</button>
|
|
<button class="flex items-center justify-center px-8 py-4 bg-red-500 rounded-lg">
|
|
<i class="fas fa-trash-alt text-white-"></i>
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
<footer id="create-yellow-page">
|
|
<button onclick="gotoNextPage('#yellowpages-home-page')" class="bg-yellow-500">
|
|
<i class="fas fa-plus fa-lg"></i>
|
|
</button>
|
|
</footer>
|
|
</article>
|
|
<article id="yellowpages-create-page" class="h-full yellow-pages-screen hide">
|
|
<header class="pt-7 pb-3 margin-center w-full p-4 bg-yellow-500 p-6 sticky top-0 flex justify-center">
|
|
<a class="text-blue-500 absolute left-2 cursor-pointer yellow-pages-cancel" onclick="gotoBackPage('#yellowpages-create-page')">Cancel</a>
|
|
<a class="font-semibold yellow-pages-new-post-title">New Post</a>
|
|
</header>
|
|
<section class="p-4 pt-3">
|
|
<form action="#" id="yellowpages-create-form" class="flex flex-col gap-4">
|
|
<div class="flex flex-col gap-2">
|
|
<label for="yellowpages-create-title" class="yp-post-title font-semibold text-white">Title</label>
|
|
<input type="text" id="yellowpages-create-title" name="title" placeholder="Title" class="bg-dark p-4 rounded-lg text-white" required>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label for="yellowpages-create-description" class="yp-post-desc font-semibold text-white">Description</label>
|
|
<textarea id="yellowpages-create-description" name="description" placeholder="Description" class="bg-dark p-4 rounded-lg text-white" required></textarea>
|
|
</div>
|
|
<div class="margin-center">
|
|
<img id="yellowpages-create-image-preview" class="rounded-lg cursor-pointer" width="250" height="170" alt="" src="./img/no-image.jpeg">
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label for="yellowpages-create-price" class="yp-post-price font-semibold text-white">Price</label>
|
|
<input type="number" id="yellowpages-create-price" name="price" placeholder="Price" class="bg-dark p-4 rounded-lg text-white">
|
|
</div>
|
|
<button class="margin-center py-4 px-6 bg-yellow-500 rounded-lg post-button-yp">Post</button>
|
|
</form>
|
|
</section>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="application mail-app">
|
|
<section id="mail-login-window" class="mail-screen">
|
|
<article id="mail-register-firstscreen" class="mail-screen items-center justify-center">
|
|
<img src="./img/app_details/mail_header.png">
|
|
<h1>Mail</h1>
|
|
<a>Welcome to Mail app, always remember to keep your account secure with a good password and not share your data with anyone.</a>
|
|
<button class="instagram-blue-button mail-create-acc" onclick="gotoNextPage('mailCreateAccountPage')">Create a new account</button>
|
|
<button class="instagram-login-page mail-login-acc" onclick="gotoNextPage('mailLogInPage')">Log in</button>
|
|
</article>
|
|
<article id="mail-login-screen" class="mail-screen items-center justify-center hide">
|
|
<img src="./img/app_details/mail_header_log.png">
|
|
<h1>Log in</h1>
|
|
<h2>Log in with your Mail account or recover your account, remember not to share this information with anyone</h2>
|
|
<form action="#" class="w-full items-center flex flex-col gap-4 mail-login-form">
|
|
<input id="mail-mail-input" type="text" name="mail" placeholder="Mail" class="instagram-input w-full" required>
|
|
<input id="mail-password-input" type="password" name="password" placeholder="Password" class="instagram-input w-full" required>
|
|
<a class="insta-text self-end cursor-pointer mail-forgot-acc" onclick="gotoNextPage('mailPasswordScreen')">Forgot password?</a>
|
|
<button class="instagram-blue-button mail-login">Log in</button>
|
|
</form>
|
|
<footer class="flex flex-col items-center justify-center mail-login-form-text mail-create-account">
|
|
<p class="text-sm -muted">Don't have an account? <a class="insta-text" onclick="gotoNextPage('#mail-login-screen')">Sign up</a></p>
|
|
</footer>
|
|
</article>
|
|
<section id="mail-forgot-password-screen" class="mail-screen hide">
|
|
<header class="twitter-register-screen-header">
|
|
<a class="absolute left-2 top-0 pt-8 w-full cursor-pointer mail-cancel-recovery" onclick="gotoBackPage('#mail-forgot-password-screen')">Cancel</a>
|
|
</header>
|
|
<section id="mail-forgot-password-accounts" class="overflow-y gap-4 flex flex-col pt-4 mt-5"></section>
|
|
</section>
|
|
<section id="mail-register-screen">
|
|
<article id="mail-register-screen-first" class="mail-register-page hide">
|
|
<header class="mail-register-header">
|
|
<i class="fas fa-chevron-left fa-lg"></i>
|
|
<h4>Enter Mail</h4>
|
|
</header>
|
|
<form action="#" class="w-full items-center flex flex-col gap-6 p-4 mail-genera-info-text">
|
|
<p class="text-sm text-center text-muted mail-create-your-prf">Create your perfect email</p>
|
|
<div class="email-input-container">
|
|
<input type="text" name="mail" placeholder="Correo" class="email-input" required>
|
|
<div class="email-suffix">@icloud.com</div>
|
|
</div>
|
|
<button class="instagram-blue-button instagram-register mail-next">Next</button>
|
|
</form>
|
|
<footer class="mail-login-form-text mail-already-account">
|
|
<p class="text-sm text-muted mail-genera-info-text">Already have an account? <a class="insta-text" onclick="gotoBackPage('#mail-register-screen-first')">Sign In.</a></p>
|
|
</footer>
|
|
</article>
|
|
<article id="mail-register-screen-second" class="mail-register-page hide">
|
|
<header class="mail-register-header mail-header-name">
|
|
<i class="fas fa-chevron-left fa-lg"></i>
|
|
<h4>Enter your name</h4>
|
|
</header>
|
|
<form action="#" class="w-full items-center flex flex-col gap-6 p-4">
|
|
<input type="text" name="name" placeholder="Full name" class="instagram-input w-full mail-name-input" required>
|
|
<button class="instagram-blue-button instagram-register mail-next">Next</button>
|
|
<p class="text-sm text-center text-muted mail-add-your-name">Add your name</p>
|
|
</form>
|
|
</article>
|
|
<article id="mail-register-screen-third" class="mail-register-page hide mail-header-pass">
|
|
<header class="mail-register-header">
|
|
<i class="fas fa-chevron-left fa-lg"></i>
|
|
<h4>Create a password</h4>
|
|
</header>
|
|
<form action="#" class="w-full items-center flex flex-col gap-6 p-4 mail-password-input">
|
|
<input type="password" name="password" placeholder="Password" class="instagram-input w-full" required>
|
|
<button class="instagram-blue-button instagram-register mail-next">Next</button>
|
|
<p class="text-sm text-center text-muted mail-add-your-pass">Add your password</p>
|
|
</form>
|
|
</article>
|
|
</section>
|
|
</section>
|
|
<section id="mail-window" class="mail-screen hide">
|
|
<div class="mail-home h-full flex-col">
|
|
<div class="mail-header flex flex-row items-center justify-between pt-8 px-4">
|
|
<div class='flex flex-col'>
|
|
<span id="mail-header-text">Inbox</span>
|
|
<span id="mail-header-mail">quasarstore@icloud.com</span>
|
|
</div>
|
|
<i class="fas fa-paper-plane fa-lg" onclick="openSendMailPage()" id="mail-send"></i>
|
|
</div>
|
|
|
|
<div id="mail-search-all" class="flex flex-row items-center gap-2 w-full bg-dark p-4 rounded-xl">
|
|
<i class="fas fa-search fa-lg text-muted"></i>
|
|
<input type="text" id="mail-search-chats" class="mail-search-input" placeholder="Search">
|
|
</div>
|
|
|
|
<div class="mail-list"></div>
|
|
</div>
|
|
<div id="send-mail-container" class="absolute top-0 left-0 w-full h-full bg-white z-20 hide">
|
|
<header class="pt-8 p-4 flex w-full justify-between items-center">
|
|
<i class="fas fa-chevron-left text-black fa-lg" onclick="closeSendMailPage()"></i>
|
|
<i class="fas fa-paper-plane text-black fa-lg" onclick="sendMail()"></i>
|
|
</header>
|
|
<div id="mail-content" class="flex flex-col pt-4 p-4 gap-4 h-full">
|
|
<div class="border-b">
|
|
<span class="mail-create-to">To:</span>
|
|
<input type="text" id="mail-to" placeholder="">
|
|
</div>
|
|
<div class="border-b">
|
|
<span class="mail-create-subject">Subject:</span>
|
|
<input type="text" id="mail-subject" placeholder="">
|
|
</div>
|
|
<textarea id="mail-message" placeholder="Message" rows="10" cols="50"></textarea>
|
|
<footer class="flex flex-row gap-4 overflow-y flex-wrap max-h-55">
|
|
<section class="empty-media bg-dark flex items-center justify-center" onclick="addMailMedia()">
|
|
<i class="fa-solid fa-images text-muted text-4xl"></i>
|
|
</section>
|
|
<section id="mail-medias" class="flex flex-row items-center gap-4 overflow-y flex-wrap"></section>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="opened-mail">
|
|
<div class="opened-mail-header">
|
|
<div class="mail-back">
|
|
<i class="fas fa-chevron-left" id="mail-back"></i>
|
|
</div>
|
|
<div class="mail-title">
|
|
<p>Topic</p>
|
|
</div>
|
|
<div class="mail-subject">
|
|
<p>Topic</p>
|
|
</div>
|
|
<div class="mail-sender">
|
|
<p>pepe_peperoni@icloud.com</p>
|
|
</div>
|
|
<div class="mail-date">
|
|
<p>19 February 2019 08:19</p>
|
|
</div>
|
|
<div class="mail-spacing"></div>
|
|
<article>
|
|
<div class="mail-content">
|
|
<p>
|
|
This is a test mail and is therefore not fully displayed
|
|
because that is what I am testing.
|
|
</p>
|
|
</div>
|
|
<div class="mail-image-media">
|
|
<h3>Medias</h3>
|
|
<section id="mail-image-medias" class="flex flex-row flex-wrap gap-4 max-h-full overflow-y">
|
|
<div class="relative">
|
|
<img class="mail-media" src="https://i.pinimg.com/564x/09/47/c1/0947c19a435f2c94db9a654d01f5679a.jpg" alt="">
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="opened-mail-footer">
|
|
<div class="opened-mail-footer-item">
|
|
<i class="fas fa-check-circle" id="accept-mail"></i>
|
|
<span>Accept</span>
|
|
</div>
|
|
<div class="opened-mail-footer-item">
|
|
<i class="fas fa-trash-alt" id="remove-mail"></i>
|
|
<span>Delete</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section id="mail-settings-page" class="mail-screen z-10 hide">
|
|
<header class="flex flex-row items-center justify-center sticky top-0 w-full bg-black p-4 pt-8 border-b">
|
|
<a id="mail-edit-prof">Edit profile</a>
|
|
<a class="blue_text absolute right-2 mail-edit-prof-done" onclick="editMailProfile()">Done</a>
|
|
</header>
|
|
<form action="#" id="mail-settings-form" class="p-4">
|
|
<div class="flex flex-row gap-2 items-center justify-center pt-4 pb-4 border-b mail-name-edt">
|
|
<a class="w-54">Name</a>
|
|
<input id="mail-edit-name" class="bg-black text-white w-full mail-name" type="text" placeholder="Name" />
|
|
</div>
|
|
<div class="flex flex-row gap-2 items-center justify-center pt-4 pb-4 border-b mail-pass-edt">
|
|
<a class="w-54">Password</a>
|
|
<input id="mail-edit-password" class="bg-black text-white w-full" type="password" placeholder="Password" />
|
|
</div>
|
|
</form>
|
|
<div class="mail-setting-items">
|
|
<button onclick="mailDeleteAccount()" class="instagram-dark-btn mail-delete-acc red_text w-full mt-4">Delete Account</button>
|
|
<button onclick="logoutMailAccount()" class="instagram-dark-btn mail-logout-acc red_text w-full mt-4">Logout</button>
|
|
</div>
|
|
</section>
|
|
<footer id="mail-footer" class="absolute bottom-0 w-full h-10 flex z-10 flex-row justify-around items-center pb-5 bg-black border-t">
|
|
<button id="mail-home" class="w-40 h-40" onclick="twitterFooterRouter(this, '.mail-home')">
|
|
<i class="fas fa-home fa-lg current twitter-footer-icon"></i>
|
|
<p>Home</p>
|
|
</button>
|
|
<button id="mail-settings" class="w-40 h-40" onclick="twitterFooterRouter(this, '#mail-settings-page')">
|
|
<i class="fa-sharp fa-solid fa-user-gear fa-lg twitter-footer-icon"></i>
|
|
<p>Settings</p>
|
|
</button>
|
|
</footer>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="application messages-app">
|
|
<div id="messages-app-newMessage-container">
|
|
<div id="messages-app-newMessage">
|
|
<header>
|
|
<a id="messages-app-cancel" onclick="newMessageBack()">Cancel</a>
|
|
<a id="messages-app-newMessageName">New Message</a>
|
|
</header>
|
|
<div id="messages-app-newMessageWho">
|
|
<a>Who:</a>
|
|
<input type="text" autocomplete="off" id="createNewMessage" oninput="CheckNewMessage(this, 'messages-app-newMessageContactName', 'messages-app-newMessageContact')" data-phone="">
|
|
</div>
|
|
<div id="messages-app-newMessageContent">
|
|
<input type="text" autocomplete="off" id="messages-app-newMessageContentInput" placeholder="Message" style="margin-left: 5; width: 90%;">
|
|
<img src="./img/message_app/sendMessage.png" onclick="addNewMessage()">
|
|
</div>
|
|
<div id="messages-app-newMessageContacts"></div>
|
|
</div>
|
|
</div>
|
|
<div id="messages-app-main" class="" style="position: absolute; width: 100%; height: 100%; transition: transform .4s; transform: translateX(0)">
|
|
<a id="messages-app-mainHead">Messages</a>
|
|
<img id="messages-app-createMessage" src="./img/message_app/newMessage.png" onclick="openCreateMessageWindow()">
|
|
<div id="messages-app-searchContainer">
|
|
<img src="./img/message_app/search.png">
|
|
<textarea id="messages-search" placeholder="Search" oninput="filterMessages(this)"></textarea>
|
|
</div>
|
|
<div id="messages-app-body"></div>
|
|
</div>
|
|
<div id="messages-app-content" class="hide" data-back_name="Back" data-prev_screen="#messages-app-main" style="position: absolute; width: 100%; height: 100%; transition: transform .4s; transform: translateX(100%)">
|
|
<div id="back-container" style="top: 8%;" onclick="MessageBack('#messages-app-main', '#messages-app-content')">
|
|
<img id="back_icon" src="./img/back.png">
|
|
</div>
|
|
<div id="messages-app-content-head">
|
|
<img id="messages-app-content-head-pp">
|
|
<!-- settings -->
|
|
<i class="fas fa-ellipsis-h" onclick="MessagesSettings()" id="messages-settings"></i>
|
|
<a id="messages-app-content-head-name"></a>
|
|
</div>
|
|
<div id="messages-app-content-body"></div>
|
|
<div id="messages-app-content-foot">
|
|
<!-- more icon -->
|
|
<div id="messages-app-content-foot-alternativeMessageContainer">
|
|
<img class="messages-app-content-foot-alternative" onclick="MessageOpenPopup()" src="./img/message_app/camera.png">
|
|
<img class="messages-app-content-foot-alternative" onclick="SendMessage(true)" src="./img/message_app/location.png">
|
|
</div>
|
|
<div id="messages-app-content-foot-sendMessageContainer">
|
|
<input id="messages-app-content-foot-message" placeholder="iMessage"></input>
|
|
<!-- <img id="messages-app-content-foot-sendMessageContentImg" src="./img/message_app/sendMessage.png" onclick="SendMessage()"> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application racing-app">
|
|
<div class="racing-overview">
|
|
<div class="racing-app-header">
|
|
<p>Racing</p>
|
|
<h1>Resumen y Eventos</h1>
|
|
</div>
|
|
|
|
<h2>RACING<h2></h2>
|
|
|
|
<div class="racing-races">
|
|
</div>
|
|
|
|
<div class="racing-buttons">
|
|
<div class="racing-button" id="setup-race">
|
|
<i class="fas fa-flag-checkered"></i>
|
|
</div>
|
|
<div class="racing-button" id="leaderboards-race">
|
|
<i class="fas fa-trophy"></i>
|
|
<a>SCORE</a>
|
|
</div>
|
|
<div class="racing-button" id="create-race">
|
|
<i class="fas fa-plus"></i>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="racing-setup">
|
|
<div class="racing-app-header">
|
|
<p>Racing</p>
|
|
<h1>Crear una carrera</h1>
|
|
</div>
|
|
|
|
<h2>RACING<h2></h2>
|
|
|
|
<article>
|
|
<span id="racing-setup-trackheader">Race Track</span>
|
|
<div class="dropdown">
|
|
<div class="select track-select">
|
|
<span>Select a Track</span>
|
|
<i class="fa fa-chevron-left"></i>
|
|
</div>
|
|
<input type="hidden" name="gender">
|
|
<ul class="dropdown-menu"></ul>
|
|
</div>
|
|
|
|
<span id="racing-setup-lapsheader">Laps</span>
|
|
<input type="number" min="0" oninput="this.value = Math.abs(this.value)" class="racing-setup-laps" required spellcheck="false" placeholder="Number of laps (0 is Sprint)">
|
|
|
|
<span id="racing-setup-informationheader">Race Information</span>
|
|
<div class="racing-setup-information-distance">Select a Track</div>
|
|
<div class="racing-setup-information-creator">Select a Track</div>
|
|
<div class="racing-setup-information-wr">Select a Track</div>
|
|
|
|
<div class="racing-setup-buttons">
|
|
<div class="racing-setup-button" id="setup-race-accept" data-toggle="race-setup" data-placement="bottom" title="Accept">
|
|
<i class="fa-solid fa-check"></i>
|
|
</div>
|
|
<div class="racing-setup-button" id="setup-race-cancel" data-toggle="race-setup" data-placement="bottom" title="Cancel">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="racing-create">
|
|
<div class="racing-create-block">
|
|
<span id="racing-create-tracknameheader">Track Name</span>
|
|
<input type="text" class="racing-create-trackname" required spellcheck="false" placeholder="Name of your track">
|
|
|
|
<div class="racing-create-buttons">
|
|
<div class="racing-create-button" id="racing-create-accept">
|
|
<a>Accept</a>
|
|
</div>
|
|
<div class="racing-create-button" id="racing-create-cancel">
|
|
<a>Cancel</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="racing-leaderboard">
|
|
<div class="racing-app-header">
|
|
<p>Racing - Leaderboards</p>
|
|
</div>
|
|
|
|
<span id="racing-leaderboards-header">Last Tracks</span>
|
|
<div class="racing-leaderboards">
|
|
</div>
|
|
|
|
<div class="racing-leaderboard-details">
|
|
<div class="racing-leaderboard-details-block">
|
|
<div class="racing-leaderboard-details-back"><i class="fas fa-times-circle"></i>
|
|
</div>
|
|
<div class="racing-leaderboard-details-block-trackname"><i class="fas fa-flag-checkered"></i> Prison</div>
|
|
<span id="leaderboard-list-header">
|
|
<span id="racer-name" style="float: left;">Racer</span>
|
|
<span style="margin-left: 52px;">
|
|
<i class="fas fa-stopwatch"></i>
|
|
</span>
|
|
<span style="float: right; margin-right: 20px;">#</span>
|
|
</span>
|
|
<div class="racing-leaderboard-details-block-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="racing-leaderboards-button">
|
|
<i class="fas fa-times-circle"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application market-app">
|
|
<section id="market-login-window">
|
|
<article id="market-register-firstscreen" class="w-full h-full items-center justify-center gap-8 flex flex-col absolute left-0 bg-black">
|
|
<header class="market-register-screen-header absolute top-0">
|
|
<i class="fas fa-shopping-bag market-icon fa-2xl"></i>
|
|
</header>
|
|
<h2>Contact with your favourite market.</h2>
|
|
<article class="twitter-white-btn cursor-pointer" onclick="gotoNextPage('marketGotoCreateAccount')">Create account</article>
|
|
<footer class="absolute left-0 bottom-5 w-full flex items-center justify-center market-login-footer">
|
|
<a class="text-muted" onclick="gotoNextPage('#market-register-firstscreen')">Have an account already? <span class="blue_text">Log in</span></a>
|
|
</footer>
|
|
</article>
|
|
<section id="market-register-screen" class="market-screen p-3 hide">
|
|
<article id="market-register-screen-first" class="market-screen market-register-screen">
|
|
<header class="market-register-screen-header">
|
|
<a class="absolute left-2 top-0 pt-8 w-full cursor-pointer market-cancel" onclick="gotoBackPage('#market-register-screen')">Cancel</a>
|
|
<i class="fas fa-shopping-bag market-icon fa-2xl"></i>
|
|
</header>
|
|
<h3 class="pb-4">Create your account</h3>
|
|
<form action="#" id="market-create-account-form" class="market-form">
|
|
<input class="market-register-name" type="text" name="name" placeholder="Name" required />
|
|
<input class="market-register-phone" type="text" name="phone" placeholder="Phone Number" title="Phone number must be 10 character" required />
|
|
<button class="twitter-blue-btn absolute bottom-5 market-register-sign">Sign Up</button>
|
|
</form>
|
|
<p class="text-muted pt-4 pb-5 market-create-info">
|
|
This will not be shown publicly. Confirm your own age, even if this account is
|
|
for a
|
|
business, a pet, or something else.
|
|
</p>
|
|
</article>
|
|
<article id="market-register-screen-second" class="market-screen hide market-register-screen market-register-screen">
|
|
<header class="market-register-screen-header">
|
|
<i class="fas fa-arrow-left absolute left-2 top-0 pt-8 w-full"></i>
|
|
<i class="fas fa-shopping-bag market-icon fa-2xl"></i>
|
|
</header>
|
|
<h3 class="pb-4">We sent you a code</h3>
|
|
<p class="text-muted pb-6">Enter it below to verify your phone number.</p>
|
|
<form action="#" id="market-verify-phone-form" class="market-form">
|
|
<input class="market-verify-code" type="text" name="code" placeholder="Code" required />
|
|
<button class="twitter-blue-btn absolute bottom-5 market-next-button">Next</button>
|
|
</form>
|
|
</article>
|
|
<article id="market-register-screen-third" class="market-screen hide market-register-screen market-register-screen">
|
|
<header class="market-register-screen-header">
|
|
<i class="fas fa-shopping-bag market-icon fa-2xl"></i>
|
|
</header>
|
|
<h3 class="pb-4">You'll need a password</h3>
|
|
<p class="text-muted pb-6"> Make sure it's at least 8 characters or more.</p>
|
|
<form action="#" id="market-create-password-form" class="market-form">
|
|
<input class="market-password-code" type="password" name="password" minlength="8" placeholder="Password" required />
|
|
<button class="twitter-blue-btn absolute bottom-5 market-next-button">Next</button>
|
|
</form>
|
|
</article>
|
|
<article id="market-register-screen-fourth" class="market-screen hide market-register-screen market-register-screen">
|
|
<header class="market-register-screen-header">
|
|
<i class="fas fa-shopping-bag market-icon fa-2xl"></i>
|
|
</header>
|
|
<h3 class="pb-4">What should we call you?</h3>
|
|
<p class="text-muted pb-6">Choose a username. You can always change it later.</p>
|
|
<form action="#" id="market-create-username-form" class="market-form">
|
|
<input class="market-username-code" type="text" name="username" placeholder="Username" required pattern="[A-Za-z0-9]+" />
|
|
<button class="twitter-blue-btn absolute bottom-5 market-next-button-final">Create Your Account</button>
|
|
</form>
|
|
</section>
|
|
<section id="market-login-screen" class="market-screen hide">
|
|
<header class="market-register-screen-header">
|
|
<a class="absolute left-2 top-0 pt-8 w-full cursor-pointer market-cancel" onclick="gotoBackPage('#market-login-screen')">Cancel</a>
|
|
<i class="fas fa-shopping-bag market-icon fa-2xl"></i>
|
|
</header>
|
|
<h3 class="pb-4">Log in to Market</h3>
|
|
<form action="#" id="market-login-form" class="market-form">
|
|
<input type="text" name="username" id="market-username-input" placeholder="Username" required />
|
|
<input type="password" name="password" id="market-password-input" placeholder="Password" required />
|
|
<button class="twitter-blue-btn absolute bottom-5 market-login-button">Log in</button>
|
|
</form>
|
|
<!-- forgot password? -->
|
|
<a class="text-red-500 pt-4 pb-5 self-end mr-3 cursor-pointer market-forgot-password" onclick="gotoNextPage('marketPasswordScreen')">Forgot password?</a>
|
|
</section>
|
|
<section id="market-forgot-password-screen" class="market-screen hide">
|
|
<header class="market-register-screen-header">
|
|
<a class="absolute left-2 top-0 pt-8 w-full cursor-pointer market-cancel" onclick="gotoBackPage('#market-forgot-password-screen')">Cancel</a>
|
|
<i class="fas fa-shopping-bag market-icon fa-2xl"></i>
|
|
</header>
|
|
<section id="market-forgot-password-accounts" class="overflow-y gap-4 flex flex-col pt-4"></section>
|
|
</section>
|
|
</section>
|
|
<section id="market-window" class="market-screen hide">
|
|
<article id="market-home-page" class="market-screen h-90">
|
|
<header class="market-header">
|
|
<h4>Market</h4>
|
|
</header>
|
|
<article id="market-markets" class="flex flex-col gap-4 overflow-y w-full h-86">
|
|
<section class="flex flex-row justify-between border-b hide-border-last pb-3 cursor-pointer" onclick="gotoNextPage('gotoMarketPage')">
|
|
<div class="flex flex-row gap-4 items-center">
|
|
<img width="100" height="100px" class="rounded-xl" src="" />
|
|
<div class="flex flex-col gap-2">
|
|
<span class="flex flex-row items-center gap-2">
|
|
<div class="market-rating" data-rating="2.5"></div>
|
|
<a class="text-sm">3.0</a>
|
|
</span>
|
|
|
|
<a class="text-lg">Los Santos Police Department</a>
|
|
<a class="text-green-500">Active</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
</article>
|
|
<article id="market-opened-market" class="market-screen h-full z-20 hide">
|
|
<header class="market-header martketplace-back border-b pb-4 justify-default">
|
|
<div id="market-back" onclick="gotoBackPage('#market-opened-market')"><i class="fa-solid fa-chevron-left"></i> Back</div>
|
|
<!-- <i onclick="gotoBackPage('#market-opened-market')" class="fas fa-arrow-left cursor-pointer ml-4"></i> -->
|
|
</header>
|
|
<section>
|
|
<img id="market-opened-image" class="w-full" style="height: 130px" src="" />
|
|
<div class="margin-center w-full">
|
|
<header class="border-b p-4 pb-3 ">
|
|
<div>
|
|
<a id="market-opened-name">Los Santos Police Department</a>
|
|
<p id="market-opened-description" class="text-muted text-sm">Los Santos Police Department some descriptions bla bla</p>
|
|
</div>
|
|
<div class="flex flex-row gap-2 items-center">
|
|
<div id="market-opened-rating" data-rating="2.5"></div>
|
|
<a id="market-opened-rating-count" class="text-sm">2.5</a>
|
|
</div>
|
|
</header>
|
|
<article class="flex flex-col gap-4 p-4 border-b pb-3">
|
|
<div class="flex flex-row">
|
|
<span>
|
|
<a>Status: </a>
|
|
<i id="market-opened-status" class="fas fa-check-circle text-green-500"></i>
|
|
</span>
|
|
</div>
|
|
<div class="flex flex-row gap-2">
|
|
<i class="fas fa-users fa-lg"></i>
|
|
<span>
|
|
<a class="market-active-workers">Active Workers: </a>
|
|
<a id="market-opened-active-workers">3</a>
|
|
</span>
|
|
</div>
|
|
<section class="flex flex-row items-center gap-6 flex-wrap martket-open-buttons">
|
|
<div onclick="marketCall()" class="flex flex-row bg-blue-500 text-white rounded-lg p-5 gap-2 w-max">
|
|
<i class="fas fa-phone fa-lg"></i>
|
|
<a class="market-btn-call">Call</a>
|
|
</div>
|
|
<div onclick="marketSendMessageToMarket()" class="flex flex-row bg-blue-500 text-white rounded-lg p-5 gap-2 w-max">
|
|
<i class="fas fa-envelope fa-lg"></i>
|
|
<a class="market-btn-message">Message</a>
|
|
</div>
|
|
<div onclick="marketSetWaypoint()" class="flex flex-row bg-blue-500 text-white rounded-lg p-5 gap-2 w-max">
|
|
<i class="fas fa-map-marker-alt fa-lg"></i>
|
|
<a class="market-btn-point">Set the waypoint</a>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
<footer class="flex mt-3 items-center justify-center" id="market-give-rating-container">
|
|
<div id="market-give-rating"></div>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
<article id="market-messages-container" class="market-screen h-90 hide">
|
|
<section id="market-messages-page" class="market-screen">
|
|
<header class="market-header flex-col w-full">
|
|
<article class="flex flex-row items-center justify-center w-70">
|
|
<h4>Messages</h4>
|
|
</article>
|
|
</header>
|
|
<section id="market-messages-list" class="flex flex-col gap-4 overflow-y">
|
|
<article onclick="gotoNextPage('#market-messages-page')" class="flex flex-row items-center gap-2 border-b pb-3 cursor-pointer">
|
|
<img class="rounded-full" src="" width="48" height="48">
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-row items-center gap-1">
|
|
<a>Los Santos Police Department</a>
|
|
</div>
|
|
<p class="text-muted">You: Wassuppp</p>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</section>
|
|
<section id="market-chat" class="market-screen hide">
|
|
<header class="market-header pb-4" onclick="gotoBackPage('#market-chat')">
|
|
<i class="fas fa-chevron-left fa-lg absolute left-4"></i>
|
|
<div class="flex flex-col gap-2 justify-center items-center">
|
|
<img id="market-chat-avatar" class="rounded-full" src="" width="36" height="36">
|
|
<div class="flex flex-col justify-center">
|
|
<a id="market-chat-name"></a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<article id="market-chat-messages" class="flex flex-col gap-4 p-4 overflow-y"></article>
|
|
<footer id="market-chat-input-container" class="flex flex-row gap-4 p-4 absolute bottom-0 w-full items-center border-t pt-4">
|
|
<fas onclick="OpenMarketAlternativeMenu('marketMessage')" class="fas fa-ellipsis-h fa-lg cursor-pointer"></fas>
|
|
<input type="text" id="market-chat-input" class="w-full rounded-full flex items-center justify-between" placeholder="Message...">
|
|
</footer>
|
|
</section>
|
|
</article>
|
|
<article id="market-self-profile" class="market-screen hide">
|
|
<header class="market-header">
|
|
<h4 class="market-self-profile">Profile Informations</h4>
|
|
<a class="blue_text absolute right-2 market-done-btn" onclick="editMarketProfile()">Done</a>
|
|
</header>
|
|
<section class="flex flex-row items-center justify-around border-b pb-4 edit-avatar-market">
|
|
<div class="flex flex-col gap-2 items-center justify-center pt-4" onclick="changeMarketAvatar()">
|
|
<img id="market-edit-avatar" class="rounded-full" width="64" height="64" src="" />
|
|
<a class="blue_text">Edit Avatar</a>
|
|
</div>
|
|
</section>
|
|
<form id="market-self-profile-form" class="flex flex-col px-4">
|
|
<div class="flex flex-row gap-2 items-center pt-4 pb-4 border-b">
|
|
<a class="w-54 market-name-opt">Name</a>
|
|
<input type="text" id="market-self-profile-name" class="rounded-full" placeholder="Name">
|
|
</div>
|
|
<div class="flex flex-row gap-2 items-center pt-4 pb-4 border-b">
|
|
<a class="w-54 market-user-opt">Username</a>
|
|
<input type="text" id="market-self-profile-username" class="rounded-full" placeholder="Username">
|
|
</div>
|
|
<div class="flex flex-row gap-2 items-center pt-4 pb-4 border-b">
|
|
<a class="w-54 market-pass-opt">Password</a>
|
|
<input type="password" id="market-self-profile-password" class="rounded-full" placeholder="Password">
|
|
</div>
|
|
</form>
|
|
<div>
|
|
<button onclick="marketDeleteAccount()" class="instagram-dark-btn red_text w-full mt-4 market-delete-account">Delete Account</button>
|
|
<button onclick="logoutMarketAccount()" class="instagram-dark-btn text-green-500 w-full mt-4 market-logout-account">Logout</button>
|
|
<button id="market-toggle-duty-button" onclick="toggleDutyMarket()" class="instagram-dark-btn text-blue-500 w-full mt-4 market-duty-account">Go On Duty</button>
|
|
</div>
|
|
</article>
|
|
<article id="market-interactions-container" class="market-screen hide">
|
|
<header class="market-header flex-col w-full">
|
|
<article class="flex flex-row items-center justify-center w-70">
|
|
<h4 class="market-interactions-title">Interactions</h4>
|
|
</article>
|
|
</header>
|
|
<div class="market-inter-box w-full p-4 overflow-y h-75 overflow-y">
|
|
<a class="market-money-interactions text-lg">Money Interactions</a>
|
|
<section class="market-inter-section flex flex-col bg-container-dark rounded-lg px-4 pt-4 mb-4 mt-2">
|
|
<a class="market-money-balance text-sm text-muted">Balance</a>
|
|
<a id="market-balance">$5000</a>
|
|
<div class="border-t grid grid-cols-2 w-full h-4rem">
|
|
<button onclick="marketWithdrawMoney()" class="market-withdraw border-r">Withdraw</button>
|
|
<button onclick="marketDepositMoney()" class="market-deposit border-r">Deposit</button>
|
|
</div>
|
|
</section>
|
|
<a class="market-employee-interactions text-lg">Employee Interactions</a>
|
|
<section class="market-employee-box flex flex-col bg-container-dark rounded-lg px-4 pt-4 mt-2">
|
|
<button onclick="marketHireEmployee()" class="market-take-employee text-left mb-3">Take Employee</button>
|
|
<ul id="market-interaction-employee-list" class="w-full flex flex-col gap-4"></ul>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<footer id="market-footer" class="absolute bottom-0 w-full h-10 flex z-10 flex-row justify-around items-center pb-5 bg-black border-t">
|
|
<button id="market-home" class="w-40 h-40" onclick="marketFooterRouter(this, '#market-home-page')">
|
|
<i class="fas fa-home fa-lg current market-footer-icon"></i>
|
|
</button>
|
|
<button id="market-messages" class="w-40 h-40" onclick="marketFooterRouter(this, '#market-messages-container')">
|
|
<i class="fas fa-envelope fa-lg market-footer-icon"></i>
|
|
</button>
|
|
<button id="market-user-self-profile" class="w-40 h-40" onclick="marketFooterRouter(this, '#market-self-profile')">
|
|
<i class="fas fa-user fa-lg market-footer-icon"></i>
|
|
</button>
|
|
<button id="market-interaction" class="w-40 h-40" onclick="marketFooterRouter(this, '#market-interactions-container')">
|
|
<i class="fa-solid fa-bars fa-lg market-footer-icon"></i>
|
|
</button>
|
|
</footer>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="application twitter-app">
|
|
<section id="twitter-login-window">
|
|
<article id="twitter-register-firstscreen" class="w-full h-full items-center justify-center gap-8 flex flex-col absolute left-0 bg-black">
|
|
<header class="twitter-register-screen-header absolute top-0">
|
|
<img src="../html/img/twitter/logo.png" width="42" height="42" />
|
|
</header>
|
|
<h2>See what's happening in the world right now.</h2>
|
|
<article class="twitter-white-btn cursor-pointer" onclick="gotoNextPage('twitterGotoCreateAccount')">Create account</article>
|
|
<footer class="absolute left-0 bottom-5 w-full flex items-center justify-center">
|
|
<a class="text-muted" onclick="gotoNextPage('#twitter-register-firstscreen')">Have an account
|
|
already? <span class="blue_text">Log in</span></a>
|
|
</footer>
|
|
</article>
|
|
<section id="twitter-register-screen" class="twitter-screen p-3 hide">
|
|
<article id="twitter-register-screen-first" class="twitter-screen twitter-register-screen">
|
|
<header class="twitter-register-screen-header">
|
|
<a class="absolute left-2 top-0 pt-8 w-full cursor-pointer" onclick="gotoBackPage('#twitter-register-screen')">Cancel</a>
|
|
<img src="../html/img/twitter/logo.png" width="42" height="42" />
|
|
</header>
|
|
<h3 class="pb-4">Create your account</h3>
|
|
<form action="#" id="twitter-create-account-form" class="twitter-form">
|
|
<input class="twitter-input-name" type="text" name="name" placeholder="Name" required />
|
|
<input class="twitter-input-phone" type="text" name="phone" placeholder="Phone Number" title="Phone number must be 10 character" required />
|
|
<button class="twitter-blue-btn absolute bottom-5">Sign Up</button>
|
|
</form>
|
|
<p class="text-muted pt-4 pb-5">
|
|
This will not be shown publicly. Confirm your own age, even if this account is
|
|
for a
|
|
business, a pet, or something else.
|
|
</p>
|
|
</article>
|
|
<article id="twitter-register-screen-second" class="twitter-screen hide twitter-register-screen twitter-register-screen">
|
|
<header class="twitter-register-screen-header">
|
|
<i class="fas fa-arrow-left absolute left-2 top-0 pt-8 w-full"></i>
|
|
<img src="../html/img/twitter/logo.png" width="42" height="42" />
|
|
</header>
|
|
<h3 class="pb-4">We sent you a code</h3>
|
|
<p class="text-muted pb-6">Enter it below to verify your phone number.</p>
|
|
<form action="#" id="twitter-verify-phone-form" class="twitter-form">
|
|
<input class="twitter-input-code" type="text" name="code" placeholder="Code" required />
|
|
<button class="twitter-blue-btn absolute bottom-5">Next</button>
|
|
</form>
|
|
</article>
|
|
<article id="twitter-register-screen-third" class="twitter-screen hide twitter-register-screen twitter-register-screen">
|
|
<header class="twitter-register-screen-header">
|
|
<img src="../html/img/twitter/logo.png" width="42" height="42" />
|
|
</header>
|
|
<h3 class="pb-4">You'll need a password</h3>
|
|
<p class="text-muted pb-6"> Make sure it's at least 8 characters or more.</p>
|
|
<form action="#" id="twitter-create-password-form" class="twitter-form">
|
|
<input class="twitter-input-password" type="password" name="password" minlength="8" placeholder="Password" required />
|
|
<button class="twitter-blue-btn absolute bottom-5">Next</button>
|
|
</form>
|
|
</article>
|
|
<article id="twitter-register-screen-fourth" class="twitter-screen hide twitter-register-screen twitter-register-screen">
|
|
<header class="twitter-register-screen-header">
|
|
<img src="../html/img/twitter/logo.png" width="42" height="42" />
|
|
</header>
|
|
<h3 class="pb-4">What should we call you?</h3>
|
|
<p class="text-muted pb-6">Choose a username. You can always change it later.</p>
|
|
<form action="#" id="twitter-create-username-form" class="twitter-form">
|
|
<input class="twitter-input-username" type="text" name="username" placeholder="Username" required pattern="[A-Za-z0-9]+" />
|
|
<button class="twitter-blue-btn absolute bottom-5">Create Your Account</button>
|
|
</form>
|
|
</section>
|
|
<section id="twitter-login-screen" class="twitter-screen hide">
|
|
<header class="twitter-register-screen-header">
|
|
<a class="absolute left-2 top-0 pt-8 w-full cursor-pointer" onclick="gotoBackPage('#twitter-login-screen')">Cancel</a>
|
|
<img src="../html/img/twitter/logo.png" width="42" height="42" />
|
|
</header>
|
|
<h3 class="pb-4">Log in to Twitter</h3>
|
|
<form action="#" id="twitter-login-form" class="twitter-form">
|
|
<input type="text" name="username" id="twitter-username-input" placeholder="Username" required />
|
|
<input type="password" name="password" id="twitter-password-input" placeholder="Password" required />
|
|
<button class="twitter-blue-btn absolute bottom-5">Log in</button>
|
|
</form>
|
|
<!-- forgot password? -->
|
|
<a class="text-red-500 pt-4 pb-5 self-end mr-3 cursor-pointer forgot-twitter" onclick="gotoNextPage('twitterPasswordScreen')">Forgot password?</a>
|
|
</section>
|
|
<section id="twitter-forgot-password-screen" class="twitter-screen hide">
|
|
<header class="twitter-register-screen-header">
|
|
<a class="absolute left-2 top-0 pt-8 w-full cursor-pointer" onclick="gotoBackPage('#twitter-forgot-password-screen')">Cancel</a>
|
|
<img src="../html/img/twitter/logo.png" width="42" height="42" />
|
|
</header>
|
|
<section id="twitter-forgot-password-accounts" class="overflow-y gap-4 flex flex-col pt-4">
|
|
<article class="flex flex-row justify-between items-center p-3 cursor-pointer border-b">
|
|
<nav class="flex flex-row gap-2">
|
|
<img class="rounded-full" src="" width="42" height="42" />
|
|
<span class="flex flex-col">
|
|
<a></a>
|
|
<a class="text-muted">@quasarstore</a>
|
|
</span>
|
|
</nav>
|
|
<nav>
|
|
<a class="text-green-700">Rescue Account</a>
|
|
</nav>
|
|
</article>
|
|
<article class="flex flex-row justify-between items-center p-3 cursor-pointer border-b">
|
|
<nav class="flex flex-row gap-2">
|
|
<img class="rounded-full" src="" width="42" height="42" />
|
|
<span class="flex flex-col">
|
|
<a></a>
|
|
<a class="text-muted">@quasarstore</a>
|
|
</span>
|
|
</nav>
|
|
<nav>
|
|
<a class="text-green-700">Rescue Account</a>
|
|
</nav>
|
|
</article>
|
|
<article class="flex flex-row justify-between items-center p-3 cursor-pointer border-b">
|
|
<nav class="flex flex-row gap-2">
|
|
<img class="rounded-full" src="" width="42" height="42" />
|
|
<span class="flex flex-col">
|
|
<a></a>
|
|
<a class="text-muted">@quasarstore</a>
|
|
</span>
|
|
</nav>
|
|
<nav>
|
|
<a class="text-green-700">Rescue Account</a>
|
|
</nav>
|
|
</article>
|
|
<article class="flex flex-row justify-between items-center p-3 cursor-pointer border-b">
|
|
<nav class="flex flex-row gap-2">
|
|
<img class="rounded-full" src="" width="42" height="42" />
|
|
<span class="flex flex-col">
|
|
<a></a>
|
|
<a class="text-muted">@quasarstore</a>
|
|
</span>
|
|
</nav>
|
|
<nav>
|
|
<a class="text-green-700">Rescue Account</a>
|
|
</nav>
|
|
</article>
|
|
<article class="flex flex-row justify-between items-center p-3 cursor-pointer border-b">
|
|
<nav class="flex flex-row gap-2">
|
|
<img class="rounded-full" src="" width="42" height="42" />
|
|
<span class="flex flex-col">
|
|
<a></a>
|
|
<a class="text-muted">@quasarstore</a>
|
|
</span>
|
|
</nav>
|
|
<nav>
|
|
<a class="text-green-700">Rescue Account</a>
|
|
</nav>
|
|
</article>
|
|
<article class="flex flex-row justify-between items-center p-3 cursor-pointer border-b">
|
|
<nav class="flex flex-row gap-2">
|
|
<img class="rounded-full" src="" width="42" height="42" />
|
|
<span class="flex flex-col">
|
|
<a></a>
|
|
<a class="text-muted">@quasarstore</a>
|
|
</span>
|
|
</nav>
|
|
<nav>
|
|
<a class="text-green-700">Rescue Account</a>
|
|
</nav>
|
|
</article>
|
|
<article class="flex flex-row justify-between items-center p-3 cursor-pointer border-b">
|
|
<nav class="flex flex-row gap-2">
|
|
<img class="rounded-full" src="" width="42" height="42" />
|
|
<span class="flex flex-col">
|
|
<a></a>
|
|
<a class="text-muted">@quasarstore</a>
|
|
</span>
|
|
</nav>
|
|
<nav>
|
|
<a class="text-green-700">Rescue Account</a>
|
|
</nav>
|
|
</article>
|
|
<article class="flex flex-row justify-between items-center p-3 cursor-pointer border-b">
|
|
<nav class="flex flex-row gap-2">
|
|
<img class="rounded-full" src="" width="42" height="42" />
|
|
<span class="flex flex-col">
|
|
<a></a>
|
|
<a class="text-muted">@quasarstore</a>
|
|
</span>
|
|
</nav>
|
|
<nav>
|
|
<a class="text-green-700">Rescue Account</a>
|
|
</nav>
|
|
</article>
|
|
</section>
|
|
</section>
|
|
</section>
|
|
<section id="twitter-window" class="twitter-screen hide">
|
|
<article id="twitter-home-page" class="twitter-screen h-90">
|
|
<header class="twitter-header flex-col">
|
|
<article class="flex flex-row items-center justify-center">
|
|
<img class="twitter-avatar" src="" width="42" height="42" />
|
|
<img class="twitter-logo" src="../html/img/twitter/logo.png" width="42" height="42" />
|
|
<!-- create tweet icon -->
|
|
<i class="fas fa-feather-alt text-blue-500 text-2xl absolute right-2" onclick="gotoNextPage('createTweet')"></i>
|
|
</article>
|
|
<article class="flex flex-row justify-around w-full pt-5 relative">
|
|
<figure id="twitter-header-divider"></figure>
|
|
<button data-type="all" class="twitter-header-button tw-all text-muted p-4 flex flex-row items-center justify-center transition _active">All</button>
|
|
<button data-type="following" class="twitter-header-button tw-following text-muted p-4 flex flex-row items-center justify-center transition">Following</button>
|
|
</article>
|
|
</header>
|
|
<article id="twitter-tweets" class="flex flex-col gap-4 overflow-y twitter-tweets">
|
|
<article class="flex flex-row gap-2 w-full border-b pb-3" onclick="openTweetPage()">
|
|
<nav class="w-auto h-full">
|
|
<img class="rounded-full" src="" width="48" height="48" />
|
|
</nav>
|
|
<nav class="flex flex-col gap-1 w-full">
|
|
<header class="flex flex-row gap-1">
|
|
<a>Darkweb Store</a>
|
|
<img src="../html/img/instagram/instagram-verify.png" width="16" height="16" />
|
|
<div class="flex flex-row items-center text-muted">
|
|
<a class="ellipsis">@darkwebstore</a>
|
|
<span>·</span>
|
|
<span> 33m</span>
|
|
</div>
|
|
</header>
|
|
<article>
|
|
<p>
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
Officia esse, unde et id sapiente repudiandae eveniet modi,
|
|
sunt quidem optio aliquid sequi odit mollitia, cumque non
|
|
fugit maxime at porro!
|
|
</p>
|
|
<img class="rounded-lg" src="https://cdn.kayiprihtim.com/wp-content/uploads/2023/02/Sicak-Kafa-2-Sezon-Iptal-Netflix-Turkiye.jpeg" width="100%" height="380px" />
|
|
<div class="flex flex-row items-center justify-around pt-4">
|
|
<div class="text-muted flex flex-row items-center gap-2">
|
|
<i class="far fa-comment"></i>
|
|
<span>17</span>
|
|
</div>
|
|
<div class="text-muted flex flex-row items-center gap-2">
|
|
<i class="fas fa-retweet text-muted"></i>
|
|
<span>268</span>
|
|
</div>
|
|
<div class="text-muted flex flex-row items-center gap-2">
|
|
<i class="far fa-heart text-muted"></i>
|
|
<span>9.176</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</nav>
|
|
</article>
|
|
<article class="flex flex-row gap-2 w-full border-b pb-3">
|
|
<nav class="w-auto h-full">
|
|
<img class="rounded-full" src="" width="48" height="48" />
|
|
</nav>
|
|
<nav class="flex flex-col gap-1 w-full">
|
|
<header class="flex flex-row gap-1">
|
|
<a>DarkWeb Store</a>
|
|
<img src="../html/img/instagram/instagram-verify.png" width="16" height="16" />
|
|
<div class="flex flex-row items-center text-muted">
|
|
<a class="ellipsis">@darkwebstore</a>
|
|
<span>·</span>
|
|
<span> 33m</span>
|
|
</div>
|
|
</header>
|
|
<article>
|
|
<p>
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
Officia esse, unde et id sapiente repudiandae eveniet modi,
|
|
sunt quidem optio aliquid sequi odit mollitia, cumque non
|
|
fugit maxime at porro!
|
|
</p>
|
|
<img class="rounded-lg" src="https://cdn.kayiprihtim.com/wp-content/uploads/2023/02/Sicak-Kafa-2-Sezon-Iptal-Netflix-Turkiye.jpeg" width="100%" height="380px" />
|
|
<div class="flex flex-row items-center justify-around pt-4">
|
|
<div class="text-muted flex flex-row items-center gap-2">
|
|
<i class="far fa-comment"></i>
|
|
<span>17</span>
|
|
</div>
|
|
<div class="text-muted flex flex-row items-center gap-2">
|
|
<i class="fas fa-retweet text-muted"></i>
|
|
<span>268</span>
|
|
</div>
|
|
<div class="text-muted flex flex-row items-center gap-2">
|
|
<i class="far fa-heart text-muted"></i>
|
|
<span>9.176</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</nav>
|
|
</article>
|
|
</article>
|
|
<footer>
|
|
<!-- plus icon -->
|
|
|
|
</footer>
|
|
</article>
|
|
<article id="twitter-search-page" class="twitter-screen h-full hide">
|
|
<header class="twitter-header flex-col w-full">
|
|
<article class="flex flex-row items-center justify-center w-80 pb-4">
|
|
<img class="twitter-avatar" src="" width="42" height="42" />
|
|
<input id="twitter-search-input" type="text" placeholder="Search Twitter" onkeyup="twitterSearch()" />
|
|
</article>
|
|
</header>
|
|
<section id="twitter-search-results" class="flex flex-col gap-4 p-4 overflow-y">
|
|
<article class="flex flex-row items-center gap-4 cursor-pointer">
|
|
<img class="rounded-full" src="" width="46" height="46">
|
|
<div class="flex flex-col">
|
|
<span></span>
|
|
<span class="text-sm text-gray-500">@</span>
|
|
</div>
|
|
</article>
|
|
<article class="flex flex-row items-center gap-4 cursor-pointer">
|
|
<img class="rounded-full" src="" width="46" height="46">
|
|
<div class="flex flex-col">
|
|
<span></span>
|
|
<span class="text-sm text-gray-500">@</span>
|
|
</div>
|
|
</article>
|
|
<article class="flex flex-row items-center gap-4 cursor-pointer">
|
|
<img class="rounded-full" src="" width="46" height="46">
|
|
<div class="flex flex-col">
|
|
<span></span>
|
|
<span class="text-sm text-gray-500">@</span>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</article>
|
|
<article id="twitter-notifications-page" class="twitter-screen h-90 hide">
|
|
<header class="twitter-header flex-col w-full">
|
|
<article class="flex flex-row items-center justify-center w-70 pb-4">
|
|
<img class="twitter-avatar" src="" width="42" height="42" />
|
|
<h4>Notifications</h4>
|
|
<!-- trash icon -->
|
|
<i onclick="twitterClearNotifications()" class="far fa-trash-alt red_text absolute right-2"></i>
|
|
</article>
|
|
</header>
|
|
<section id="twitter-notifications-content" class="flex flex-col px-4 gap-4 overflow-y"></section>
|
|
</article>
|
|
<article id="twitter-create-tweet-page" class="twitter-screen h-full z-20 hide">
|
|
<header class="twitter-header justify-between px-4 pb-3">
|
|
<a class="cursor-pointer tw-page-cancel" onclick="gotoBackPage('#twitter-create-tweet-page')">Cancel</a>
|
|
<a class="px-8 py-3 bg-blue-500 text-white rounded-xl cursor-pointer tw-tweet" onclick="twitterCreateTweet()">Tweet</a>
|
|
</header>
|
|
<section class="flex flex-row h-77 mb-6" onclick="twitterFocusToTweetInput()">
|
|
<nav class="w-auto h-full">
|
|
<img class="rounded-full twitter-avatar" data-blockRoute="true" src="" width="48" height="48" />
|
|
</nav>
|
|
<nav class="flex flex-col w-full">
|
|
<textarea id="twitter-create-tweet-input" onkeydown="textAreaAdjust(this)" placeholder="What's happening?">
|
|
</textarea>
|
|
<section class="w-full h-30 transition relative customHidden" id="twitter-create-tweet-media">
|
|
<img class="rounded-lg transition" width="100%" height="100%" />
|
|
<i class="far fa-times absolute right-2 fa-lg top-3 cursor-pointer" onclick="twitterRemoveImageFromTweet()"></i>
|
|
</section>
|
|
</nav>
|
|
</section>
|
|
<footer class="flex flex-row items-center justify-around text-blue-500 pt-5 border-t absolute w-full bottom-5" id="twitter-create-tweet-actions">
|
|
<i class="far fa-image fa-lg cursor-pointer" onclick="openGalleryForNewTweet()"></i>
|
|
<i class="fa-solid fa-gif fa-lg cursor-pointer" onclick="openGifMenuForNewTweet()"></i>
|
|
<i class="fas fa-link fa-lg cursor-pointer" onclick="openUrlMenuForNewTweet()"></i>
|
|
<i class="far fa-smile fa-lg" id="twitter-create-tweet-emoji"></i>
|
|
</footer>
|
|
</article>
|
|
<article id="twitter-messages-container" class="twitter-screen h-90 hide">
|
|
<section id="twitter-messages-page" class="twitter-screen">
|
|
<header class="twitter-header flex-col w-full">
|
|
<article class="flex flex-row items-center justify-center w-70 pb-4">
|
|
<img class="twitter-avatar" src="" width="42" height="42" />
|
|
<h4>Messages</h4>
|
|
<!-- new message icon -->
|
|
<i class="fas fa-paper-plane fa-lg absolute right-2 cursor-pointer" onclick="gotoNextPage('twitterCreateMessage')"></i>
|
|
</article>
|
|
</header>
|
|
<section id="twitter-messages-list" class="flex flex-col gap-4 overflow-y"></section>
|
|
</section>
|
|
<section id="twitter-create-message-container" class="twitter-screen hide">
|
|
<header class="flex flex-row items-center justify-center sticky top-0 bg-black pt-8 pb-5">
|
|
<i class="fas fa-chevron-left fa-lg absolute left-4" onclick="gotoBackPage('#twitter-create-message-container')"></i>
|
|
<article class="flex flex-col items-center">
|
|
<a>New Message</a>
|
|
</article>
|
|
</header>
|
|
<section id="twitter-create-message-users" class="flex flex-col gap-4 mt-3">
|
|
<article class="flex flex-row items-center gap-4 cursor-pointer">
|
|
<img class="rounded-full" src="" width="46" height="46">
|
|
<div class="flex flex-col">
|
|
<span class=""></span>
|
|
<span class="text-sm text-gray-500"></span>
|
|
</div>
|
|
<i class="fas fa-chevron-right fa-lg absolute right-2"></i>
|
|
</article>
|
|
</section>
|
|
</section>
|
|
<section id="twitter-chat" class="twitter-screen hide z-50">
|
|
<header class="twitter-header pb-4" onclick="gotoBackPage('#twitter-chat')">
|
|
<i class="fas fa-chevron-left fa-lg absolute left-4"></i>
|
|
<div class="flex flex-col gap-2 justify-center items-center">
|
|
<img id="twitter-chat-avatar" class="rounded-full" src="" width="36" height="36">
|
|
<div class="flex flex-col justify-center">
|
|
<a id="twitter-chat-name"></a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<article id="twitter-chat-messages" class="flex flex-col gap-4 p-4 overflow-y"></article>
|
|
<footer id="twitter-chat-input-container" class="flex flex-row gap-4 p-4 absolute bottom-0 w-full items-center border-t pt-4 mb-7">
|
|
<fas onclick="OpenTwitterAlternativeMenu('twitterMessage')" class="fas fa-ellipsis-h fa-lg cursor-pointer"></fas>
|
|
<input type="text" id="twitter-chat-input" class="w-full rounded-full flex items-center justify-between" placeholder="Message...">
|
|
</footer>
|
|
</section>
|
|
</article>
|
|
<article id="twitter-profile-page" class="twitter-screen h-full z-30 hide overflow-y">
|
|
<figure class="h-15 w-full absolute top-0">
|
|
<img id="twitter-profile-background" class="w-full h-full object-cover" src="">
|
|
</figure>
|
|
<i onclick="gotoBackPage('#twitter-profile-page')" class="fas fa-arrow-left absolute top-6 left-4 text-white z-10 p-4 bg-low-opacity rounded-full cursor-pointer"></i>
|
|
<section class="relative bottom-0-7 w-full mt-30per">
|
|
<header class="flex flex-row justify-between w-full p-4">
|
|
<section class="flex flex-col gap-2">
|
|
<img id="twitter-profile-avatar" class="rounded-full top-10 left-5" src="" width="64" height="64">
|
|
<span>
|
|
<a id="twitter-profile-name"></a>
|
|
<img id="twitter-profile-verify" src="./img/instagram/instagram-verify.png" width="16" height="16">
|
|
</span>
|
|
<a id="twitter-profile-username" class="text-muted">@QUASAR</a>
|
|
</section>
|
|
<section class="mt-16">
|
|
<button id="twitter-profile-edit-btn" class="twitter-border-btn" onclick="gotoNextPage('#twitter-edit-profile')">Edit
|
|
Profile</button>
|
|
<article class="flex flex-row items-center gap-6">
|
|
<!-- message icon -->
|
|
<button id="twitter-profile-send-message" onclick="openChatFromProfile()" class="p-4 border rounded-full">
|
|
<i class="fas fa-envelope cursor-pointer text-lg"></i>
|
|
</button>
|
|
|
|
<button id="twitter-profile-follow-btn" class="twitter-follow-btn">Follow</button>
|
|
</article>
|
|
</section>
|
|
</header>
|
|
<section class="px-4 flex flex-col justify-between border-b mb-4 gap-4 relative">
|
|
<p id="twitter-profile-bio">Current and important, I don't know what, I need something long here</p>
|
|
<span class="flex flex-row items-center gap-2">
|
|
<i class="fas fa-calendar-alt text-muted"></i>
|
|
<span id="twitter-profile-created" class="text-muted">Joined May 2022</span>
|
|
</span>
|
|
<div class="flex flex-row items-center gap-4">
|
|
<span>
|
|
<a id="twitter-profile-following-count">1,000</a>
|
|
<span class="text-muted">Following</span>
|
|
</span>
|
|
<span>
|
|
<a id="twitter-profile-followers-count">1,000</a>
|
|
<span class="text-muted">Followers</span>
|
|
</span>
|
|
</div>
|
|
<article class="flex flex-row justify-around w-full relative">
|
|
<figure id="twitter-profile-divider"></figure>
|
|
<button data-type="tweets" class="tw-tweets twitter-profile-divider-button text-muted p-4 flex flex-row items-center justify-center transition">Tweets</button>
|
|
<button data-type="tweets&replies" class="tw-replies twitter-profile-divider-button text-muted p-4 flex flex-row items-center justify-center transition">Tweets & replies</button>
|
|
<button data-type="media" class="tw-media twitter-profile-divider-button text-muted p-4 flex flex-row items-center justify-center transition">Media</button>
|
|
<button data-type="likes" class="tw-likes twitter-profile-divider-button text-muted p-4 flex flex-row items-center justify-center transition">Likes</button>
|
|
</article>
|
|
</section>
|
|
<article id="profile-tweets" class="flex flex-col gap-4 pb-5 twitter-tweets"></article>
|
|
</section>
|
|
</article>
|
|
<article id="twitter-edit-profile" class="twitter-screen z-30 hide">
|
|
<header class="flex flex-row items-center justify-between sticky top-0 w-full bg-black p-4 pt-8 border-b">
|
|
<i class="fas fa-chevron-left fa-lg" onclick="gotoBackPage('#twitter-edit-profile')"></i>
|
|
<a class="tw-edit-profile">Edit profile</a>
|
|
<a class="blue_text tw-done" onclick="editTwitterProfile()">Done</a>
|
|
</header>
|
|
<section class="flex flex-row items-center justify-around border-b pb-4">
|
|
<div class="flex flex-col gap-2 items-center justify-center pt-4" onclick="changeTwitterProfilePicture()">
|
|
<img id="twitter-edit-avatar" class="rounded-full twitter-avatar" width="64" height="64" src="" />
|
|
<a class="blue_text tw-edit-avatar">Edit Avatar</a>
|
|
</div>
|
|
<div>
|
|
<div class="flex flex-col gap-2 items-center justify-center pt-4" onclick="changeTwitterBackground()">
|
|
<img id="twitter-edit-background" class="rounded-full twitter-user-background" width="64" height="64" src="" />
|
|
<a class="blue_text tw-edit-background">Edit Background</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<form id="twitter-edit-profile-form" class="p-4">
|
|
<div class="flex flex-row gap-2 items-center justify-center pt-4 pb-4 border-b">
|
|
<a class="w-54 tw-change-name">Name</a>
|
|
<input id="twitter-edit-name" class="bg-black text-white w-full twitter-name" type="text" placeholder="Name" />
|
|
</div>
|
|
<div class="flex flex-row gap-2 items-center justify-center pt-4 pb-4 border-b">
|
|
<a class="w-54 tw-change-user">Username</a>
|
|
<input id="twitter-edit-username" class="bg-black text-white w-full twitter-username" type="text" placeholder="Username" />
|
|
</div>
|
|
<div class="flex flex-row gap-2 items-center justify-center pt-4 pb-4 border-b">
|
|
<a class="w-54 tw-change-bio">Bio</a>
|
|
<input id="twitter-edit-bio" class="bg-black text-white w-full" type="text" placeholder="Bio" />
|
|
</div>
|
|
|
|
<div class="flex flex-row gap-2 items-center justify-center pt-4 pb-4 border-b">
|
|
<a class="w-54 tw-change-password">Password</a>
|
|
<input id="twitter-edit-password" class="bg-black text-white w-full" type="password" placeholder="Password" />
|
|
</div>
|
|
</form>
|
|
<div>
|
|
<button onclick="twitterDeleteAccount()" class="instagram-dark-btn tw-delete-acc red_text w-full mt-4">Delete Account</button>
|
|
<button onclick="logoutTwitterAccount()" class="instagram-dark-btn tw-logout red_text w-full mt-4">Logout</button>
|
|
</div>
|
|
</article>
|
|
<article id="twitter-opened-tweet" class="twitter-screen z-30 hide">
|
|
<header class="flex flex-row items-center justify-center w-full bg-black p-4 pt-8 border-b">
|
|
<i class="fas fa-chevron-left fa-lg absolute left-2" onclick="gotoBackPage('#twitter-opened-tweet')"></i>
|
|
<a class="tw-tweet">Tweet</a>
|
|
</header>
|
|
<article class="p-4 overflow-y h-75">
|
|
<header class="flex items-center flex flex-row gap-2">
|
|
<img id="twitter-opened-tweet-avatar" class="rounded-full" width="48" height="48" src="" />
|
|
<div class="flex flex-col">
|
|
<span>
|
|
<a id="twitter-opened-tweet-name">John Doe</a>
|
|
<img id="twitter-opened-tweet-verified" src="img/instagram/instagram-verify.png" width="16" height="16" />
|
|
</span>
|
|
<a id="twitter-opened-tweet-username" class="text-muted">@johndoe</a>
|
|
</div>
|
|
<!-- -- trash icon -->
|
|
<i class="fas fa-trash fa-lg absolute right-2" id="twitter-opened-tweet-delete" onclick="deleteTwitterTweet()"></i>
|
|
</header>
|
|
<section>
|
|
<p id="twitter-opened-tweet-text" class="pt-4">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
Perferendis deserunt, ipsa dolores explicabo aspernatur
|
|
ratione dolorum minima, exercitationem ad iure non blanditiis
|
|
voluptatum maiores eum ipsam obcaecati tempore, totam odio!
|
|
</p>
|
|
<img id="twitter-opened-tweet-image" class="mt-4 rounded-lg" src="" width="100%" height="380px" />
|
|
</section>
|
|
<footer class="mt-3">
|
|
<a id="twitter-opened-tweet-date" class="text-muted">7.12.2022</a>
|
|
<div class="border-t pt-4 pb-4 flex flex-row gap-4 mt-3">
|
|
<div>
|
|
<span id="twitter-opened-tweet-likes-count">4.544</span>
|
|
<span class="text-muted tw-likes-p">Likes</span>
|
|
</div>
|
|
<div>
|
|
<span id="twitter-opened-tweet-retweets-count">661</span>
|
|
<span class="text-muted tw-retweet-p">Retweets</span>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-b pt-4 pb-4">
|
|
<div class="flex flex-row items-center justify-around text-muted">
|
|
<!-- comment icon -->
|
|
<!-- <i class="far fa-comment" id="twitter-opened-tweet-make-comment"></i> -->
|
|
<!-- retweet icon -->
|
|
<i class="fas fa-retweet" id="twitter-opened-tweet-retweet"></i>
|
|
<!-- like icon -->
|
|
<i class="far fa-heart" id="twitter-opened-tweet-like"></i>
|
|
<!-- <i class="fas fa-heart"></i> -->
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<article class="flex flex-col gap-4 overflow-y" id="twitter-opened-tweet-comments"></article>
|
|
</article>
|
|
<footer class="mb-4 flex flex-row fixed bottom-0-5 w-full border-t items-center p-4 bg-black footer-posts">
|
|
<fas onclick="OpenTwitterAlternativeMenu('twitterComment')" class="fas fa-ellipsis-h fa-lg cursor-pointer"></fas>
|
|
<input type="text" id="twitter-make-comment-input" class="w-full rounded-full flex items-center justify-between" placeholder="Write a comment">
|
|
</footer>
|
|
</article>
|
|
<footer id="twitter-footer" class="absolute bottom-0 w-full h-10 flex z-10 flex-row justify-around items-center pb-5 bg-black border-t">
|
|
<button id="twitter-home" class="w-40 h-40" onclick="twitterFooterRouter(this, '#twitter-home-page')">
|
|
<i class="fas fa-home fa-lg current twitter-footer-icon"></i>
|
|
</button>
|
|
<button id="twitter-search" class="w-40 h-40" onclick="twitterFooterRouter(this, '#twitter-search-page')">
|
|
<i class="fas fa-search fa-lg twitter-footer-icon"></i>
|
|
<!-- search full icon -->
|
|
|
|
</button>
|
|
<button id="twitter-notifications" class="w-40 h-40" onclick="twitterFooterRouter(this, '#twitter-notifications-page')">
|
|
<i class="far fa-bell fa-lg twitter-footer-icon"></i>
|
|
</button>
|
|
<button id="twitter-messages" class="w-40 h-40" onclick="twitterFooterRouter(this, '#twitter-messages-container')">
|
|
<i class="far fa-envelope fa-lg twitter-footer-icon"></i>
|
|
</button>
|
|
</footer>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="application bank-app">
|
|
<section id="bank-home-page" class="h-full">
|
|
<header class="top">
|
|
<div class="top-text">
|
|
<p class="welcome">Welcome back</p>
|
|
<p class="bank-name">George</p>
|
|
</div>
|
|
<div class="top-text">
|
|
<p class="balance">Your balance</p>
|
|
<p class="amount"><i class="fas fa-dollar-sign"></i>35,640.<span class="noughts">00</span> </p>
|
|
</div>
|
|
</header>
|
|
|
|
<article class="main">
|
|
<div class="plus" onclick="openBankTransferPage()">
|
|
<p>+</p>
|
|
</div>
|
|
<div class="main-text">
|
|
<p class="transactions">Transactions</p>
|
|
</div>
|
|
<div class="transaction-grid"></div>
|
|
</article>
|
|
</section>
|
|
<section id="bank-transfer-page" class="absolute w-full h-full z-20 bg-container-dark left-0 rounded-2xl p-4">
|
|
<header class="flex justify-center pb-5 items-center pt-5 border-b">
|
|
<a class="text-white font-semibold text-xl money-transfer">Money Transfer</a>
|
|
<i class="fas fa-times fa-lg absolute right-5 text-white cursor-pointer" onclick="closeBankTransferPage()"></i>
|
|
</header>
|
|
<form action="#" id="bank-transfer-form" class="flex flex-col gap-6 h-80 relative pt-5">
|
|
<div class="flex flex-col gap-2 border-b pb-3">
|
|
<a class="text-xl text-white font-semibold money-transfer-contacts">Contacts</a>
|
|
<article id="bank-transfer-contacts" class="w-full h-full swiper pt-2 pb-4">
|
|
<ul class="swiper-wrapper"></ul>
|
|
</article>
|
|
</div>
|
|
<div class="flex flex-col gap-2 pb-3">
|
|
<label for="bank-transfer-transaction" class="bank-transfer-transaction text-xl text-white money-transfer-to">To</label>
|
|
<input type="text" name="bank-transfer-transaction" id="bank-transfer-transaction-id" class="text-white rounded-lg bg-dark p-4" placeholder="Enter transaction id">
|
|
</div>
|
|
<div class="flex flex-col gap-2 pb-3">
|
|
<label for="bank-transfer-amount" class="bank-transfer-amount text-xl text-white money-transfer-amount">Amount</label>
|
|
<input type="number" name="bank-transfer-amount" id="bank-transfer-amount" class="text-white rounded-lg p-2 bg-dark p-4" placeholder="Enter amount">
|
|
</div>
|
|
<footer class="flex justify-center absolute bottom-0-5 w-full">
|
|
<button type="submit" class="bg-purple-500 text-white- text-lg font-semibold p-6 w-full rounded-2xl box-shadow-purple money-transfer-button">Transfer</button>
|
|
</footer>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="application state-app">
|
|
<div class="state-header">
|
|
<p>Services</p>
|
|
<span>Available services</span>
|
|
</div>
|
|
|
|
<article class="flex flex-row items-center gap-2 w-full bg-dark p-4 rounded-xl">
|
|
<i class="fas fa-search fa-lg text-muted"></i>
|
|
<input type="text" id="state-search-chats" class="state-search-input" placeholder="Search">
|
|
</article>
|
|
|
|
<div class="state-list">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application store-app">
|
|
<div class="store-app-window hide" id="store-app-today-window">
|
|
<a id="store-app-date" style="color: #767676; font-size: 12px;"></a>
|
|
<a id="store-app-date-today" style="font-size: 20px; font-weight: 1000">Today</a>
|
|
<img class="store-app-pp" src="./img/default.png">
|
|
<div id="store-app-today-content-container"></div>
|
|
</div>
|
|
<div class="store-app-window hide" id="store-app-games-window">
|
|
<a id="store-app-date-games" style="font-size: 20px; font-weight: 1000">Games</a>
|
|
<img class="store-app-pp" src="./img/default.png">
|
|
<div id="store-app-games-content-container"></div>
|
|
</div>
|
|
<div class="store-app-window hide" id="store-app-apps-window">
|
|
<a id="store-app-date-apps" style="font-size: 20px; font-weight: 1000">Apps</a>
|
|
<img class="store-app-pp" src="./img/default.png">
|
|
<div id="store-app-apps-content-container">
|
|
<div class="store-app-games-content"></div>
|
|
</div>
|
|
</div>
|
|
<div class="store-app-window hide" id="store-app-search-window">
|
|
<header class="flex flex-row gap-4 w-full items-center">
|
|
<i class="fas fa-chevron-left fa-xl text-blue-500" onclick="onBack()"></i>
|
|
<div class="store-search-box flex flex-row gap-4 w-full">
|
|
<i class="fas fa-search text-muted"></i>
|
|
<input type="text" id="storeapp-search-input" placeholder="Search App" spellcheck="false">
|
|
</div>
|
|
</header>
|
|
<div id="store-app-search-container"></div>
|
|
</div>
|
|
<div class="store-screen z-20 hide" id="store-app-openedapp-window">
|
|
<div class="cursor-pointer store-back" onclick="gotoBackPage('#store-app-openedapp-window')">
|
|
<i class="fas fa-chevron-left fa-xl text-blue-500"></i>
|
|
</div>
|
|
<div id="store-app-openedapp-general"></div>
|
|
<div id="store-app-openedapp-description-container"></div>
|
|
<div id="store-app-opened-app-give-rating-container">
|
|
<div id="store-app-opened-app-give-rating"></div>
|
|
</div>
|
|
<div class="swiper store-swiper">
|
|
<div id="store-app-openedapp-content-container" class="swiper-wrapper"></div>
|
|
</div>
|
|
</div>
|
|
<div id="store-footer-container">
|
|
<div class="store-footer st-today" onclick="SetStoreFooter(this, 'store-app-today-window')">
|
|
<img class="store-footer-img" src="./img/store_app/today.png">
|
|
<a class="store-footer-text">Today</a>
|
|
</div>
|
|
<div class="store-footer st-games" onclick="SetStoreFooter(this, 'store-app-games-window')">
|
|
<img class="store-footer-img" src="./img/store_app/games.png">
|
|
<a class="store-footer-text">Games</a>
|
|
</div>
|
|
<div class="store-footer st-apps" onclick="SetStoreFooter(this, 'store-app-apps-window')">
|
|
<img class="store-footer-img" src="./img/store_app/apps.png">
|
|
<a class="store-footer-text">Apps</a>
|
|
</div>
|
|
<div class="store-footer st-search" onclick="SetStoreFooter(this, 'store-app-search-window')">
|
|
<img class="store-footer-img" src="./img/message_app/search.png">
|
|
<a class="store-footer-text">Search</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application tinder-app">
|
|
<section id="tinder-login-window" class="tinder-screen">
|
|
<article id="tinder-register-firstscreen" class="tinder-screen tinder-bg justify-center p-6">
|
|
<img src="./img/tinder/logo.png" alt="" width="200" class="margin-center">
|
|
<footer class="flex flex-col mt-5">
|
|
<a class="text-white- mb-5 tinder-firstscreen-text">
|
|
By tapping 'Sign in' you agree to our Terms. Learn how we process your data in our Privacy Policy and Cookies Policy.
|
|
</a>
|
|
<button class="tinder-register-button tinder-firstscreen-button-create" onclick="gotoNextPage('tinderCreateAccountPage')">Create Account</button>
|
|
<button class="tinder-register-button bg-transparent text-white- tinder-firstscreen-button-sign" onclick="gotoNextPage('tinderLoginAccountPage')">Sign in</button>
|
|
<a class="margin-center text-white- font-semibold cursor-pointer tinder-firstscreen-button-recover" onclick="gotoNextPage('tinderForgotPasswordPage')">Trouble signing in?</a>
|
|
</footer>
|
|
</article>
|
|
<article id="tinder-register-screen" class="tinder-screen hide">
|
|
<article id="tinder-register-screen-first" class="tinder-screen tinder-register-screen">
|
|
<header class="pt-8 mb-5">
|
|
<i class="fas fa-chevron-left fa-2x text-muted cursor-pointer" onclick="gotoBackPage('#tinder-register-screen')"></i>
|
|
</header>
|
|
<form action="#" id="tinder-number-form" class="tinder-register-form tinder-form">
|
|
<header class="text-xl font-semibold mb-3 text-white tinder-put-number">Can we get your number?</header>
|
|
<input type="text" name="phone" id="tinder-number" placeholder="Phone Number" class="tinder-input" required>
|
|
<a class="text-sm text-white mt-5 tinder-info-number">We'll text you a code to verify you're really you. Message and data rates may apply</a>
|
|
<button class="tinder-form-button white-box-shadow tinder-button-continue" type="submit">Next</button>
|
|
</form>
|
|
</article>
|
|
<article id="tinder-register-screen-second" class="tinder-screen tinder-register-screen hide">
|
|
<header class="pt-8 mb-5">
|
|
<i class="fas fa-chevron-left fa-2x text-muted cursor-pointer" onclick="gotoBackPage('#tinder-register-screen-second')"></i>
|
|
</header>
|
|
<form action="#" id="tinder-code-form" class="tinder-register-form tinder-form">
|
|
<header class="text-xl font-semibold mb-3 text-white tinder-enter-code">Enter your code</header>
|
|
<input type="text" name="code" id="tinder-code" placeholder="Code" class="tinder-input" required>
|
|
<button class="tinder-form-button white-box-shadow tinder-button-continue" type="submit">Next</button>
|
|
</form>
|
|
</article>
|
|
<article id="tinder-register-screen-third" class="tinder-screen tinder-register-screen hide">
|
|
<header class="pt-8 mb-5">
|
|
<i class="fas fa-chevron-left fa-2x text-muted cursor-pointer" onclick="gotoBackPage('#tinder-register-screen-third')"></i>
|
|
</header>
|
|
<form action="#" id="tinder-first-name-form" class="tinder-register-form tinder-form">
|
|
<header class="text-xl font-semibold mb-3 text-white tinder-firstname-opt">What's your first name?</header>
|
|
<input type="text" name="firstName" id="tinder-first-name" placeholder="Enter first name" class="tinder-input" required>
|
|
<a class="text-white mt-5 tinder-name-info">
|
|
This is how it'll appear on your profile.
|
|
</a>
|
|
<button class="tinder-form-button white-box-shadow tinder-button-continue" type="submit">Next</button>
|
|
</form>
|
|
</article>
|
|
<article id="tinder-register-screen-fourth" class="tinder-screen tinder-register-screen hide">
|
|
<header class="pt-8 mb-5">
|
|
<i class="fas fa-chevron-left fa-2x text-muted cursor-pointer" onclick="gotoBackPage('#tinder-register-screen-fourth')"></i>
|
|
</header>
|
|
<form action="#" id="tinder-birthday-form" class="tinder-register-form tinder-form">
|
|
<header class="text-xl font-semibold mb-3 text-white tinder-bday">Your b-day?</header>
|
|
<input type="date" name="birthday" id="tinder-birthday" placeholder="Enter birthday" class="tinder-input" pattern="\d{1,2}/\d{1,2}/\d{4}" required>
|
|
<a class="text-white mt-5 tinder-age-inf">
|
|
Your profile shows your age, not your birth date.
|
|
</a>
|
|
<button class="tinder-form-button white-box-shadow tinder-button-continue" type="submit">Next</button>
|
|
</form>
|
|
</article>
|
|
<article id="tinder-register-screen-fifth" class="tinder-screen tinder-register-screen hide">
|
|
<header class="pt-8 mb-5">
|
|
<i class="fas fa-chevron-left fa-2x text-muted cursor-pointer" onclick="gotoBackPage('#tinder-register-screen-fifth')"></i>
|
|
</header>
|
|
<form action="#" id="tinder-password-form" class="tinder-register-form tinder-form">
|
|
<header class="text-xl font-semibold mb-3 text-white tinder-password-select">Your password</header>
|
|
<input type="password" name="password" id="tinder-password" placeholder="Password" class="tinder-input" required>
|
|
<button class="tinder-form-button white-box-shadow tinder-button-continue" type="submit">Next</button>
|
|
</form>
|
|
</article>
|
|
<article id="tinder-register-screen-sixth" class="tinder-screen tinder-register-screen hide">
|
|
<header class="pt-8 mb-5">
|
|
<i class="fas fa-chevron-left fa-2x text-muted cursor-pointer" onclick="gotoBackPage('#tinder-register-screen-sixth')"></i>
|
|
</header>
|
|
<form action="#" id="tinder-bio-form" class="tinder-register-form tinder-form">
|
|
<header class="text-xl font-semibold mb-3 text-white tinder-bio-info">Tell us a bit about yourself</header>
|
|
<input type="text" name="bio" id="tinder-bio" placeholder="Description" class="tinder-input" minlength="10" required>
|
|
<button class="tinder-form-button white-box-shadow tinder-button-continue" type="submit">Next</button>
|
|
</form>
|
|
</article>
|
|
<article id="tinder-register-screen-seventh" class="tinder-screen tinder-register-screen hide">
|
|
<header class="pt-8 mb-5">
|
|
<i class="fas fa-chevron-left fa-2x text-muted cursor-pointer" onclick="gotoBackPage('#tinder-register-screen-seventh')"></i>
|
|
</header>
|
|
<form action="#" id="tinder-show-me-form" data-inputType="radio" class="tinder-register-form tinder-form">
|
|
<header class="text-xl font-semibold mb-3 text-white tinder-show-genders">Show Me</header>
|
|
<article class="tinder-button-checkboxes flex flex-col gap-4">
|
|
<label class="w-full">
|
|
<input type="radio" name="show-me" value="female" required>
|
|
<span class="td-women">WOMEN</span>
|
|
</label>
|
|
<label class="w-full">
|
|
<input type="radio" name="show-me" value="male" required>
|
|
<span class="td-men">MEN</span>
|
|
</label>
|
|
<label class="w-full">
|
|
<input type="radio" name="show-me" value="everyone" required>
|
|
<span class="td-everyone">EVERYONE</span>
|
|
</label>
|
|
</article>
|
|
<button class="tinder-form-button white-box-shadow tinder-button-continue" type="submit">Next</button>
|
|
</form>
|
|
</article>
|
|
<article id="tinder-register-screen-eighth" class="tinder-screen tinder-register-screen hide">
|
|
<header class="pt-8 mb-5">
|
|
<i class="fas fa-chevron-left fa-2x text-muted cursor-pointer" onclick="gotoBackPage('#tinder-register-screen-eighth')"></i>
|
|
</header>
|
|
<form action="#" id="tinder-my-gender-form" data-inputType="radio" class="tinder-register-form tinder-form">
|
|
<header class="text-xl font-semibold mb-3 text-white tinder-my-genders">I am a</header>
|
|
<article class="tinder-button-checkboxes flex flex-col gap-4">
|
|
<label class="w-full">
|
|
<input type="radio" name="my-gender" value="male" required>
|
|
<span class="td-male">MALE</span>
|
|
</label>
|
|
<label class="w-full">
|
|
<input type="radio" name="my-gender" value="female" required>
|
|
<span class="td-female">FEMALE</span>
|
|
</label>
|
|
</article>
|
|
<button class="tinder-form-button white-box-shadow tinder-button-continue" type="submit">Next</button>
|
|
</form>
|
|
</article>
|
|
<article id="tinder-register-screen-ninth" class="tinder-screen tinder-register-screen hide">
|
|
<header class="pt-8 mb-5">
|
|
<i class="fas fa-chevron-left fa-2x text-muted cursor-pointer" onclick="gotoBackPage('#tinder-register-screen-ninth')"></i>
|
|
</header>
|
|
<form action="#" id="tinder-form-photos" data-inputType="photos" class="tinder-register-form tinder-form validate">
|
|
<header class="text-xl font-semibold mb-3 text-white target-photos-register">Photos</header>
|
|
<section class="grid grid-cols-3 margin-center gap-4 tinder-photo-list" id="tinder-form-photo-list">
|
|
<div class="w-10rem h-10rem relative rounded-lg bg-dark">
|
|
<a class="w-28 h-28 p-4 rounded-full text-white- tinder-bg absolute bottom-0 right-0 flex items-center justify-center add-photo">
|
|
<i class="fas fa-plus"></i>
|
|
</a>
|
|
</div>
|
|
<div class="w-10rem h-10rem relative rounded-lg bg-dark">
|
|
<a class="w-28 h-28 p-4 rounded-full text-white- tinder-bg absolute bottom-0 right-0 flex items-center justify-center add-photo">
|
|
<i class="fas fa-plus"></i>
|
|
</a>
|
|
</div>
|
|
<div class="w-10rem h-10rem relative rounded-lg bg-dark">
|
|
<a class="w-28 h-28 p-4 rounded-full text-white- tinder-bg absolute bottom-0 right-0 flex items-center justify-center add-photo">
|
|
<i class="fas fa-plus"></i>
|
|
</a>
|
|
</div>
|
|
<div class="w-10rem h-10rem relative rounded-lg bg-dark">
|
|
<a class="w-28 h-28 p-4 rounded-full text-white- tinder-bg absolute bottom-0 right-0 flex items-center justify-center add-photo">
|
|
<i class="fas fa-plus"></i>
|
|
</a>
|
|
</div>
|
|
<div class="w-10rem h-10rem relative rounded-lg bg-dark">
|
|
<a class="w-28 h-28 p-4 rounded-full text-white- tinder-bg absolute bottom-0 right-0 flex items-center justify-center add-photo">
|
|
<i class="fas fa-plus"></i>
|
|
</a>
|
|
</div>
|
|
<div class="w-10rem h-10rem relative rounded-lg bg-dark">
|
|
<a class="w-28 h-28 p-4 rounded-full text-white- tinder-bg absolute bottom-0 right-0 flex items-center justify-center add-photo">
|
|
<i class="fas fa-plus"></i>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<button class="tinder-form-button white-box-shadow tinder-button-continue" type="submit">Next</button>
|
|
</form>
|
|
</article>
|
|
</article>
|
|
<article id="tinder-login-screen" class="tinder-screen px-6 hide">
|
|
<header class="pt-8 mb-5">
|
|
<i class="fas fa-chevron-left fa-2x text-muted cursor-pointer" onclick="gotoBackPage('#tinder-login-screen')"></i>
|
|
</header>
|
|
<form action="#" id="tinder-login-form" class="tinder-form">
|
|
<header class="text-xl font-semibold mb-3 text-white tinder-login-text">Login</header>
|
|
<input type="text" name="phone" id="tinder-login-phone" placeholder="Phone Number" class="tinder-input" required>
|
|
<input type="password" name="password" id="tinder-login-password" placeholder="Password" class="tinder-input" required>
|
|
<button class="tinder-form-button white-box-shadow tinder-login-text">Login</button>
|
|
</form>
|
|
</article>
|
|
<article id="tinder-forgot-password-screen" class="tinder-screen px-6 hide">
|
|
<header class="pt-8 mb-5">
|
|
<i class="fas fa-chevron-left fa-2x text-muted cursor-pointer" onclick="gotoBackPage('#tinder-forgot-password-screen')"></i>
|
|
</header>
|
|
<form action="#" id="tinder-login-form" class="tinder-form">
|
|
<header class="text-xl font-semibold mb-3 text-white tinder-login-text recovery-tinder">Recovery</header>
|
|
</form>
|
|
<section id="tinder-forgot-password-accounts" class="overflow-y gap-4 flex flex-col pt-4"></section>
|
|
</article>
|
|
</section>
|
|
<section id="tinder-window" class="tinder-screen hide">
|
|
<header class="flex flex-row items-center pt-8 justify-between px-6 pb-3 sticky top-0 bg-black">
|
|
<button id="tinder-profile-footer" onclick="tinderHeaderRouter(this, '#tinder-profile-page')">
|
|
<svg class="tinder-header-icon" width="24" height="24" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M9 0C7.8181 0 6.64778 0.232792 5.55585 0.685084C4.46392 1.13738 3.47177 1.80031 2.63604 2.63604C0.948211 4.32387 0 6.61305 0 9C0 11.3869 0.948211 13.6761 2.63604 15.364C3.47177 16.1997 4.46392 16.8626 5.55585 17.3149C6.64778 17.7672 7.8181 18 9 18C11.3869 18 13.6761 17.0518 15.364 15.364C17.0518 13.6761 18 11.3869 18 9C18 7.8181 17.7672 6.64778 17.3149 5.55585C16.8626 4.46392 16.1997 3.47177 15.364 2.63604C14.5282 1.80031 13.5361 1.13738 12.4442 0.685084C11.3522 0.232792 10.1819 0 9 0ZM9 5.751C10.4522 6.69446 12.1463 7.19768 13.878 7.2C14.58 7.2 15.255 7.119 15.903 6.966C16.092 7.605 16.2 8.289 16.2 9C16.2 12.969 12.969 16.2 9 16.2C6.3 16.2 3.951 14.706 2.7 12.501L4.275 10.8V9.9C4.275 9.60163 4.39353 9.31548 4.6045 9.1045C4.81548 8.89353 5.10163 8.775 5.4 8.775C5.69837 8.775 5.98452 8.89353 6.1955 9.1045C6.40647 9.31548 6.525 9.60163 6.525 9.9V10.8H9V5.751ZM12.6 8.775C12.3016 8.775 12.0155 8.89353 11.8045 9.1045C11.5935 9.31548 11.475 9.60163 11.475 9.9C11.475 10.1984 11.5935 10.4845 11.8045 10.6955C12.0155 10.9065 12.3016 11.025 12.6 11.025C12.8984 11.025 13.1845 10.9065 13.3955 10.6955C13.6065 10.4845 13.725 10.1984 13.725 9.9C13.725 9.60163 13.6065 9.31548 13.3955 9.1045C13.1845 8.89353 12.8984 8.775 12.6 8.775Z" fill="#B3B3B3" />
|
|
</svg>
|
|
</button>
|
|
<button class="tinder-home-footer current" onclick="tinderHeaderRouter(this, '#tinder-home-page')">
|
|
<svg class="tinder-header-icon" width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M14.3675 17.64C14.3325 17.64 14.2975 17.64 14.2625 17.605C13.09 16.03 12.7925 13.335 12.705 12.3025C12.705 12.11 12.4775 11.9875 12.3025 12.0925C8.6275 14.14 5.25 19.005 5.25 23.695C5.25 31.745 10.85 38.5 20.475 38.5C29.4875 38.5 35.7 31.535 35.7 23.695C35.7 13.4225 28.35 6.59751 21.8225 3.51751C21.7844 3.49657 21.7412 3.48698 21.6978 3.48985C21.6545 3.49272 21.6129 3.50793 21.5779 3.5337C21.5429 3.55947 21.5161 3.5947 21.5005 3.63525C21.4849 3.6758 21.4813 3.71995 21.49 3.76251C22.33 9.29251 21.175 15.3125 14.3675 17.64V17.64Z" fill="url(#paint0_linear_3_239)" />
|
|
<defs>
|
|
<linearGradient id="paint0_linear_3_239" x1="8.16" y1="6.6" x2="29.4" y2="33.6" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#FF3863" />
|
|
<stop offset="1" stop-color="#FF5E51" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</button>
|
|
<button id="tinder-chats-footer" onclick="tinderHeaderRouter(this, '#tinder-chat-page')">
|
|
<svg class="tinder-header-icon" width="24" height="24" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M4.76191 16.9416L1.01578e-05 18L1.05841 13.2381C0.361389 11.9343 -0.00221566 10.4784 1.01578e-05 9C1.01578e-05 4.0293 4.02931 0 9.00001 0C13.9707 0 18 4.0293 18 9C18 13.9707 13.9707 18 9.00001 18C7.52162 18.0022 6.06566 17.6386 4.76191 16.9416Z" fill="#B3B3B3" />
|
|
</svg>
|
|
</button>
|
|
</header>
|
|
<article id="tinder-home-page" class="relative w-full h-full p-4 flex flex-col">
|
|
<section id="tinder-user-swipers" class="bg-shadow">
|
|
<div class="swiper tinder-user-images rounded-xl h-80">
|
|
<div class="swiper-wrapper"></div>
|
|
<div class="tinder-prev-user-image"></div>
|
|
<div class="tinder-next-user-image"></div>
|
|
<div class="swiper-pagination tinder-swiper-pagination"></div>
|
|
</div>
|
|
</section>
|
|
<footer class="flex flex-row items-center justify-center gap-6 mt-5">
|
|
<button class="tinder-home-footer-button" data-type="dislike">
|
|
<i class="fas fa-times text-red-500"></i>
|
|
</button>
|
|
<button class="tinder-home-footer-button" data-type="undo">
|
|
<i class="fas fa-redo text-orange-500"></i>
|
|
</button>
|
|
<button class="tinder-home-footer-button" data-type="like">
|
|
<i class="fas fa-heart"></i>
|
|
</button>
|
|
</footer>
|
|
</article>
|
|
<article id="tinder-profile-page" class="relative w-full h-full flex-col overflow-y hide">
|
|
<header class="flex flex-col justify-center items-center gap-2">
|
|
<img id="tinder-profile-avatar" width="100" height="100" class="rounded-full" alt="" />
|
|
<a class="font-semibold text-lg" id="tinder-profile-name">Mike, 22</a>
|
|
<div class="flex flex-row items-center gap-2 cursor-pointer" onclick="logoutTinderAccount()">
|
|
<i class="fas fa-sign-out-alt text-orange-600"></i>
|
|
<a class="text-orange-600 tinder-settings-logout-int">Logout</a>
|
|
</div>
|
|
</header>
|
|
<form action="#" id="tinder-profile-form" class="p-4 mt-5 flex flex-col gap-6 pb-8">
|
|
<div class="flex flex-col gap-2 tinder-settings-name">
|
|
<label for="name" class="font-semibold text-white tinder-settings-name-int">Name</label>
|
|
<input type="text" name="name" id="tinder-profile-name-input" class="border bg-shadow p-4 w-full text-white rounded-lg" />
|
|
</div>
|
|
<div class="flex flex-col gap-2 tinder-settings-pass">
|
|
<label for="name" class="font-semibold text-white tinder-settings-pass-int">Password</label>
|
|
<input type="password" name="password" id="tinder-profile-password-input" class="border bg-shadow p-4 w-full text-white rounded-lg" />
|
|
</div>
|
|
<div class="flex flex-col gap-2 tinder-settings-photos">
|
|
<label for="name" class="font-semibold text-white tinder-settings-photos-int">Photos</label>
|
|
<section class="grid grid-cols-3 margin-center gap-4 px-6 tinder-photo-list" id="tinder-profile-photo-list"></section>
|
|
</div>
|
|
<div class="flex flex-col gap-2 tinder-settings-about">
|
|
<label for="bio" class="font-semibold text-white tinder-settings-bio-int">About You</label>
|
|
<input type="text" name="bio" id="tinder-profile-bio-input" class="border bg-shadow p-4 w-full text-white rounded-lg" />
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label for="interested-in" class="font-semibold text-white tinder-settings-inter-int">Interested In</label>
|
|
<select class="bg-shadow p-4 w-full text-white rounded-lg border-none" id="tinder-profile-interested-in">
|
|
<option class="td-men" value="male">MEN</option>
|
|
<option class="td-women" value="female">WOMEN</option>
|
|
<option class="td-everyone" value="everyone">EVERYONE</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col gap-2 tinder-settings-gender">
|
|
<label for="gender" class="font-semibold text-white tinder-settings-gender-int">Gender</label>
|
|
<select class="bg-shadow p-4 w-full text-white rounded-lg border-none" id="tinder-profile-gender">
|
|
<option class="td-male" value="male">MALE</option>
|
|
<option class="td-female" value="female">WOMAN</option>
|
|
</select>
|
|
</div>
|
|
<div class="tinder-settings-middle"></div>
|
|
<button class="tinder-bg p-6 rounded-2xl text-white- font-semibold tinder-save-but">Save</button>
|
|
<a class="bg-red-700 p-6 rounded-2xl text-white- font-semibold mt-5 text-center tinder-delete-but" onclick="tinderDeleteAccount()">Delete Account</a>
|
|
</form>
|
|
</article>
|
|
<article id="tinder-chat-page" class="tinder-screen px-4 hide">
|
|
<section id="tinder-chat-home" class="tinder-screen top-15 p-4 overflow-y">
|
|
<header class="bg-dark p-4 rounded-lg w-full items-center flex flex-row gap-4 mt-3">
|
|
<i class="fas fa-search text-muted"></i>
|
|
<input type="text" class="w-full text-white rounded-lg tinder-search-messages" onkeyup="tinderChatSearchInputHandle(this)" placeholder="Search" />
|
|
</header>
|
|
<section id="tinder-chat-new-matches">
|
|
<header class="flex flex-row items-center gap-2 mt-5">
|
|
<a class="tinder-text tinder-new-matches">NEW MATCHES</a>
|
|
<a id="tinder-chat-new-matches-count" class="tinder-bg text-white- w-20 h-20 rounded-full flex items-center justify-center">1</a>
|
|
</header>
|
|
<article id="tinder-chat-new-matches-list" class="flex flex-row items-center flex-wrap gap-4 mt-3"></article>
|
|
</section>
|
|
<section id="tinder-chat-chats" class="h-80 overflow-y">
|
|
<header class="flex flex-row items-center gap-2 mt-5">
|
|
<a class="tinder-text tinder-messages-news">MESSAGES</a>
|
|
</header>
|
|
<article id="tinder-chat-list" class="flex flex-col gap-4 mt-3 pb-8"></article>
|
|
</section>
|
|
</section>
|
|
<section id="tinder-chat-opened-chat" class="tinder-screen w-full h-full z-20 hide">
|
|
<header class="flex flex-row gap-4 items-center px-6 border-b pb-3 pt-8 bg-black sticky top-0">
|
|
<i class="fas fa-chevron-left tinder-text fa-lg" onclick="gotoBackPage('#tinder-chat-opened-chat')"></i>
|
|
<img id="tinder-chat-avatar" width="40" height="40" class="rounded-full" src="" />
|
|
<a id="tinder-chat-name">Tyler</a>
|
|
</header>
|
|
<section id="tinder-chat-messages" class="px-6 mt-5 flex flex-col gap-6 overflow-y flex-1"></section>
|
|
<footer class="flex flex-row gap-4 items-center px-6 border-t pt-3 pb-8 bg-black border-t w-full">
|
|
<i class="fas fa-plus fa-lg cursor-pointer tinder-text" onclick="openTinderAlternativeMenu()"></i>
|
|
<input type="text" id="tinder-chat-input" class="tinder-text w-full" placeholder="Type a message" />
|
|
<i class="fas fa-paper-plane tinder-text fa-lg" onclick="tinderSendMessage()"></i>
|
|
</footer>
|
|
</section>
|
|
</article>
|
|
<div class="tinder-match-done">
|
|
<article id="tinder-matched-page" class="tinder-screen z-30 justify-center items-center p-6 hide">
|
|
<img src="./img/tinder/match.png" width="100%" class="mb-7" />
|
|
<a id="tinder-matched-text" class="mb-2 text-white-">Emma likes you too!</a>
|
|
<div class="flex flex-row justify-between items-center w-full bg-white- p-6 rounded-lg">
|
|
<input type="text" id="tinder-matches-chat-input" class="tinder-text border-r" placeholder="Say something nice" />
|
|
<a class="tinder-text cursor-pointer tinder-match-send" onclick="tinderMatchesSendMessage()">Send</a>
|
|
</div>
|
|
<footer class="mt-16">
|
|
<a class="text-white- cursor-pointer tinder-keep-swip" onclick="tinderBackMatchedPage()">Keep Swiping</a>
|
|
</footer>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="application rentel-app">
|
|
<div class="rentel-header">
|
|
<p>AVENTON</p>
|
|
</div>
|
|
<div class="rentel-items">
|
|
<div class="rentelapp" data-app="territory">
|
|
<div class="rentelapp-icon">
|
|
<i class="fas fa-globe-europe"></i>
|
|
</div>
|
|
<div class="rentelapp-title">
|
|
Territory
|
|
</div>
|
|
<div class="rentelapp-creator">
|
|
RealisticLife
|
|
</div>
|
|
<div class="rentelapp-download">
|
|
<i class="fas fa-download"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application darkchat-app">
|
|
<header>
|
|
<div class="circle-container">
|
|
<div class="online-players-circle"></div>
|
|
<h3 id="online-players">29 online</h3>
|
|
</div>
|
|
</header>
|
|
<div id="darkchat-container">
|
|
<div class="darkchat-content">
|
|
<a># Blackmarket</a>
|
|
</div>
|
|
</div>
|
|
<div id="darkchat-message-container">
|
|
<div id="darkchat-message-header-bg"></div>
|
|
<div id="back-container" onclick="darkChatBack()" style="top: 8%;">
|
|
<img id="back_icon" src="./img/back.png" style="filter: invert(99%) sepia(57%) saturate(2%) hue-rotate(167deg) brightness(120%) contrast(100%);">
|
|
<a>Black market</a>
|
|
</div>
|
|
<div id="darkchat-messages">
|
|
<div class="darkchat-message-content">
|
|
<a class="darkchat-date">7:51:01 PM</a>
|
|
<a class="darkchat-message">Pedrito</a>
|
|
</div>
|
|
</div>
|
|
<div id="darkchat-sendMessageContainer">
|
|
<input type="text" id="darkchat-message-input" placeholder="Message">
|
|
<button id="darkchat-message-send" onclick="newDarkchatMessage()"><i class="fa-solid fa-paper-plane"></i></button>
|
|
<img onclick="newDarkChatLocation(true)" src="./img/message_app/location.png">
|
|
</div>
|
|
</div>
|
|
<div id="darkchat-creategroup">
|
|
<div id="darkchat-creategroup-bg" class="bg-filter-blur"></div>
|
|
<div id="darkchat-creategroup-contents">
|
|
<a>Start new conversation</a>
|
|
<form class="form-style-7" id="darkchat-createGroupForm">
|
|
<ul>
|
|
<li>
|
|
<label for="name" id="darkchat-menu-name">Group Name</label>
|
|
<input type="text" id="darkchat-groupname" name="name" maxlength="100">
|
|
<span id="darkchat-menu-name-desc">Enter Group Name</span>
|
|
</li>
|
|
<li>
|
|
<label for="password" id="darkchat-menu-pass">Password</label>
|
|
<input type="password" id="darkchat-groupassword" name="password" maxlength="100">
|
|
<span id="darkchat-menu-pass-desc">Enter Password</span>
|
|
</li>
|
|
</ul>
|
|
<div id="options">
|
|
<div id="cancel" onclick="CloseGroupWindow()">Cancel</div>
|
|
<div id="confirm" onclick="CreateNewGroup()">Confirm</div>
|
|
</div>
|
|
</form>
|
|
<form class="form-style-7" id="darkchat-passwordCheckForm">
|
|
<ul>
|
|
<li>
|
|
<label for="password" id="darkchat-menu-pass-check-title">Password</label>
|
|
<input type="password" id="darkchat-groupassword2" name="password" maxlength="100">
|
|
<span id="darkchat-menu-pass-check">Enter Password</span>
|
|
</li>
|
|
</ul>
|
|
<div id="options">
|
|
<div id="cancel" class="cancel-darkchat-pass" onclick="CloseGroupWindow()">Cancel</div>
|
|
<div id="confirm" class="confirm-darkchat-pass" onclick="CheckPassword()">Confirm</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<!-- plus icon -->
|
|
<i class="fa-solid fa-comment-dots fa-2xl text-white" onclick="OpenCreteGroupWindow()"></i>
|
|
</footer>
|
|
</div>
|
|
|
|
<div class="application darkweb-app">
|
|
<div class="darkweb-header">
|
|
<img src="../html/img/app_details/onion.png" class="darkweb-header-logo">
|
|
<p>Onion Browser</p>
|
|
<span>for Smartphone</span>
|
|
</div>
|
|
<article>
|
|
<h1>Explore.</h1>
|
|
<h1>Privately.</h1>
|
|
</article>
|
|
<div class="darkweb2-list"></div>
|
|
</div>
|
|
|
|
<div class="facetime-app application">
|
|
<section id="facetime-home" class="facetime-screen p-6">
|
|
<header class="flex flex-row items-center justify-between pt-7">
|
|
<h2 class="facetime-title">FaceTime</h2>
|
|
<i class="fas fa-plus fa-xl text-white text-green-500" onclick="gotoNextPage('faceTimeCreatePage')"></i>
|
|
</header>
|
|
<ul id="facetime-app-history" class="flex flex-col gap-2 rounded-2xl p-4 bg-dark overflow-y max-h-86 cursor-pointer hide-when-empty"></ul>
|
|
</section>
|
|
<section id="facetime-new" class="facetime-screen p-6 hide">
|
|
<header class="pt-7 pb-4">
|
|
<div class="flex flex-row w-full justify-end">
|
|
<a class="self-end text-green-500 cursor-pointer facetime-cancel-home" onclick="gotoBackPage('#facetime-new')">Cancel</a>
|
|
</div>
|
|
<h2 class="facetime-title-new">New FaceTime</h2>
|
|
</header>
|
|
<section class="flex flex-row items-center gap-2 border-b pb-3 w-full relative">
|
|
<a class="text-sm text-muted new-facetime-to">To:</a>
|
|
<input type="text" id="facetime-call-to" class="w-full text-white text-green-500" oninput="inputSearch(this, 'facetime-contact-name', 'facetime-contact')" />
|
|
<div id="facetime-contact-list"></div>
|
|
</section>
|
|
<a class="font-semibold text-xl mb-5 mt-5 facetime-suggested-people">Suggested</a>
|
|
<ul id="facetime-new-suggested" class="grid grid-cols-4 gap-y-6"></ul>
|
|
<footer class="flex flex-row items-center justify-center w-full">
|
|
<button id="facetime-call-button" onclick="faceTimeCall()" class="p-4 bg-dark rounded-xl flex flex-row items-center gap-4 disabled">
|
|
<i class="fas fa-video"></i>
|
|
<a class="facetime-title">FaceTime</a>
|
|
</button>
|
|
</footer>
|
|
|
|
</section>
|
|
<section id="facetime-call-page" class="facetime-screen relative hide">
|
|
<video id="remote-video" width="100%" height="100%" class="content-area" autoplay></video>
|
|
<canvas id="local-video" class="content-area"></canvas>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="discord-app application">
|
|
<section id="discord-login-window">
|
|
<article id="discord-register-firstscreen" class="w-full h-full items-center justify-center gap-8 flex flex-col absolute left-0 bg-black">
|
|
<header class="discord-register-screen-header absolute top-0">
|
|
<img src="../html/img/discord/discord.png" class="rounded-xl discord_logo" />
|
|
</header>
|
|
<img src="../html/img/discord/discord_login.png" class="discord_background_login" />
|
|
<a class="welcome-discord">Welcome to Catcord</a> <!-- Corrección aquí -->
|
|
<h2 id="discord-register-header">See what's happening in the world right now</h2>
|
|
<article class="twitter-white-btn cursor-pointer" onclick="gotoNextPage('discordGotoCreateAccount')" id="discord-register-create-account">Create account</article>
|
|
<article class="twitter-white-btn cursor-pointer discord-login-button-first" onclick="gotoNextPage('#discord-register-firstscreen')">Login</article>
|
|
<!-- <footer class="absolute left-0 bottom-5 w-full flex items-center justify-center">
|
|
<a class="text-muted" id="discord-register-question" onclick="gotoNextPage('#discord-register-firstscreen')">Have an account already? <span class="blue_text">Log in</span></a>
|
|
</footer> -->
|
|
</article>
|
|
<section id="discord-register-screen" class="discord-screen p-3 hide">
|
|
<article id="discord-register-screen-first" class="discord-screen discord-register-screen">
|
|
<header class="discord-register-screen-header">
|
|
<a class="absolute left-2 top-0 pt-8 w-full cursor-pointer discord-register-cancel" onclick="gotoBackPage('#discord-register-screen')">Cancel</a>
|
|
<img src="../html/img/apps/discord.png" class="rounded-xl" width="42" height="42" />
|
|
</header>
|
|
<h3 class="pb-4" id="discord-register-create-your-account">Create your account</h3>
|
|
<form action="#" id="twitter-create-account-form" class="discord-form">
|
|
<input type="text" class="account-placeholder-name" name="name" placeholder="Name" required />
|
|
<input type="text" class="account-placeholder-number" name="phone" placeholder="Phone Number" title="Phone number must be 10 character" required />
|
|
<button class="twitter-blue-btn absolute bottom-5">Sign Up</button>
|
|
</form>
|
|
<p class="text-muted pt-4 pb-5 discord-register-information">
|
|
This will not be shown publicly. Confirm your own age, even if this account is for a business, a pet, or something else.
|
|
</p>
|
|
</article>
|
|
<article id="discord-register-screen-second" class="discord-screen hide discord-register-screen">
|
|
<header class="discord-register-screen-header">
|
|
<i class="fa-solid fa-chevron-left absolute left-2 top-0 pt-8 w-full"></i>
|
|
<img src="../html/img/apps/discord.png" class="rounded-xl" width="42" height="42" />
|
|
</header>
|
|
<h3 class="pb-4 discord-register-code-send">We sent you a code</h3>
|
|
<p class="text-muted pb-6 discord-register-code-enter">Enter it below to verify your phone number.</p>
|
|
<form action="#" id="twitter-verify-phone-form" class="discord-form">
|
|
<input id="discord-input-reset-code" type="text" name="code" placeholder="Code" required />
|
|
<button class="twitter-blue-btn absolute bottom-5 discord-rescue-account-next">Next</button>
|
|
</form>
|
|
</article>
|
|
<article id="discord-register-screen-third" class="discord-screen hide discord-register-screen">
|
|
<header class="discord-register-screen-header">
|
|
<img src="../html/img/apps/discord.png" class="rounded-xl" width="42" height="42" />
|
|
</header>
|
|
<h3 class="pb-4 discord-register-password">You'll need a password</h3>
|
|
<p class="text-muted pb-6 discord-register-password-info"> Make sure it's at least 8 characters or more.</p>
|
|
<form action="#" id="twitter-create-password-form" class="discord-form">
|
|
<input type="password" id="discord-input-reset-password" name="password" minlength="8" placeholder="Password" required />
|
|
<button class="twitter-blue-btn absolute bottom-5 discord-rescue-account-next">Next</button>
|
|
</form>
|
|
</article>
|
|
<article id="discord-register-screen-fourth" class="discord-screen hide discord-register-screen">
|
|
<header class="discord-register-screen-header">
|
|
<img src="../html/img/apps/discord.png" class="rounded-xl" width="42" height="42" />
|
|
</header>
|
|
<h3 class="pb-4 discord-register-username-header">What should we call you?</h3>
|
|
<p class="text-muted pb-6 discord-register-username-info">Choose a username. You can always change it later.</p>
|
|
<form action="#" id="twitter-create-username-form" class="discord-form">
|
|
<input type="text" name="username" id="discord-input-username" placeholder="Username" required pattern="[A-Za-z0-9]+" />
|
|
<button class="twitter-blue-btn absolute bottom-5 discord-create-account-success">Create Your Account</button>
|
|
</form>
|
|
</section>
|
|
<section id="discord-login-screen" class="discord-screen hide">
|
|
<header class="discord-register-screen-header">
|
|
<a class="absolute left-2 top-0 pt-8 w-full cursor-pointer discord-register-cancel" onclick="gotoBackPage('#discord-login-screen')">Cancel</a>
|
|
<img src="../html/img/apps/discord.png" class="rounded-xl" width="42" height="42" />
|
|
</header>
|
|
<h3 class="pb-4 account-log-in-header">Log in to Discord</h3>
|
|
<form action="#" id="discord-login-form" class="discord-form">
|
|
<input type="text" name="username" id="discord-username-input" placeholder="Username" required />
|
|
<input type="password" name="password" id="discord-password-input" placeholder="Password" required />
|
|
<button class="twitter-blue-btn absolute bottom-5 account-log-in">Log in</button>
|
|
</form>
|
|
<!-- forgot password? -->
|
|
<a class="text-red-500 pt-4 pb-5 self-end mr-3 cursor-pointer forgot-your-password" onclick="gotoNextPage('discordPasswordScreen')">Forgot password?</a>
|
|
</section>
|
|
<section id="discord-forgot-password-screen" class="discord-screen hide">
|
|
<header class="discord-register-screen-header">
|
|
<a class="absolute left-2 top-0 pt-8 w-full cursor-pointer discord-register-cancel" onclick="gotoBackPage('#discord-forgot-password-screen')">Cancel</a>
|
|
<img src="../html/img/apps/discord.png" class="rounded-xl" width="42" height="42" />
|
|
</header>
|
|
<section id="discord-forgot-password-accounts" class="overflow-y gap-4 flex flex-col pt-4"></section>
|
|
</section>
|
|
</section>
|
|
<section id="discord-window" class="discord-screen hide">
|
|
<div class="chat-room-header">
|
|
<div class="chat-room-view-rooms" id="open-owned-rooms"><i class="fa fa-book-reader"></i></div>
|
|
<!-- <div class="chat-room-title"><i class="fab fa-discord"></i></div> -->
|
|
<img src="./img/discord/single_logo.png" class="chat-room-title">
|
|
<div class="chat-room-join-room" id="open-private-rooms"><i class="fa fa-plus-square"></i></div>
|
|
<div id="discord-logout" onclick="logoutDiscordAccount()">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<h5 class="group-chats-title discord-official-channels">OFFICIAL CHANNELS</h5>
|
|
<div class="pinned-chats" id="pinned-rooms-list"></div>
|
|
|
|
<div id="joined-rooms-container">
|
|
<h5 class="group-chats-title discord-your-channels">YOUR JOINED CHANNELS</h5>
|
|
<div class="group-chats" id="joined-rooms-list"></div>
|
|
</div>
|
|
|
|
<h5 class="group-chats-title discord-public-channels">PUBLIC CHANNELS</h5>
|
|
<div class="discord-public-channels-info" id="no-public-rooms-notice">There are currently no registered channels!<br>You may rent some at the cyberbar!</div>
|
|
<div class="group-chats" id="public-rooms-list"></div>
|
|
|
|
<div class="chat-room-view" style="display: none;">
|
|
<div class="chat-room-header">
|
|
<div class="chat-room-back"><i class="fa fa-align-justify"></i></div>
|
|
<div class="chat-room-pin" id="search-messages"><i class="fa fa-search"></i></div>
|
|
<div class="chat-room-title"><i class="fa fa-hashtag"></i> <span></span></div>
|
|
<div class="chat-room-pin" id="pinned-messages"><i class="fa fa-thumbtack"></i></div>
|
|
<div class="chat-room-memberslist"><i class="fa fa-users"></i></div>
|
|
</div>
|
|
<div class="secured-banner discord-security-banner">This channel is operating under a secured VPN</div>
|
|
<div class="chat-room-container">
|
|
<div class="search-results">
|
|
<a href="#" id="close-search"><i class="fa fa-times"></i></a>
|
|
<input type="text" class="button-outlined" id="search-message" placeholder="Search for a message." style="padding-right: 25px">
|
|
|
|
<div id="no-search-notice">There are no messages matching your search.</div>
|
|
<div class="search-contents" id="search-messages-content"></div>
|
|
</div>
|
|
<div class="pinned-results">
|
|
<div id="no-pinned-notice">There are currently no pinned messages in this channel.</div>
|
|
|
|
<div class="search-contents" id="pinned-messages-content"></div>
|
|
</div>
|
|
<div class="chat-view-container">
|
|
<div class="chat-view"></div>
|
|
</div>
|
|
<div class="chat-send-message">
|
|
<a href="#" id="send-message"><i class="fa fa-paper-plane"></i></a>
|
|
<input type="text" class="send-chat-message" id="submit-message" placeholder="Press [Enter] to send.">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-members-view" style="display:none;">
|
|
<div class="members-list-actions">
|
|
<div id="members-back-btn"><i class="fas fa-arrow-circle-left"></i> Back</div>
|
|
<div class="chat-room-join"><a href="#" id="join-room"><i class="fa fa-plus"></i> Join</a></div>
|
|
<div class="chat-room-leave"><a href="#" id="leave-room"><i class="fas fa-minus-circle"></i> Leave</a></div>
|
|
</div>
|
|
<h5 id="discord-chat-room-members" style="text-align: center;">Members</h5>
|
|
<div id="members-list">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-modal" id="owned-rooms-list" style="display: none;">
|
|
<div class="close-button" id="owned-rooms-list-close"><i class="fa fa-times"></i></div>
|
|
<h4 class="group-chats-title group-channels-title" style="text-align: center;">YOUR CHANNELS</h4>
|
|
|
|
<div id="no-owned-rooms-notice">You do not own any rooms. <br>You may purchase some at the internet café!</div>
|
|
|
|
<div id="owned-room-items"></div>
|
|
</div>
|
|
<div class="chat-modal" id="join-room-code" style="display: none;">
|
|
<div class="close-button" id="join-room-code-close"><i class="fa fa-times"></i></div>
|
|
|
|
<h4 class="group-chats-title join-code-channels-title">JOIN A CHANNEL BY CODE</h4>
|
|
|
|
<div class="room-join-code">
|
|
<input type="text" class="button-outlined room-input-code" maxlength=5 placeholder="42069">
|
|
<h5 class="group-chats-title join-code-channels-info">Enter A Code</h5>
|
|
</div>
|
|
</div>
|
|
<div class="chat-modal" id="enter-room-pin" style="display: none;">
|
|
<div class="close-button" id="enter-room-pin-close"><i class="fa fa-times"></i></div>
|
|
|
|
<h4 class="group-chats-title enter-code-channels">Enter Passcode: <span id="room-name-pin"></span></h4>
|
|
|
|
<div class="room-join-code">
|
|
<input type="password" class="button-outlined room-input-code" id="room-pin-input" maxlength=50 placeholder="XXXXXX">
|
|
<h5 id="enter-code-channels-info" style="text-align: center">This room is private, please enter the passcode.</h5>
|
|
</div>
|
|
</div>
|
|
<div class="chat-modal" id="confirm-deactivation" style="display: none;">
|
|
<div class="close-button" id="confirm-deactivation-close"><i class="fa fa-times"></i></div>
|
|
|
|
<h4 class="group-chats-title" id="enter-code-channels-question" style="text-align: center;">Are you sure you want to close this channel? Messages will be lost forever.</h4>
|
|
|
|
<div class="confirm-buttons">
|
|
<a href="#" class="confirm discord-confirm">Confirm</a>
|
|
<a href="#" class="reject discord-cancel">Cancel</a>
|
|
</div>
|
|
</div>
|
|
<div class="modal-overlay" style="display: none;"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="application whatsapp-app">
|
|
<section id="whatsapp-login-window" class="whatsapp-screen z-20">
|
|
<article id="whatsapp-register-startup-page" class="whatsapp-screen justify-center text-center">
|
|
<img src="./img/whatsapp_app/whatsapp-login.png" alt="" class="whatsapp-logo">
|
|
<h3>Welcome to WhatsApp</h3>
|
|
<p class="text-muted mb-7" id="whatsapp-login-description">
|
|
Read our <a class="blue_text">Privacy Policy.</a> Tap "Agree & continue" to accept the <a class="blue_text">Terms of Service</a>.
|
|
</p>
|
|
<button class="blue_text text-2xl font-bold" onclick="gotoNextPage('#whatsapp-register-startup-page')">Agree & Continue</button>
|
|
</article>
|
|
<article id="whatsapp-register-second-screen" class="whatsapp-screen whatsapp-register-screen p-3 hide">
|
|
<form class="whatsapp-register-form">
|
|
<header class="whatsapp-register-screen-header whatsapp-header-phone">
|
|
<i class="fas fa-chevron-left"></i>
|
|
<h4>Enter Your Phone Number</h4>
|
|
<button type="submit" class="blue_text">Done</button>
|
|
</header>
|
|
<article class="p-4" id="whatsapp-header-phone-description">
|
|
<p class="text-muted p-4">Whatsapp will need to verify your phone number (carrier changes may apply)</p>
|
|
<input type="text" class="whatsapp-form-input whatsapp-header-phone-input" name="phone" placeholder="Phone Number" required>
|
|
</article>
|
|
</form>
|
|
</article>
|
|
<article id="whatsapp-register-third-screen" class="whatsapp-screen whatsapp-register-screen p-3 hide">
|
|
<form class="whatsapp-register-form">
|
|
<header class="whatsapp-register-screen-header whatsapp-header-code">
|
|
<i class="fas fa-chevron-left"></i>
|
|
<h4>We sent you a code</h4>
|
|
<button type="submit" class="blue_text">Done</button>
|
|
</header>
|
|
<article class="p-4" id="whatsapp-header-code-description">
|
|
<p class="text-muted p-4">Enter it below to verify your phone number.</p>
|
|
<input type="text" class="whatsapp-form-input whatsapp-header-code-input" name="code" placeholder="Code" required>
|
|
</article>
|
|
</form>
|
|
</article>
|
|
<article id="whatsapp-register-fourth-screen" class="whatsapp-screen whatsapp-register-screen hide">
|
|
<form class="whatsapp-register-form">
|
|
<header class="whatsapp-register-screen-header whatsapp-header-create-profile">
|
|
<i class="fas fa-chevron-left"></i>
|
|
<h4>Edit Profile</h4>
|
|
<button type="submit" class="blue_text">Done</button>
|
|
</header>
|
|
<article class="rounded p-4">
|
|
<section class="flex flex-row items-center gap-6 mb-5 whatsapp-header-edit-profile">
|
|
<article class="flex flex-col gap-2 items-center" onclick="changeWhatsappAvatar()">
|
|
<img class="whatsapp-avatar" alt="" src="./img/default.png" width="54" height="54" />
|
|
<a class="blue_text">Edit</a>
|
|
</article>
|
|
<p class="text-muted w-70">Enter your name and add an optional profile picture</p>
|
|
</section>
|
|
<input type="text" name="name" class="border-t border-b w-full pt-3 pb-3 whatsapp-header-create-profile-input" placeholder="Your name" required>
|
|
</article>
|
|
</form>
|
|
</article>
|
|
</section>
|
|
<section id="whatsapp-window" class="whatsapp-screen hide">
|
|
<article id="whatsapp-chats-page" class="whatsapp-screen h-full px-4">
|
|
<section id="whatsapp-chats-list" class="whatsapp-screen h-90 p-4">
|
|
<header class="flex flex-col items-center px-4 pt-7" onclick="gotoNextPage('whatsappCreateMessage')">
|
|
<article class="flex self-end items-center">
|
|
<svg class="blue_text" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
|
|
<g>
|
|
<path fill="none" d="M0 0h24v24H0z"></path>
|
|
<path d="M16.757 3l-2 2H5v14h14V9.243l2-2V20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12.757zm3.728-.9L21.9 3.516l-9.192 9.192-1.412.003-.002-1.417L20.485 2.1z"></path>
|
|
</g>
|
|
</svg>
|
|
</article>
|
|
</header>
|
|
<div class="overflow-y w-full">
|
|
<article class="border-b pb-3 flex flex-col" id="whatsapp-home-header">
|
|
<p class="text-2xl mb-3">Chats</p>
|
|
<div class="flex flex-row items-center gap-2 w-full bg-dark p-4 rounded-xl">
|
|
<i class="fas fa-search fa-lg text-muted"></i>
|
|
<input type="text" id="whatsapp-search-chats" class="whatsapp-search-input" placeholder="Search">
|
|
</div>
|
|
<a class="blue_text mt-3 self-end text-lg" onclick="gotoNextPage('whatsappCreateGroup')">New Group</a>
|
|
</article>
|
|
<article id="whatsapp-chats" class="flex flex-col items-center gap-2 w-full"></article>
|
|
</div>
|
|
</section>
|
|
<section id="whatsapp-chat" class="whatsapp-screen h-full z-20 hide">
|
|
<div class="whatsapp-header pt-9 flex flex-row justify-between items-center w-full h-16 pb-6 border-b">
|
|
<div class="flex flex-row items-center gap-2 cursor-pointer" onclick="whatsappOpenContactInfo()">
|
|
<button id="whatsapp-chat-back" onclick="whatsappChatBack(event)">
|
|
<i class="fas fa-chevron-left fa-lg blue_text"></i>
|
|
</button>
|
|
<img class="whatsapp-contact-avatar rounded-full" width="40" height="40" src="" alt="">
|
|
<a class="whatsapp-contact-name text-lg">Test</a>
|
|
</div>
|
|
<div class="flex flex-row items-center gap-2">
|
|
<button class="whatsapp-chat-call">
|
|
<a class="blue_text mr-2" id="whatsapp-chat-call-join-call">Join Call</a>
|
|
<i class="fas fa-phone fa-lg blue_text"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="whatsapp-chat-body" class="flex flex-col justify-between w-full h-76 bg-dark whatsapp-chat-bg pb-2">
|
|
<section class="flex flex-col gap-4 overflow-y h-full" id="whatsapp-chat-messages-container">
|
|
<span class="whatsapp-chat-fixed-message">
|
|
<i class="fas fa-lock"></i> Messages and calls are end-to-end encrypted. No one outside of this chat, not even WhatsApp, can read or listen to them.
|
|
</span>
|
|
<article id="whatsapp-chat-messages" class="w-full flex flex-col gap-4 px-6"></article>
|
|
</section>
|
|
</div>
|
|
<footer id="whatsapp-chat-input-container" class="flex flex-row gap-4 p-4 w-full items-center border-t bg-black h-10">
|
|
<i class="fas fa-plus fa-lg cursor-pointer blue_text" onclick="openWhatsappAlternativeMenu()"></i>
|
|
<input type="text" id="whatsapp-chat-input" class="w-full rounded-full flex items-center justify-between bg-dark p-4">
|
|
<a id="whatsapp-record-voice-elapsed-time" style="display: none;">0:00</a>
|
|
<i id="whatsapp-record-voice-button" class="far fa-microphone fa-lg cursor-pointer blue_text"></i>
|
|
</footer>
|
|
</section>
|
|
<section id="whatsapp-contact-info" class="whatsapp-screen h-full z-30 px-4 hide">
|
|
<article id="whatsapp-contact-info-home" class="whatsapp-screen overflow-y pb-6">
|
|
<header class="flex flex-row justify-center pt-8 sticky top-0 bg-black pb-3">
|
|
<i class="fas fa-chevron-left fa-lg cursor-pointer blue_text absolute left-4" onclick="gotoBackPage('#whatsapp-contact-info')"></i>
|
|
<a id="whatsapp-header-contact-info">Contact Info</a>
|
|
<a id="whatsapp-contact-info-group-edit-button" class="absolute right-4 blue_text" onclick="gotoNextPage('whatsappEditGroup')">Edit</a>
|
|
</header>
|
|
<article class="flex flex-col mt-5 items-center justify-center w-full">
|
|
<img class="whatsapp-contact-avatar rounded-full" src="https://i.pravatar.cc/150?img=7" alt="" width="84" height="84">
|
|
<a class="whatsapp-contact-name text-2xl mt-4 cursor-pointer">John Doe</a>
|
|
<a id="whatsapp-contact-info-phone" class="text-muted mt-2">+90 555 555 55 55</a>
|
|
</article>
|
|
<article class="flex flex-row justify-center px-4">
|
|
<button class="whatsapp-chat-call px-10 py-4 blue_text mt-8 bg-dark rounded-xl flex flex-col items-center justify-center gap-4">
|
|
<i class="fas fa-phone fa-lg"></i>
|
|
<a>Call</a>
|
|
</button>
|
|
</article>
|
|
<div class="p-4">
|
|
<article class="bg-dark w-full p-6 flex items-center rounded-xl mt-5">
|
|
<a id="whatsapp-contact-info-bio">This is bio maaan</a>
|
|
</article>
|
|
<article class="bg-dark w-full p-4 rounded-xl mt-5 flex gap-4 cursor-pointer flex-col">
|
|
<div class="flex flex-row items-center gap-4 pb-3 border-b-light" onclick="gotoNextPage('whatsappOpenContactInfoMedias')">
|
|
<i class="fas fa-image fa-lg mr-2 p-4 bg-blue-600 rounded-lg"></i>
|
|
<div class="flex flex-row justify-between w-full items-center whatsapp-information-media">
|
|
<a>Media</a>
|
|
<div class="flex flex-row items-center gap-2">
|
|
<a class="text-muted" id="whatsapp-contact-info-total-media">10</a>
|
|
<i class="fas fa-chevron-right text-muted"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row items-center gap-4" onclick="gotoNextPage('whatsappOpenContactInfoWallpaper')">
|
|
<i class="fa-solid fa-mountains fa-lg mr-2 p-8px bg-purple-600 rounded-lg"></i>
|
|
<div class="flex flex-row justify-between w-full items-center whatsapp-information-wallpaper">
|
|
<a>Wallpaper</a>
|
|
<i class="fas fa-chevron-right text-muted"></i>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article id="whatsapp-contact-info-group-participants" class="flex flex-col mt-5">
|
|
<a class="text-lg" id="participants-count">2 Participants</a>
|
|
<div class="flex flex-col gap-4 mt-4 bg-dark px-4 py-2 py-2 rounded-xl">
|
|
<div class="flex flex-row gap-4 whatsapp-information-add-participants" onclick="gotoNextPage('whatsappCreateGroup')">
|
|
<i class="fas fa-plus cursor-pointer text-xl blue_text bg-dark rounded-full flex justify-center items-center" style="padding: 12px"></i>
|
|
<a class="blue_text w-full border-b-light pb-3 items-center flex">Add Participants</a>
|
|
</div>
|
|
<section id="participants-list" class="flex flex-col gap-4"></section>
|
|
</div>
|
|
</article>
|
|
<article class="bg-dark w-full p-6 rounded-xl mt-5 flex flex-row gap-4 cursor-pointer whatsapp-information-clear-chat" onclick="whatsappClearOpenedChat()">
|
|
<a class="text-red-600">Clear Chat</a>
|
|
</article>
|
|
<article id="whatsapp-contact-info-group-interactions" onclick="whatsappExitGroup()" class="bg-dark w-full p-6 rounded-xl mt-5 flex flex-row gap-4 cursor-pointer">
|
|
<a class="text-red-600">Exit Group</a>
|
|
</article>
|
|
<article id="whatsapp-contact-info-group-created" class="text-muted mt-3 flex flex-col px-4 pb-5">
|
|
<a>Group created by you</a>
|
|
<a>Created at 10:21</a>
|
|
</article>
|
|
</div>
|
|
</article>
|
|
<article id="whatsapp-contact-info-medias" class="whatsapp-screen hide whatsapp-information-media">
|
|
<header class="pt-8 px-4 flex flex-row justify-center border-b pb-3">
|
|
<i class="fas fa-chevron-left fa-lg cursor-pointer blue_text absolute left-4" onclick="gotoBackPage('#whatsapp-contact-info-medias')"></i>
|
|
<a>Media</a>
|
|
</header>
|
|
<section id="whatsapp-contact-info-media-list" class="overflow-y flex flex-col gap-4 mt-5 px-4"></section>
|
|
</article>
|
|
<article id="whatsapp-contact-info-wallpaper" class="whatsapp-screen hide whatsapp-information-wallpaper">
|
|
<header class="pt-8 px-4 flex flex-row justify-center border-b pb-3 chat-wallpaper-la">
|
|
<i class="fas fa-chevron-left fa-lg cursor-pointer blue_text absolute left-4" onclick="gotoBackPage('#whatsapp-contact-info-wallpaper')"></i>
|
|
<a>Chat Wallpaper</a>
|
|
</header>
|
|
<article class="flex flex-row items-center mt-5 border-b pb-3 px-4 gap-4 cursor-pointer" onclick="changeWhatsappChatWallpaper()">
|
|
<!-- image icon -->
|
|
<i class="fas fa-image text-2xl cursor-pointer text-muted blue_text"></i>
|
|
<div id="whatsapp-wallpaper-photo-option">
|
|
<a>Photos</a>
|
|
</div>
|
|
<i class="fas fa-chevron-right cursor-pointer text-muted absolute right-4"></i>
|
|
</article>
|
|
<article class="grid grid-cols-3 items-center justify-center w-full mt-5 gap-4 whatsapp-wallpaper-custom-grid">
|
|
<div class="flex flex-col gap-2 cursor-pointer whatsapp-wallpaper-custom" onclick="changeWhatsappChatWallpaper('./img/whatsapp_app/whatsapp-wallpaper-1.jpg')">
|
|
<img src="./img/whatsapp_app/whatsapp-wallpaper-1.jpg" alt="" width="100" height="240">
|
|
<a>Classic Wallpaper</a>
|
|
</div>
|
|
<div class="flex flex-col gap-2 cursor-pointer whatsapp-wallpaper-custom" onclick="changeWhatsappChatWallpaper('./img/whatsapp_app/whatsapp-wallpaper-2.jpg')">
|
|
<img src="./img/whatsapp_app/whatsapp-wallpaper-2.jpg" alt="" width="100" height="240">
|
|
<a>Dark</a>
|
|
</div>
|
|
<div class="flex flex-col gap-2 cursor-pointer whatsapp-wallpaper-custom" onclick="changeWhatsappChatWallpaper('./img/whatsapp_app/whatsapp-wallpaper-3.jpg')">
|
|
<img src="./img/whatsapp_app/whatsapp-wallpaper-3.jpg" alt="" width="100" height="240">
|
|
<a>Dark</a>
|
|
</div>
|
|
<div class="flex flex-col gap-2 cursor-pointer whatsapp-wallpaper-custom" onclick="changeWhatsappChatWallpaper('./img/whatsapp_app/whatsapp-wallpaper-4.jpg')">
|
|
<img src="./img/whatsapp_app/whatsapp-wallpaper-4.jpg" alt="" width="100" height="240">
|
|
<a>Bright</a>
|
|
</div>
|
|
<div class="flex flex-col gap-2 cursor-pointer whatsapp-wallpaper-custom" onclick="changeWhatsappChatWallpaper('./img/whatsapp_app/whatsapp-wallpaper-5.jpg')">
|
|
<img src="./img/whatsapp_app/whatsapp-wallpaper-5.jpg" alt="" width="100" height="240">
|
|
<a>Solid Colors</a>
|
|
</div>
|
|
<div class="flex flex-col gap-2 cursor-pointer whatsapp-wallpaper-custom" onclick="changeWhatsappChatWallpaper('./img/whatsapp_app/whatsapp-wallpaper-6.jpg')">
|
|
<img src="./img/whatsapp_app/whatsapp-wallpaper-6.jpg" alt="" width="100" height="240">
|
|
<a>Solid Colors</a>
|
|
</div>
|
|
</article>
|
|
</article>
|
|
<article id="whatsapp-contact-info-group-edit" class="whatsapp-screen hide">
|
|
<header class="pt-8 px-4 flex flex-row justify-center border-b pb-3">
|
|
<a class="absolute left-4 blue_text whatsapp-edit-group-cancel" onclick="gotoBackPage('#whatsapp-contact-info-group-edit')">Cancel</a>
|
|
<a class="whatsapp-edit-group-header">Edit Group</a>
|
|
<a class="absolute right-4 blue_text whatsapp-edit-group-header-save" onclick="whatsappEditGroup()">Done</a>
|
|
</header>
|
|
<section class="flex flex-col gap-4 justify-center items-center mt-5 cursor-pointer whatsapp-edit-group-avatar">
|
|
<img onclick="whatsappEditGroupAvatar()" class="whatsapp-contact-avatar rounded-full" src="./img/default.png" alt="" width="100" height="100" />
|
|
<a class="blue_text">Add Photo</a>
|
|
</section>
|
|
<section class="p-4 mt-5 bg-dark">
|
|
<input id="whatsapp-contact-info-group-edit-group-name" type="text" placeholder="Group Name" class="w-full p-2">
|
|
</section>
|
|
<section class="p-4 mt-5 bg-dark">
|
|
<input id="whatsapp-contact-info-group-edit-group-bio" type="text" placeholder="Group Description" class="w-full p-2">
|
|
</section>
|
|
</article>
|
|
</section>
|
|
</section>
|
|
<section id="whatsapp-new-chat" class="whatsapp-screen h-full z-20 hide">
|
|
<header class="pt-8 flex flex-col gap-6 pb-3">
|
|
<div class="flex flex-row justify-center relative whatsapp-add-new-chat">
|
|
<!-- chevron left -->
|
|
<i class="fas fa-chevron-left fa-lg cursor-pointer blue_text absolute left-4" onclick="gotoBackPage('#whatsapp-new-chat')"></i>
|
|
<a class="text-xl">New Chat</a>
|
|
</div>
|
|
<div class="flex flex-row justify-center bg-dark p-4 rounded-xl w-95 margin-center items-center">
|
|
<i class="fas fa-search fa-lg cursor-pointer text-muted mr-2"></i>
|
|
<input type="text" id="whatsapp-new-chat-search" placeholder="Search" class="w-full flex">
|
|
</div>
|
|
</header>
|
|
<article id="whatsapp-create-chat-lists" class="flex flex-col overflow-y"></article>
|
|
</section>
|
|
<section id="whatsapp-new-group" class="whatsapp-screen h-full z-40 hide">
|
|
<article id="whatsapp-new-group-add-participants" class="whatsapp-screen">
|
|
<header class="pt-8 flex flex-col gap-6 pb-3">
|
|
<div class="flex flex-row justify-center relative">
|
|
<i class="fas fa-chevron-left fa-lg cursor-pointer blue_text absolute left-4" onclick="gotoBackPage('#whatsapp-new-group')"></i>
|
|
<a class="text-xl whatsapp-information-add-participants">Add Participants</a>
|
|
<a class="text-xl absolute blue_text right-4 whatsapp-information-add-participants-save" onclick="whatsappSelectUsers()">Next</a>
|
|
</div>
|
|
<div class="flex flex-row justify-center bg-dark p-4 rounded-xl w-95 margin-center items-center">
|
|
<i class="fas fa-search fa-lg cursor-pointer text-muted mr-2"></i>
|
|
<input type="text" id="whatsapp-new-group-search" placeholder="Search" class="w-full flex">
|
|
</div>
|
|
</header>
|
|
<article id="whatsapp-create-group-lists" class="flex flex-col overflow-y"></article>
|
|
</article>
|
|
<article id="whatsapp-new-group-add-informations" class="whatsapp-screen hide">
|
|
<header class="pt-8 flex flex-col gap-6 pb-3">
|
|
<div class="flex flex-row justify-center relative">
|
|
<i class="fas fa-chevron-left fa-lg cursor-pointer blue_text absolute left-4" onclick="gotoBackPage('#whatsapp-new-group-add-informations')"></i>
|
|
<a class="text-xl whatsapp-create-new-group-header">New Group</a>
|
|
<a class="absolute blue_text right-4 whatsapp-create-new-group-header-create" onclick="whatsappCreateGroup()">Create</a>
|
|
</div>
|
|
</header>
|
|
<section class="px-6 flex flex-row items-center gap-6 mt-5">
|
|
<div onclick="changeCreateWhatsappGroupAvatar()">
|
|
<img style="display: none" id="whatsapp-create-group-avatar" width="50" height="50" class="rounded-full" src="" alt="">
|
|
<i id="whatsapp-change-group-avatar-icon" class="far fa-camera fa-lg text-center cursor-pointer flex justify-center items-center blue_text p-4 bg-dark rounded-full" style="width: 50px; height:50px"></i>
|
|
</div>
|
|
<input type="text" class="w-full" id="whatsapp-group-subject" placeholder="Group Subject">
|
|
</section>
|
|
</article>
|
|
</section>
|
|
</article>
|
|
<article id="whatsapp-settings-page" class="whatsapp-screen h-full px-4 hide">
|
|
<section id="whatsapp-settings-home" class="whatsapp-screen px-4">
|
|
<header class="pt-8 whatsapp-settings-header-text">
|
|
<a class="text-2xl">Settings</a>
|
|
</header>
|
|
<article class="mt-3">
|
|
<article class="flex flex-row gap-4 p-4 items-center bg-dark border-b-light border-t-light cursor-pointer" onclick="gotoNextPage('whatsappOpenProfileSettings')">
|
|
<img width="52" height="52" class="rounded-full whatsapp-avatar" src="" alt="">
|
|
<div class="flex flex-col">
|
|
<a class="font-bold" id="whatsapp-settings-name"></a>
|
|
<a class="text-sm text-muted" id="whatsapp-settings-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</a>
|
|
</div>
|
|
</article>
|
|
<article class="flex flex-col p-4 gap-4 items-center mt-5 border-b-light border-t-light bg-dark cursor-pointer">
|
|
<a class="w-full border-b-light pb-3 text-red-700 whatsapp-delete-account-opt" onclick="whatsappDeleteAccount()">Delete My Account</a>
|
|
<a class="w-full border-b-light pb-3 text-red-700 whatsapp-clear-chats-opt" onclick="whatsappClearAllChats()">Clear All Chats</a>
|
|
<a class="w-full text-red-700 whatsapp-delete-chats-opt" onclick="whatsappDeleteAllChats()">Delete All Chats</a>
|
|
</article>
|
|
</article>
|
|
</section>
|
|
<section id="whatsapp-settings-profile" class="whatsapp-screen px-4 hide">
|
|
<header class="flex flex-row justify-center pt-8 mb-3">
|
|
<i class="fas fa-chevron-left blue_text text-xl absolute left-4" onclick="gotoBackPage('#whatsapp-settings-profile')"></i>
|
|
<a id="whatsapp-header-edit-my-profile">Edit Profile</a>
|
|
<a class="absolute right-4 cursor-pointer blue_text whatsapp-header-edit-my-profile-done" onclick="editWhatsappProfile()">Done</a>
|
|
</header>
|
|
<article class="mt-3 flex flex-col">
|
|
<article class="flex flex-col gap-4 p-4 bg-dark mb-6">
|
|
<div class="flex flex-row gap-4">
|
|
<div class="flex flex-col items-center gap-2 whatsapp-edit-picture-button">
|
|
<img width="52" height="52" id="whatsapp-edit-avatar" class="rounded-full whatsapp-avatar" src="" alt="">
|
|
<a class="blue_text" onclick="changeWhatsappAvatar()">Edit</a>
|
|
</div>
|
|
<div class="w-60 mt-5 whatsapp-edit-picture-description">
|
|
<a class="text-sm text-muted">Enter your name and add an optional profile picture</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row gap-4 items-center border-t-light border-b-light py-3">
|
|
<input type="text" class="w-full" id="whatsapp-edit-name" placeholder="Enter your name">
|
|
</div>
|
|
</article>
|
|
<a class="text-muted mb-2 ml-3" id="whatsapp-edit-number-opt">Phone Number</a>
|
|
<article class="flex flex-col gap-4 p-4 bg-dark border-b-light border-t-light mb-6">
|
|
<a id="whatsapp-phone-number">9238292</a>
|
|
</article>
|
|
<a class="text-muted mb-2 ml-3" id="whatsapp-edit-bio-opt">About</a>
|
|
<article class="flex flex-col gap-4 p-4 bg-dark border-b-light border-t-light mb-6">
|
|
<input type="text" class="w-full" id="whatsapp-edit-bio" placeholder="Bio">
|
|
</article>
|
|
<a class="text-muted mb-2 ml-3" id="whatsapp-edit-read-receipts">Read Receipts</a>
|
|
<article class="flex flex-col gap-4 p-4 bg-dark border-b-light border-t-light">
|
|
<div class="flex flex-col gap-2 w-full">
|
|
<input type="checkbox" id="whatsapp-receipts" class="health-checkbox ios8-switch">
|
|
<label for="whatsapp-receipts" class="text-xl text-white font-semibold whatsapp-edit-read-receipts-set">Read Receipts</label>
|
|
</div>
|
|
</article>
|
|
<p class="text-muted ml-2 mt-2 text-sm whatsapp-edit-read-receipts-desc">If you turn off read receipts, you won't be able to see read receipts from other people. Read receipts are always sent for group chats.</p>
|
|
</article>
|
|
</section>
|
|
</article>
|
|
<article id="whatsapp-status-page" class="whatsapp-screen h-full px-4 hide">
|
|
<section id="whatsapp-status-home" class="whatsapp-screen px-4 h-90 overflow-y">
|
|
<header class="pt-8 whatsapp-header-status-section">
|
|
<a class="text-2xl">Status</a>
|
|
</header>
|
|
<section class="mt-3">
|
|
<article>
|
|
<article class="flex flex-row gap-4 p-4 items-center bg-dark border-b-light border-t-light cursor-pointer mb-5">
|
|
<div id="whatsapp-my-status" class="relative" onclick="whatsappShowOrCreateStatus()">
|
|
<img width="64" height="64" class="whatsapp-avatar">
|
|
<div class="addStory">
|
|
<div class="text-xl">+</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<a class="font-bold whatsapp-my-status-yey">My Status</a>
|
|
<a class="text-sm text-muted whatsapp-add-my-status">Add to my status.</a>
|
|
</div>
|
|
<div class="absolute right-4 p-4 bg-black rounded-full" onclick="whatsappCreateStatus()">
|
|
<i class="far fa-camera fa-lg blue_text margin-center"></i>
|
|
</div>
|
|
</article>
|
|
<a class="text-muted mb-3 ml-3 whatsapp-recent-updates">Recent Updates</a>
|
|
<article id="whatsapp-status-list" class="flex flex-col gap-4 p-4 bg-dark border-b-light border-t-light">
|
|
<div class="flex flex-row gap-4 items-center cursor-pointer" onclick="gotoNextPage('openUserStatus')">
|
|
<img width="54" height="54" class="rounded-full">
|
|
<div class="flex flex-col">
|
|
<a class="font-bold"></a>
|
|
<a class="text-sm text-muted">Today, 12:00 PM</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</article>
|
|
</section>
|
|
</section>
|
|
<section id="whatsapp-opened-status" class="whatsapp-screen z-20 hide">
|
|
<div class="swiper whatsapp-user-status">
|
|
<div class="swiper-wrapper"></div>
|
|
<div class="whatsapp-prev-user-story"></div>
|
|
<div class="whatsapp-next-user-story"></div>
|
|
<div class="swiper-pagination whatsapp-swiper-pagination"></div>
|
|
<section class="whatsapp-status-close absolute left-2 top-11" onclick="gotoBackPage('#whatsapp-opened-status')">
|
|
<i class="fas fa-chevron-left text-xl"></i>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
<article id="whatsapp-calls-history-page" class="whatsapp-screen h-full px-4 hide">
|
|
<section id="whatsapp-calls-home" class="whatsapp-screen h-90 px-4 overflow-y">
|
|
<header class="pt-8 flex sticky top-0 bg-black pb-3 border-b justify-between">
|
|
<a class="text-2xl whatsapp-header-calls">Calls</a>
|
|
<nav aria-label="" class="flex gap-4">
|
|
<i class="fa-regular fa-lg fa-phone-plus blue_text self-end" onclick="gotoNextPage('whatsappCreateCall')"></i>
|
|
<i class="fa-regular fa-lg fa-trash-alt text-red-500 self-end" onclick="whatsappClearCallHistory()"></i>
|
|
</nav>
|
|
</header>
|
|
<article class="mt-5 flex flex-col gap-4" id="whatsapp-call-history-list"></article>
|
|
</section>
|
|
<section id="whatsapp-calls-create" class="whatsapp-screen h-full px-4 z-20 hide">
|
|
<header class="pt-8 flex flex-col gap-6 pb-3">
|
|
<div class="flex flex-row justify-center relative">
|
|
<i class="fas fa-chevron-left fa-lg cursor-pointer blue_text absolute left-4" onclick="gotoBackPage('#whatsapp-calls-create')"></i>
|
|
<a class="new-call-translation text-xl">New Call</a>
|
|
</div>
|
|
<div class="flex flex-row justify-center bg-dark p-4 rounded-xl w-95 margin-center items-center">
|
|
<i class="fas fa-search fa-lg cursor-pointer text-muted mr-2"></i>
|
|
<input type="text" id="whatsapp-calls-create-search" placeholder="Search" class="w-full flex">
|
|
</div>
|
|
</header>
|
|
<article id="whatsapp-calls-create-lists" class="flex flex-col overflow-y"></article>
|
|
</section>
|
|
</article>
|
|
<article id="whatsapp-call-page" class="whatsapp-screen z-50 whatsapp-chat-bg hide">
|
|
<header class="pt-8 flex flex-row justify-center">
|
|
<span class="text-muted flex flex-row items-center gap-2">
|
|
<i class="fas fa-lock text-muted"></i>
|
|
<a class="text-muted whatsapp-call-encrypted">End-to-end Encrypted</a>
|
|
</span>
|
|
</header>
|
|
<a class="text-muted text-lg text-center mt-5" id="whatsapp-call-page-elapsed-time">00:00:00</a>
|
|
<article id="whatsapp-calls-user-list" class="mt-5 grid grid-cols-2 gap-2 p-4 overflow-y max-h-72"></article>
|
|
<footer id="whatsapp-call-footer" class="absolute bottom-0 bg-container-dark pb-8 pt-6 w-full rounded-4xl">
|
|
<article id="whatsapp-in-call" class="flex flex-row justify-around items-center">
|
|
<button class="whatsapp-call-button" data-type="microphone">
|
|
<i class="fa-solid fa-microphone-slash"></i>
|
|
</button>
|
|
<button class="whatsapp-call-button" data-type="speaker">
|
|
<i class="fas fa-volume-up"></i>
|
|
</button>
|
|
<button class="whatsapp-call-button bg-red-700" data-type="end">
|
|
<i class="fas fa-phone"></i>
|
|
</button>
|
|
</article>
|
|
<article id="whatsapp-out-call" class="flex flex-row justify-around items-center">
|
|
<button class="whatsapp-call-button bg-red-700" data-type="reject">
|
|
<i class="fa-solid fa-phone-slash"></i>
|
|
</button>
|
|
<button class="whatsapp-call-button bg-green-700" data-type="answer">
|
|
<i class="fas fa-phone"></i>
|
|
</button>
|
|
</article>
|
|
</footer>
|
|
</article>
|
|
|
|
<footer id="whatsapp-footer" class="absolute bottom-0 w-full h-10 flex z-10 flex-row justify-around items-center pb-5 bg-black pt-3 border-t">
|
|
<button id="whatsapp-status" class="whatsapp-footer-button flex flex-col items-center" onclick="whatsappFooterRouter(this, '#whatsapp-status-page')">
|
|
<svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<title></title>
|
|
<path d="M20.788 3.832c-.101-.105-.197-.213-.301-.317-.103-.103-.211-.202-.32-.302A11.903 11.903 0 0 0 12 0a11.926 11.926 0 0 0-8.486 3.514C-1.062 8.09-1.16 15.47 3.213 20.168c.099.108.197.214.3.32.104.103.21.2.317.3A11.92 11.92 0 0 0 12 24c3.206 0 6.22-1.247 8.487-3.512 4.576-4.576 4.673-11.956.301-16.656zm-16.655.301A11.057 11.057 0 0 1 12 .874c2.825 0 5.49 1.048 7.55 2.958l-1.001 1.002A9.646 9.646 0 0 0 12 2.292a9.644 9.644 0 0 0-6.865 2.844A9.644 9.644 0 0 0 2.292 12c0 2.448.9 4.753 2.542 6.549L3.831 19.55C-.201 15.191-.101 8.367 4.133 4.133zm13.798 1.318v.002l-1.015 1.014A7.346 7.346 0 0 0 12 4.589 7.357 7.357 0 0 0 6.761 6.76 7.362 7.362 0 0 0 4.589 12a7.34 7.34 0 0 0 1.877 4.913l-1.014 1.016A8.77 8.77 0 0 1 3.167 12a8.77 8.77 0 0 1 2.588-6.245A8.771 8.771 0 0 1 12 3.167c2.213 0 4.301.809 5.931 2.284zM18.537 12c0 1.745-.681 3.387-1.916 4.622S13.746 18.538 12 18.538a6.491 6.491 0 0 1-4.296-1.621l-.001-.004c-.11-.094-.22-.188-.324-.291a6.027 6.027 0 0 1-.293-.326A6.47 6.47 0 0 1 5.466 12c0-1.746.679-3.387 1.914-4.621A6.488 6.488 0 0 1 12 5.465c1.599 0 3.105.576 4.295 1.62.111.096.224.19.326.295.104.104.2.214.295.324A6.482 6.482 0 0 1 18.537 12zM7.084 17.534h.001A7.349 7.349 0 0 0 12 19.413a7.35 7.35 0 0 0 5.239-2.174A7.354 7.354 0 0 0 19.412 12a7.364 7.364 0 0 0-1.876-4.916l1.013-1.012A8.777 8.777 0 0 1 20.834 12a8.765 8.765 0 0 1-2.589 6.246A8.764 8.764 0 0 1 12 20.834a8.782 8.782 0 0 1-5.93-2.285l1.014-1.015zm12.783 2.333A11.046 11.046 0 0 1 12 23.125a11.042 11.042 0 0 1-7.551-2.957l1.004-1.001a9.64 9.64 0 0 0 6.549 2.542 9.639 9.639 0 0 0 6.865-2.846A9.642 9.642 0 0 0 21.71 12a9.64 9.64 0 0 0-2.543-6.548l1.001-1.002c4.031 4.359 3.935 11.182-.301 15.417z"></path>
|
|
</svg>
|
|
<a class="footer-button-text">Status</a>
|
|
</button>
|
|
<button id="whatsapp-calls" class="whatsapp-footer-button flex flex-col items-center" onclick="whatsappFooterRouter(this, '#whatsapp-calls-history-page')">
|
|
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M391 480c-19.52 0-46.94-7.06-88-30-49.93-28-88.55-53.85-138.21-103.38C116.91 298.77 93.61 267.79 61 208.45c-36.84-67-30.56-102.12-23.54-117.13C45.82 73.38 58.16 62.65 74.11 52a176.3 176.3 0 0128.64-15.2c1-.43 1.93-.84 2.76-1.21 4.95-2.23 12.45-5.6 21.95-2 6.34 2.38 12 7.25 20.86 16 18.17 17.92 43 57.83 52.16 77.43 6.15 13.21 10.22 21.93 10.23 31.71 0 11.45-5.76 20.28-12.75 29.81-1.31 1.79-2.61 3.5-3.87 5.16-7.61 10-9.28 12.89-8.18 18.05 2.23 10.37 18.86 41.24 46.19 68.51s57.31 42.85 67.72 45.07c5.38 1.15 8.33-.59 18.65-8.47 1.48-1.13 3-2.3 4.59-3.47 10.66-7.93 19.08-13.54 30.26-13.54h.06c9.73 0 18.06 4.22 31.86 11.18 18 9.08 59.11 33.59 77.14 51.78 8.77 8.84 13.66 14.48 16.05 20.81 3.6 9.53.21 17-2 22-.37.83-.78 1.74-1.21 2.75a176.49 176.49 0 01-15.29 28.58c-10.63 15.9-21.4 28.21-39.38 36.58A67.42 67.42 0 01391 480z"></path>
|
|
</svg>
|
|
<a class="footer-button-text">Calls</a>
|
|
</button>
|
|
<button id="whatsapp-chats-footer" class="whatsapp-footer-button current flex flex-col items-center" onclick="whatsappFooterRouter(this, '#whatsapp-chats-page')">
|
|
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M448 312.43c.77-1.11 1.51-2.26 2.27-3.34A174.55 174.55 0 00480 211.85C480.32 112.55 396.54 32 292.94 32c-90.36 0-165.74 61.49-183.4 143.12a172.81 172.81 0 00-4 36.83c0 99.4 80.56 182.11 184.16 182.11 16.47 0 38.66-4.95 50.83-8.29s24.23-7.75 27.35-8.94 8-2.41 11.89-1.29l77.42 22.38a4 4 0 005-4.86l-17.72-67.49c-1.23-5-1.39-5.94 3.53-13.14z"></path>
|
|
<path d="M312.54 415.38a165.32 165.32 0 01-23.26 2.05c-42.43 0-82.5-11.2-115-32.2a184.09 184.09 0 01-53.09-49.32c-26.08-34.57-40.3-78.51-40.3-124.49 0-3.13.11-6.14.22-9.16a4.34 4.34 0 00-7.54-3.12 158.76 158.76 0 00-14.86 195.24c2.47 3.77 3.87 6.68 3.44 8.62l-14.09 72.26a4 4 0 005.22 4.53l68-24.24a16.85 16.85 0 0112.92.22c20.35 8 42.86 12.92 65.37 12.92a169.45 169.45 0 00116.63-46 4.29 4.29 0 00-3.66-7.31z"></path>
|
|
</svg>
|
|
<a class="footer-button-text blue-text">Chats</a>
|
|
</button>
|
|
<button id="whatsapp-settings" class="whatsapp-footer-button flex flex-col items-center" onclick="whatsappFooterRouter(this, '#whatsapp-settings-page')">
|
|
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"></path>
|
|
</svg>
|
|
<a class="footer-button-text">Settings</a>
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
|
|
<div class="application map-app">
|
|
<section id="phone-map"></section>
|
|
<article class="map-interactions absolute right-2 top-6 p-4 z-9999 flex flex-col gap-4">
|
|
<i class="fas fa-map-marker-alt fa-lg p-4 text-white- bg-green-500" id="center-location" onclick="mapInteractions('center')"></i>
|
|
<i class="fas fa-location-arrow fa-lg p-4 text-white- bg-blue-500" id="follow-me" onclick="mapInteractions('follow')"></i>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="application weazel-app">
|
|
<div id="weazel-app-news-container">
|
|
<div id="weazel-app-header" class="global-app-header" style="margin-bottom: 32px; z-index: 50; margin-top: 15px;">
|
|
<a><i class="fa-solid fa-pear"></i>News</a>
|
|
<p class="weazel-day" style="color: #000">January 27</p>
|
|
<i class="fa-solid fa-ellipsis" id="createWeazel" onclick="CreateNews()"></i>
|
|
</div>
|
|
<article>
|
|
<div id="weazel-header-line"></div>
|
|
<h1>Top Stories</h1>
|
|
</article>
|
|
<div id="weazel-app-news"></div>
|
|
</div>
|
|
|
|
<div id="weazel-app-create-news">
|
|
<div id="weazel-app-header" class="global-app-header" style="margin-bottom: 32px; z-index: 50; margin-top: 15px;">
|
|
<p onclick="BackNews()" style="color: #B93160"><i class="fas fa-chevron-left"></i> Back</p>
|
|
<a style="color: #000">New post</a>
|
|
</div>
|
|
<div class="weazel-create-container">
|
|
<div id="weazel-imageContainer" onclick="weazelAddImg()">
|
|
<img src="./img/addImg.png" class="weazel-imageMain">
|
|
</div>
|
|
<input type="text" class="weazel-title" placeholder="Set a title">
|
|
<textarea type="text" class="weazel-content" placeholder="Set a content"></textarea>
|
|
<button class="weazel-create-button" onclick="CreateNewWeazel()">Create</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="weazel-app-edit-news">
|
|
<div id="weazel-app-header" class="global-app-header" style="margin-bottom: 32px; z-index: 50; margin-top: 15px;">
|
|
<p onclick="BackEditNews()" style="color: #B93160"><i class="fas fa-chevron-left"></i> Back</p>
|
|
<a style="color: #000">Edit post</a>
|
|
</div>
|
|
<div class="weazel-create-container">
|
|
<div id="weazel-imageContainer" onclick="weazelAddImg()">
|
|
<img src="./img/addImg.png" class="weazel-imageMain">
|
|
</div>
|
|
<input type="text" class="weazel-title" placeholder="Set a title">
|
|
<textarea type="text" class="weazel-content" placeholder="Set a content"></textarea>
|
|
<button class="weazel-save-button" onclick="EditWeazel()">Save</button>
|
|
<button class="weazel-delete-button" onclick="DeleteWeazel()">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application reminder-app">
|
|
<div class="reminder-search flex flex-row items-center gap-2 w-full bg-dark p-4 rounded-xl">
|
|
<i class="fas fa-search fa-lg text-muted"></i>
|
|
<input type="text" id="reminder-search-chats" class="reminder-search-input" placeholder="Search">
|
|
</div>
|
|
<div class="reminder-grid">
|
|
<div class="reminder-square">
|
|
<div class="reminder-icon" style="background-color: #006dfe;">
|
|
<i class="fa-solid fa-calendar-days"></i>
|
|
</div>
|
|
<p class="reminder-label reminders-total">Total</p>
|
|
<p class="reminder-count" id="total-reminders-count">0</p>
|
|
</div>
|
|
|
|
<div class="reminder-square">
|
|
<div class="reminder-icon" style="background-color: #fa8c00;">
|
|
<i class="fa-solid fa-clock"></i>
|
|
</div>
|
|
<p class="reminder-label reminders-today">Today</p>
|
|
<p class="reminder-count" id="today-reminders-count">0</p>
|
|
</div>
|
|
|
|
<div class="reminder-square">
|
|
<div class="reminder-icon" style="background-color: #4b5465;">
|
|
<i class="fa-solid fa-inbox"></i>
|
|
</div>
|
|
<p class="reminder-label reminders-week">Week</p>
|
|
<p class="reminder-count" id="week-reminders-count">0</p>
|
|
</div>
|
|
|
|
<div class="reminder-square">
|
|
<div class="reminder-icon" style="background-color: #fc2c20;">
|
|
<i class="fa-solid fa-flag"></i>
|
|
</div>
|
|
<p class="reminder-label reminders-month">Month</p>
|
|
<p class="reminder-count" id="month-reminders-count">0</p>
|
|
</div>
|
|
</div>
|
|
<h1>My List</h1>
|
|
<section id="reminders"></section>
|
|
<div id="create-reminder" onclick="reminderToggleEditCreatePage()">
|
|
<i class="fa-solid fa-circle-plus"></i>
|
|
<p>New Reminder</p>
|
|
</div>
|
|
<section id="editCreateReminder">
|
|
<header>
|
|
<a id="reminder-back" onclick="reminderToggleEditCreatePage()">Back</a>
|
|
<h4 id="reminder-title">Reminder</h4>
|
|
<a id="reminder-solved" onclick="createReminder()">Continue</a>
|
|
</header>
|
|
<section class="reminder-info">
|
|
<input id="reminder-header" type="text" placeholder="Title...">
|
|
<input id="reminder-note" type="textarea" placeholder="Notes...">
|
|
</section>
|
|
<section class="reminder-info">
|
|
<input id="reminder-date" type="date" placeholder="History...">
|
|
<input id="reminder-time" type="time" placeholder="Moment...">
|
|
</section>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="application uber-app">
|
|
<div id="uber-map"></div>
|
|
<article class="map-interactions absolute right-2 top-6 p-4 z-9999 flex flex-col gap-4">
|
|
<i class="fas fa-map-marker-alt fa-lg p-4 text-white- bg-green-500" id="center-location" onclick="mapInteractions('center')"></i>
|
|
<i class="fas fa-location-arrow fa-lg p-4 text-white- bg-blue-500" id="follow-me" onclick="mapInteractions('follow')"></i>
|
|
</article>
|
|
<div id="uber-active" onclick="TakePurchase()">INACTIVE</div>
|
|
</div>
|
|
|
|
<div class="application tiktok-app">
|
|
<article id="tiktok-register-container" style="z-index: 999999; display: none;">
|
|
<i class="fas fa-chevron-left absolute left-2 top-0 pt-8 w-full cursor-pointer z-9999" onclick="tiktokHandleBackBtn()"></i>
|
|
<h6 id="tiktok-register-container-header" class="tiktok-sign-up">Sign up</h6>
|
|
<div class="tiktok-container-question-container" style="display: block;" id="tiktok-register-page1">
|
|
<h5 class="tiktok-bd">When's your birthday?</h5>
|
|
<p class="tiktok-bd-info">Your birthday won't be shown publicly</p>
|
|
<input type="date" id="tiktok-register-birthday">
|
|
<button class="tiktok-register-nxtButton">Next</button>
|
|
</div>
|
|
<div class="tiktok-container-question-container" id="tiktok-register-page2">
|
|
<h5 class="tiktok-nm">What's your name?</h5>
|
|
<input type="name" id="tiktok-register-name" placeholder="Nombre">
|
|
<button class="tiktok-register-nxtButton">Next</button>
|
|
<p class="tiktok-nm-info">Select your real name, this name will not be seen within the application</p>
|
|
</div>
|
|
<div class="tiktok-container-question-container" id="tiktok-register-page3">
|
|
<h5 class="tiktok-un">Input a username</h5>
|
|
<input type="name" id="tiktok-register-username" placeholder="User name">
|
|
<button class="tiktok-register-nxtButton">Next</button>
|
|
<p class="tiktok-un-info">This is the username that everyone in the app will see, you can change it later</p>
|
|
</div>
|
|
<div class="tiktok-container-question-container" id="tiktok-register-page4">
|
|
<h5 class="tiktok-ph">What's your phone?</h5>
|
|
<input type="number" id="tiktok-register-phone" placeholder="Phone number">
|
|
<button class="tiktok-register-nxtButton">Next</button>
|
|
<p class="tiktok-ph-info">Your phone number could be used to connect you with people you may know, improve the ads you see, and more features of your settings.</p>
|
|
</div>
|
|
<div class="tiktok-container-question-container" id="tiktok-register-page5">
|
|
<h5 class="tiktok-vf">Enter The Verification Code</h5>
|
|
<input type="number" id="tiktok-register-code" placeholder="Verification code">
|
|
<button class="tiktok-register-nxtButton">Next</button>
|
|
<p class="tiktok-vf-info">We have sent a message to your phone to verify your phone and account</p>
|
|
</div>
|
|
<div class="tiktok-container-question-container" id="tiktok-register-page6">
|
|
<h5 class="tiktok-pw">Set a password</h5>
|
|
<input type="password" id="tiktok-register-password" placeholder="Password">
|
|
<button class="tiktok-register-nxtButton">Next</button>
|
|
<p class="tiktok-pw-info">Select a password and do not share this information with anyone for your virtual security</p>
|
|
</div>
|
|
<footer class="absolute bottom-1 w-full text-center items-center justify-center tiktok-register-footer-tr" onclick="tiktokLogInPage()">
|
|
<a class="text-muted">Already have an account? <a class="blue_text">Log In.</a></a>
|
|
</footer>
|
|
</article>
|
|
<section id="tiktok-forgot-password-screen" class="absolute flex-col left-0 w-full h-full bg-white z-9999999999 hide">
|
|
<header class="discord-register-screen-header">
|
|
<a class="absolute left-2 top-0 pt-8 w-full cursor-pointer tiktok-cancel" onclick="gotoBackPage('#tiktok-forgot-password-screen')">Cancel</a>
|
|
</header>
|
|
<section id="tiktok-forgot-password-accounts" class="overflow-y gap-4 flex flex-col pt-4 mt-5"></section>
|
|
</section>
|
|
<article id="tiktok-login-container" style="z-index: 999999; display: none">
|
|
<h6 id="tiktok-register-container-header" class="tiktok-log-in">Log In</h6>
|
|
<form id="tiktok-login-form" class="tiktok-container-question-container" style="display: block;">
|
|
<input type="text" id="tiktok-login-username" placeholder="Username">
|
|
<input type="password" id="tiktok-login-password" placeholder="Password">
|
|
<div class="flex flex-row w-full items-end justify-end">
|
|
<a class="text-red-500 cursor-pointer tiktok-forgot-ps" onclick="gotoNextPage('tiktokPasswordScreen')">Forgot Password</a>
|
|
</div>
|
|
<button class="tiktok-login-button" style="pointer-events: all; background-color: rgba(0,0,0,0.07);">Log In</button>
|
|
</form>
|
|
<footer class="absolute bottom-1 w-full text-center items-center justify-center tiktok-login-footer-tr" onclick="tiktokSignUpPage()">
|
|
<a class="text-muted">Don't have an account? <a class="blue_text">Sign Up.</a></a>
|
|
</footer>
|
|
</article>
|
|
<article id="tiktok-main-container">
|
|
<div id="tiktok-container">
|
|
<article id="profile-other">
|
|
<img src="./img/back.png" class="tiktok-back" onclick="tiktokAnimate('#profile-other', '#videos')">
|
|
<div id="tiktok-profile-picture"></div>
|
|
<h5 id="profile-other-username">@peperoni</h5>
|
|
<div id="tiktok-profile-infos">
|
|
<div class="tiktok-profile-info" id="tiktok-following">
|
|
<h5>52</h5>
|
|
<p>Following</p>
|
|
</div>
|
|
<div class="tiktok-profile-info" id="tiktok-followers">
|
|
<h5>24</h5>
|
|
<p>Followers</p>
|
|
</div>
|
|
<div class="tiktok-profile-info" id="tiktok-likes">
|
|
<h5>0</h5>
|
|
<p>Likes</p>
|
|
</div>
|
|
</div>
|
|
<p id="tiktok-profile-bio"></p>
|
|
<button id="tiktok-follow">Follow</button>
|
|
<div id="personal-videos">
|
|
</div>
|
|
</article>
|
|
<article id="tiktok-select-video-container" class="absolute flex-col w-full h-80 top-5 hide">
|
|
<section class="absolute top-0 left-0 z-10 w-full h-full flex-col overflow-y">
|
|
<header class="flex flex-row justify-between items-center p-4 pt-6 sticky top-0 bg-white">
|
|
<span></span>
|
|
<h4 class="tiktok-new-post-header">New Post</h4>
|
|
<i class="fa-solid fa-bars"></i>
|
|
</header>
|
|
<div class="gallery-videos"></div>
|
|
</section>
|
|
</article>
|
|
<article id="tiktok-upload-video-container" class="absolute flex-col w-full h-full left-0 top-0 bg-white z-9999 hide">
|
|
<header class="flex flex-row justify-between pt-8 px-4" onclick="gotoBackPage('#tiktok-upload-video-container')">
|
|
<a class="tiktok-new-post-cancel text-blue-500">Cancel</a>
|
|
<a class="tiktok-video-uploaded">Upload Video</a>
|
|
<a class="text-blue-500" id="tiktok-share">Share</a>
|
|
</header>
|
|
<div class="flex items-center justify-center w-full mt-8">
|
|
<video id="tiktok-upload-video" class="w-70 rounded-xl" autoplay loop></video>
|
|
</div>
|
|
<form action="" class="flex flex-col gap-4 p-12">
|
|
<a class="tiktok-video-descript">Caption</a>
|
|
<input id="tiktok-upload-caption" type="text" placeholder="Add a caption" class="w-full p-4 border-b" />
|
|
<span>
|
|
<a class="tiktok-music-descript">Music</a>
|
|
<a class="text-muted text-sm tiktok-optional"> (Optional)</a>
|
|
</span>
|
|
<input id="tiktok-upload-sound" type="text" onchange="tiktokTestSound(this)" placeholder="Place a URL" class="w-full p-4 border-b" />
|
|
<a class="tiktok-start-time">Start Time</a>
|
|
<input id="tiktok-upload-sound-start-duration" type="range" min="0" max="100" value="0" step="1" class="w-full p-4 border-b" onchange="tiktokUploadVideoStart(this.value)" />
|
|
<div class="flex flex-row justify-between w-full">
|
|
<span id="tiktok-upload-sound-start-time">0:00</span>
|
|
<span id="tiktok-upload-sound-end-time">0:00</span>
|
|
</div>
|
|
</form>
|
|
</article>
|
|
<article id="videos">
|
|
<div id="videos-backBtn"></div>
|
|
<div id="videos-deleteBtn"></div>
|
|
<div id="video-comment-container">
|
|
<h7>184 comments</h7>
|
|
<i class="fas fa-times" id="video-comment-close"></i>
|
|
<div id="video-comments"></div>
|
|
<div id="video-comment">
|
|
<img id="video-comment-img">
|
|
<input type="video-comment-input" id="video-comment-commentinpt" placeholder="Add comment..." type="text">
|
|
</div>
|
|
</div>
|
|
<div id="tiktok-swiper" class="swiper w-full h-90 relative">
|
|
<article class="swiper-wrapper" id="video-container"></article>
|
|
</div>
|
|
</article>
|
|
<article id="profile">
|
|
<div id="tiktok-profile-picture"></div>
|
|
<h5 id="tiktok-profile-name"></h5>
|
|
<div id="tiktok-profile-infos">
|
|
<div class="tiktok-profile-info" id="tiktok-following">
|
|
<h5>52</h5>
|
|
<p>Following</p>
|
|
</div>
|
|
<div class="tiktok-profile-info" id="tiktok-followers">
|
|
<h5>24</h5>
|
|
<p>Followers</p>
|
|
</div>
|
|
<div class="tiktok-profile-info" id="tiktok-likes">
|
|
<h5>0</h5>
|
|
<p>Likes</p>
|
|
</div>
|
|
</div>
|
|
<p id="tiktok-profile-bio"></p>
|
|
<button id="tiktok-edit" onclick="tiktokAnimate('#profile', '#selfProfile')">Edit Profile</button>
|
|
<a id="tiktok-logout-prof" onclick="logoutTiktok()">Logout</a>
|
|
<div id="personal-videos"></div>
|
|
</article>
|
|
<article id="selfProfile" style="display: none;">
|
|
<i class="fa-solid fa-chevron-left" id="selfProfile-back" onclick="tiktokAnimate('#selfProfile', '#profile')"></i>
|
|
<!-- <img src="./img/back.png" id="selfProfile-back" onclick="tiktokAnimate('#selfProfile', '#profile')"> -->
|
|
<h5>Edit Profile</h5>
|
|
<div id="selfProfile-changePhoto">
|
|
<img id="selfProfile-photo">
|
|
<p>Change Photo</p>
|
|
</div>
|
|
<div id="aboutYou">
|
|
<h7>About you</h7>
|
|
<div id="aboutYou-infos">
|
|
<div class="about-info">
|
|
<span class="tt-about-name">Name</span>
|
|
<input type="name" id="about-info-name" placeholder="Nombre">
|
|
</div>
|
|
<div class="about-info">
|
|
<span class="tt-about-username">Username</span>
|
|
<input type="name" id="about-info-username" placeholder="User name">
|
|
</div>
|
|
<div class="about-info">
|
|
<span class="tt-about-bio">Bio</span>
|
|
<input type="textarea" id="about-info-bio" placeholder="Add a bio">
|
|
</div>
|
|
<div class="about-info">
|
|
<span class="tt-password-username">Password</span>
|
|
<input type="password" id="about-info-password" placeholder="Password">
|
|
</div>
|
|
</div>
|
|
<button id="aboutYou-save">Save</button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div id="tiktok-footer-container">
|
|
<div class="tiktok-footer" id="tiktok-home" onclick="tiktokFastActions('#videos')">
|
|
<svg width="35" height="35" viewBox="0 0 48 48" fill="rgba(254, 44, 85, 1.0)" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0484 7.84003C23.6014 7.38666 24.3975 7.38666 24.9504 7.84001L41.051 21.04C41.5411 21.4418 41.7258 22.1082 41.5125 22.705C41.2991 23.3017 40.7338 23.7 40.1 23.7H37.769L36.5769 36.7278C36.4592 38.0149 35.3798 39 34.0873 39H13.9127C12.6202 39 11.5409 38.0149 11.4231 36.7278L10.231 23.7H7.89943C7.2657 23.7 6.70035 23.3017 6.487 22.705C6.27364 22.1083 6.45833 21.4418 6.9484 21.04L23.0484 7.84003ZM23.9995 10.9397L12.0948 20.7H12.969L14.369 36H22.4994V28.3138C22.4994 27.7616 22.9471 27.3138 23.4994 27.3138H24.4994C25.0517 27.3138 25.4994 27.7616 25.4994 28.3138V36H33.631L35.031 20.7H35.9045L23.9995 10.9397Z">
|
|
</path>
|
|
</svg>
|
|
<p class="tiktok-footer-home">Home</p>
|
|
</div>
|
|
<div class="tiktok-footer" id="tiktok-new" onclick="tiktokFastActions('#tiktok-select-video-container')">
|
|
<img src="img/tiktok/add.svg" alt="">
|
|
<p></p>
|
|
</div>
|
|
<div class="tiktok-footer" id="tiktok-profile" onclick="tiktokFastActions('#profile')">
|
|
<svg width="25" height="25" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0003 7C20.1343 7 17.0003 10.134 17.0003 14C17.0003 17.866 20.1343 21 24.0003 21C27.8663 21 31.0003 17.866 31.0003 14C31.0003 10.134 27.8663 7 24.0003 7ZM13.0003 14C13.0003 7.92487 17.9252 3 24.0003 3C30.0755 3 35.0003 7.92487 35.0003 14C35.0003 20.0751 30.0755 25 24.0003 25C17.9252 25 13.0003 20.0751 13.0003 14ZM24.0003 33C18.0615 33 13.0493 36.9841 11.4972 42.4262C11.3457 42.9573 10.8217 43.3088 10.2804 43.1989L8.32038 42.8011C7.77914 42.6912 7.4266 42.1618 7.5683 41.628C9.49821 34.358 16.1215 29 24.0003 29C31.8792 29 38.5025 34.358 40.4324 41.628C40.5741 42.1618 40.2215 42.6912 39.6803 42.8011L37.7203 43.1989C37.179 43.3088 36.6549 42.9573 36.5035 42.4262C34.9514 36.9841 29.9391 33 24.0003 33Z">
|
|
</path>
|
|
</svg>
|
|
<p class="tiktok-footer-profile">Profile</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="application uberRider-app">
|
|
<div id="uberRider-waitingUber">
|
|
<div id="uberRider-waitingUberContainer">
|
|
<i class="fas fa-info-circle" id="uberRider-riderInfo-Header"></i>
|
|
<h5>Your driver is coming. Remaining distance 5km</h5>
|
|
<div id="uberRider-riderInfo">
|
|
<p><i class="fas fa-hand-holding"></i><span id="riderInfo-plate">359656</span></p>
|
|
<p><i class="fas fa-palette"></i><span id="riderInfo-color">Mavi</span></p>
|
|
<p><i class="fas fa-car"></i><span id="riderInfo-model">T20</span></p>
|
|
</div>
|
|
<button id="uberRider-callRider">Search Contact</button>
|
|
<button id="uberRider-cancelRequest">Cancel request</button>
|
|
</div>
|
|
</div>
|
|
<div id="uberRider-roadToRequester">
|
|
<div id="uberRider-roadToRequesterContainer">
|
|
<i class="fas fa-info-circle" id="uberRider-riderInfo-Header"></i>
|
|
<h5>Your passenger has been flagged. When you approach it, you will see a sign.</h5>
|
|
<button id="uberRider-callRequest">Search Contact</button>
|
|
<button id="uberRider-cancelRider">Leave Uber</button>
|
|
</div>
|
|
</div>
|
|
<div id="uberRider-categoriesContainer">
|
|
<h1 class="ml-4">driveNow</h1>
|
|
<header class="flex flex-row">
|
|
<div class="uberRider-categories request-ride">
|
|
<img src="./img/uberRider/getacar.png" class="uberRider-categ-img">
|
|
<h4>Request a ride</h4>
|
|
<img src="./img/uberRider/right.png" class="uberRider-categ-righticon" id="uberRider-getACar">
|
|
</div>
|
|
<div class="uberRider-categories take-ride">
|
|
<img src="./img/uberRider/bearider.png" class="uberRider-categ-img">
|
|
<h4>Take the trips</h4>
|
|
<img src="./img/uberRider/right.png" class="uberRider-categ-righticon" id="uberRider-beARider">
|
|
</div>
|
|
</header>
|
|
<footer class="w-full h-full p-4 flex flex-col gap-4">
|
|
<a class="text-2xl ml-2">Last trips</a>
|
|
<section id="uberRider-last-transactions" class="rounded-xl bg-container-dark w-full margin-center max-h-65 overflow-y"></section>
|
|
</footer>
|
|
</div>
|
|
<div id="uberRider-getARide">
|
|
<i class="uberRider-backImg fa-solid fa-arrow-left"></i>
|
|
<!-- <img src="./img/back.png" class="uberRider-backImg"> -->
|
|
<div id="uberRider-vehicleModels">
|
|
<h5>Available Riders: 10</h5>
|
|
<h4>Available Vehicle Models</h4>
|
|
<div id="uberRider-vehicleModelContainer">
|
|
<div class="uberRider-vehicleModel">
|
|
<div class="uberRider-vehicleModelName">SUV</div>
|
|
</div>
|
|
<div class="uberRider-vehicleModel">
|
|
<div class="uberRider-vehicleModelName">SUPERCAR</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="uberRider-ridersContainer">
|
|
<h3>SUV</h3>
|
|
<div id="uberRider-riders">
|
|
<div class="uberRider-rider"><span class="rider-name"> </span> <span> $900/km</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="uberRider-beARiderContainer">
|
|
<i class="uberRider-backImg fa-solid fa-arrow-left"></i>
|
|
<!-- <img src="./img/back.png" class="uberRider-backImg"> -->
|
|
<div id="uberRider-beARiderContent" style="margin-top: 15px;">
|
|
<form>
|
|
<input id="uberRider-beariderFee" type="number" placeholder="Fee per km" min="0" required>
|
|
<button id="uberRider-beARiderbtn">Be a raider</button>
|
|
<a>
|
|
You can choose a price according to the size of the car and the type of vehicle,
|
|
keep in mind that once a trip has been requested you will not be able to cancel it,
|
|
otherwise you will be debited the total + taxes of the trip.
|
|
</a>
|
|
</form>
|
|
<article>
|
|
<img src="./img/uberRider/bearider.png" class="uberRider-rider-img">
|
|
<p>
|
|
Always remember to maintain the appropriate speed limit,
|
|
We take care of you, you must take care of your passengers.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
<div id="uberRider-riderContainer">
|
|
<div class="uberRider-riderContainer-header">
|
|
<a>¿Estas seguro de que quieres salir de servicio?</a>
|
|
</div>
|
|
<button id="leaveUberRider">Leave Uber driver</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</figure>
|
|
</section>
|
|
<script src="https://cdn.jsdelivr.net/npm/donutty@2.4.0/dist/donutty-jquery.min.js"></script>
|
|
<script type="module" src="nui://phone-render/script.js"></script>
|
|
<script src="./js/modules/voicerecord.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
|
|
<!-- Jquery Modules -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.min.js" integrity="sha512-ueXKWOB9liraz677EVGxz6H8nLk3RJjNv8Bfc0WrO9K9NyxROX3D/6bvZ9RYvAcYFxsVU+I0Jt/AMK0Nk8ya5g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="./js/modules/jquery.ios.picker.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="./js/modules/star-rating-svg.js"></script>
|
|
<script src="https://cdn.rawgit.com/ichord/Caret.js/master/dist/jquery.caret.min.js"></script>
|
|
<script src="https://cdn.rawgit.com/ichord/At.js/master/dist/js/jquery.atwho.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.3/jquery.scrollTo.min.js"></script>
|
|
<script type="text/javascript" src="./js/modules/emojiinarea.js"></script>
|
|
<!-- Classes -->
|
|
<script src="./js/classes/phoneslider.js"></script>
|
|
<!-- Main -->
|
|
<script src="../config/config.js"></script>
|
|
<script src="./js/modules/misc.js"></script>
|
|
<script src="./js/main.js"></script>
|
|
<script src="./js/modules/langdata.js"></script>
|
|
<!-- Classes -->
|
|
<script src="./js/classes/user-stories.js"></script>
|
|
<script src="./js/classes/airdrop.js"></script>
|
|
<script src="./js/classes/dynamicisland.js"></script>
|
|
<script src="./js/classes/map.js"></script>
|
|
<script src="./js/classes/virtualscroll.js"></script>
|
|
<!-- Modules -->
|
|
<script src="./js/modules/listener.js"></script>
|
|
<script src="./js/modules/lockscreen.js"></script>
|
|
<script src="./js/modules/homescreen.js"></script>
|
|
<script src="./js/modules/appgroup.js"></script>
|
|
<script src="./js/modules/closedapps.js"></script>
|
|
<script src="./js/modules/applibrary.js"></script>
|
|
<script src="./js/modules/zoom.js"></script>
|
|
<script src="./js/modules/iosmodals.js"></script>
|
|
<script src="./js/modules/startup.js"></script>
|
|
<script src="./js/modules/pincode.js"></script>
|
|
<!-- Dev -->
|
|
<script src="./js/developer/main.js"></script>
|
|
<!-- Apps -->
|
|
<script src="./js/apps/crypto.js"></script>
|
|
<script src="./js/apps/clock.js"></script>
|
|
<script src="./js/apps/tinder.js"></script>
|
|
<script src="./js/apps/state.js"></script>
|
|
<script src="./js/apps/market.js"></script>
|
|
<script src="./js/apps/calculator.js"></script>
|
|
<script src="./js/apps/house.js"></script>
|
|
<script src="./js/apps/uberRider.js"></script>
|
|
<script src="./js/apps/tiktok.js"></script>
|
|
<script src="./js/apps/spotify.js"></script>
|
|
<script src="./js/apps/reminder.js"></script>
|
|
<script src="./js/apps/camera.js"></script>
|
|
<script src="./js/apps/twitter.js"></script>
|
|
<script src="./js/apps/jobcenter.js"></script>
|
|
<script src="./js/apps/darkweb.js"></script>
|
|
<script src="./js/apps/rentel.js"></script>
|
|
<script src="./js/apps/darkchat.js"></script>
|
|
<script src="./js/apps/racing.js"></script>
|
|
<script src="./js/apps/messages.js"></script>
|
|
<script src="./js/apps/whatsapp.js"></script>
|
|
<script src="./js/apps/store.js"></script>
|
|
<script src="./js/apps/youtube.js"></script>
|
|
<script src="./js/apps/weazel.js"></script>
|
|
<script src="./js/apps/phone.js"></script>
|
|
<script src="./js/apps/contacts.js"></script>
|
|
<script src="./js/apps/settings.js"></script>
|
|
<script src="./js/apps/uber.js"></script>
|
|
<script src="./js/apps/bank.js"></script>
|
|
<script src="./js/apps/gallery.js"></script>
|
|
<script src="./js/apps/health.js"></script>
|
|
<script src="./js/apps/garage.js"></script>
|
|
<script src="./js/apps/weather.js"></script>
|
|
<script src="./js/apps/map.js"></script>
|
|
<script src="./js/apps/mail.js"></script>
|
|
<script src="./js/apps/yellowpages.js"></script>
|
|
<script src="./js/apps/notes.js"></script>
|
|
<script src="./js/apps/instagram.js"></script>
|
|
<script src="./js/apps/discord.js"></script>
|
|
<script src="./js/apps/facetime.js"></script>
|
|
|
|
<script src="./js/modules/videoCall.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
$('#messages-app-content-foot-message').emojioneArea({
|
|
inline: true,
|
|
searchPosition: "bottom",
|
|
shortnames: true,
|
|
attributes: {
|
|
type: 'message'
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |