API tools faq
paste
eggStudioz_YT

socialMedia site

eggStudioz_YT
Jun 2nd, 2025 (edited)
136
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.51 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8" />
  5.   <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.   <title>ViralMedia – Social Media Hub</title>
  7.   <style>
  8.     :root {
  9.       --gradient: linear-gradient(135deg, #f59e0b, #f97316, #ec4899);
  10.       --bg: #fff7ed;
  11.       --card: #fff0e5;
  12.       --text: #4b1c06;
  13.     }
  14.  
  15.     body {
  16.       margin: 0;
  17.       padding: 0;
  18.       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  19.       background: var(--bg);
  20.       color: var(--text);
  21.       display: flex;
  22.       flex-direction: column;
  23.       align-items: center;
  24.       min-height: 100vh;
  25.       padding: 40px 20px;
  26.       position: relative;
  27.     }
  28.  
  29.     #logo {
  30.       font-size: 36px;
  31.       font-weight: bold;
  32.       background: var(--gradient);
  33.       -webkit-background-clip: text;
  34.       -webkit-text-fill-color: transparent;
  35.       margin-bottom: 10px;
  36.     }
  37.  
  38.     h1 {
  39.       margin: 10px 0;
  40.       font-size: 24px;
  41.     }
  42.  
  43.     form {
  44.       background: var(--card);
  45.       border-radius: 20px;
  46.       padding: 30px 25px;
  47.       width: 100%;
  48.       max-width: 340px;
  49.       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  50.       margin-top: 20px;
  51.       display: flex;
  52.       flex-direction: column;
  53.       gap: 12px;
  54.     }
  55.  
  56.     input, textarea {
  57.       padding: 12px;
  58.       border: none;
  59.       border-radius: 12px;
  60.       font-size: 15px;
  61.       background: #fff;
  62.       color: #333;
  63.       box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
  64.       resize: vertical;
  65.     }
  66.  
  67.     button {
  68.       padding: 12px;
  69.       border: none;
  70.       border-radius: 30px;
  71.       font-size: 15px;
  72.       font-weight: bold;
  73.       color: white;
  74.       background: var(--gradient);
  75.       cursor: pointer;
  76.       transition: all 0.3s ease;
  77.     }
  78.  
  79.     button:hover {
  80.       opacity: 0.9;
  81.     }
  82.  
  83.     .hidden {
  84.       display: none;
  85.     }
  86.  
  87.     #showForgotBtn {
  88.       background: none;
  89.       color: #d97706;
  90.       border: none;
  91.       text-decoration: underline;
  92.       font-size: 14px;
  93.       margin-top: 10px;
  94.       cursor: pointer;
  95.       max-width: 340px;
  96.     }
  97.  
  98.     .tagline {
  99.       font-size: 14px;
  100.       margin-bottom: 20px;
  101.       color: #6b3704;
  102.       user-select: none;
  103.     }
  104.  
  105.     /* Tabs */
  106.     #homePage {
  107.       width: 100%;
  108.       max-width: 600px;
  109.       margin-top: 40px;
  110.     }
  111.  
  112.     .tabs {
  113.       display: flex;
  114.       justify-content: space-around;
  115.       background: var(--gradient);
  116.       border-radius: 30px;
  117.       padding: 12px;
  118.       margin-bottom: 20px;
  119.       color: white;
  120.       font-weight: bold;
  121.       user-select: none;
  122.     }
  123.  
  124.     .tab-button {
  125.       cursor: pointer;
  126.       padding: 8px 16px;
  127.       border-radius: 20px;
  128.       transition: background 0.2s ease;
  129.     }
  130.  
  131.     .tab-button.active {
  132.       background-color: rgba(255,255,255,0.2);
  133.     }
  134.  
  135.     .tab-content {
  136.       background: var(--card);
  137.       border-radius: 20px;
  138.       padding: 20px;
  139.       box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  140.     }
  141.  
  142.     /* Profile */
  143.     #profileTab img {
  144.       border-radius: 50%;
  145.       width: 100px;
  146.       height: 100px;
  147.       object-fit: cover;
  148.     }
  149.  
  150.     #profileTab h3 {
  151.       margin: 0;
  152.     }
  153.  
  154.     #profileTab small {
  155.       color: #6b3704;
  156.     }
  157.  
  158.     /* Watermark */
  159.     #watermark {
  160.       position: fixed;
  161.       bottom: 8px;
  162.       left: 50%;
  163.       transform: translateX(-50%);
  164.       font-size: 14px;
  165.       color: rgba(108, 48, 4, 0.3);
  166.       pointer-events: none;
  167.       user-select: none;
  168.       font-weight: 600;
  169.       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  170.       letter-spacing: 1.2px;
  171.       z-index: 1000;
  172.     }
  173.   </style>
  174. </head>
  175. <body>
  176.  
  177.   <div id="logo">ViralMedia</div>
  178.   <div class="tagline">Create, Connect, and Go Viral 🚀</div>
  179.  
  180.   <h1>Signup</h1>
  181.   <form id="signupForm">
  182.     <input type="email" id="signupEmail" placeholder="Email" required />
  183.     <input type="text" id="signupUsername" placeholder="Username" required />
  184.     <input type="password" id="signupPassword" placeholder="Password" required />
  185.     <button type="submit">Create Account</button>
  186.   </form>
  187.  
  188.   <h1 class="hidden" id="loginHeader">Login</h1>
  189.   <form id="loginForm" class="hidden">
  190.     <input type="text" id="loginIdentifier" placeholder="Email or Username" required />
  191.     <input type="password" id="loginPassword" placeholder="Password" required />
  192.     <button type="submit">Login</button>
  193.   </form>
  194.  
  195.   <h1 class="hidden" id="forgotHeader">Forgot Password</h1>
  196.   <form id="forgotForm" class="hidden">
  197.     <input type="email" id="forgotEmail" placeholder="Enter your email" required />
  198.     <button type="submit">Send Reset Link</button>
  199.   </form>
  200.  
  201.   <button id="showForgotBtn" class="hidden">Forgot Password?</button>
  202.  
  203.   <!-- HOME PAGE -->
  204.   <div id="homePage" class="hidden">
  205.     <div class="tabs">
  206.       <div class="tab-button active" data-tab="online">Online Media</div>
  207.       <div class="tab-button" data-tab="offline">Offline Media</div>
  208.       <div class="tab-button" data-tab="profile">Profile</div>
  209.     </div>
  210.  
  211.     <div class="tab-content" id="onlineTab">
  212.       <h2>📺 Online Media</h2>
  213.       <p>Watch or upload videos, stream content, and go viral!</p>
  214.       <button id="uploadMediaBtn" style="
  215.        margin-top: 15px;
  216.        padding: 12px;
  217.        background: #ec4899;
  218.        color: white;
  219.        border: none;
  220.        border-radius: 20px;
  221.        font-weight: bold;
  222.        cursor: pointer;
  223.        width: 100%;
  224.        max-width: 200px;
  225.      ">Upload New Media</button>
  226.     </div>
  227.  
  228.     <div class="tab-content hidden" id="offlineTab">
  229.       <h2>📁 Offline Media</h2>
  230.       <p>Manage your saved files, drafts, and media library.</p>
  231.       <p style="margin-top: 20px; font-style: italic;">No offline media yet. Upload videos or files to see them here.</p>
  232.     </div>
  233.  
  234.     <div class="tab-content hidden" id="profileTab">
  235.       <div style="display:flex; align-items:center; gap: 15px; margin-bottom: 15px;">
  236.         <img id="profileAvatarImg" src="https://via.placeholder.com/100?text=Avatar" alt="Avatar"/>
  237.         <div>
  238.           <h3 id="profileUsername">Your Username</h3>
  239.           <small id="profileEmail">Your Email</small>
  240.         </div>
  241.       </div>
  242.       <form id="profileForm" style="display:flex; flex-direction: column; gap: 10px;">
  243.         <label for="profileBio">Bio:</label>
  244.         <textarea id="profileBio" rows="3" placeholder="Write something about yourself..."></textarea>
  245.         <label for="avatarUpload">Upload Avatar:</label>
  246.         <input type="file" id="avatarUpload" accept="image/*" />
  247.         <button type="submit">Save Profile</button>
  248.       </form>
  249.     </div>
  250.   </div>
  251.  
  252.   <div id="watermark">@eggStudioz</div>
  253.  
  254.   <script>
  255.     // Stored user data
  256.     let savedEmail = "";
  257.     let savedUsername = "";
  258.     let savedPassword = "";
  259.     let savedProfile = { bio: '', avatar: '' };
  260.  
  261.     // DOM elements
  262.     const signupForm = document.getElementById('signupForm');
  263.     const loginForm = document.getElementById('loginForm');
  264.     const forgotForm = document.getElementById('forgotForm');
  265.     const showForgotBtn = document.getElementById('showForgotBtn');
  266.     const loginHeader = document.getElementById('loginHeader');
  267.     const forgotHeader = document.getElementById('forgotHeader');
  268.     const homePage = document.getElementById('homePage');
  269.     const tabButtons = document.querySelectorAll('.tab-button');
  270.     const tabs = {
  271.       online: document.getElementById('onlineTab'),
  272.       offline: document.getElementById('offlineTab'),
  273.       profile: document.getElementById('profileTab')
  274.     };
  275.     const profileUsernameElem = document.getElementById('profileUsername');
  276.     const profileEmailElem = document.getElementById('profileEmail');
  277.     const profileBioElem = document.getElementById('profileBio');
  278.     const profileAvatarImg = document.getElementById('profileAvatarImg');
  279.     const avatarUpload = document.getElementById('avatarUpload');
  280.     const profileForm = document.getElementById('profileForm');
  281.     const uploadMediaBtn = document.getElementById('uploadMediaBtn');
  282.  
  283.     // Load stored user from localStorage
  284.     const storedUser = JSON.parse(localStorage.getItem('viralmedia_user'));
  285.     if (storedUser) {
  286.       savedEmail = storedUser.email;
  287.       savedUsername = storedUser.username;
  288.       savedPassword = storedUser.password;
  289.       savedProfile = storedUser.profile || { bio: '', avatar: '' };
  290.  
  291.       signupForm.classList.add('hidden');
  292.       loginForm.classList.remove('hidden');
  293.       loginHeader.classList.remove('hidden');
  294.       showForgotBtn.classList.remove('hidden');
  295.     }
  296.  
  297.     function saveUserData() {
  298.       localStorage.setItem('viralmedia_user', JSON.stringify({
  299.         email: savedEmail,
  300.         username: savedUsername,
  301.         password: savedPassword,
  302.         profile: savedProfile
  303.       }));
  304.     }
  305.  
  306.     function updateProfileUI() {
  307.       profileUsernameElem.textContent = savedUsername || "Your Username";
  308.       profileEmailElem.textContent = savedEmail || "Your Email";
  309.       profileBioElem.value = savedProfile.bio || '';
  310.       if (savedProfile.avatar) {
  311.         profileAvatarImg.src = savedProfile.avatar;
  312.       } else {
  313.         profileAvatarImg.src = 'https://via.placeholder.com/100?text=Avatar';
  314.       }
  315.     }
  316.  
  317.     // Signup
  318.     signupForm.addEventListener('submit', e => {
  319.       e.preventDefault();
  320.       savedEmail = document.getElementById('signupEmail').value.trim().toLowerCase();
  321.       savedUsername = document.getElementById('signupUsername').value.trim();
  322.       savedPassword = document.getElementById('signupPassword').value;
  323.  
  324.       saveUserData();
  325.  
  326.       alert('Signup successful! You can now login.');
  327.  
  328.       signupForm.classList.add('hidden');
  329.       loginForm.classList.remove('hidden');
  330.       loginHeader.classList.remove('hidden');
  331.       showForgotBtn.classList.remove('hidden');
  332.     });
  333.  
  334.     // Login
  335.     loginForm.addEventListener('submit', e => {
  336.       e.preventDefault();
  337.       const identifier = document.getElementById('loginIdentifier').value.trim().toLowerCase();
  338.       const pass = document.getElementById('loginPassword').value;
  339.  
  340.       if ((identifier === savedEmail || identifier === savedUsername.toLowerCase()) && pass === savedPassword) {
  341.        loginForm.classList.add('hidden');
  342.         loginHeader.classList.add('hidden');
  343.         showForgotBtn.classList.add('hidden');
  344.         homePage.classList.remove('hidden');
  345.         updateProfileUI();
  346.       } else {
  347.         alert('Invalid credentials');
  348.       }
  349.     });
  350.  
  351.     // Forgot Password
  352.     showForgotBtn.addEventListener('click', () => {
  353.       loginForm.classList.add('hidden');
  354.       loginHeader.classList.add('hidden');
  355.       showForgotBtn.classList.add('hidden');
  356.  
  357.       forgotForm.classList.remove('hidden');
  358.       forgotHeader.classList.remove('hidden');
  359.     });
  360.  
  361.     forgotForm.addEventListener('submit', e => {
  362.       e.preventDefault();
  363.       const email = document.getElementById('forgotEmail').value.trim().toLowerCase();
  364.       if (email === savedEmail) {
  365.         alert('Check your email!');
  366.       } else {
  367.         alert('Email not found!');
  368.       }
  369.       forgotForm.classList.add('hidden');
  370.       forgotHeader.classList.add('hidden');
  371.       loginForm.classList.remove('hidden');
  372.       loginHeader.classList.remove('hidden');
  373.       showForgotBtn.classList.remove('hidden');
  374.     });
  375.  
  376.     // Tabs logic
  377.     tabButtons.forEach(btn => {
  378.       btn.addEventListener('click', () => {
  379.         tabButtons.forEach(b => b.classList.remove('active'));
  380.         btn.classList.add('active');
  381.         const target = btn.getAttribute('data-tab');
  382.         for (const key in tabs) {
  383.           if (key === target) {
  384.             tabs[key].classList.remove('hidden');
  385.           } else {
  386.             tabs[key].classList.add('hidden');
  387.           }
  388.         }
  389.       });
  390.     });
  391.  
  392.     // Profile form submit (bio update)
  393.     profileForm.addEventListener('submit', e => {
  394.       e.preventDefault();
  395.       savedProfile.bio = profileBioElem.value.trim();
  396.       alert('Profile saved!');
  397.       saveUserData();
  398.     });
  399.  
  400.     // Avatar upload handling
  401.     avatarUpload.addEventListener('change', () => {
  402.       const file = avatarUpload.files[0];
  403.       if (file) {
  404.         const reader = new FileReader();
  405.         reader.onload = e => {
  406.           savedProfile.avatar = e.target.result;
  407.           updateProfileUI();
  408.           saveUserData();
  409.         };
  410.         reader.readAsDataURL(file);
  411.       }
  412.     });
  413.  
  414.     // Upload media placeholder
  415.     uploadMediaBtn.addEventListener('click', () => {
  416.       alert('Media upload coming soon!');
  417.     });
  418.   </script>
  419. </body>
  420. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!