apps.html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>360 — Apps</title>
<link href="favicon-32x32.png" rel="icon" type="image/png"/>
<link href="manifest.json" rel="manifest"/>
<meta content="#3b82f6" name="theme-color"/>
<link href="/assets/css/main.css" rel="stylesheet"/>
<link href="/assets/css/wide.css" rel="stylesheet"/>
<link href="/assets/css/gallium.css" rel="stylesheet"/>
<link href="/assets/css/responsive.css" rel="stylesheet"/>
<link href="/assets/css/cursor.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<style>
    .apps-page {
      max-width: 900px;
      margin: 0 auto;
      padding: 80px 24px 60px;
    }
    .apps-page h2 {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 8px;
      background: linear-gradient(120deg, var(--a), var(--a2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .apps-subtitle { font-size: 13px; color: var(--mut); margin-bottom: 28px; }
    body.dark .apps-subtitle { color: var(--mutd); }

    .apps-section-label {
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; color: var(--mut);
      margin-bottom: 14px; padding-bottom: 6px;
      border-bottom: 1px solid var(--br);
    }
    body.dark .apps-section-label { color: var(--mutd); }

    .apps-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
      margin-bottom: 36px;
    }

    .app-card {
      background: rgba(255,255,255,.6);
      backdrop-filter: blur(10px);
      border: 1px solid var(--br);
      border-radius: 14px;
      padding: 22px 20px;
      cursor: pointer;
      transition: .2s;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    body.dark .app-card { background: rgba(15,23,42,.7); }
    .app-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 30px rgba(59,130,246,.18);
      border-color: var(--a);
    }
    .app-card::before {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(6,182,212,.04));
      opacity: 0; transition: opacity .2s; border-radius: inherit;
    }
    .app-card:hover::before { opacity: 1; }

    .app-card .card-ripple {
      position: absolute;
      border-radius: 50%;
      transform: scale(0);
      animation: card-ripple .55s ease-out;
      background: rgba(255,255,255,.45);
      pointer-events: none;
    }
    @keyframes card-ripple {
      to { transform: scale(4); opacity: 0; }
    }

    .app-icon { font-size: 38px; line-height: 1; }
    .app-icon img { display: block; width: 38px; height: 38px; object-fit: contain; }
    .app-title { font-size: 15px; font-weight: 700; color: var(--txt); }
    body.dark .app-title { color: var(--txtd); }
    .app-desc { font-size: 12px; color: var(--mut); line-height: 1.5; }
    body.dark .app-desc { color: var(--mutd); }

    .app-badge {
      position: absolute; top: 10px; right: 10px;
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .05em; padding: 2px 8px; border-radius: 999px;
      background: linear-gradient(110deg, var(--a), var(--a2));
      color: #050816;
    }

    @media (max-width: 600px) {
      .apps-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
      .apps-page { padding: 80px 14px 30px; }
    }

    .expired {
        visibility: invisible;
        display: none;
    }
  </style>
<meta content="Explore 360 apps for productivity, communication, creativity, music, maps, notes, mail and more." name="description"/><meta content="index, follow" name="robots"/><meta content="website" property="og:type"/><meta content="360 Apps — Productivity, Communication &amp; More" property="og:title"/><meta content="Explore 360 apps for productivity, communication, creativity, music, maps, notes, mail and more." property="og:description"/><meta content="https://360-search.com/apps.html" property="og:url"/><meta content="360" property="og:site_name"/><meta content="summary" name="twitter:card"/><meta content="360 Apps — Productivity, Communication &amp; More" name="twitter:title"/><meta content="Explore 360 apps for productivity, communication, creativity, music, maps, notes, mail and more." name="twitter:description"/><link href="https://360-search.com/apps.html" rel="canonical"/><link rel="stylesheet" href="/assets/css/mobile-nav.css">
</head>
<body>
<div class="cursor-dot"></div>
<div class="cursor-trail"></div>
<div class="cursor-crosshair"></div>
<div class="cursor-blob"></div>
<div class="auth-top-right">
<button class="auth-btn" id="signInBtn">Sign In</button>
<button class="auth-btn" id="signUpBtn">Sign Up</button>
<button class="auth-btn" id="signOutBtn" style="display:none;">Sign Out</button>
</div>
<button class="sidebar-toggle" id="sidebarToggle">☰ Menu</button>
<aside class="sidebar" id="sidebar"><span id="sidebar-slot"></span></aside>
<div class="overlay" id="overlay"></div>
<div class="settings-panel" id="settingsPanel">
<h3>Appearance</h3>
<div class="settings-label">Theme</div>
<div class="theme-swatches">
<div class="theme-option"><div class="swatch" data-theme="ocean"></div><span>Ocean</span></div>
<div class="theme-option"><div class="swatch" data-theme="midnight"></div><span>Midnight</span></div>
<div class="theme-option"><div class="swatch" data-theme="sunset"></div><span>Sunset</span></div>
<div class="theme-option"><div class="swatch" data-theme="mint"></div><span>Mint</span></div>
<div class="theme-option"><div class="swatch" data-theme="neon"></div><span>Neon</span></div>
<div class="theme-option"><div class="swatch" data-theme="mono"></div><span>Mono</span></div>
</div>
<div class="settings-label" style="margin-top:20px;">Mode</div>
<label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
<span style="font-size:14px;">Dark mode</span>
<input id="darkToggle" type="checkbox"/>
</label>
<h3 style="margin-top:20px;">Cursor</h3>
<div class="settings-label">Style</div>
<div class="cursor-options">
<div class="cursor-option active" data-cursor="default"><div class="cursor-preview preview-default"></div>Default</div>
<div class="cursor-option" data-cursor="dot"><div class="cursor-preview preview-dot"></div>Dot</div>
<div class="cursor-option" data-cursor="ring"><div class="cursor-preview preview-ring"></div>Ring</div>
<div class="cursor-option" data-cursor="crosshair"><div class="cursor-preview preview-crosshair"></div>Crosshair</div>
<div class="cursor-option" data-cursor="blob"><div class="cursor-preview preview-blob"></div>Blob</div>
<div class="cursor-option" data-cursor="system"><div class="cursor-preview preview-system"></div>System</div>
</div>
<div class="cursor-color-row">
<label>Cursor color</label>
<input id="cursorColorPicker" type="color" value="#3b82f6"/>
<button id="cursorColorReset">Reset</button>
</div>
<div class="temp-unit-box" style="margin-top:20px;">
      Temp Unit: <span id="tempUnitLabel">°C</span>
<button id="tempUnitBtn">Switch</button>
</div>
<h3 style="margin-top:25px;">Legal</h3>
<a class="legal-link" href="/privacypolicy">🔒 Privacy Policy</a>
<a class="legal-link" href="/tos">📜 Terms of Service</a>
<h3 style="margin-top:25px;">About</h3>
<details class="about-dropdown">
<summary>ℹ️ What is 360?</summary>
<p>360 is a next-generation search engine and digital workspace. Built by 360 Digital, Co.</p>
</details>
</div>
<div class="auth-popup hidden" id="auth-popup">
<div class="auth-box">
<h2>Account</h2>
<input id="auth-email" placeholder="Email" type="email"/>
<input id="auth-password" placeholder="Password" type="password"/>
<button id="auth-login-btn">Log In</button>
<button id="auth-signup-btn">Sign Up</button>
<button class="oauth-btn" id="github-login">
<svg fill="currentColor" height="18" viewBox="0 0 24 24" width="18"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"></path></svg>
<span>Sign in with GitHub</span>
</button>
<button class="oauth-btn" id="google-login">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7.5" cy="7.5" r="5" stroke="currentColor" stroke-width="1.5"/><path d="M11.5 11.5L16 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<span>Sign in with Google</span>
</button>
<p class="auth-error" id="auth-error"></p>
<button class="close-btn" id="auth-close-btn">Close</button>
</div>
</div>
<!-- ══ APPS PAGE ══ -->
<div class="apps-page">
<h2>📦 Apps</h2>
<p class="apps-subtitle">360-integrated tools and services.</p>
<div class="apps-section-label">360 Suite</div>
<div class="apps-grid">
<a class="app-card" href="apps/360vids">
<span class="app-badge">New!</span>
<div class="app-icon" data-raw-emoji>🎬</div>
<div class="app-title">360Vids</div>
<div class="app-desc">Watch and upload content!</div>
</a>
<!-- Music — links to 360Music -->
<a class="app-card" href="apps/360Music">
<span class="app-badge">Popular!</span>
<div class="app-icon" data-raw-emoji>🎶</div>
<div class="app-title">360Music</div>
<div class="app-desc">Listen and upload music!</div>
</a>
<!-- Zone — links to 360zone -->
<a class="app-card" href="apps/360zone">
<span class="app-badge">Tools</span>
<div class="app-icon" data-raw-emoji>🏫</div>
<div class="app-title">Zone</div>
<div class="app-desc">Work faster and smarter in the Zone.</div>
</a>
<a class="app-card" href="apps/360Notes">
<span class="app-badge">New!</span>
<div class="app-icon" data-raw-emoji>📖</div>
<div class="app-title">360Notes</div>
<div class="app-desc">Smarter notekeeping.</div>
</a>
<a class="app-card" href="apps/360Draw">
<span class="app-badge">New!</span>
<div class="app-icon" data-raw-emoji>🎨</div>
<div class="app-title">360Draw</div>
<div class="app-desc">Draw and share.</div>
</a>
<a class="app-card" href="apps/360Docs">
<span class="app-badge">New!</span>
<div class="app-icon" data-raw-emoji>📃</div>
<div class="app-title">360Docs</div>
<div class="app-desc">Write your heart out... or write in HTML....</div>
</a>
<a class="app-card" href="apps/360Do">
<span class="app-badge">New!</span>
<div class="app-icon" data-raw-emoji>💡</div>
<div class="app-title">360Do</div>
<div class="app-desc">If your memory is bad... try 360 memory!</div>
</a>
<a class="app-card" href="apps/360mail-claim">
<span class="app-badge">New!</span>
<div class="app-icon" data-raw-emoji>✉️</div>
<div class="app-title">360Mail</div>
<div class="app-desc">Your private, 360-powered email inbox.</div>
</a>

    
<a class="app-card" href="apps/Aurora">
<span class="app-badge">New!</span>
<div class="app-icon"><img src="/assets/images/aurora-nobackground.png" alt="Aurora logo"/></div>
<div class="app-title">Aurora</div>
<div class="app-desc">"[we] will *debate* the internet and it will be peak"</div>
</a>

     <a class="app-card" href="apps/degreeSNS">
<span class="app-badge">New!</span>
<div class="app-icon"><img src="/assets/images/degreesns-nobackground.png" alt="degreeSNS logo"/></div>
<div class="app-title">degreeSNS</div>
<div class="app-desc">Reminiscing when the internet was great - now experience it.</div>
</a>
    
<a class="app-card" href="apps/360Studio">
<span class="app-badge">New!</span>
<div class="app-icon" data-raw-emoji>🎛️</div>
<div class="app-title">360Studio</div>
<div class="app-desc">Manage all your content in one place.</div>
</a>
<a class="app-card" href="apps/360MySite">
<span class="app-badge">New!</span>
<div class="app-icon" data-raw-emoji>🌐</div>
<div class="app-title">360MySite</div>
<div class="app-desc">Get your webpages and content on 360 with proper insights.</div>
</a>
<a class="app-card" href="apps/360Canvas">
<span class="app-badge">New!</span>
<div class="app-icon" data-raw-emoji>🚀</div>
<div class="app-title">360Canvas</div>
<div class="app-desc">Deploy and create webpages on 360.</div>
</a>
<a class="app-card" href="apps/360Meet">
<span class="app-badge">New!</span>
<div class="app-icon" data-raw-emoji>👥</div>
<div class="app-title">360Meet</div>
<div class="app-desc">Talk and see groups or single users.</div>
</a>
<a class="app-card" href="apps/360Maps">
<span class="app-badge">New!</span>
<div class="app-icon" data-raw-emoji>🗺️</div>
<div class="app-title">360Maps</div>
<div class="app-desc">Get efficient directions with 360Maps.</div>
</a>
<a class="app-card" href="vpn/360vpn">
<span class="app-badge">Re-released!</span>
<div class="app-icon" data-raw-emoji>🛜</div>
<div class="app-title">360VPN</div>
<div class="app-desc">Simple VPN client and proxy dedicated to not sharing data.</div>
</a>
<a class="app-card" href="apps/Pomodoro">
<span class="app-badge">New!</span>
<div class="app-icon" data-raw-emoji>🕥</div>
<div class="app-title">Pomodoro</div>
<div class="app-desc">Focus timer (soon to integrate with Notes and Stack!)</div>
</a>

    
<a class="app-card" href="apps/WebCell">
<span class="app-badge">New!</span>
<div class="app-icon" data-raw-emoji>📞</div>
<div class="app-title">WebCell</div>
<div class="app-desc">Browser-to-browser calls. No phone number needed.</div>
</a>

   
    
<a class="app-card" href="apps/Stack">
<span class="app-badge">New!</span>
<div class="app-icon" data-raw-emoji>✅</div>
<div class="app-title">Stack</div>
<div class="app-desc">Lists and tasks, synced across devices.</div>
</a>
</div>
<div class="apps-section-label">Coming Soon</div>
<div class="apps-grid">

<div class="app-card" style="opacity:.5;pointer-events:none;">
<div class="app-icon" data-raw-emoji>📅</div>
<div class="app-title">360Calendar</div>
<div class="app-desc">Smart scheduling inside 360.</div>
</div>

   <div class="app-card" style="opacity:.5;pointer-events:none;">
<div class="app-icon" data-raw-emoji>📶</div>
<div class="app-title">360Proxy</div>
<div class="app-desc">Alternative and simpler way to proxy network traffic through Cloudflare!</div>
</div> 
    
<div class="app-card" style="opacity:.5;pointer-events:none;">
<div class="app-icon" data-raw-emoji>📁</div>
<div class="app-title">360Drive</div>
<div class="app-desc">Secure cloud storage for your files.</div>
</div>
<!--
        <div class="app-card" style="opacity:.5;pointer-events:none;">
        <div class="app-icon" data-raw-emoji>🕥</div> Did you know I (Zaki) used the 10:30 emoji because 360 was made Jan 5 at exactly 10:30 sharp??
        <div class="app-title">Pomodoro</div>
        <div class="app-desc">Focus timer (soon to integrate with Notes and Stack!)</div>
      </div>
-->

<div class="app-card" style="opacity:.5;pointer-events:none;">
<div class="app-icon" data-raw-emoji>💬</div>
<div class="app-title">Current</div>
<div class="app-desc">Create group chats, chats and call contacts with WebCell.</div>
</div>
</div>
</div>
<script>
    (function () {
      const cards = document.querySelectorAll('.app-card');
      cards.forEach((card) => {
        card.addEventListener('click', (event) => {
          const ripple = document.createElement('span');
          ripple.className = 'card-ripple';

          const rect = card.getBoundingClientRect();
          const size = Math.max(rect.width, rect.height);
          ripple.style.width = ripple.style.height = `${size}px`;
          ripple.style.left = `${event.clientX - rect.left - size / 2}px`;
          ripple.style.top = `${event.clientY - rect.top - size / 2}px`;

          const oldRipple = card.querySelector('.card-ripple');
          if (oldRipple) oldRipple.remove();

          card.appendChild(ripple);
          ripple.addEventListener('animationend', () => ripple.remove(), { once: true });
        });
      });
    })();
  </script>
<audio id="clickSound" preload="auto" src="click-sound.mp3"></audio>
<script src="/assets/js/octicons.js"></script>
<script src="/assets/js/main.js"></script>
<script src="/assets/js/auth-fix.js"></script>
<script src="/assets/js/wide.js"></script>
<script src="/assets/js/gallium.js"></script>
<script src="/assets/js/cookie.js"></script>
<script src="/assets/js/cursor.js"></script>
<script src="/assets/js/mobile-nav.js" defer></script>
</body>
</html>