<div class="header">Watch Together</div>
<img class="mobile-menu-icon left" src="/images/hamburger-icon.svg">
<img class="mobile-menu-icon right" src="/images/watchrooms-icon.svg">
<div class="torso">
<div class="left-sidebar">
<div class="sidebar-item selected" id="library">Library</div>
<div class="sidebar-item" id="account">Account</div>
<div class="sidebar-item" id="settings">Settings</div>
<div class="sidebar-item" id="registration">Register a Friend</div>
<div class="sidebar-item" id="logout">Logout</div>
</div>
<div class="content" id="library_content">
<div class="file-upload-wrapper">
<div class="field-header file-upload-header">
Upload Videos<span class="server-storage-info">Server Storage Remaining: <span id="server-storage"></span></span>
</div>
<div class="file-upload-controls">
<label for="file-upload" class="custom-file-upload">Select Files</label>
<input type="file" id="file-upload" name="video" multiple>
<span class="file-upload-total"></span>
<div class="queued-files queued-files-empty">No Files Selected</div>
<button class="upload-button">Upload</button>
</div>
</div>
<div class="field-header">My Videos</div>
<div class="library"></div>
</div>
<div class="content" style="display: none;" id="account_content">
<div class="field-header">Change Username</div>
<div class="account-field-group">
<div class="field-wrapper">
<input type="text" id="display_name" />
</div>
<button class="account-button" id="save_display_name">Save</button>
</div>
<div class="field-header">Change Password</div>
<div class="account-field-group">
<div class="field-wrapper">
<label>Current Password:</label>
<input type="password" id="current_password" />
</div>
<div class="field-wrapper">
<label>New Password:</label>
<input type="password" id="new_password" />
<progress class="password-strength-meter" max="4" value="0"></progress>
<div class="password-strength-message"></div>
</div>
<div class="field-wrapper">
<label>Confirm Password:</label>
<input type="password" id="confirm_password" />
</div>
<button class="account-button" id="save_new_password">Save</button>
</div>
<div class="field-header">Delete Account</div>
<div class="account-field-group">
<div class="field-wrapper">
I understand that deleting my account will result in:
<div style="margin-left: 20px;">
<li>The removal of all my videos from the server</li>
<li>The removal of all my user data from the server</li>
<li>The inability to register for a new account without a referral link from an existing Watch Together user</li>
</div>
<button class="scary" id="request_account_deletion">Request Account Deletion Code</button>
<div id="deletion_code_wrapper" style="display: none;">
<div class="align-with-buttons">
<label>Deletion Code:</label>
<input type="text" id="deletion_code" />
<label>Current Password:</label>
<input type="password" id="deletion_current_password" />
</div>
<button class="scary" id="submit_account_deletion">Confirm Account Deletion</button>
</div>
</div>
</div>
</div>
<div class="content" style="display: none;" id="settings_content">
<div class="field-header">Logs</div>
<div class="account-field-group">
<div class="field-wrapper">
<div id="logs_enabled_message">
Logs Enabled - Size: <span id="logs_size"></span>
</div>
If you are having issues, please do the following:
<div style="margin-left: 20px;">
<div id="logs_disabled_message">
<li>Click "Enable Logs"</li>
<li>Repeat the steps that caused the problem</li>
</div>
<li>Click "Export Logs"</li>
</div>
<button id="toggle_logs"></button>
<button id="export_logs">Export Logs</button>
</div>
</div>
<div class="field-header">Ads</div>
<div class="account-field-group">
<div class="field-wrapper">
If you want to support Watch Together you can opt in to unobtrusive ads.
By opting in, you agree to Google's <a href="https://policies.google.com/technologies/ads">Advertising Policy</a><br>
<button id="toggle_ads"></button>
</div>
</div>
</div>
<div class="content" style="display: none;" id="registration_content">
<div style="text-align: center;">
<div class="field-header">
Click the button below to generate a registration link.<br>
Links expire after one day and are only valid for a single use.<br>
If you want to register multiple people,<br>
you must generate a new link for each user.
</div>
<div>
<span id="registration-link"></span>
</div>
<button id="generate_registration_link">Generate Link</button>
<button id="registration-link-copy" style="display: none;">Copy</button>
</div>
</div>
</div>
<div class="footer">
<div class="copyright-text">© {{current_year}} Seva Luchianov</div>
<div class="footer-element">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_donations" />
<input type="hidden" name="business" value="PRF85CF6VZ592" />
<input type="hidden" name="item_name" value="Support Watch Together" />
<input type="hidden" name="currency_code" value="USD" />
<input type="image" class="donate-button" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
</form>
</div>
<div class="footer-element">
<a href="https://discord.gg/8fHMSD4aZ4">
<img style="width: 120px;" src="/images/discord-link.png">
</a>
</div>
</div>
<div class="donate-info">
Watch Together will always be free, no exceptions.<br>
However, it costs $20/month to keep Watch Together online.<br>
If you love this service, please consider a donation <span style="color: #ff00ff;">♥</span>
</div>
<div class="right-sidebar">
<div class="watchrooms">
<div class="network-info">
<div class="network-info-item">Status: <span id="ws-status">Connecting...</span></div>
<div class="network-info-item">Latency: <span id="latency">0</span>ms</div>
<div class="network-info-item">Clock Drift: <span id="clock-drift">0</span>ms</div>
</div>
<div class="field-header sidebar">Active Watchrooms</div>
<div id="watchrooms"></div>
</div>
<div class="messages">
<div class="field-header sidebar">Announcements</div>
<div id="messages"></div>
</div>
</div>
<script src="/js/home.js"></script>