sachin/video-upload-instructions.html at main · algsoch/sachin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Upload Instructions - Sachin's Portfolio</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 20px;
            min-height: 100vh;
            color: white;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 40px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        h1 { color: #fff; text-align: center; margin-bottom: 30px; }
        .step {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            margin: 20px 0;
            border-radius: 15px;
            border-left: 4px solid #7b2ff2;
        }
        .step h3 { color: #fff; margin-top: 0; }
        .code {
            background: rgba(0, 0, 0, 0.3);
            padding: 15px;
            border-radius: 10px;
            font-family: 'Courier New', monospace;
            margin: 10px 0;
            border: 1px solid rgba(123, 47, 242, 0.3);
        }
        .success { border-left-color: #2ed573; }
        .warning { border-left-color: #ffa502; }
        .info { border-left-color: #3742fa; }
        .center { text-align: center; }
        .button {
            display: inline-block;
            background: linear-gradient(135deg, #7b2ff2, #ff6b6b);
            color: white;
            padding: 15px 30px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bold;
            margin: 10px;
            transition: transform 0.3s ease;
        }
        .button:hover { transform: scale(1.05); }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎬 Video Portfolio Deployment Complete!</h1>

        <div class="step success">
            <h3>✅ Website Successfully Deployed</h3>
            <p>Your video portfolio is now live on Azure Static Web Apps!</p>
            <p><strong>Website URL:</strong> <a href="https://lively-sand-04980360f.1.azurestaticapps.net" target="_blank">https://lively-sand-04980360f.1.azurestaticapps.net</a></p>
        </div>

        <div class="step warning">
            <h3>📹 Videos Need to be Uploaded</h3>
            <p>The website is deployed but videos show placeholders because they need to be uploaded to Azure Storage.</p>
        </div>

        <div class="step info">
            <h3>🚀 How to Upload Your Videos</h3>
            <p><strong>Step 1:</strong> Create an "assets" folder in your project and add your video files:</p>
            <div class="code">
mkdir assets
# Copy your video files to the assets folder:
# - trading (1).mp4, trading (2).mp4, etc.
# - motion graphic (1).mp4, motion graphic (2).mp4, etc.
# - educational.mp4, educational (2).mp4
# - sub vdo.mp4
            </div>

            <p><strong>Step 2:</strong> Run the upload script:</p>
            <div class="code">
.\upload-videos-complete.ps1
            </div>

            <p><strong>Step 3:</strong> Redeploy to update the website:</p>
            <div class="code">
azd deploy
            </div>
        </div>

        <div class="step success">
            <h3>💡 What You Get</h3>
            <ul>
                <li><strong>No file size limits</strong> - Upload videos up to 147MB+</li>
                <li><strong>Global CDN</strong> - Fast loading worldwide</li>
                <li><strong>Professional hosting</strong> - Azure enterprise infrastructure</li>
                <li><strong>Custom domain support</strong> - Use your own domain</li>
                <li><strong>Automatic HTTPS</strong> - Secure by default</li>
                <li><strong>Cost effective</strong> - ~$5/month for professional hosting</li>
            </ul>
        </div>

        <div class="center">
            <a href="https://lively-sand-04980360f.1.azurestaticapps.net" class="button" target="_blank">
                🌐 View Live Website
            </a>
            <a href="#" class="button" onclick="copyScript()">
                📋 Copy Upload Command
            </a>
        </div>

        <div class="step info">
            <h3>🔧 Current Website Status</h3>
            <p>✅ Website structure: Complete</p>
            <p>✅ Interactive features: Working</p>
            <p>✅ Responsive design: Active</p>
            <p>✅ Azure infrastructure: Deployed</p>
            <p>⏳ Video content: Pending upload</p>
        </div>
    </div>

    <script>
        function copyScript() {
            navigator.clipboard.writeText('.\\upload-videos-complete.ps1').then(() => {
                alert('Upload command copied to clipboard!');
            });
        }
    </script>
</body>
</html>